Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。B)本稿では、Flexのナビゲーションコンテナやレイアウトコンテナを利用して、複数のビューが備わったアプリケーションを作成します。このほかに、アイテムの集合をレイアウトしたり、チャートを描画したりする方法も紹介します。ポストはじめにこのチュートリアルではFlexのナビゲーションコンテナやレイアウトコンテナを利用して、複数のビューが備わったアプリケーションを作成します。ここでは、レイアウトコンテナのいくつかの使用法に加え、データの配列を柔軟に表示することができるTileListコントロールの使用法も解説します。1.5に新たに搭載されたチャート用コンポーネントの使用法も紹介します。Crooksが執筆した4部構成のチュートリアルのパート3です。一覧アイテムのイベントに対するActionScriptのイベントハンドラの作り方この記事に必要なものこのチュートリアルをフォローするには、つぎに挙げるソフトウェアやファイルをインストールする必要があります。FAQを参照してください。トライアル版の入手方法については、こちらを参照してください。2004、あるいはXMLとActionScriptのコードが記述できるコードエディタ(Notepadのような簡単なテキストエディタでも可)が必要です。BuilderはFlexサーバーとともにダウンロードできます。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の使用法にも触れていきます。図3.線グラフApplicationオブジェクトの作成Flexアプリケーションの開発は、まずXMLの宣言とApplicationブロックを記述することから始まります。Applicationタグの中には、つぎに示すMXクラスライブラリの名前空間宣言を記述します。xmlns:mx="http://www.macromedia.com/2003/mxml"なお、接頭辞のmxはこのライブラリのすべてのタグに対して使用します。新規ファイルを開いて、このファイルを「flex_tutorials」ディレクトリに「containers.mxml」として保存します。ファイルの最初に、つぎのXML宣言を追加します。version="1.0"?>XML宣言のつぎに、MXML名前空間の指定の入ったApplicationタグを追加します。xmlns:mx="http://www.macromedia.com/2003/mxml"></mx:Application>データ配列の作成このチュートリアルのパート1ではタグの構文で配列を作成する方法を紹介しましたが、ここではActionScriptで作成する方法を紹介します。Applicationブロックの中にScriptブロックを追加し、この中にCDATAセクションを記述して、XMLパーサーがスクリプトをXMLのコードとして解析しないようにしておきます。<![CDATA[]]></mx:Script>Scriptブロックの中で配列変数のmyArrayを定義し、この変数の値に配列データの[0,1,2,3,4,5,6,7,8,9]を代入します。myArray=[0,1,2,3,4,5,6,7,8,9];オブジェクトの配列の作成オブジェクトの配列も作成します。オブジェクトの配列は後ほど作成するコントロールで使用するとともに、チャート用コンポーネントにデータを供給するためにも使用します。このチュートリアルのパート1で作成したオブジェクトの配列では、<mx:Object>タグ内にタグをネストすることでオブジェクトのプロパティを宣言しましたが、ここでは<mx:Object>タグの属性を利用してプロパティを作成する構文を使用します。Scriptブロックの後に<mx:Array>ブロックを追加します。id="myArrayOfObjects"></mx:Array><mx:Array>ブロックの中に<mx:Object>タグを4つ追加し、それぞれのタグに、次に示すlabel、volume、revenueプロパティを追加します。revenue="14000"/>グローバルナビゲーション用のTabNavigatorコンテナの追加TabNavigatorコンテナは、このコンテナ内に宣言されるレイアウト用コンテナのlabel値をもとにして、ナビゲーション機能を自動的に生成します。Arrayブロックの後にTabNavigatorコンテナを追加し、マージンなどのプロパティを次のように設定します。marginTop="20"></mx:TabNavigator>メインビュー用のHBoxレイアウトとPanelコンテナの追加Flexクラスライブラリには、画面上の視覚要素を整列させるために数々のレイアウトコンテナクラスが収録されています。ここでは、これらのうち2つをメインナビゲーションビューを構築するために利用します。HBoxレイアウトコンテナ:コンテンツを横並びに整列Panelコンテナ(パート1,2にて使用済み):コンテンツを縦、横、両方向に整列するとともにタイトルバーを表示なお、Panelの場合、データバインディングを利用して、Panelコンテナの高さとTabNavigatorコンテナの高さをリンクすると良いでしょう。このテクニックを利用すれば、相対的にサイズが指定できるうえにコードでサイズを指定する量が減り、UIをリフォームする際やディスプレイサイズの異なるデバイスにアプリケーションを移植する際などに便利です。この波括弧は、Flexコンパイラに対して、括弧内のコンテンツをActionScriptの表現式または変数として評価することを指示します。Form/Tile」を設定します。Chart」、idやheight、titleプロパティを次に示すように、それぞれ設定します。Trends"></mx:Panel>サブビュー用のViewStack、LinkBar、Panelコンテナの追加TabNavigatorコンテナのベースのクラスとなるのが、コンテナの配列を含むViewStackナビゲーションコンテナです。コンテナの配列間のナビゲーションにはselectedIndexもしくはselectedItemプロパティ(selectedIndexは配列内のコンテナの位置、selectedItemはコンテナのid値をそれぞれ利用して参照)を利用します。TabNavigatorコンテナはViewStackクラスを継承するものなので、ViewStackが既に内蔵されています。その他のナビゲーションコンテナは、明示的に定義したViewStackコンテナをdataProviderとして使用しますが、この場合でもナビゲーションの詳細はシームレスに処理されます。1.5の新機能であるパーセンテージでのサイズ指定を利用します。1.5からは、幅や高さをピクセル値だけでなく、親コンテナとのパーセント比率でも指定することができます。(この際、コンテナ内の他のコンテンツのために充分なスペースが確保されていることが前提となります。)LinkBarナビゲーションコンテナには縦、横、というように方向を指定するためのプロパティがあるので、グローバルナビゲーションとサブナビゲーションのいずれの場面でも便利です。ここでは、サブナビゲーションのためにLinkBarナビゲーションコンテナを利用します。HBoxコンテナの中にViewStackコンテナを追加し、idプロパティを「vStack」に設定します。id="vStack"></mx:ViewStack>HBoxコンテナ内のViewStackコンテナの前にLinkBarコンテナを追加し、dataProviderプロパティをViewStackコンテナにバインドし、directionプロパティを「vertical」に設定します。direction="vertical"/>ViewStackコンテナの中にPanelを2つ追加し、1つ目のPanelのtitleとlabelプロパティを「Form」に設定します。2つ目のPanelには、titleとlabelを「Tile」に設定し、idを「tilePanel」に設定します。height="210"></mx:Panel>ファイルを保存し、アプリケーションをブラウズしてみます。画面上の2つのタブと、LinkBarコンテナの2つのリンクをクリックし、これらのナビゲーションが自動的に処理されていることを確認してください。ブラウザの[戻る]、[進む]ボタンもクリックしてみてください。ナビゲーションコンテナは、ナビゲーション時のイベントをブラウザの履歴機能と連携させるので、ブラウザの[戻る]、[進む]ボタンは通常のWebページ同様に動作します。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」に設定します。Number」に設定します。Number"></mx:FormItem>FormItemの中にComboBoxを追加し、idを「myCombo」に、dataProviderプロパティを「myArray」へのバインドにそれぞれ設定します。dataProvider="{myArray}"/>Formコンテナの後(引き続きPanelの中)にControlBarコンテナを追加します。」とComboBoxのselectedItemプロパティへのバインディングを設定します。{myCombo.selectedItem}"/>ファイルを保存して、ブラウザでフォームの動作を確認します。ComboBoxでアイテムを選択すると、ControlBarコンテナのラベルが変化するのが確認できます。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)」に設定します。height="100%"/>アプリケーションのコードの最初にあるscriptブロックの中に、setStatus()関数を定義するためのfunctionブロックを追加します。この関数では、Object型の引数、「item」を受け付けるようにし、戻り値をなしに設定します。"+item.volume」を代入します。+item.volume;メモこの関数に渡されるアイテム(item)は、イベントが発生したrepeatedオブジェクトに関連づけられたオリジナルデータのアイテムです。ファイルを保存し、アプリケーションをブラウズしてみます。TileListによってタイル状に表示されたアイテムをクリックし、Panelコンテナのステータス欄に各アイテムのデータが表示されることを確認します。1.5最新のチャート用コンポーネントを利用して、オブジェクトの配列から線グラフを生成することにします。LineChartコンポーネントは、このコンポーネントに埋め込まれた「軸」用のコンポーネントなどの一連のコンポーネントを利用することで、グラフの外観を定義します。2」のPanelの中に<mx:LineChart>コンポーネントを追加し、dataProviderを「myArrayOfObjects」にバインドするとともに、heightを周囲のパネルの高さに対して「100%」になるように設定します。height="100%"></mx:LineChart><mx:LineChart>タグブロックの中に<mx:horizontalAxis>ブロックを追加します。<mx:horizontalAxis></mx:horizontalAxis><mx:horizontalAxis>ブロックの中に<mx:CategoryAxis>タグを追加し、dataProviderを「myArrayOfObjects」にバインドするとともに、categoryFieldにオブジェクトのlabelプロパティを設定します。categoryField="label"/><mx:LineChart>ブロック内の<mx:horizontalAxis>ブロックの下に、<mx:series>ブロックを追加します。<mx:series></mx:series><mx:series>ブロックの中に、<mx:Array>ブロックを追加します。<mx:Array></mx:Array><mx:Array>ブロックの中に、グラフの線を定義する、2つの<mx:LineSeries>タグを追加します。線種(form)を「Curve」に設定し、yFieldとnameの値は、dataProviderから供給されるオブジェクトのvolumeプロパティやrevenueプロパティに対応するようにしておきます。name="Revenue"/>これで完成です。ファイルを保存し、アプリケーションの動作を確認しましょう。ボタンをクリックして、動作を確認ください。</mx:TabNavigator></mx:Application>つぎのステップ是非つぎのチュートリアルに進み、さらにFlexの習得を深めてください。Flex基礎講座(パート1):はじめてのFlexアプリケーション開発Flex基礎講座(パート2):Flex電卓アプリケーションの作成Flex基礎講座(パート4):データモデルの利用このチュートリアルの内容にご関心をお持ちいただけた場合は、Flexにデフォルトで含まれているサンプルアプリケーションなども一度目を通すようにしてください。Flexの搭載機能をデモするサンプルが多数収録されています。Crooks)Macromedia所属カリキュラム開発担当ディレクター。Flex』を含む、インターネットアプリケーション開発関連の数々の教材を執筆。※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容ですこの著者の最近の執筆記事マクロメディア株式会社(マクロメディアカブシキガイシャ)Macromediaは、先端的なソフトウェア会社であり、オープンで統合性のあるWeb開発プラットフォームを通じて、Webプロフェッショナルが魅力あるユーザー体験を提供するためのサービスを提供している。NEW1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。NEW1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。NEW1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。12:00法務担当者、6割超が今後業務で「生成AIを使用したい」と回答。NEW新着記事一覧を見るイベント今後の予定を見るCodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。イラストの無断転載を禁じます。記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。