ASDoc

mx.containers
TabNavigator クラス

TabNavigator クラス
mx.containers.ViewStack の拡張

TabNavigator コンテナは、子コンテナ間を移動するために TabBar コンテナを取り込むことで、ViewStack コンテナを拡張します。

ViewStack コンテナと同様に、TabNavigator コンテナには子コンテナのコレクションが含まれます。一度に表示される子は 1 つのみです。TabNavigator コンテナの上部には TabBar コンテナが自動的に作成され、これにより各子コンテナに 1 つのタブが対応します。各タブには固有のラベルとアイコンを割り当てることができます。ユーザーがタブをクリックすると、対応する子コンテナが、TabNavigator コンテナの選択された子として表示されます。

MXML シンタックス

<mx:TabNavigator> タグは、<mx:ViewStack> タグのプロパティ、スタイル、およびイベントを継承し、次を追加します。

 <mx:TabNavigator
   horizontalAlign="value"
   horizontalGap="value"
   tabHeight="value"
   tabWidth="value"
   >
     ...
     子タグ
     ...
 </mx:TabNavigator>

例を参照するにはここをクリックしてください

関連項目
ViewStack
TabBar

メソッド
	`createTab( classRef, instanceName:String, label:String, icon:String) : MovieClip`新しい子コンテナとこれに対応するタブを作成します。
	`layoutChildren( ) : Void`サイズ変更に反応して、このコンテナのタブおよび子の位置とサイズを設定します。
	`measure( ) : Void`この TabNavigator の推奨、最小、および最大サイズを計算します。

mx.containers.ViewStack クラスから継承されるメソッド

layoutChildren measure

mx.containers.Container クラスから継承されるメソッド

createChildren draw executeChildBindings getViewMetrics getViewMetricsAndMargins init

mx.core.View クラスから継承されるメソッド

childLoaded   constructObject2   createChild   createChildren   destroyAllChildren   destroyChild   destroyChildAt   draw   getBorderMetrics   getChildAt   getChildIndex   getViewMetrics   init   layoutChildren   layoutChrome   setChildIndex

mx.core.UIComponent クラスから継承されるメソッド

drawFocus getFocus getFocusManager setEnabled setFocus

プロパティ
	`activeTabStyleDeclaration:String`アクティブなタブのテキストのスタイル宣言です。

mx.containers.ViewStack クラスから継承されるプロパティ

historyManagement resizeToContent selectedChild selectedIndex version

mx.containers.Container クラスから継承されるプロパティ

autoLayout   childDescriptors   className   clipContent   creationIndex   creationPolicy   defaultButton   hLineScrollSize   hPageScrollSize   hPosition   hScrollPolicy   icon   label   maxHPosition   maxVPosition   numRepeaters   version   vLineScrollSize   vPageScrollSize   vPosition   vScrollPolicy

mx.core.View クラスから継承されるプロパティ

baselinePosition className numChildren version

mx.core.UIComponent クラスから継承されるプロパティ

enabled errorString tabEnabled tabIndex version

エフェクト

mx.containers.ViewStack クラスから継承されるエフェクト

changeEffect

mx.core.UIComponent クラスから継承されるエフェクト

focusInEffect focusOutEffect

mx.core.UIObject クラスから継承されるエフェクト

creationCompleteEffect   hideEffect   mouseDownEffect   mouseOutEffect   mouseOverEffect   mouseUpEffect   moveEffect   resizeEffect   showEffect

イベント

mx.containers.ViewStack クラスから継承されるイベント

change

mx.containers.Container クラスから継承されるイベント

childrenCreated scroll

mx.core.View クラスから継承されるイベント

childCreated childDestroyed childIndexChanged

mx.core.UIComponent クラスから継承されるイベント

focusIn focusOut invalid keyDown keyUp valid valueCommitted

mx.core.UIObject クラスから継承されるイベント

creationComplete  dragComplete  dragDrop  dragEnter  dragExit  dragOver  draw  effectEnd  effectStart  hide  hideToolTip  initialize  load  mouseChangeSomewhere  mouseDown  mouseDownSomewhere  mouseMove  mouseMoveSomewhere  mouseOut  mouseOver  mouseUp  mouseUpSomewhere  move  resize  show  showToolTip  unload

