Flex/ActionScript 開発


mx:MenuBar - メニューコンポーネント(サンプル2)

2008/12/10 22:28Update
TAGS: Flex | MXML | MenuBar | メニュー | サンプル

簡単なサンプルからメニューコンポーネント<mx:MenuBar .. />を解説します。

■コンポーネント名:mx:MenuBar

■サンプルコード:
<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    creationComplete="initCollections();" 
    height="300" width="400" >
<!-- creationCompleteプロパティ(イベント)よりinitCollectionsメソッドを呼び出させる -->
    
    <mx:Script>
        <![CDATA[

            import mx.events.MenuEvent;
            import mx.controls.Alert;
            import mx.collections.*;

            //注意:[Bindable]を書かなくてはならない
            [Bindable]
            public var menuBarCollection:XMLListCollection;
    
            //メニューデータ。 書き方を注意
            private var menubarXML:XMLList =
                <>
                    <menuItem label="ファイル">
                        <menuItem label="新規作成" data="new" />
                        <menuItem label="開く" data="open" />
                    </menuItem>
                    <menuItem label="編集">
                        <menuItem label="切り抜き" data="cut" />
                        <menuItem label="コピー" data="copy" />
                        <menuItem label="変換" data="convert">
                                <menuItem label="UPPER CASE" data="upper" />
                                <menuItem label="lower case" data="lower" />
                        </menuItem>
                    </menuItem>
                    <menuItem label="ウィンドウ">
                        <menuItem label="ウィンドウ1" data="window1" type="radio" />
                        <menuItem label="ウィンドウ2" data="window2" type="radio" />
                    </menuItem>
                </>;

            // 初期化処理(メニューデータの設定)
            private function initCollections():void {
                menuBarCollection = new XMLListCollection(menubarXML);
            }

            // イベント処理
            private function menuHandler(event:MenuEvent):void  {
                if (event.item.@data != "top") {
                    Alert.show("Label: " + event.item.@label + "\n" + 
                        "Data: " + event.item.@data, "Clicked menu item");
                }        
            }
         ]]>
    </mx:Script>

    <mx:Panel title="MenuBar サンプル" height="99%" width="99%" 
        paddingTop="10" paddingLeft="10">

        <mx:MenuBar labelField="@label" itemClick="menuHandler(event);" 
            dataProvider="{menuBarCollection}" />
            
    </mx:Panel>
</mx:Application>


■デモ:

有关作者
Syboos.jp編集長システム設計や開発、保守運営などを行ってます。オープンソース技術に興味があります。

Sponsored Link


Comments

用户名 (required)

Email (will not be published) (required)

URL

Evaluation