今回紹介するコンポーネント

  • ツリー【Tree】

 今回から基本的に FlexBuilder 3 を使用して Flex 3 のコンポーネントについて解説していきます。Flex 2 からのコンポーネントで「無くなった」というのはありません。プロパティやメソッドが増えているのはありますが,以前の記事(RIA構築ツールFlexは最新版 Flex 3 でここが変わった)でもお伝えしたとおり,こういったクラスのこまごまとした変更に関する資料が全くありません(本記事の最後のコラムもご覧ください)。ただし,Flex 2 のコードを,ほぼそのまま使用できますし,Flex 4 のリリースが2009年後期(予定)に控えていますので,早い段階で Flex 3 に移行していくほうが良いのではと思います。

 さて,今回は【mx.controls.Tree】コンポーネントを紹介します(Tree コンポーネントのオンラインヘルプ)。階層構造のナビゲーションなどに使われるコンポーネントで,今となっては非常になじみ深いユーザー・インタフェースです。ただし,実際に使うときには十分に注意する必要があります。

 最初にデータ量です。1階層に表示されるノードの数や階層の数が増えると劇的に使い勝手が悪くなります。どこに目的のものがあるのかわからなくなるのです。

 次に,グループ化する以上,ユーザーはそのグループが何であるか,そのグループにどのようなアイテムが属しているのかを前もって知っている必要があります。

 選択させるという使い方以外にもデータ構造を視覚化する使い方も考えられます。しかし,こちらもデータ量が大きくなるとその意味がなくなってしまいます。

 したがって,階層構造のナビゲーションを設ける場合には,十分にユーザーの視点に立って仕様を検討する必要があります。しばしば挙げられる悪い例として,「Microsoft Word のメニュー」があります。どのメニューにどの機能があるか,わかりますでしょうか?

 ユーザビリティの話はこれくらいにして,実際にサンプルを見ていきましょう(図1)。

図1●Tree コンポーネントのサンプル
図1●Tree コンポーネントのサンプル
[クリックすると別ウィンドウで開きます。ソースコードをダウンロードできます]

 上から順に

1-1.ノーマル
1-2.ルートのアイテムを表示しない
1-3.横スクロールバーの表示
1-4.表示領域のトップのものを知る,指定したアイテムをトップにする
1-5.開かれているブランチ
1-6.ブランチの開閉
1-7.クリックされたブランチの開閉
1-8.ダブルクリックされたブランチに含まれるすべてのノード開閉
1-9.クリックされたノードの親を知る
1-10.データデスクリプターの使用 Part 1
1-11.データデスクリプターの使用 Part 2
1-12.アイコンの変更
1-13.アイテムレンダラーを変更

のサンプルになります。

 1-1は,幅/高さ/データをセットしただけの状態です。右向き三角をクリックすると,ツリーのノードを展開できます。使っているデータは,変数「_dataType1」に格納されている Object の多重構造です(図2)。

図2●データ「_dataType1」の構造
図2●データ「_dataType1」の構造
[画像のクリックで拡大表示]

 基本的に「label」という文字列のプロパティと「children」という配列のプロパティからなり,階層化されています。お気づきのように「label」プロパティの値がツリーの各ノードに表示されおり,「children」プロパティを持つノードは「ブランチ(Branch)ノード」になり,「children」プロパティを持たないノードは「リーフ(leaf)ノード」になっています。これはあくまで,Object をベースとした値を dataProvider にセットした場合です。XML を使用した場合はまた後ほど説明いたします。

 データの「branch03」を開いてみてください。リーフノードのラベルが切れているにもかかわらず,横スクロールバーが表示されません。実はツリーは,横スクロールバーを正確に計算して表示することができません。これについても後ほど説明します。

 1-2では,ルートデータを表示しないようにしています。XMLでは,本来ルートノードは一つで,その中に各データが格納されています。そのため,こうした機能があるのだと思います。設定する際には「showRoot」プロパティに「false」をセットします。

 1-3では,横スクロールバーが表示されるようにしました。「1-1」で書いたように Tree コンポーネントは標準状態で横スクロールバーが表示されません。これを表示するようにするには,まず「horizontalScrollPolicy」Styleを「on」,または「auto」にします。しかしこれだけでは表示されません。「maxHorizontalScrollPosition」プロパティに有効な値をセットする必要があります。

 「1-3」で「branch03」を開いてみてください。横スクロールバーが表示されているにもかかわらず,全部は表示できていませんね。「maxHorizontalScrollPosition」プロパティに設定した値がまずかったようです。しかしそもそも,「maxHorizontalScrollPosition」というのはデベロッパが設定するものではなく,コンポーネント内で自動的に計算されるべきものです。しかし,Tree コンポーネントではそれがされません。なぜなのかは筆者にはわかりません(そもそも,List を継承して作成したのが間違いのような気もします)。

 また「maxHorizontalScrollPosition」プロパティは何のために設定しているのかも不明です。挙動を見る限りは階層を一つ掘り下げるごとに横スクロールの値が「maxHorizontalScrollPosition」プロパティの値分ずつ増えているようにも見えます。ですから,実際に横スクロールバーが必要な場合には,横スクロールが正確に計算されるコンポーネントを, Tree を継承して別途作成する必要があるかもしれません。

この先は会員の登録が必要です。今なら有料会員(月額プラン)が2020年1月末まで無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら