はじめに
Flex 3でWebサイトのメニューバーを製作します。
基本的な仕組みは、XMLファイルに「リンク先のタイトル」と「リンク先のファイル名（またはURL）」を記述しておき、それをFlex 3のButtonBarコンポーネントが動的に読み込む、といったものです。XMLでメニュー項目を増やすと、自動的にそれがButtonBarに反映される仕様なので実用的です。
開発環境の構築
本稿ではFlex 3のコンパイラを使用しますので、「Adobe AIRでクールなMP3プレーヤーを作ってみる」等を参照に、AdobeのサイトからFlex 3のコンパイラをダウンロードして環境を構築してください。
プログラムの作成と実行
それでは早速プログラムを作成して、実際に動作させてみましょう。詳細は後述します。
下記のコードを「menuBar.mxml」というファイル名で保存してください。文字コードはUTF-8にしておきます。
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init();" backgroundColor="0x000000">
<mx:Script>
<![CDATA[
import flash.events.*;
import flash.net.URLLoader;
import flash.net.URLRequest;
import mx.events.ItemClickEvent;
private var array:Array;
private var xml:XML;
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;
});
}
private function bClickHandler(event:ItemClickEvent):void {
var urlString:String
= xml.item[event.index].url + "?"
+ new Date().getTime().toString();
navigateToURL(new URLRequest(urlString),'_self');
}
]]>
</mx:Script>
<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>
</mx:Application>
そして、以下のコマンドでコンパイルしてください。
mxmlc menuBar.mxml
すると、同じディレクトリに「menuBar.swf」というファイルができます。
さらに「menu.xml」というファイル名で、メニュー情報のXMLファイルを作りましょう。label要素にリンクの表示名、url要素にリンク先のファイル名を記述しています。
<menu>
<item>
<label>Page01</label>
<url>index1.html</url>
</item>
<item>
<label>Page02</label>
<url>index2.html</url>
</item>
<item>
<label>Page03</label>
<url>index3.html</url>
</item>
<item>
<label>Page04</label>
<url>index4.html</url>
</item>
<item>
<label>Page05</label>
<url>index5.html</url>
</item>
</menu>
そして、この「menu.xml」と「menuBar.swf」をサーバーにアップロードし、「menuBar.swf」にアクセスします。
すると縦にボタンが連続したメニューバーに先ほどのXMLにあるリンク名が表示されているはずです。このボタンが連続したメニューバーことButtonBarコンポーネントです。
さらに以下のHTMLファイルも作成し（ファイル名は「index1.html」）、アップロードしましょう。
<html>
<title>Flexサンプル</title>
<body bgcolor="0x000000" text="0xffffff">
<embed src="menuBar.swf" width="200" height="400" align="left">
<h1>1ページ目</h1>
</body>
</html>
このHTMLファイルではembedタグで「menuBar.swf」を埋め込み、align="left"で左に寄るようにしています。width,heightの値の指定によって、swfファイルを埋め込む範囲も指定しています。
さらに、index2.html、index3.html、index4.html、index5.htmlと同じファイルを作り、<h1>1ページ目</h1>とあるところは、2ページ目、3ページ目……と書き換えてください。
さて、この作業が完了したら、サーバーにアップロードした「index1.html」にアクセスしましょう。先ほどの「menuBar.swf」が画面左に見えていれば成功です。
メニューバー上のボタンを押して画面が遷移するかも確認しましょう。「Page02」とあるボタンをクリックして「2ページ目」と表示されている画面に行けるはずです。
メニューを追加したい場合は
<item>
<label>PageXX</label>
<url>indexXX.html</url>
</item>
というitem要素を新たに追加し、画面を再読み込みすれば、メニューバーにボタンが追加されます。
