Flex的TabBar控件

简介

TabBar控件定义了卡片(tab)的水平或垂直的布局。

TabBar控件与TabNavigator控件类似，但是它没有任何子容器。例如，你使用TabNavigator容器的卡片来选择它可见得子容器。对于TabBar容器，你通过设置一个独立容器的课件内容来使那个容器的子元素在被选择的标签中可见或不可见。

 

创建一个TabBar控件

<mx:TabBar>
    <mx:dataProvider>
      <mx:String>Alabama</mx:String>
      <mx:String>Alaska</mx:String>
      <mx:String>Arkansas</mx:String>
    </mx:dataProvider>
  </mx:TabBar>

 

你也可以使用<mx:Object>标签来定义对象数组的成员，每个对象包含一个label属性和一个相关的data属性。

 

<mx:TabBar>
    <mx:dataProvider>
      <mx:Objectlabel="Alabama"data="Montgomery"/>
      <mx:Objectlabel="Alaska"data="Juneau"/>
      <mx:Objectlabel="Arkansas"data="Little Rock"/>
    </mx:dataProvider>
  </mx:TabBar>

label属性包含了状态的名称，data属性可以然你将一个数值与文本标签相关联。例如，label的文本可以某个颜色的名称，相关联的data属性的值则是该颜色的数字表现形式。

 

默认的，Flex使用label属性的值来定义卡片的文本。如果对象没有包含一个label属性，你可以使用TabBar控件的labelField属性来制定包含了卡片文本的属性名称。

 

<mx:TabBar labelField="state">
    <mx:dataProvider>
      <mx:Objectstate="Alabama"data="Montgomery"/>
      <mx:Objectstate="Alaska"data="Juneau"/>
      <mx:Objectstate="Arkansas"data="Little Rock"/>
    </mx:dataProvider>
  </mx:TabBar>

 

向TabBar控件传递数据

Flex可以让你从一个ActionScript变量定义或一个Flex数据模型向TabBar空间传递数据。当你使用一个变量时，你可以定义下列两种中的一种：

一个标签(String)

一对标签(String)和数据(标量值或对象)

<mx:Script>
  <![CDATA[
  import mx.collections.ArrayCollection;
  [Bindable]
    private var STATE_ARRAY:ArrayCollection = new ArrayCollection([
      {label:"Alabama", data:"Montgomery"},
      {label:"Alaska", data:"Juneau"},
      {label:"Arkansas", data:"LittleRock"}
    ]);
  ]]>
  </mx:Script>
  <mx:TabBar>
    <mx:dataProvider>
      {STATE_ARRAY}
    </mx:dataProvider>
  </mx:TabBar>

 

处理TabBar控件事件

TabBar控件定义了一个当用户选择一个卡片时将被传播的itemClick事件。event对象包含以下属性：

label 包含了被选择卡片文本的字符串

index 被选择卡片的索引值。需哦因是从0到卡片总数-1之间的数字，默认值是0，相当于第一个卡片。

 

<mx:Script>
  <![CDATA[
  import mx.events.ItemClickEvent;
  import mx.controls.TabBar;
  import mx.collections.ArrayCollection;
  [Bindable]
    private var STATE_ARRAY:ArrayCollection = new ArrayCollection([
      {label:"Alabama", data:"Montgomery"},
      {label:"Alaska", data:"Juneau"},
      {label:"Arkansas", data:"LittleRock"}
    ]);
    private function clickEvt(event:ItemClickEvent):void {
      forClick.text="label is: "+event.label+"\nindex is: "+event.index+" \ncapital is: "+STATE_ARRAY.getItemAt(event.index).data;
    }
  ]]>
  </mx:Script>
  <mx:TabBarid="myTB" itemClick="clickEvt(event);">
    <mx:dataProvider>
      {STATE_ARRAY}
    </mx:dataProvider>
  </mx:TabBar>
  <mx:TextAreaid="forClick"width="250"height="100"/>

 

 

 

 

http://flexria.blog.51cto.com/753638/153764/