Solution: Handle the ‘itemEditEnd’ Event dispatched by the datagrid.

Codes:

	/**
	 * validate user input, revert the original value if necessary.
	 */
	protected function datagirdTest_itemEditEndHandler(event:DataGridEvent):void {
		if(event.dataField != "Name") { // chech the field;
			return;
		}
		var input:String = (datagirdTest.itemEditorInstance as TextInput).text; // get the user input data.
		if(input == null || input == "") {
			event.preventDefault(); // prevent default behavior
			// var filed:String = (datagirdTest.columns[event.columnIndex] as DataGridColumn).editorDataField;
			// trace(datagirdTest.itemEditorInstance[filed]);
			(datagirdTest.itemEditorInstance as TextInput).text = (event.itemRenderer.data as XML).Name;// Undo: revert the original data by the selected item.
			Alert.show(errorMesg);
			return;
		}
	}

Screen caputre:

User input is empty, we got the Event, prevent the default behavior, and revert the value form the modeling.

Ref:

1. itemEditEnd called multiple times http://forums.adobe.com/message/2459209
2. Using cell editing events  – http://livedocs.adobe.com/flex/3/html/help.html?content=celleditor_7.html

----------Post from: @LiGuoliang.com, 欢迎回来~----------

点击左侧目录后:

具体实现:

初始化时:

		//Main - Maincontent
		vboxMainRightcontent = new VBox();
		empListContainer = new MainContent();
		empListContainer.visible = false;
		vboxMainRightcontent.addChild(empListContainer);
		//----------------------------加入button 测试 invilidate...----------
		testButton.label = "我是来测试的";
		vboxMainRightcontent.addChild(testButton);
		empListContainer.explicitHeight = 0;//注意此处, 设置为0方可不占用界面中的场地, 注意在visable设置为true之后还要进行相应的调整
		empListContainer.explicitWidth = 0;

左侧目录被点击后:

