にたまごほうれん草アーカイブ

はてなダイアリーで書いてた「にたまごほうれん草」という日記のアーカイブです。現在は「にたまごほうれん草ブログ」を運営中です。

AIRアプリでTreeの要素を起動時に全て展開する

最近、デスクトップアプリのモックアップを作るのにAIRを試しています。とりあえず、Flex Builder 3の体験版を使って60日限定でお勉強中です。
で、今回は、ツリービュー形式のメニューを作ろうとしていて、起動時に全て展開している状態にしようとして少し悩んでいました。ようやく一つの方法がわかったので書き留めておきます。

その前に、よく書かれているXMLListを使ったメニューアイテムの記述

例えば、Tree - ActionScript 3.0 言語およびコンポーネントリファレンスの最下部に書かれている方法で最初はやっていたが、expandChildOfメソッドを思い通りに動作させる方法が結局わからなかった。(たぶん、あるのだろうが)

JSONオブジェクトでスクリプト上にツリーアイテムを記述した

それで、Treeコンポーネント作成時のイベントハンドラ中でexpandChildOfすることで動作しました。
以下がこのmxmlコード。

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="390" height="318">
	<mx:Script>
		<![CDATA[
			private var treeItems:Object = { label:"top", children: [
				{ label:"item1", children: [
					{ label: "item1-1" },
					{ label: "item1-2" },
				]},
				{ label:"item2", children: [
					{ label: "item2-1" },
					{ label: "item2-2" },
				]},
				{ label:"item3", children: [
					{ label: "item3-1" },
					{ label: "item3-2" },
				]},
			]};
			
			private function openAllItems(items:Object):void {
				myTree.dataProvider = items;
				myTree.validateNow();                     // (1)
				myTree.expandChildrenOf(treeItems, true); // (2)
			}
		]]>
	</mx:Script>
	<mx:Panel layout="absolute" top="10" left="10" bottom="10" right="10">
		<mx:Tree id="myTree" x="0" y="0" width="100%" height="100%" showRoot="false"
			 creationComplete="openAllItems(treeItems)">
		</mx:Tree>
	</mx:Panel>
	
</mx:WindowedApplication>

(1)と(2)を省略したときは、普通のツリービューにになります。両方書くと、起動時に全てツリーが展開された状態になります。(1)でvalidateNowしているのは、dataProviderへのitemsの設定がすぐには反映されないため、(1)がないコードでは、(2)を書いてもツリーは展開されません。

というわけで

デスクトップアプリを開発するには慣れが必要だなぁ、とか思いました。

参考画像

(1)と(2)を記述しない、または(2)だけ記述した場合

(1)と(2)の両方を記述した場合