Flex - TabBar

Giới thiệu

Lớp TabBar đại diện cho một tập hợp các tab giống nhau.

Khai báo lớp học

Sau đây là khai báo cho spark.components.TabBar lớp học -

public class TabBar
   extends ButtonBarBase
      implements IFocusManagerComponent

Phương thức công khai

Phương thức được kế thừa

Lớp này kế thừa các phương thức từ các lớp sau:

• spark.components.supportClasses.ButtonBarBase
• spark.components.ListBase
• spark.components.SkinnableDataContainer
• spark.components.supportClasses.SkinnableContainerBase
• spark.components.supportClasses.SkinnableComponent
• mx.core.UIComponent
• mx.core.FlexSprite
• flash.display.Sprite
• flash.display.DisplayObjectContainer
• flash.display.InteractiveObject
• flash.display.DisplayObject
• flash.events.EventDispatcher
• Object

Ví dụ về Flex TabBar

Chúng ta hãy làm theo các bước sau để kiểm tra việc sử dụng TabBar trong ứng dụng Flex bằng cách tạo một ứng dụng thử nghiệm -

Sau đây là nội dung của tệp mxml đã sửa đổi src/com.tutorialspoint/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
   xmlns:s = "library://ns.adobe.com/flex/spark"
   xmlns:mx = "library://ns.adobe.com/flex/mx
   width = "100%" height = "100%" minWidth = "500" minHeight = "500">  
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <s:BorderContainer width = "630" height = "480" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" 
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Layout Panels Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />
         
         <s:Panel id = "tabBarPanel" title = "Using TabBar" 
            width = "500" height = "300" >
            <s:layout>
               <s:VerticalLayout gap = "0" />	
            </s:layout>
            
            <s:TabBar id = "tabs" dataProvider = "{viewStack}" left = "5" top = "5" />
            <mx:ViewStack id = "viewStack" width = "95%" height = "85%" left = "5">
               <s:NavigatorContent label = "Tab #1"  width = "100%" height = "100%">
                  <s:BorderContainer width = "100%" height = "100%" >
                     <s:Label text = "Content area for Tab #1" 
                        verticalCenter = "0" horizontalCenter = "0" />
                  </s:BorderContainer>
               </s:NavigatorContent>
               
               <s:NavigatorContent label = "Tab #2"  width = "100%" height = "100%">
                  <s:BorderContainer width = "100%" height = "100%">
                     <s:Label text = "Content area for Tab #2" 
                        verticalCenter = "0" horizontalCenter = "0" />
                  </s:BorderContainer>
               </s:NavigatorContent>
            </mx:ViewStack>						
         </s:Panel>
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

Khi bạn đã sẵn sàng với tất cả các thay đổi được thực hiện, hãy để chúng tôi biên dịch và chạy ứng dụng ở chế độ bình thường như chúng tôi đã làm trong chương Flex - Create Application . Nếu mọi thứ đều ổn với ứng dụng của bạn, ứng dụng sẽ cho kết quả sau: [ Dùng thử trực tuyến ]