今回取り上げるコンポーネント

  • 水平リスト【HorizontalList】
  • タイルリスト【TileList】

本記事中のサンプルを表示するには最新のFlashPlayer9が必要です(本稿執筆時点では【9,0,45,0】が最新)。こちらから最新のFlashPlayer9をインストールしてください。また,インストール後はブラウザの再起動が必要です。インストールされているFlash Playerのバージョンを確認するにはこちら

 【mx.controls.HorizontalList】コンポーネント,【mx.controls.TileList】コンポーネントはともに【mx.controls.listClasses.TileBase】を継承しています。TileListはセットされたデータを元にアイテムを網目状に表示します。また,HorizontalListは網目表示に制約を設けることで横に並べて表示するようにしたコンポーネントです。

 テキスト表示だけであればそのままでも使用できるのですが,よく使われるであろう用途としてはフォーマット化されたアイテムを並べて表示することでしょうか。例えば商品の画像,商品名,値段といった情報をひとかたまりにし,並べて表示するなどです。

 この“ひとかたまり”をMXMLコンポーネント/ActionScriptクラスで定義し,TileList/HorizontalListの「itemRenderer」属性("アイテムレンダラー"と読みます)にセットすることで自動的に表示の制御をしてくれます。ただし,ひとかたまりにどのようにデータを表示するかはコーディングする必要があります。

 前回のVSlider/HSliderがSliderを継承しながらも実際のロジックの大半はSliderにあったように,今回のHorizontalList/TileListでも実際のロジックはTileBaseに集約されています。TileBaseのソースをチラッと覗いてみましたが,DataGrid同様にあまり追いたくないソースでした。つまり,標準でできない機能を実現したい時に場合によってはとんでもない工数,またはFlex/ActionScriptの職人が必要になるかもしれないことをお忘れなきように。

1.水平リスト【HorizontalList】

 HorizontalList(*1)は先にも説明しましたとおり「itemRenderer」属性で指定したクラス(フォーマット化されたアイテム)を水平に並べるコンポーネントです。

 では,実際にサンプルを見てみましょう(図1)。

図1:【HorizontalList】サンプル(クリックすると別ウィンドウで表示します。ソースはこちら

 上から順に

1-1.ノーマル
1-2.スクロールが出ると...
1-3.単純なアイテムレンダラーを使用1
1-4.単純なアイテムレンダラーを使用2
1-5.単純なアイテムレンダラーを使用3
1-6.単純なアイテムレンダラーを使用4
1-7.単純なアイテムレンダラーを使用5
1-8.単純なアイテムレンダラーを使用6
1-9.複合型のアイテムレンダラーを使用1
1-10.複合型のアイテムレンダラーを使用2
1-11.複合型のアイテムレンダラーを使用3
1-12.複合型のアイテムレンダラーを使用4
1-13.複数選択
1-14.ドラッグ&ドロップでアイテムを移動1
1-15.ドラッグ&ドロップでアイテムを移動2
1-16.アイテムレンダラーのイベントをキャッチ
1-17.応用例

となります。

 1-1.は文字列の配列を「dataProvider」属性にセットしただけの状態です。「itemRenderer」属性に何もセットせずとも文字列が表示されるのは,デフォルトで「itemRenderer」属性に「mx.controls.listClasses.TileListItemRenderer」(*2)が指定されているからです。

 1-2.はデータを増やしてスクロールバーが表示されました。すると,アイテムがすべて表示されなくなりました。バグのような気もしますが,TileListItemRendererクラスは使用されることはほとんどないと思われるので実害は無いのかもしれません。

 1-3.は「itemRenderer」属性にLabel(*3)を継承したMyRenderer01という自作のMXMLコンポーネントを指定しています。また,このMXMLコンポーネント内で高さ(「height」属性)を明示的にセットしています。すると,アイテムがすっきりと表示されるようになりました。しかし,データとして同じ5文字をセットしているつもりですが,フォントの影響ですべて表示されているアイテムと表示しきれずに省略表示されているアイテムがあります。Labelは通常,幅を明示的に指定しない限り文字列をすべて表示するはずなのですが,表示されていないことからHorizontalListによってアイテムレンダラーの幅が強制されているようです。

 1-4.では「1-3」同様にLabelを継承し,高さと幅を指定しているMyRenderer02を使用しています。これで文字列もすっきり表示されるようになりました。

 1-5.においてアイテムレンダラーは「1-4」と同じですが,HorizontalListの「columnCount」属性を「5」にしています(デフォルトは「4」)。その結果,スクロール操作無しに表示されるアイテムの数が5個になりました。

 1-6.においてアイテムレンダラーは「1-4」と同じですが,HorizontalListの「width」属性をセットしています。その結果,「columnCount」属性のデフォルト値「4」よりも「width」属性が優先されます。

 1-7.においてアイテムレンダラーは「1-4」と同じですが,HorizontalListの「columnWidth」属性を「30」にしています。この属性はアイテムレンダラーの表示領域の幅を「30」にするのではなく,アイテムレンダラー自体の幅を「30」にしている点に注意してください。

 1-8.では「itemRenderer」属性に前回紹介しました「mx.controls.Image」クラス(*4)をセットしています。また,データはイメージのURL(文字列)の配列です。これだけでイメージを表示してくれます。そして,このサンプルでは行の高さ「rowHeight」属性を指定しています。結果的にイメージは適正な大きさで表示されているように見えますが,厳密には違います。

 このサンプルでは「rowHeight」属性を指定しましたが「columnWidth」属性を指定していないためデフォルト値「50」が有効になっています。したがって,もしアイテムレンダラー自体の高さ/幅を指定せずに表示アイテムを適正な大きさに整えたい場合は「columnWidth」属性,「rowHeight」属性の両方を指定する必要があります。

 以下の「1-9」から「1-12」までは,アイテムレンダラーに少し複雑なMXMLコンポーネントを指定しています。