« Flex2 コントロール - Window・Dialog - | トップページ | Flex2 コントロール - レイアウト・コンテナ Part1 - »

2006年7月18日 (火)

Flex2 コントロール - ナビゲーション -

Flex2のコントロールのうち、ユーザーをナビゲートする際に使用しそうなコントロールのサンプルです。
これらは、HTMLではなかなか作るのが大変なものですが、Flex2では簡単に利用できますね。
コントロール サンプルページ
example.mxml

  • Tree
    ツリービューです。
    階層構造を持つオブジェクトを表示する際には欠かせませんね。
    dataProviderにはXMLListなどを指定できるようです。
    <mx:Tree labelField="@label" width="200">
        <mx:dataProvider>
            <mx:XMLList>
                <TreeItem label="TreeItem1">
                    <Item label="Item1">
                        <SubItem label="SubItem1" />
                        <SubItem label="SubItem2" />
                    </Item>
                    <Item label="Item2" />
                </TreeItem>
                <TreeItem label="TreeItem2">
                    <Item label="Item1" />
                    <Item label="Item2" />
                </TreeItem>
            </mx:XMLList>
        </mx:dataProvider>
    </mx:Tree>
  • MenuBar
    メニューバーです。
    Tree同様にdataProviderにはXMLListなどを指定できるようです。
    itemClickイベントにMenuItemがクリックされた際のイベントハンドラを記述します。
    <mx:MenuBar labelField="@label" itemClick="mx.controls.Alert.show(event.label);">
        <mx:dataProvider>
            <mx:XMLList>
                <Menu label="Menu1">
                    <MenuItem label="MenuItem1">
                        <MenuSubItem label="MenuSubItem1" />
                        <MenuSubItem label="MenuSubItem2" />
                    </MenuItem>
                    <MenuItem label="MenuItem2" />
                </Menu>
                <Menu label="Menu2">
                    <MenuItem label="MenuItem1" />
                    <MenuItem label="MenuItem2" />
                </Menu>
            </mx:XMLList>
        </mx:dataProvider>
    </mx:MenuBar>
  • TabNavigator
    タブです。
    タブの中身はVBoxで分けるようです。
    VBoxについては、後日サンプルなどを書きたいと思います。
    <mx:TabNavigator width="200" height="200">
        <mx:VBox label="Tab1"><mx:Label text="Tab1" /></mx:VBox>
        <mx:VBox label="Tab2"><mx:Label text="Tab2" /></mx:VBox>
        <mx:VBox label="Tab3"><mx:Label text="Tab3" /></mx:VBox>
        <mx:VBox label="Tab4"><mx:Label text="Tab4" /></mx:VBox>
    </mx:TabNavigator>
  • Accordion
    Outlookで使用されていたような、アコーディオンバーです。
    複数のコントロールをグループ化し、選択されたグループのみを展開して表示するコントロールです。
    VBoxでグループを分けるようです。
    <mx:Accordion width="200" height="200">
        <mx:VBox label="Accordion Button1">
            <mx:Label text="Accordion Panel1" />
        </mx:VBox>
        <mx:VBox label="Accordion Button2">
            <mx:Label text="Accordion Panel2" />
        </mx:VBox>
        <mx:VBox label="Accordion Button3">
            <mx:Label text="Accordion Panel3" />
        </mx:VBox>
        <mx:VBox label="Accordion Button4">
            <mx:Label text="Accordion Panel4" />
        </mx:VBox>
    </mx:Accordion>

|

« Flex2 コントロール - Window・Dialog - | トップページ | Flex2 コントロール - レイアウト・コンテナ Part1 - »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12438/10990056

この記事へのトラックバック一覧です: Flex2 コントロール - ナビゲーション -:

« Flex2 コントロール - Window・Dialog - | トップページ | Flex2 コントロール - レイアウト・コンテナ Part1 - »