about:config風の設定画面をつくる

設定画面にも色々あるけど、設定項目が山のようにあってもそれなりに使いやすいものとして、Firefoxのabout:configがある。ただ、about:configそのままだと設定項目の解説が必要なので、各行に備考を追加したものを考えてみる。

まずmxmlの設定。肝要はこんな感じ。editableは親をtrueにしないと、子を設定しても意味がない。

<mx:VBox id="tn1" label="詳細設定" width="100%" height="100%">
	<mx:TextInput id="searchbox" width="100%" />
	<mx:DataGrid id="dg" width="100%" height="100%" dataProvider="{setvalue}"
		sortableColumns="true"
		editable="true"
		verticalScrollPolicy="on"
	>
		<mx:columns>
			<mx:DataGridColumn headerText="設定名" dataField="path" editable="false" width="100" />
			<mx:DataGridColumn headerText="設定値" dataField="value" editable="true" width="40" />
			<mx:DataGridColumn headerText="備考" dataField="remarks" editable="false" width="70" />
		</mx:columns>
	</mx:DataGrid>
</mx:VBox>

そして、設定ファイルのxmlをsetvalueに突っ込むわけだが、pathはドット区切りにしたいので、XPathなんかは使えない（それ以前に番号による参照が出てきてpathにするには結構汚い)ので、独自に作る。

rootのxmlだけを引数として投げると、pathをキー、対応するXMLを値とした連想配列を返す。

public function extractPathes(src : XML, path : String = "") : Object
{
	var map : Object = { };
	if (src.hasSimpleContent()) {
		map[path + src.localName()] = src;
		return map;
	}
	path += src.localName() + ".";
	
	for each(var xml : XML in src.children()) {
		mergeObjects(extractPathes(xml, path), map);
	}
	return map;
}

設定xmlは全体をで覆っているので、ただrootを投げるだけだと全ての項にtlife.がついてしまう。rootのchildrenそれぞれについて呼べば消えてくれる。
こんな感じで得た連想配列をsetvalueに加えてやればいい。あと、連想配列なのでデフォルトの並び順はアルファベット順ではない。だから、ソートフィールドをつくってやる。

var sort : Sort = new Sort();
sort.fields = [new SortField("path", true)];
setvalue.sort = sort;
setvalue.refresh();

これでDataGridのほうは完成。次は検索欄。Thread使用前提なのは勘弁＞＜

event(gc.searchbox, Event.CHANGE, onChange);

を仕掛ける。
ArrayCollectionにはfilterFunctionなるおいしい機能があるので、これを使う。

private function onChange(e : Event) : void
{
	gc.setvalue.filterFunction = function(item : Object) : Boolean {
		return item.path.indexOf(gc.searchbox.text) != -1;
	};
	gc.setvalue.refresh();
	next(run);
}

はいできたー。pathだけじゃなくてremarksにも検索通るようにしようかしら。