着せ替えのアイテム選択に、FLASH のコンポーネントの一つである、Tree コンポーネントを導入することにしました。
もともとは、普通に ActionScript で独自に作ろうと思ってましたが、使ってみると、操作感よし、いじれるので、標準化と言う意味でもこれで良いかなと思いました。
使用するには、クラス継承して、XML でデータ定義します
import mx.controls.Tree;
class TreeItems extends MovieClip {
var treeXML:XML;
var treeItem:Tree;
function TreeItems() {
// ツリーの外観とイベントハンドラを設定する。
treeItem.setStyle("fontFamily", "_sans");
treeItem.setStyle("fontSize", 12);
// メニュー XML をロードする。
var treeNavMenu = this;
treeXML = new XML();
treeXML.ignoreWhite = true;
treeXML.load("xml/items.xml");
treeXML.onLoad = function() {
treeNavMenu.onMenuLoaded();
};
}
//----------------------------------------------------------------
// (Event) ツリー選択に変更があった場合
//----------------------------------------------------------------
function change(event:Object) {
if (treeItem == event.target) {
var node = treeItem.selectedItem;
// これがブランチの場合は展開および折り畳みを行う。
if (treeItem.getIsBranch(node)) {
treeItem.setIsOpen(node, !treeItem.getIsOpen(node), true);
}
var id = node.attributes.id;
if( id ){
var object = MDObject.GetObject(Number(id));
trace("GetObject ( "+object+" )");
MDObject.VisibleOne(Number(id), false); //表示する
}
// 選択をすべて解除する。
treeItem.selectedNode = null;
}
}
//----------------------------------------------------------------
// (Event) XMLの読み込み完了
//----------------------------------------------------------------
function onMenuLoaded() {
treeItem.dataProvider = treeXML.firstChild;
treeItem.addEventListener("change", this);
}
}
class TreeItems extends MovieClip {
var treeXML:XML;
var treeItem:Tree;
function TreeItems() {
// ツリーの外観とイベントハンドラを設定する。
treeItem.setStyle("fontFamily", "_sans");
treeItem.setStyle("fontSize", 12);
// メニュー XML をロードする。
var treeNavMenu = this;
treeXML = new XML();
treeXML.ignoreWhite = true;
treeXML.load("xml/items.xml");
treeXML.onLoad = function() {
treeNavMenu.onMenuLoaded();
};
}
//----------------------------------------------------------------
// (Event) ツリー選択に変更があった場合
//----------------------------------------------------------------
function change(event:Object) {
if (treeItem == event.target) {
var node = treeItem.selectedItem;
// これがブランチの場合は展開および折り畳みを行う。
if (treeItem.getIsBranch(node)) {
treeItem.setIsOpen(node, !treeItem.getIsOpen(node), true);
}
var id = node.attributes.id;
if( id ){
var object = MDObject.GetObject(Number(id));
trace("GetObject ( "+object+" )");
MDObject.VisibleOne(Number(id), false); //表示する
}
// 選択をすべて解除する。
treeItem.selectedNode = null;
}
}
//----------------------------------------------------------------
// (Event) XMLの読み込み完了
//----------------------------------------------------------------
function onMenuLoaded() {
treeItem.dataProvider = treeXML.firstChild;
treeItem.addEventListener("change", this);
}
}
ほとんど HELP のサンプルそのまんまですが、XML にツリーの内容記述して、それを読み込めば使えるので、データ定義も楽で、変更にも耐えれます。
変に凝るより、普通のアプリケーションの GUI ぽく操作できる方向に変更しようと思います。