CodeZine(コードジン)

特集ページ一覧

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

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

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

 本稿では、Flex 3を用いて、Webサイトの各ページで共通して使えるメニューバーを作ります。ButtonBarコンポーネントの使い方と、XMLファイルの読み込み方法を学習します。

目次

はじめに

 Flex 3でWebサイトのメニューバーを製作します。

 基本的な仕組みは、XMLファイルに「リンク先のタイトル」と「リンク先のファイル名(またはURL)」を記述しておき、それをFlex 3のButtonBarコンポーネントが動的に読み込む、といったものです。XMLでメニュー項目を増やすと、自動的にそれがButtonBarに反映される仕様なので実用的です。

開発環境の構築

 本稿ではFlex 3のコンパイラを使用しますので、「Adobe AIRでクールなMP3プレーヤーを作ってみる」等を参照に、AdobeのサイトからFlex 3のコンパイラをダウンロードして環境を構築してください。

プログラムの作成と実行

 それでは早速プログラムを作成して、実際に動作させてみましょう。詳細は後述します。

 下記のコードを「menuBar.mxml」というファイル名で保存してください。文字コードはUTF-8にしておきます。

menuBar.mxml
<?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.xml
<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」)、アップロードしましょう。

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要素を新たに追加し、画面を再読み込みすれば、メニューバーにボタンが追加されます。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

  • tkitamura(ティーキタムラ)

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

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