//---------------------------------Listeners------------------------
	//Listener - onListChange
	private function onDepListChange(e:ListEvent):void {
		_empListContainer.visible = _treeDepCat.selectedItem != null;

		if(_empListContainer.visible) {
		        _empListContainer.explicitHeight = undefined;//将explicitHeight复原, 否则虽然已经visable, 但其宽高都是0 仍无法可见.
		       _empListContainer.explicitWidth = undefined;
		}else {
			_empListContainer.explicitHeight = 0;
			_empListContainer.explicitWidth = 0;
		}

----------Post from: @LiGuoliang.com, 欢迎回来~----------

作者:http://liguoliang.com 欢迎访问:Adobe上海用户组: http://riashanghai.com ]

一:目标

设计一个自定义组件,可以通过该UI初步读取或设置文件属性.

二:设计

概要设计:

* 1.界面使用checkbox.分别对应Ower,Group,Public的Read,Write,Excute权限
* 2.定义变量
* 3.定义get set函数,定义checkbox状态与permission的转换函数,相关Event;

详细设计:

命名:

组件名称:PermissionUI;

各checkbox命名:checkOwnerRead, checkOwnerWrite, checkOwerExecute, checkGroupRead, …, checkPublicExecute.

变量命名:private _permission;

函数命名: 初始化函数:private function init(); public function set permission(); public function get permission(); checkbox状态转换[permissioncheckbox状态改变响应函数]:private function checkHandler();permission转换为checkbox状态函数 public function permissionToCheck();

代码:

1.初始化:

/**
* 初始化Array与Dictionary,Array用于存放所有的checkbox,Dictionary为以checkbox为Key,以checkbox对应Permission为值的Dictionary;
* 用于在checkbox与permission之间的转换,即SET与GET函数中通过Permission转换为Checkbox状态与将checkbox状态转换为Permission;
*
* 注意Array中存放的并非为各个checkbox的id[即其变量名称],而是对象,也就是说Array中存放的是9个checkbox.同时Dict中的Key也是checkbox;
*/
private function inint():void{
_checkBoxArray = [checkOwerRead,checkOwerWrite,checkOwerExecute,checkGroupRead,checkGroupWrite,checkGroupExecute,
checkPublicRead,checkPublicWrite,checkPublicExecute];
_checkBoxAndPermissionDict = new Dictionary();
_checkBoxAndPermissionDict[checkOwerRead] = 400;
_checkBoxAndPermissionDict[checkOwerWrite] = 200;
_checkBoxAndPermissionDict[checkOwerExecute] = 100;
_checkBoxAndPermissionDict[checkGroupRead] = 40;
_checkBoxAndPermissionDict[checkGroupWrite] = 20;
_checkBoxAndPermissionDict[checkGroupExecute] = 10;
_checkBoxAndPermissionDict[checkPublicRead] = 4;
_checkBoxAndPermissionDict[checkPublicWrite] = 2;
_checkBoxAndPermissionDict[checkPublicExecute] = 1;
}

2.get函数

/**
* 定义Get函数,并设定为Bindable,以便在set之后立即改变permission的值
*/

[Bindable]
public  function get permission():int {
trace("get method is called");
return _permission;
}

3.set函数:

/**
* SET函数.通过传来的_permission值确定各个checkbox的选定状态;
* 调用函数permissionTocheck()来完成任务
*/

public function set permission(permission_:int):void {
_permission = permission_;
trace("set method called");
trace(_permission);
permissionToCheck();
}

4.checkbox状态转换[permissioncheckbox状态改变响应函数]:

/**
* 定义checkHandler函数,在checkbox状态改变时将其状态转换为permission值.
* 如果permission值改变,广播该事件,以便相关Bindable的值改变.
* 如果将_permission = _value变为permission = _value,则call一次set函数,导致checkbox的一次更新;
* 但后果就是因checkbox状态改变而导致permission改变,但因为调用了set函数,checkbox状态将更新一次.
* 即:因checkbox引起的改变又引起了checkbox的改变.
* 如果不使用propertyChangeEvent,则会引起死循环.
*
* 该函数通过循环checkBoxArray,遍历每一个checkbox,检查其是否被选中,如果被选中,则临时变量_value增加该checkbox在_checkBoxAndPermissionDict中对应的value.
* 达到通过判断checkbox选定状态,来确定_permission值的目的;
*/
public function checkHandler():int {
var _value:int = 0;
var i:int;
if (_checkBoxArray == null || _checkBoxAndPermissionDict == null){
inint();
}
for(i=0; i<_checkBoxArray.length; i++){
if (_checkBoxArray[i].selected == true){
_value += _checkBoxAndPermissionDict[_checkBoxArray[i]];
}
}

trace("Current Permission is " + _permission);
var _old:int = _permission;
_permission = _value;
// dispatch PropertyChanged Event,以便于Binding.定义的_old用于存放最初的permission值.
//_permission为最新的值.如有不同则dispatch,便于更新TestPermission的数据,完成get方法.
this.dispatchEvent(mx.events.PropertyChangeEvent.createUpdateEvent(this,"permission",_old,_permission));
return _permission;
}

5.permission转换为checkbox状态函数:

/**
* 通过遍历每个checkbox,判断临时变量temp[值为set函数的参数]与checkbox在Dict中对应值得大小来确定该checkbox是否选定,
* 因为Dict中的每个value都是从大到小排列的,如果temp大于某checkbox的对应value,则可以确定该checkbox需要选定.
* 同时,为了配合前端的手动修改,会通过直接修改permission而不是通过checkbox来修改permission,
* 必须应该每个checkbox在选定之前取消选定,否则前面选定的checkbox在permission手动修改之后仍旧保持选定状态.该语句置于for循环之内,
* 保证每次判断或是操作checkbox之前取消其选定状态.
*/
public function permissionToCheck():void {
var i:int;
var temp:int = _permission;
if (_checkBoxArray == null || _checkBoxAndPermissionDict == null){
inint();
}
for (i = 0; i<_checkBoxArray.length; i++){
_checkBoxArray[i].selected = false;
if (temp >=  _checkBoxAndPermissionDict[_checkBoxArray[i]]){
_checkBoxArray[i].selected = true;
temp -= _checkBoxAndPermissionDict[_checkBoxArray[i]];
}
}
trace("permission to check ");
}

三:测试

编写测试:

<![CDATA[
import com.Check;
[Bindable]
public var testPermissionUI:PermissionUI = new PermissionUI();
/**
* 初始化.
* 新建一个PermissionUI,放置于(20,20);
* 使用时可以将permission初始化为某获取文件权限的函数的返回值.
* 此处测试为707,同时将初始值在permissionTextInput中显示.
*/
public function onCreationComplete():void {
testPermissionUI.x = 20;
testPermissionUI.y = 20;
addChild(testPermissionUI);
testPermissionUI.permission = 707;

}
/**
* 用户手动修改permission的时候调用该函数,然后使用set permission,使用给出的permission确定各个checkbox的状态.
*/
public function setPermission():void{
testPermissionUI.permission = int(permissionTextInput.text);
}

四:抓图

五:出现问题及解决方法

1.MXML中自定义组件的使用.

由于对自定义组件理解不够深入,导致在测试时拖入permissionUI时无法使用,于是新建一个permissionUI,但仍旧无法运行.原因是拖入的自定义组件虽然显示并没有真正使用,而通过new permissionUI()创建的组件因为没有add,导致没有显示出来.应将自定义组件当作普通组件一样使用,拉入后应添加ID,以在函数中使用.也可通过AS代码中new来实例化,但必须通过addchild()使之显示于容器中.

2.对象与String,ID

在最开始的_checkBoxArray设计中,我使用了

_checkBoxArray = ["checkOwerRead","checkOwerWrite","checkOwerExecute","checkGroupRead","checkGroupWrite","checkGroupExecute",
"checkPublicRead","checkPublicWrite","checkPublicExecute"];

在后续使用中使用了_checkBoxArray[i].selected

误以为只要名字与对应ID相同,便可对checkbox进行操作,但实际情况是作为string的checkOwerRead,是不具有 selected的属性的,只有作为checkbox才能使用该属性,将上述数组中的string元素换为checkbox元素即可.因为数组中是可以存放Object的,且Dictionary中key可以为任意类型.这是与HashMap不同的,HashMap的Key只能为String类型.

3.算法设计.

checkbox与int转换的最初思路:

1.checkbox–>int:分别判断checkbox是否被点击,如果checkOwnerRead被点击,则int自加400,如果是checkOwnerWrite被选中,则int再自增200,以此类推.

2.int–>checkbox:将int每一位分离出来,如果第一位为7,则Owner列全部选中,如果为6,则选中Read跟Write,如果为5,则选中Excute与Read,以此类推,实现非常复杂.

但如果使用Array与Dictionary组合,则会极大减少工作量.

1.checkbox–>int:通过遍历checkBoxArray中每个checkbox,检查其是否被选中,如果被选中,则int增加checkBoxAndPermissionDict中对应的value.

2.int–>checkbox:通过遍历每个checkbox,判断int与checkbox在中checkBoxAndPermissionDict对应值得大小来确定该checkbox是否选定.

4.测试时手动输入属性的实现

最开始时仅仅将input中的输入数值赋给permission,调用了set函数,但并不能有效完成任务.通过分析发现,因为之前初始化的 permission以将部分checkbox选中,新set的值在permissionToCheck()时,只会将应该选定但没有选定的 checkbox选中,但已经选定的checkbox不会变化,于是在permissionToCheck()的for循环中加入了:

_checkBoxArray[i].selected = false;

由于该语句置于for循环之内,保证每次判断或是操作checkbox之前取消其选定状态.

六:相关知识点总结

1.Bindable

2.自定义事件

3.Array Dictionary

----------Post from: @LiGuoliang.com, 欢迎回来~----------