CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/02/19 14:00

目次

解説

 「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という文字が現れます。

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

 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サイトを構築してください。

「FlexではじめるRIA開発」特集、絶賛公開中!
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • tkitamura(ティーキタムラ)

    Java,php,Flex,Flashなどにより、某社FXシステムから個人HPの作成まで幅広く手がけました。 宜しくお願い致します。 &nbsp;

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5