はじめに
このチュートリアルではFlexのナビゲーションコンテナやレイアウトコンテナを利用して、複数のビューが備わったアプリケーションを作成します。ここでは、レイアウトコンテナのいくつかの使用法に加え、データの配列を柔軟に表示することができるTileList
コントロールの使用法も解説します。また、Macromedia Flex 1.5に新たに搭載されたチャート用コンポーネントの使用法も紹介します。
なお、このチュートリアルはMacromediaカスタマートレーニンググループに所属する、Robert Crooksが執筆した4部構成のチュートリアルのパート3です。
本チュートリアルの内容
Application
タグの使い方TabNavigator
の使い方ViewStack
の使い方LinkBar
の使い方Panel
コンテナの使い方HBox
の使い方VBox
の使い方TileList
コントロールの使い方LineChart
コンポーネントとそのサブコンポーネントの使い方Label
コントロールの使い方Button
コントロールの使い方- ActionScriptでの配列の作り方
- ActionScriptでのオブジェクトの配列の作り方
- 一覧アイテムのイベントに対するActionScriptのイベントハンドラの作り方
この記事に必要なもの
このチュートリアルをフォローするには、つぎに挙げるソフトウェアやファイルをインストールする必要があります。
Macromedia Flex
Flexのトライアル版に関する詳細については、Flex FAQを参照してください。また、トライアル版の入手方法については、こちらを参照してください。
テキストエディタ
Flex Builder、もしくはDreamweaver MX 2004、あるいはXMLとActionScriptのコードが記述できるコードエディタ(Notepadのような簡単なテキストエディタでも可)が必要です。なおFlex BuilderはFlexサーバーとともにダウンロードできます。また、Dreamweaver MX 2004のトライアル版の入手方法については、こちらを参照してください。
このチュートリアルのためのソリューションファイル
container.zipには、このチュートリアルで紹介するcontainers.mxmlのソースコードが収録されています。
この記事のために必要な予備知識
- 「Flexの概要の紹介」を読み終えていること
- Flexアプリケーションのブラウズ方法を把握していること
- 「Flex基礎講座(パート1):はじめてのFlexアプリケーション開発」と「Flex基礎講座(パート2):Flex電卓アプリケーションの作成」を読み終えているか、Flexアプリケーションの仕組みに関する基礎知識があること
アプリケーションの作成
このチュートリアルではナビゲーションコンテナとレイアウトコンテナの使用法に焦点を置き、簡単なアプリケーションを構築します。ここでは、TabNavigator
コンテナを利用して、ビューを2つ持つグローバルナビゲーションシステムを作成します。また、ビューの1つには、LinkBar
とViewStack
ナビゲーションコンテナを利用して、2つのサブビューが備わったローカルナビゲーションシステムも作成します。
各ビューにはPanel
やHBox
、Form
などのさまざまなレイアウトコンテナも利用します。アイテムの集合をレイアウトするためのTileList
コントロールや、データを視覚化するためのLineChart
の使用法にも触れていきます。
Applicationオブジェクトの作成
Flexアプリケーションの開発は、まずXMLの宣言とApplication
ブロックを記述することから始まります。Application
タグの中には、つぎに示すMX
クラスライブラリの名前空間宣言を記述します。
xmlns:mx="http://www.macromedia.com/2003/mxml"
なお、接頭辞のmx
はこのライブラリのすべてのタグに対して使用します。
- 新規ファイルを開いて、このファイルを「flex_tutorials」ディレクトリに「containers.mxml」として保存します。
- ファイルの最初に、つぎのXML宣言を追加します。
- XML宣言のつぎに、MXML名前空間の指定の入った
Application
タグを追加します。
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"> </mx:Application>
データ配列の作成
このチュートリアルのパート1ではタグの構文で配列を作成する方法を紹介しましたが、ここではActionScriptで作成する方法を紹介します。
Application
ブロックの中にScript
ブロックを追加し、この中にCDATA
セクションを記述して、XMLパーサーがスクリプトをXMLのコードとして解析しないようにしておきます。Script
ブロックの中で配列変数のmyArray
を定義し、この変数の値に配列データの[0,1,2,3,4,5,6,7,8,9]
を代入します。
<mx:Script> <![CDATA[]]> </mx:Script>
var myArray=[0,1,2,3,4,5,6,7,8,9];
オブジェクトの配列の作成
オブジェクトの配列も作成します。オブジェクトの配列は後ほど作成するコントロールで使用するとともに、チャート用コンポーネントにデータを供給するためにも使用します。このチュートリアルのパート1で作成したオブジェクトの配列では、<mx:Object>
タグ内にタグをネストすることでオブジェクトのプロパティを宣言しましたが、ここでは<mx:Object>
タグの属性を利用してプロパティを作成する構文を使用します。
Script
ブロックの後に<mx:Array>
ブロックを追加します。<mx:Array>
ブロックの中に<mx:Object>
タグを4つ追加し、それぞれのタグに、次に示すlabel
、volume
、revenue
プロパティを追加します。
<mx:Array id="myArrayOfObjects"> </mx:Array>
<mx:Object label="Q1" volume="1600" revenue="10000"/> <mx:Object label="Q2" volume="1500" revenue="9000"/> <mx:Object label="Q3" volume="1900" revenue="12000"/> <mx:Object label="Q4" volume="2300" revenue="14000"/>
グローバルナビゲーション用のTabNavigatorコンテナの追加
TabNavigator
コンテナは、このコンテナ内に宣言されるレイアウト用コンテナのlabel
値をもとにして、ナビゲーション機能を自動的に生成します。
Array
ブロックの後にTabNavigator
コンテナを追加し、マージンなどのプロパティを次のように設定します。
<mx:TabNavigator id="tabNav" marginLeft="10" marginTop="20"> </mx:TabNavigator>
メインビュー用のHBoxレイアウトとPanelコンテナの追加
Flex
クラスライブラリには、画面上の視覚要素を整列させるために数々のレイアウトコンテナクラスが収録されています。ここでは、これらのうち2つをメインナビゲーションビューを構築するために利用します。
HBox
レイアウトコンテナ:コンテンツを横並びに整列Panel
コンテナ(パート1,2にて使用済み):コンテンツを縦、横、両方向に整列するとともにタイトルバーを表示
なお、Panel
の場合、データバインディングを利用して、Panel
コンテナの高さとTabNavigator
コンテナの高さをリンクすると良いでしょう。このテクニックを利用すれば、相対的にサイズが指定できるうえにコードでサイズを指定する量が減り、UIをリフォームする際やディスプレイサイズの異なるデバイスにアプリケーションを移植する際などに便利です。この場合、データバインディングを利用する部分を波括弧({ }
)で囲みます。この波括弧は、Flexコンパイラに対して、括弧内のコンテンツをActionScriptの表現式または変数として評価することを指示します。
TabNavigator
コンテナのブロックの中にHBox
コンテナを追加し、label
プロパティに「View 1: Form/Tile」を設定します。HBox
コンテナのブロックの後にPanel
コンテナを追加し、label
プロパティを「View 2: Pseudo Bar Chart」、id
やheight
、title
プロパティを次に示すように、それぞれ設定します。
<mx:HBox label="View 1: Form/Tile" width="500" height="400"> </mx:HBox>
<mx:Panel label="View 2: Sales Trends Chart"
title="Sales Trends"> </mx:Panel>
サブビュー用のViewStack、LinkBar、Panelコンテナの追加
TabNavigator
コンテナのベースのクラスとなるのが、コンテナの配列を含むViewStack
ナビゲーションコンテナです。なお、コンテナの配列間のナビゲーションにはselectedIndex
もしくはselectedItem
プロパティ(selectedIndex
は配列内のコンテナの位置、selectedItem
はコンテナのid
値をそれぞれ利用して参照)を利用します。TabNavigator
コンテナはViewStack
クラスを継承するものなので、ViewStack
が既に内蔵されています。その他のナビゲーションコンテナは、明示的に定義したViewStack
コンテナをdataProvider
として使用しますが、この場合でもナビゲーションの詳細はシームレスに処理されます。
ViewStack
コンテナの幅と高さを設定する際には、Flex 1.5の新機能であるパーセンテージでのサイズ指定を利用します。Flex 1.5からは、幅や高さをピクセル値だけでなく、親コンテナとのパーセント比率でも指定することができます。(この際、コンテナ内の他のコンテンツのために充分なスペースが確保されていることが前提となります。)
LinkBar
ナビゲーションコンテナには縦、横、というように方向を指定するためのプロパティがあるので、グローバルナビゲーションとサブナビゲーションのいずれの場面でも便利です。ここでは、サブナビゲーションのためにLinkBar
ナビゲーションコンテナを利用します。
HBox
コンテナの中にViewStack
コンテナを追加し、id
プロパティを「vStack」に設定します。HBox
コンテナ内のViewStack
コンテナの前にLinkBar
コンテナを追加し、dataProvider
プロパティをViewStack
コンテナにバインドし、direction
プロパティを「vertical」に設定します。ViewStack
コンテナの中にPanel
を2つ追加し、1つ目のPanel
のtitle
とlabel
プロパティを「Form」に設定します。2つ目のPanel
には、title
とlabel
を「Tile」に設定し、id
を「tilePanel」に設定します。- ファイルを保存し、アプリケーションをブラウズしてみます。画面上の2つのタブと、
LinkBar
コンテナの2つのリンクをクリックし、これらのナビゲーションが自動的に処理されていることを確認してください。また、ブラウザの[戻る]、[進む]ボタンもクリックしてみてください。ナビゲーションコンテナは、ナビゲーション時のイベントをブラウザの履歴機能と連携させるので、ブラウザの[戻る]、[進む]ボタンは通常のWebページ同様に動作します。
<mx:ViewStack id="vStack"> </mx:ViewStack>
<mx:LinkBar dataProvider="{vStack}" direction="vertical"/>
<mx:Panel title="Form" label="Form"> </mx:Panel> <mx:Panel id="tilePanel" title="Tile" label="Tile"
width="220" height="210"> </mx:Panel>
Formコンテナの追加
ここまででアプリケーションのナビゲーションが完成したので、ここからはレイアウトコンテナの使用法に重点を置きます。ここでは、まず、フォームのコントロール群を自動的に整列し、さらにフォームのデータ処理を支援するForm
コンテナを利用します。(このチュートリアルではデータ処理の支援機能を利用しません。詳細については、Flexドキュメンテーションを参照してください。)フォームのデータに対しては、ここで紹介するように、一般的なイベントハンドラが使用できます。
Form
コンテナ内には次の2つのコンテナクラスがネストできます。
FormHeading
:1つまたは複数の見出しを作成(オプション項目。代わりにLabel
を使用することも可)FormItem
:1つのコントロール、またはコントロール群とそのラベルを作成
Form
の中には、HTMLのselect
コントロール同様の機能を提供するComboBox
を使用します。ComboBox
の詳細については、Flex基礎講座(パート1):はじめてのFlexアプリケーション開発を参照するようにしてください。ComboBox
の中に表示するアイテムは、単なる値の配列またはオブジェクトの配列として用意します。ここでは、先程Script
ブロックの中で作成した配列を使用します。
また、このセクションでは、ControlBar
コンテナも作成します。ControlBar
は横方向に配置を行うPanel
のフッターになるオプションのコンテナです。
- 「Form」というタイトルのついた
Panel
コンテナの中にForm
コンテナを追加します。 Form
コンテナの中にFormHeading
を追加し、label
を「My Form」に設定します。FormHeading
の後にFormItem
コンテナを追加し、label
を「Pick a Number」に設定します。FormItem
の中にComboBox
を追加し、id
を「myCombo」に、dataProvider
プロパティを「myArray
」へのバインドにそれぞれ設定します。Form
コンテナの後(引き続きPanel
の中)にControlBar
コンテナを追加します。ControlBar
コンテナの中にLabel
を追加し、text
プロパティには文字列の「You chose: 」とComboBox
のselectedItem
プロパティへのバインディングを設定します。- ファイルを保存して、ブラウザでフォームの動作を確認します。
ComboBox
でアイテムを選択すると、ControlBar
コンテナのラベルが変化するのが確認できます。
<mx:Form> </mx:Form>
<mx:FormHeading label="My Form"/>
<mx:FormItem label="Pick a Number"> </mx:FormItem>
<mx:ComboBox id="myCombo" dataProvider="{myArray}"/>
<mx:ControlBar></mx:ControlBar>
<mx:Label text="You chose: {myCombo.selectedItem}"/>
TileListの追加と、オブジェクトの配列の表示
1つ目の主要ビューの第2ビューには、dataProvider
から供給されたアイテムをタイル状に配置するTileList
コントロールを使用することにします。TileList
はアイテムがグリッド状に表示されることを除けば、以前に使用したList
やComboBox
コントロールとほぼ同じです。なおTileList
にはMouseOver
、MouseDown
ビヘイビア(カスタマイズ可能)が組み込まれており、change
イベントを利用することでイベントハンドラを呼び出すことができます。
- 「Tile」というタイトルのついた
Panel
コンテナの中にTileList
コントロールを追加して、dataProvider
を「myArrayOfObjects
」にバインドするよう設定し、width
、height
をともに「100%」に設定します。また、change
イベントを「setStatus(event.target.selectedItem)
」に設定します。 - アプリケーションのコードの最初にある
script
ブロックの中に、setStatus()
関数を定義するためのfunction
ブロックを追加します。この関数では、Object
型の引数、「item」を受け付けるようにし、戻り値をなしに設定します。 function
ブロックの中で、「Tile」タイトルのついたPanel
のstatus
プロパティに「"Revenue: "+item.revenue+" Volume: "+item.volume
」を代入します。
<mx:TileList dataProvider="{myArrayOfObjects}"
change="setStatus(event.target.selectedItem)" width="100%"
height="100%"/>
function setStatus(item:Object):Void { }
tilePanel.status="Revenue: "+item.revenue+" Volume: " +item.volume;
repeated
オブジェクトに関連づけられたオリジナルデータのアイテムです。- ファイルを保存し、アプリケーションをブラウズしてみます。
TileList
によってタイル状に表示されたアイテムをクリックし、Panel
コンテナのステータス欄に各アイテムのデータが表示されることを確認します。
LineChartコンポーネントの作成
このチュートリアルの最後のステップでは、Flex 1.5最新のチャート用コンポーネントを利用して、オブジェクトの配列から線グラフを生成することにします。LineChart
コンポーネントは、このコンポーネントに埋め込まれた「軸」用のコンポーネントなどの一連のコンポーネントを利用することで、グラフの外観を定義します。
- 「View 2」の
Panel
の中に<mx:LineChart>
コンポーネントを追加し、dataProvider
を「myArrayOfObjects
」にバインドするとともに、height
を周囲のパネルの高さに対して「100%」になるように設定します。 <mx:LineChart>
タグブロックの中に<mx:horizontalAxis>
ブロックを追加します。<mx:horizontalAxis>
ブロックの中に<mx:CategoryAxis>
タグを追加し、dataProvider
を「myArrayOfObjects」にバインドするとともに、categoryField
にオブジェクトのlabel
プロパティを設定します。<mx:LineChart>
ブロック内の<mx:horizontalAxis>
ブロックの下に、<mx:series>
ブロックを追加します。<mx:series>
ブロックの中に、<mx:Array>
ブロックを追加します。<mx:Array>
ブロックの中に、グラフの線を定義する、2つの<mx:LineSeries>
タグを追加します。線種(form)を「Curve」に設定し、yField
とname
の値は、dataProvider
から供給されるオブジェクトのvolume
プロパティやrevenue
プロパティに対応するようにしておきます。- これで完成です。ファイルを保存し、アプリケーションの動作を確認しましょう。ボタンをクリックして、動作を確認ください。
<mx:LineChart dataProvider="{myArrayOfObjects}" height="100%"> </mx:LineChart>
<mx:horizontalAxis> </mx:horizontalAxis>
<mx:CategoryAxis dataProvider="{myArrayOfObjects}"
categoryField="label"/>
<mx:series></mx:series>
<mx:Array></mx:Array>
<mx:LineSeries yField="volume" form="curve" name="Volume"/> <mx:LineSeries yField="revenue" form="curve" name="Revenue"/>
<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" > <mx:Script> <![CDATA[ // データ配列 var myArray=[0,1,2,3,4,5,6,7,8,9]; // タイル用のハンドラ function setStatus(item:Object):Void { tilePanel.status="Revenue: "+item.revenue +" Volume: "+item.volume; } ]]> </mx:Script> <mx:Array id="myArrayOfObjects"> <mx:Object label="Q1" volume="1600" revenue="10000"/> <mx:Object label="Q2" volume="1500" revenue="9000"/> <mx:Object label="Q3" volume="1900" revenue="12000"/> <mx:Object label="Q4" volume="2300" revenue="14000"/> </mx:Array> <!-- グローバルナビゲーション --> <mx:TabNavigator id="tabNav" marginLeft="10" marginTop="20"> <!-- ビュー 1 --> <mx:HBox label="View 1:Form/Tile" width="500" height="400"> <!-- サブナビゲーション --> <mx:LinkBar dataProvider="{vStack}"
direction="vertical"/> <mx:ViewStack id="vStack" width="80%" height="100%"> <!-- form ビュー --> <mx:Panel title="Form" label="Form"> <mx:Form> <mx:FormHeading label="My Form"/> <mx:FormItem label="Pick a Number"> <mx:ComboBox id="myCombo"
dataProvider="{myArray}"/> </mx:FormItem> </mx:Form> <mx:ControlBar> <mx:Label
text="You chose:{myCombo.selectedItem}"/> </mx:ControlBar> </mx:Panel> <!-- tile ビュー --> <mx:Panel id="tilePanel" title="Tile" label="Tile"
width="220" height="210"> <mx:TileList dataProvider="{myArrayOfObjects}"
change="setStatus(event.target.selectedItem)"
width="100%" height="100%"/> </mx:Panel> </mx:ViewStack> </mx:HBox> <!-- ビュー 2 --> <mx:Panel label="View 2: Sales Trends Chart"
title="Sales Trends"> <mx:LineChart dataProvider="{myArrayOfObjects}"
height="100%"> <mx:horizontalAxis> <mx:CategoryAxis dataProvider="{myArrayOfObjects}"
categoryField="label"/> </mx:horizontalAxis> <mx:series> <mx:Array> <mx:LineSeries yField="volume" form="curve"
name="Volume"/> <mx:LineSeries yField="revenue" form="curve"
name="Revenue"/> </mx:Array> </mx:series> </mx:LineChart> <mx:ControlBar> </mx:ControlBar> </mx:Panel> </mx:TabNavigator> </mx:Application>
つぎのステップ
是非つぎのチュートリアルに進み、さらにFlexの習得を深めてください。
このチュートリアルの内容にご関心をお持ちいただけた場合は、Flexにデフォルトで含まれているサンプルアプリケーションなども一度目を通すようにしてください。Flexの搭載機能をデモするサンプルが多数収録されています。