Flex 2 開発ガイド > Flex アプリケーションのユーザーインターフェイスの作成 > コントロールの使用 > LinkBar コントロール

LinkBar コントロール

LinkBar コントロールは、一連のリンク先を指定する LinkButton コントロールの水平または垂直方向の行を定義します。LinkBar コントロールは通常、ViewStack コンテナのアクティブな子コンテナを制御するため、またはリンクの単独のセットを作成するために使用します。

次は、一連のリンクが定義されている LinkBar コントロールの例です。


LinkBar コンテナ

LinkBar コントロールには次のデフォルトプロパティがあります。

プロパティ

デフォルト値

推奨サイズ

すべてのラベルテキストを設定された追加スペースおよびセパレータで表示できる幅と、最も高い子の高さです。

コントロールのサイズ変更規則

デフォルトでは、LinkBar コントロールのサイズは変更されません。親コンテナのサイズに合わせて LinkBar のサイズを変更する場合は、パーセント値でサイズを指定します。

パディング

top、bottom、left、および right の各プロパティは 2 ピクセルに設定されています。

サブトピック

LinkBar コントロールの作成 280

LinkBar コントロールの作成

LinkBar コントロールの最も一般的な使用方法の 1 つは、ViewStack コンテナでアクティブにする子の制御です。例については、ViewStack ナビゲータコンテナを参照してください。

LinkBar コントロールを単独で使用して、アプリケーションにリンクを作成することもできます。次の例では、ユーザー入力に応答する itemClick ハンドラを LinkBar コントロールに対して定義し、LinkBar の dataProvider プロパティを使用してそのラベルテキストを指定します。この例のコードを使用すると、前の図に示した LinkBar コントロールが作成されます。

<?xml version="1.0"?>
<!-- controls\bar\LBarSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:LinkBar borderStyle="solid"
        itemClick="navigateToURL(new URLRequest('http://www.adobe.com/' + 
            String(event.label).toLowerCase()), '_blank');">
        <mx:dataProvider>
            <mx:String>Flash</mx:String>
            <mx:String>Director</mx:String>
            <mx:String>Dreamweaver</mx:String>
            <mx:String>ColdFusion</mx:String>
        </mx:dataProvider>  
    </mx:LinkBar>
</mx:Application>

この例では、<mx:dataProvider> タグおよび <mx:Array> タグを使用してラベルテキストを定義します。itemClick ハンドラに渡されるイベントオブジェクトには、ユーザーが選択したラベルが含まれます。itemClick イベントのハンドラは、ラベルに基づいて Adobe の Web サイトへの HTTP 要求を生成し、そのページを新しいブラウザウィンドウに開きます。

次の例のように、<mx:dataProvider> タグにデータをバインドして、LinkBar コントロールを作成することもできます。 

<?xml version="1.0"?>
<!-- controls\bar\LBarBinding.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
        
            [Bindable]
            private var linkData:ArrayCollection = new ArrayCollection([
                "Flash", "Director", "Dreamweaver", "ColdFusion"
            ]);    
        ]]>
    </mx:Script>
    
    <mx:LinkBar 
        horizontalAlign="right" 
        borderStyle="solid" 
        itemClick="navigateToURL(new URLRequest('http://www.adobe.com/' + 
            String(event.label).toLowerCase()), '_blank');">
        <mx:dataProvider>
            {linkData}
        </mx:dataProvider>
    </mx:LinkBar>
</mx:Application>

この例では、LinkBar コントロール用のデータを ActionScript で変数として定義し、その変数を <mx:dataProvider> タグにバインドします。<mx:dataProvider> タグには、Flex のデータモデル、Web サービスの応答、または他のタイプのデータモデルからもバインドできます。

LinkBar コントロールは、その dataProvider プロパティの値に基づいて LinkButton コントロールを作成します。LinkBar は Container のサブクラスですが、Container.addChild()、Container.removeChild() などのメソッドを使用して LinkButton コントロールを追加または削除しないでください。代わりに、addItem()、removeItem() などのメソッドを使用して dataProvider プロパティを操作してください。LinkBar コントロールは、dataProvider プロパティへの変更に基づいて、自動的に必要な子を追加または削除します。

Flex 2.01