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