DataGridとパスワードをつかうためのサンプル

パスワードのマスキングとか

itemRendererにTextInput指定して、displayAsPasswordとかすれば楽っぽいんですけどitemEditorを使う方法で...。

• labelFunctionのマスキング用の関数を指定
• itemEditorにPasswordEditor.mxmlみたいなコンポーネントを指定してあげること。TextInputのdisplayAsPassword="true"は必須で

はまりどころしては、PasswordEditor.mxmlなどでtextプロパティなどで値をセットしておかないと、いつの間にか値そのものが"*****"になってしまう点。ソースコードは、昨日のhttp://d.hatena.ne.jp/shogo4405/20090510/1241957645のソースに追加

PasswordEditor.mxml

<?xml version="1.0"?>
<mx:TextInput displayAsPassword="true" xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:creationComplete>
	<![CDATA[
		text = data.name;
	]]>
	</mx:creationComplete>
</mx:TextInput>

Main.mxml

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*">
	<mx:Script>
		<![CDATA[
		import mx.controls.*;
		import mx.collections.*;
		import mx.controls.dataGridClasses.DataGridColumn;

		public function getSexname(item:Object, column:DataGridColumn):String
		{
			var type:Number = item.sex;
			return (type == 0) ? "女性" : "男性";
		};

                // マスキング用の関数
		public function masking(item:Object, column:DataGridColumn):String{
			return new Array(item.name.length + 1).join("*");
		};

		public function debug():void
		{
			trace(list.getItemAt(0).sex);
			trace(list.getItemAt(0).name);
		};

		[Bindable]
		public var list:ArrayCollection =  new ArrayCollection(
			[ { no:1, name:"Taro", sex: 1 }, { no:2, name:"Hanako", name:"Hanako", sex: 0 } ]
		);
		]]>
	</mx:Script>

	<mx:DataGrid width="100%" height="100%" dataProvider="{list}" editable="true">
		<mx:columns>
			<mx:DataGridColumn dataField="no" editable="false" />
			<mx:DataGridColumn dataField="name" labelFunction="{masking}" itemEditor="PasswordEditor" />
			<mx:DataGridColumn dataField="sex" labelFunction="{getSexname}" editorDataField="value" itemEditor="SexEditor" />
		</mx:columns>
	</mx:DataGrid>
	
	<mx:Button click="debug();" />

</mx:Application>

そもそも

そもそもDataGridでパスワード編集させる仕様にするなよ！っていう突っ込みは無です。