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

LinkButton コントロール

LinkButton コントロールは、オプションでアイコンをサポートする単一行のハイパーリンクを作成します。LinkButton コントロールを使用すると、Web ブラウザで特定の URL を開くことができます。

次の例は 3 つの LinkButton コントロールを示しています。

Link コントロール

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

プロパティ	デフォルト値
デフォルトサイズ	テキスト全体を表示できるだけの幅と高さです。
最小サイズ	0
最大サイズ	未定義

サブトピック

LinkButton コントロールの作成 307

LinkButton コントロールのユーザー操作 308

LinkButton コントロールの作成

LinkButton コントロールは、次のように、<mx:LinkButton> タグを使用して MXML 内で定義します。MXML の他の場所 (別のタグまたは ActionScript ブロック) のコンポーネントを参照する場合は、id 値を指定します。

<?xml version="1.0"?>
<!-- controls\button\LBSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:HBox>
        <mx:LinkButton label="link1"/>
        <mx:LinkButton label="link2"/>
        <mx:LinkButton label="link3"/>
    </mx:HBox>
</mx:Application>

次のコードには、特定の URL を Web ブラウザのウィンドウに表示する LinkButton コントロールが 1 つ含まれています。

<?xml version="1.0"?>
<!-- controls\button\LBSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:LinkButton label="ADBE" 
        width="100"
        click="navigateToURL(new URLRequest('http://quote.yahoo.com/q?s=ADBE'), 'quote')"/>
</mx:Application>

この例では、navigateToURL() メソッドを使用して URL を開いています。

マウスポインタを LinkButton コントロール上に移動するか、Link コントロールをクリックすると、自動的に視覚的なキューが表示されます。前のコード例にはリンク処理ロジックはありませんが、マウスポインタをリンク上に移動するかリンクをクリックすると、色が変わります。

次のコード例には、ViewStack ナビゲーションコンテナ内を移動するための複数の LinkButton コントロールが含まれています。

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

        <!-- Put the links in an HBox container across the top. -->
        <mx:HBox>
            <mx:LinkButton label="Link1" 
                click="viewStack.selectedIndex=0;"/>
            <mx:LinkButton label="Link2" 
                click="viewStack.selectedIndex=1;"/>
            <mx:LinkButton label="Link3" 
                click="viewStack.selectedIndex=2;"/>
        </mx:HBox>

        <!-- This ViewStack container has three children. -->
        <mx:ViewStack id="viewStack">
            <mx:VBox width="150">
                <mx:Label text="One"/>
            </mx:VBox>
            <mx:VBox width="150">
                <mx:Label text="Two"/>
            </mx:VBox>          
            <mx:VBox width="150">
                <mx:Label text="Three"/>
            </mx:VBox>
        </mx:ViewStack>
    </mx:VBox>
</mx:Application>

LinkButton コントロールのラベルは、その LinkButton コントロールの境界の中央に配置されます。labelPlacement プロパティに right、left、bottom、top のいずれかを指定することにより、テキストラベルをアイコンとの位置関係で配置できます。

LinkButton コントロールのユーザー操作

ユーザーが LinkButton コントロールをクリックすると、click イベントが送出されます。LinkButton コントロールが有効になっている場合は、次のことが行われます。

マウスポインタを LinkButton コントロール上に移動すると、LinkButton コントロールがロールオーバー状態であることを示す外観に変わります。
LinkButton コントロールをクリックすると、その LinkButton コントロールに入力フォーカスが移動し、リンクが押された状態であることを示す外観に変わります。マウスボタンを離すと、LinkButton コントロールの外観がロールオーバー状態に戻ります。
マウスボタンを押し下げたまま LinkButton コントロールの範囲外に移動すると、Link コントロールは元の状態に戻ります。入力フォーカスは維持されます。
toggle プロパティが true に設定されている場合は、LinkButton コントロール上でマウスボタンを離さない限り、ボタンの状態は変化しません。

無効状態の LinkButton コントロールは、ユーザーの操作に関係なく無効状態で表示されます。無効状態では、マウスやキーボードのすべての操作が無視されます。

Flex 2.01