特集記事

Flex 3で動的に項目を編集できるメニューバーを作成する

ButtonBarの利用とXMLファイルの読み込み

tkitamura[著]

2009/02/19 14:00

ポスト

Page 1
Page 2
- 解説
- 最後に

解説

　「menuBar.mxml」のソースについて解説します。

　基本的な構成はPanelコンポーネントの内部にButtonBarコンポーネントを配置し、XMLファイルに書かれたリンク情報に基づいてButtonBarの中に表示していくものです。

　詳しく見てみましょう。まずPanelタグです。

<mx:Panel id="panel1" title="MENU" width="130" height="300"
 paddingTop="10" paddingLeft="10" paddingRight="10"
 paddingBottom="10" backgroundColor="0x8b4513" color="0xdda0dd">
  <mx:ButtonBar id="buttonBar" color="0x000000"
   itemClick="bClickHandler(event);"
   direction="vertical"
   buttonMode="true"
   useHandCursor="true"/>
</mx:Panel>

　titleプロパティで"MENU"という文字を指定します。これにより、Panelのヘッダー部分にMENUという文字が現れます。

　paddingTop、paddingLeft、paddingRight、paddingBottomプロパティではそれぞれ、上部、左側、右側、下部から内部コンテンツへの距離をピクセル数で指定します。

　ButtonBarタグではitemClick="bClickHandler(event);"と指定することでButtonBar内のボタンを押した際の挙動を指定できます。

　directionプロパティはボタンの並びの方向を指定します。今回は"vertical"なので縦方向です。useHandCursor="true"と指定すると、コンポーネント上にカーソルが乗った際にカーソルが手の形になります。

　次にScriptタグ内のActionScriptを見てみましょう。

　関数init()は、「menuBar.mxml」の上から3行目にcreationComplete="init();"とあるように、起動と同時に呼び出されます。

private function init():void {

  array = new Array();
  var loader:URLLoader = new URLLoader();
  try {
    var url:String
    ="menu.xml?"+new Date().getTime().toString();
  loader.load(new URLRequest(url));
  } catch (error:Error) {
  }
  loader.addEventListener(Event.COMPLETE,
    function(event:Event):void {
      var loader:URLLoader = URLLoader(event.target);

      xml = XML(event.target.data);
      array = new Array();

      for each (var title :XML in xml..label) {
        array.push(title.toString());
      }
      buttonBar.dataProvider=array;

    });
}

　この関数の内部では、まずURLLoaderで「menu.xml」をロードします。そしてロードしたデータをXMLオブジェクトに変換して「menu.xml」のlabel要素を配列化したものを、ButtonBarコンポーネントのdataProviderプロパティに代入します。

　これによって、ButtonBarにXMLファイルのlabel要素が表示されるようになります。

　次にbClickHandler(event:ItemClickEvent)です。

private function bClickHandler(event:ItemClickEvent):void {
  var urlString:String
    = xml.item[event.index].url + "?"
      + new Date().getTime().toString();
  navigateToURL(new URLRequest(urlString),'_self');
}

　この関数はButtonBarの各ボタンをクリックすることで呼びだされます。

　引数のeventからButtonBar内の何番目かというインデックス情報が得られますので、先ほどのXMLの該当インデックスのurl要素を呼び出し、関数navigateToURL()によって画面を遷移します。

　遷移先にも同じ「menuBar.swf」が埋め込んであれば、同様にどの画面にも遷移できます。

最後に

　いかがだったでしょうか？今回はFlex 3のButtonBarコンポーネントを使用してWebサイトのメニューバーを構築してみましたが、この他にもWebサイトを魅力的なものにするコンポーネントがFlex 3にはあります。今回紹介したものはそのほんの一部です。読者の皆さまもぜひFlex 3を活用して楽しいWebサイトを構築してください。