スタイル
`horizontalAlign`	`CSS の継承 : なし`この TabNavigator コンテナ上部にあるタブの水平位置を表します。有効な値は、`left`、`center`、および `right` です。デフォルト値は `left` です。値が `left` の場合、最初のタブの左端が TabNavigator コンテナの左端に揃えられます。値が `right` の場合、最後のタブの右端が TabNavigator コンテナの右端に揃えられます。値が `center` の場合、タブが TabNavigator コンテナ上部の中央に揃えられます。整列設定による違いが表示されるには、すべてのタブの幅の合計が TabNavigator コンテナの幅より小さい必要があります。
`horizontalGap`	`型 : Number 形式 : Length CSS の継承 : なし`ピクセル単位で表したタブ間の間隔です。デフォルト値は -1 です。この場合、隣接するタブの境界線が重なります。
`tabHeight`	`型 : Number 形式 : Length CSS の継承 : なし`ピクセル単位で表した各タブの高さです。デフォルト値は `undefined` です。このプロパティが `undefined` の場合、各タブの高さは、この TabNavigator コンテナに適用されるフォントスタイルによって決定されます。このプロパティを設定すると、この計算よりも設定値が優先されます。
`tabWidth`	`型 : Number 形式 : Length CSS の継承 : なし`ピクセル単位で表した各タブの幅です。デフォルト値は `undefined` です。このプロパティが `undefined` の場合、各タブの幅は、この TabNavigator コンテナに適用されるフォントスタイルを使用したラベルテキストの幅によって決定されます。タブの幅の合計が TabNavigator コンテナの幅より広い場合、計算されたタブ幅が縮小されます (最小 30 ピクセルまで)。このプロパティを設定すると、この計算よりも設定値が優先されます。タブのラベルテキストは、タブに収まらない場合切り詰められます。タブラベルが切り詰められた場合、タブの上にマウスを移動すると、ツールヒントにラベルテキスト全体が表示されます。

mx.containers.ViewStack クラスから継承されるスタイル

marginBottom marginTop

mx.core.UIObject クラスから継承されるスタイル

color   fontFamily   fontSize   fontStyle   fontWeight   horizontalGap   leading   marginLeft   marginRight   textAlign   textDecoration   textIndent   verticalGap

メソッドの詳細

createTab

createTab( classRef, instanceName:String, label:String, icon:String)
										
													 :  MovieClip

新しい子コンテナとこれに対応するタブを作成します。

パラメータ
    classRef - 新しい子コンテナのクラスへの参照 (mx.containers.Canvas など) です。クラス名は二重引用符で囲まないでください。正しくは、次のとおりです。<CODE>createTab(mx.containers.Canvas, "")</CODE>
    instanceName:String - 子のインスタンス名です。これは MXML ID とは異なります。通常、固有のインスタンス名が自動的に選択されるように、undefined ("") を渡します。インスタンス名を指定する場合は、任意の有効な識別子を使用できますが、この TabNavigator の子の中で一意である必要があります。
    label:String - 新規タブに表示されるテキストです。
    icon:String - 新規タブに表示されるアイコンのシンボル名です。

layoutChildren

layoutChildren( )
										
													 :  Void

サイズ変更に反応して、このコンテナのタブおよび子の位置とサイズを設定します。layoutChildren() メソッドの詳細については、UIObject.layoutChildren() メソッドを参照してください。

TabNavigator は、TabBar を最上部に設定します。TabBar の幅は TabNavigator の幅に設定され、TabBar の幅は tabHeight プロパティに基づいて設定されます。

TabNavigator コンテナは、ViewStack コンテナと同じロジックを使用して、子コンテナの位置とサイズを TabBar の下に設定します。

measure

measure( )
										
													 :  Void

この TabNavigator の推奨、最小、および最大サイズを計算します。measure() メソッドの詳細については、UIObject.measure() メソッドを参照してください。

TabNavigator コンテナは、次の 2 つの点を除き、ViewStack コンテナと同じロジックを使用します。まず、タブが収まるように _measuredPreferredHeight および _measuredMinHeight の値を増加させます。次に、各タブの幅が 30 ピクセル以上になるように、必要に応じて _measuredPreferredWidth プロパティの値を増加させます。

プロパティの詳細

activeTabStyleDeclaration

activeTabStyleDeclaration:String

アクティブなタブのテキストのスタイル宣言です。デフォルト値は、テキストを太字にする "activeTabStyle" です。

例

TabNavigatorExample.mxml

<?xml version="1.0"?>
<!-- TabNavigator レイアウトの使用方法を示す簡単な例 -->
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" width="100%" height="100%" backgroundColor="#FFFFFF">

<mx:Panel title="Tab Navigator Panel" width="100%" height="100%">

<mx:TabNavigator borderStyle="solid" width="100%" height="100%">

<mx:Canvas label="Canvas 1" width="100%" height="100%" backgroundColor="#FFFFCC">
<mx:Label text="Add components here" fontSize="20" fontStyle="italic"
fontWeight="bold" fontFamily="Times New Roman"/>

</mx:Canvas>

<mx:Canvas label="Canvas 2" width="100%" height="100%" backgroundColor="#99CCFF">
<mx:Label text="Add components here" fontSize="20" fontStyle="italic"
fontWeight="bold" fontFamily="Times New Roman"/>
</mx:Canvas>

</mx:TabNavigator>

</mx:Panel>

</mx:Application>

mx.containers TabNavigator クラス

createTab

layoutChildren

measure

activeTabStyleDeclaration

mx.containers
TabNavigator クラス