创建企业框架－用Flex进行企业开发（二）

本文来自： http://www.insideria.com/2009/05/building-an-enterprise-framewo.html

资源基类

 

Example 3.11, “Class ResourceBase” 说明了ResourceBase类。它是所有元件资源的基类。它可以区别风格和属性。在第二章选定设计模式里，你了解了接受类或函数名称以创建对象实例的类工厂。我们在这里也应用了此技术：利用ResourceBase，可以从类工厂或者类来创建资源实例。

技术上讲，ResourceBase类使用了特定值作为属性或资源。

Example 3.11. Class ResourceBase

 

package com.farata.resources { import com.farata.controls.TextInput; import flash.system.ApplicationDomain; import mx.core.ClassFactory; import mx.core.UIComponent; import mx.utils.StringUtil; public dynamic class ResourceBase { public var resourceProps:Array = []; public var resourceStyles:Array = []; public function load(source:Object):void { for each(var propName:String in resourceProps) { try { if( source[propName]) this[propName]= source[propName] ; } catch (e:Error) {} } for each(var styleName:String in resourceStyles){ try { if(source.getStyle(styleName)) this[styleName] = source.getStyle(styleName); } catch (e:Error){} } } public function apply(target:Object):void { try { for each(var propName:String in resourceProps) if (this[propName]!=undefined) target[propName] = this[propName]; } catch (e:Error) { var error:String = mx.utils.StringUtil.substitute( "Incompatible resource class. Can not apply property {0} of {1} to {2}", [propName,this.toString(), target.toString()] ); throw new Error(error); } try { for each(var styleName:String in resourceStyles) if(this[styleName]) target.setStyle(styleName, this[styleName]); } public static function getResourceInstance(value:Object, styleOwner:Object=null):* { var resClass:Object; if(value is Class) { resClass = Class(value); if (styleOwner) { try { var result:* = new resClass(styleOwner); return result; } catch (e:Error) { return new resClass(); } } else return new resClass(); } else if(value is ResourceBase) return value; else if(value is ClassFactory) return ClassFactory(value).newInstance(); else if (value != null) { var v:String = String(value).replace(/{/,""); v = v.replace(/}/,""); resClass = ApplicationDomain.currentDomain.getDefinition(v); if (styleOwner) { try { var result2:* = new resClass(styleOwner); return result2; } catch (e:Error) { return new resClass(); } } else return new resClass(); } } public function get itemEditor() : UIComponent { return new TextInput(); }}}

 

 

package com.farata.resources { import mx.core.IFactory; import mx.core.UIComponent; import mx.styles.CSSStyleDeclaration; import mx.styles.StyleManager; import com.farata.controls.ComboBox; dynamic public class ComboBoxResource extends ResourceBase { public var autoFill :Boolean = false; public var keyField : String = "data"; public var destination:String=null; public var dropdownWidth : int = 0; public var editable:Boolean = false; public var itemRenderer:IFactory = null; public var labelFunction : Function = null; public var labelField : String = "label"; public var dataField : String = "label"; public var method : String = null; public var width:int=−1; public var dataProvider : Object; public function ComboBoxResource(styleOwner:Object=null) { resourceProps.push("autoFill", "keyField", "destination", "dropdownWidth", "editable","itemRenderer", "labelField", "labelFunction","method", "dataProvider", "width"); var sd:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".comboBoxResource"); if (!sd) { sd = new CSSStyleDeclaration(); StyleManager.setStyleDeclaration(".comboBoxResource", sd, false); sd.setStyle("paddingBottom", 0); sd.setStyle("paddingTop", 0); } if ( styleOwner!= null ) load( styleOwner ); } override public function get itemEditor() :UIComponent { return new ComboBox(); } }}

 

 

<fx:DataGridColumn dataField="DEPT_ID" editable="false"headerText="Department"resource="{com.farata.resources.DepartmentComboResource}"/>

 

 

private var _resource:Object; public function set resource(value:Object):void{ _resource = ResourceBase.getResourceInstance(value, this); if(labelFunction==null) { getLabelFunctionByResource(_resource, this); } } public function get resource():Object{ return _resource; } public static function getLabelFunctionByResource(resourceRef:Object, column:Object):void { var resource:ResourceBase = resourceRef as ResourceBase; if (resource) { if(resource.hasOwnProperty("destination") && resource["destination"]) CollectionUtils.getCollection( function(ev:Event, collection:Object):void { collectionLoaded(collection, column); }, resource.destination, resource.method ); else if (resource.hasOwnProperty("dataProvider") && resource["dataProvider"]) { collectionLoaded( resource.dataProvider, column, safeGetProperty(resource, "labelField", "label"), safeGetProperty(resource, "keyField", "data") ); } } } private static function collectionLoaded(collection:Object, column:Object, labelField:String = null, dataField:String = null):void { if (null == collection) return; labelField = labelField ? labelField : (column["labelField"] != null ? column.labelField : (column.resource.labelField ? column.resource.labelField : "label")); if (!dataField) dataField = column.resource.keyField ? column.resource.keyField : column.dataField; collection = CollectionUtils.toCollection(collection); const options:Dictionary = new Dictionary(); // copy only when collection is non empty if (collection != null && collection.length > 0 ) { const cursor:IViewCursor = collection.createCursor(); do { options[cursor.current[dataField]] = cursor.current[labelField]; } while(cursor.moveNext()) } column.labelFunction = function(data:Object, col:Object):String { var key:* = data is String || data is Number ? data : data[col.dataField]; var res:String = options[key]; return res != null ? res : '' + key; }; }

 

 

column.labelFunction = function(data:Object, col:Object):String { var key:* = data is String || data is Number ? data : data[col.dataField]; var res:String = options[key]; return res != null ? res : '' + key; };

 

 

package com.farata.controls{import com.farata.controls.dataFormClasses.DataFormItem;import flash.events.Event;import mx.collections.ArrayCollection;import mx.collections.ICollectionView;import mx.collections.XMLListCollection;import mx.containers.Form;import mx.core.Container;import mx.core.mx_internal;import mx.events.CollectionEvent;import mx.events.FlexEvent;import mx.events.ValidationResultEvent;public dynamic class DataForm extends Form{ use namespace mx_internal; private var _initialized:Boolean = false; private var _readOnly:Boolean = false; private var _readOnlySet:Boolean = false; public function DataForm(){ super(); addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler); } private var collection:ICollectionView; public function get validators() :Array { var _validators :Array = []; for each(var item:DataFormItem in items) for (var i:int=0; i < item.validators.length;i++) { _validators.push(item.validators[i]); } return _validators; } public function validateAll(suppressEvents:Boolean=false):Array { var _validators :Array = validators; var data:Object = collection[0]; var result:Array = []; for (var i:int=0; i < _validators.length;i++) { if ( _validators[i].enabled ) { var v : * = _validators[i].validate(data, suppressEvents); if ( v.type != ValidationResultEvent.VALID) result.push( v ); } } return result; }[Bindable("collectionChange")] [Inspectable(category="Data", defaultValue="undefined")] /** * 在表单里显示dataProvider属性数据组； * 此属性可以让你把大部分对象当作数据提供者使用。 */ public function get dataProvider():Object{ return collection; } public function set dataProvider(value:Object):void{ if (collection){ collection.removeEventListener(CollectionEvent.COLLECTION_CHANGE, collectionChangeHandler); } if (value is Array){ collection = new ArrayCollection(value as Array); } else if (value is ICollectionView){ collection = ICollectionView(value); } else if (value is XML){ var xl:XMLList = new XMLList(); xl += value; collection = new XMLListCollection(xl); } else{ // convert it to an array containing this one item var tmp:Array = []; if (value != null) tmp.push(value); collection = new ArrayCollection(tmp); } collection.addEventListener(CollectionEvent.COLLECTION_CHANGE, collectionChangeHandler); if(initialized) distributeData(); } public function set readOnly(f:Boolean):void{ if( _readOnly==f ) return; _readOnly = f; _readOnlySet = true; commitReadOnly(); } public function get readOnly():Boolean{ return _readOnly; } /** * This function handles CollectionEvents dispatched from the data provider * as the data changes. * Updates the renderers, selected indices and scrollbars as needed. * * @param event The CollectionEvent. */ protected function collectionChangeHandler(event:Event):void{ distributeData(); } private function commitReadOnly():void{ if( !_readOnlySet ) return; if( !_initialized ) return; _readOnlySet = false; for each(var item:DataFormItem in items) item.readOnly = _readOnly; } private function distributeData():void { if((collection != null) && (collection.length > 0)) { for (var i:int=0; i<items.length; i++) { DataFormItem(items[i]).data = this.collection[0]; } } } private var items:Array = new Array(); private function creationCompleteHandler(evt:Event):void{ distributeData(); commitReadOnly(); } override protected function createChildren():void{ super.createChildren(); enumerateChildren(this); _initialized = true; commitReadOnly(); } private function enumerateChildren(parent:Object):void{ if(parent is DataFormItem){ items.push(parent); } if(parent is Container){ var children:Array = parent.getChildren(); for(var i:int = 0; i < children.length; i++){ enumerateChildren(children[i]); } } } }}

 

private function distributeData():void { if((collection != null) && (collection.length > 0)) { for (var i:int=0; i<items.length; i++) { DataFormItem(items[i]).data = this.collection[0]; } } }

 

 

 

 

package com.farata.controls.dataFormClasses { import com.farata.controls.DataForm; import csom.farata.controls.MaskedInput; import com.farata.core.UIClassFactory; import com.farata.resources.ResourceBase; import com.farata.validators.ValidationRule; import flash.display.DisplayObject; import flash.events.Event; import flash.events.IEventDispatcher; import flash.utils.getDefinitionByName; import mx.containers.FormItem; import mx.events.FlexEvent; import mx.validators.Validator; dynamic public class DataFormItem extends FormItem { public function DataFormItem() { super(); } private var _itemEditor:IEventDispatcher; //DataFormItemEditor; [Bindable("itemEditorChanged")] [Inspectable(category="Other")] mx_internal var owner:DataForm; private var _dataField:String; private var _dataFieldAssigned:Boolean = false; private var _labelAssigned:Boolean = false; private var _valueName:String = null; private var _readOnly:Boolean = false; private var _readOnlySet:Boolean = false; public function set readOnly(f:Boolean):void{ if( _readOnly==f ) return; _readOnly = f; _readOnlySet = true; commitReadOnly(); } public function get readOnly():Boolean { return _readOnly; } public function set dataField(value:String):void{ _dataField = value; _dataFieldAssigned = true; } public function get dataField():String{ return _dataField; } override public function set label(value:String):void { super.label = value; _labelAssigned = true; } public function set valueName(value:String):void{ _valueName = value; } public function get valueName():String { return _valueName; } override public function set data(value:Object):void{ super.data = value; if(_itemEditor) if (_itemEditor["data"] != value[_dataField]) _itemEditor["data"] = value[_dataField]; for ( var i : int = 0; i < validators.length; i++) { if ( validators[i] is ValidationRule && data) validators[i]["data"]= data; validators[i].validate(); } } override protected function createChildren():void{ super.createChildren(); if(this.getChildren().length > 0) { _itemEditor = new DataFormItemEditor(this.getChildAt(0), this); _itemEditor.addEventListener(Event.CHANGE, dataChangeHandler); _itemEditor.addEventListener(FlexEvent.VALUE_COMMIT, dataChangeHandler); } } public function get itemEditor():Object { return _itemEditor; } private var _validators :Array = []; public function get validators() :Array { return _validators; } public function set validators(val :Array ): void { _validators = val; } public var _dirtyItemEditor:Object; public function set itemEditor(value:Object):void{ _dirtyItemEditor = null; if(value is String){ var clazz:Class = Class(getDefinitionByName(value as String)); _dirtyItemEditor = new clazz(); } if(value is Class) _dirtyItemEditor = new value(); if(value is UIClassFactory) _dirtyItemEditor = value.newInstance(); if(value is DisplayObject) _dirtyItemEditor = value; } private function dataChangeHandler(evt:Event):void{ if (evt.target["data"]!==undefined) { if (data != null) { data[_dataField] = evt.target["data"]; } } } private var _resource:Object; public function set resource(value:Object):void{ _resource = ResourceBase.getResourceInstance(value); invalidateProperties(); } public function get resource():Object{ return _resource; } private function commitReadOnly():void{ if( _itemEditor==null ) return; if( !_readOnlySet ) return; if( Object(_itemEditor).hasOwnProperty("readOnly") ) { Object(_itemEditor).readOnly = _readOnly; _readOnlySet = false; } } override protected function commitProperties():void{ super.commitProperties(); if(itemEditor == null) //no child controls and no editor from resource { var control:Object = _dirtyItemEditor; if(!control && getChildren().length > 0) control = getChildAt(0); //user placed control inside if(!control) control = itemEditorFactory(resource as ResourceBase); if(resource) resource.apply(control); if( (control is MaskedInput) && hasOwnProperty("formatString")) control.inputMask = this["formatString"]; addChild(DisplayObject(control)); //Binding wrapper to move data back and force _itemEditor = new DataFormItemEditor(DisplayObject(control),this); _itemEditor.addEventListener(Event.CHANGE, dataChangeHandler); _itemEditor.addEventListener(FlexEvent.VALUE_COMMIT, dataChangeHandler); } else control = itemEditor.dataSourceObject; commitReadOnly(); for ( var i : int = 0; i < validators.length; i++) { var validator : Validator = validators[i] as Validator; validator.property = (_itemEditor as DataFormItemEditor).valueName; validator.source = control; if ( validator is ValidationRule && data) validator["data"]= data; validator.validate(); } } protected function itemEditorFactory(resource : ResourceBase = null):Object{ var result:Object = null; if (resource && ! type) result = resource.itemEditor; else { switch(type) { case "checkbox": result = new CheckBox(); if (!resource) { resource = new CheckBoxResource(this); resource.apply(result); } break; case "radiobutton": result = new RadioButtonGroupBox(); if (!resource) { resource = new RadioButtonGroupBoxResource(this); resource.apply(result); } break; case "combobox": result = new ComboBox(); if (!resource) { resource = new ComboBoxResource(this); resource.apply(result); } break; case "date": result = new DateField(); if (formatString) (result as DateField).formatString = formatString; break; case "datetime": result = new DateTimeField(); if (formatString) (result as DateTimeField).formatString = formatString; break; case "mask": result = new MaskedInput(); break; } } if(result == null && formatString) result = guessControlFromFormat(formatString); if(result == null) result = new TextInput(); return result; } protected function guessControlFromFormat(format:String):Object{ var result:Object = null; if(format.toLowerCase().indexOf("currency") != −1) result = new NumericInput(); else if(format.toLowerCase().indexOf("date") != −1){ result = new DateField(); (result as DateField).formatString = format; } else{ result = new MaskedInput(); (result as MaskedInput).inputMask = format; } return result; } }}

 

 

for ( var i : int = 0; i < validators.length; i++) { var validator : Validator = validators[i] as Validator; validator.property = (_itemEditor as DataFormItemEditor).valueName; validator.source = control; if ( validator is ValidationRule && data) validator["data"]= data; validator.validate(); }

 

 

<lib:DataForm dataProvider="employeeDAO"> <mx:HBox> <mx:Form> <lib:DataFormItem dataField="EMP_ID" label="Emp Id:"/> <lib:DataFormItem dataField="EMP_FNAME" label="First Name:"/> <lib:DataFormItem dataField="STREET" label="Street:"/> <lib:DataFormItem dataField="CITY" label="City:"/> <lib:DataFormItem dataField="BIRTH_DATE" label="Birth Date:" formatString="shortDate"/> <lib:DataFormItem dataField="BENE_HEALTH_INS" label="Health:" resource="{com.farata.resources.YesNoCheckBoxResource}"/> <lib:DataFormItem dataField="STATUS" label="Status:" resource="{com.farata.resources.StatusComboResource}"/> </mx:Form> <mx:Form> <lib:DataFormItem dataField="MANAGER_ID" label="Manager Id:"/> <lib:DataFormItem dataField="EMP_LNAME" label="Last Name:"/> <lib:DataFormItem dataField="STATE" label="State:" resource="com.farata.resources.StateComboResource"/> <lib:DataFormItem dataField="SALARY" label="Salary:" formatString="currency" textAlign="right"/> <lib:DataFormItem dataField="START_DATE" label="Start Date:" formatString="shortDate"/> <lib:DataFormItem dataField="BENE_LIFE_INS" label="Life:" resource="{com.farata.resources.YesNoCheckBoxResource}"/> <lib:DataFormItem dataField="SEX" label="Sex:" resource="{com.farata.resources.SexComboResource}"/> </mx:Form> <mx:Form> <lib:DataFormItem dataField="DEPT_ID" label="Department:" resource="{com.farata.resources.DepartmentComboResource}"/> <lib:DataFormItem dataField="SS_NUMBER" label="Ss Number:" itemEditor="{com.theriabook.controls.MaskedInput}" formatString="ssn"/> <lib:DataFormItem dataField="ZIP_CODE" label="Zip Code:" formatString="zip"/> <lib:DataFormItem dataField="PHONE" label="Phone Number:" itemEditor="{com.theriabook.controls.MaskedInput}" formatString="phone"> <lib:validators> <mx:Array> <mx:PhoneNumberValidator wrongLengthError="keep typing"/> </mx:Array> </lib:validators> </lib:DataFormItem> <lib:DataFormItem dataField="TERMINATION_DATE" label="Termination Date:" formatString="shortDate"/> <lib:DataFormItem dataField="BENE_DAY_CARE" label="Day Care:" resource="{com.farata.resources.YesNoCheckBoxResource}"/> </mx:Form> </mx:HBox></lib:DataForm>

 

 

http://www.insideria.com/2009/05/building-an-enterprise-framewo.html

该代码是从第一章的Café Townsend （Clear Data Builder版）的选段。运行应用程序Employee_getEmployees_GridFormTest.mxml, 双击网格行，你会看到DataForm在运行中。在本章的下一节，你会看到有验证器的DataForm 和 DataGrid的其它范例。

下一节讨论了在元件里隐藏的验证程序的优点，并提供了一个应用程序范例以说明怎样使用这些验证程序及ValidationRuleclass的功能。同时，Example 3.16, “Code fragment that uses DataForm and DataFormItem”展示了一名应用程序开发人员可以怎样使用DataForm, DataFormItem, 和资源。请注意在缺省状态下，DataFormItem呈现TextInput元件。

Example 3.16. Code fragment that uses DataForm and DataFormItem

从上面的代码你会看到，你可以使用字符串，对象，类工厂或者UI元件的实例作为DataFormItem的itemEditor属性。函数createChildren()为CHANGE和VALUE_COMMIT事件添加了事件监听者，并且当事件被发送时，dataChangeHandler()将表单条目里的UI控件使用的数据属性的提供值推入底层集合内的对象的data.dataField属性里。

资源设置器允许应用程序开发人员以本章前面所探讨的处理DataGrid的方式一样的方法利用资源。

函数commitReadonly() 确保表单条目上的readOnly属性仅在条目创建后设定。

函数itemEditorFactory() 支持根据指定类型属性从资源创建表单条目元件，请求根据格式字符串创建控件。guessControlFromFormat() 是可根据应用程序需求进行拓展的函数，但是在上面的代码里，如果请求currency格式，它仅仅使用NumericInput元件，如果指定date 格式，它使用DateField。如果指定未知格式，代码则假定应用程序开发人员需要屏蔽，因此创建MaskedInput。

记住当创建一个元件时，Flex安排调用函数commitProperty()以协调对元件属性的修改。它也作为调用invalidateProperties()的应用程序代码的结果被调用。函数commitProperties()检测itemEditor是否未被定义。如果答案是否，则创建itemEditor，添加事件监听者。如果itemEditor存在，代码从itemEditor里提取与此表单条目一起使用的UI控件。

下一步，数据表单条目用实例说明了应用程序开发人员指定的验证程序。代码将所有提供的验证程序与数据表单条目绑定：

在这个案例中，FormItem执行绑定功能；在Flex框架里，<mx:FormItem>会在封装的UI元件里设定或获取一个值，但是现在DataFormItem将执行绑定任务。将任何对象赋值给DataFormItem的dataField属性项会自动将该值传递给密封元件。如果，应用程序开发人员决定使用表作为表单条目，赋值给DataFormItem的数据用于表对象处理。关键是，应用程序开发人员会以统一的方式使用此控件，不论对象是否封装在DataFormItem里。

第二个功能，创建UI控件，在资源的帮助下得以执行，从而不仅明确了元件的样式操作，还可以确定使用什么元件。如果你回到类ResourceBase的代码，你会发现一个getter itemEditor, 可用来创建控件。实际上，你就有了两种灵活的方式为表单创建控件：或指定资源名称，或指定一个元件作为itemEditor=myCustomComponent。如果没有采用上述方法，则会创建一个默认

TextInput控件。

上面所示代码优点类似于最初的FormItem，但是给代表表单条目的元件添加了新的强大属性。表单条目的数据存储在DataForm的dataProvider里所指定的数据集合的EMP_ID属性里。标签属性发挥了和在FormItem里一样的角色。

DataFormItem元件的源代码显示在Example 3.15, “Class DataFormItem”.里。如同在DataGrid里一样，它首先定义属性dataField, valueName 和 itemEditor。DataGridItem可从字符串，对象或类工厂创建一个itemEditor。它还可定义数组验证程序，本章下半部分会进行探讨。

Example 3.15. Class DataFormItem

<lib:DataFormItem dataField="EMP_ID" label="Emp Id:">

  <mx:TextInput/>

</lib:DataFormItem>

代码通常处理集合的零元素，因为表单通常有一个对象，该对象的数据与表单绑定。这样的设计类似Flex DataGrid的数据变量的功能，对每个栏，都提供一个代表整个行的对象参照。

再次强调下，我们需要将提供的数据包装到一个集合中，以支持来自LCDS的DataCollection 或DataService。

技术上讲，DataForm 类是一个 Vbox，按两列排列其子类，并自动对齐表单项的标签。DataForm应该允许嵌套，或包含一些表单项，这些表单项同时也是 DataForm 对象的实例。递归函数 enumerateChildren() 轮巡表单的子项，如果它发现一个 DataFormItem，它只是将其添加到数组项。但是如果该子项是一个容器，则该函数会轮巡其子项，并将它们添加到相同的项数组。最后，属性项包含所有必须填充的 DataFormItem。

注意函数validateAll()封装在DataForm里，它在 Flex 框架中位于Validator类中。在那里，验证功能对表单元素是外部的，你需要给出一组附加了特定表单字段的验证程序。

我们的DataForm元件是自给自足的－其验证程序内嵌，在不同的视图或者应用程序里使用同一个表单较之依赖外部验证程序的最初的Flex Formobject要简单些。

DataFormItem元件

DataFormItem是Flex FormItem的拓展，是框架的下一个元件。不过此元件比起它的前辈来要“谦逊”一些。DataFormItem 应该不太了解其代表性，可渲染任何UI元件。设计新的Flex4元件也就是分立它们的UI和功能。

一个典型的表单上至少一半的控件是文本域。其中一些使用面具输入格式化值如电话号码。大部分其它的表单条目也就是复选框和单选按钮。这些控件（和其它你可能需要的）都只是使用资源而已。表单也使用组合框。在小节“DataGrid with Resources”里，说明了可以怎样使用基于资源的类工厂在DataGrid里放置组合框和其它元件。现在，你会看到怎样利用同样的技术使表单拥有灵活的表单条目。

DataFormItem是一个绑定对象，为DataForm内的控件创建。有些类似于BindingUtil的功能，支持双向绑定，分辨循环引用。DataFormItem有两个主要功能：

将内部的一个个别控件附加到DataFormItemEditor的实例上，以监听底层kongijan的更改。

创建一个UI控件（或缺省控件，或依据被请求的输入遮罩或资源）。

第一个功能要求DataFormItem控件支持封装其它控件的语法。在FormItem里执行，例如：

我们来看下 DataForm 类的代码。注意设置器 dataProvider，它总是将提供的数据包装到一个集合中，以确保我们的 DataForm 像 DataGrid 一样支持远程数据服务。它检查值的数据类型。它将 Array 包装到 ArrayCollection 中，而 XML 变为 XMLListCollection。如果您需要更改存储表单数据的支持集合，只需要将集合变量指向新数据。

如果将单个对象作为 dataProvider 提供，将其转变为一个元素的数组，然后转变为一个集合对象。Model 的一个实例提供了一个很好的例子，它是一个知道如何分派有关其属性更改的事件的 ObjectProxy。

有时，应用程序开发人员需要呈现不可编辑的表单，因此 DataForm 类定义了 readOnly 属性。

底层数据的更改被传递给方法 collectionChangeHandler() 中的表单。该数据既可以在 dataProvider 中更改，也可以从 UI 更改，而且 DataForm 确保每个可见的 DataFormItem 对象 (items[i]) 知晓该更改。这是在函数 distributeData() 中完成的：

此闭包使用外部定义的字典选项。闭包上面的代码遍历数据提供者，在字典里创建下列条目：

1, John

2, Paul

3, Mary

因此，由此data provider 返回的res的值将是John, Paul, 和Mary。

这几行代码为真实的，受益于初级开发员可编程的异步上传代码标的情况提供了一个实实在在的解决方案。该代码和将数据值翻译成John 和Mary, Alaska 和Pennsylvania，或部门名一样。

注

使用资源，不仅是编写这些类的开发员，外部人员也可以以类似CSS的方式获得UI控件的属性和风格。前面章节的资源范例清楚表明它们是完备的，易懂，可以被任何人用来当作BSS的产出物。

 

你可以创建资源作为风格，属性和事件监听者的集合。此集合也允许提供类名称以供使用。你还可以创建一个类工厂，用来产生此类资源实例。

从技术上讲，任何资源都是一个抽象的类工厂，发挥和基于XML的可配置属性在Java EE里一样的功能。但是这一解决方案要求编辑和链接所有资源，这样就可以更好地配置使用注释的Java对象。提醒下，在Flex里，CSS也可以被汇编。

总而言之，资源具备以下优点：

它们可汇编，运作快捷。

因为便于理解，初级程序员可以进行处理。

你可以从一个资源上继承另一个资源，Flex Builder会向你提供上下文敏感的帮助，而Flex汇编器也会帮助你确认数据类型错误。你可以附加资源到DataGridColumn，并使用它们取代条目渲染器。

对编程自动化而言，资源是个良好的开始。在第六章，你会熟悉另外一个有用的Flex元件，叫DataCollection, 是ArrayCollection和RemoteObject的结合，它进一步减少了人工编程的工作量。

数据表

在这一节里，你会继续给企业框架添加元件。很少有企业应用程序不使用数据表的，因此Flex Form元件是进行强化的一个很好的帮手。每个表格都有底层的模式对象，表单元素与模式里的数据场绑定。

Flex 3仅仅支持单向数据绑定：表单的更改会自动传到数据模式的场上。但是如果数据模式有所变更，你想更新表单，你就要手动编程，在一个方向使用大括号语法，在另外一个方向使用BindingUtils.bindProperty() 。

 

Flex4 引入新的特征：双向绑定。添加一个@符号到绑定的表达式@{expression} 。关于数据修改的通知会双向发出－从表单到模式，从模式到表单。尽管这有助于一些基本的情况（表单上的文本字段与模式对象里的文本属性绑定），如果你想使用除STRING之外的其它数据类型，双向绑定并没有多大用处。

例如，对于使用标准Flex<mx:CheckBox>元件的表单来说，双向绑定的用处就不大。你准备绑定什么呢？如果CheckBox被选定，服务器端的应用程序收到1，如果没选定，就收到0。你不能仅仅是把选定的属性绑定到底层对象上的数值性数据属性上。为了体会双向绑定，你需要使用不同的元件组，与你在本章节构建的元件组类似。

 

当模式是移动的目标时，绑定无效。设想以下一个典型的主/明细场景：使用者双击DataGrid里的一行，有关选定行的细节在表单里显示。在第一章选定Flex框架的比较，你读到了一个范例：

双击Figure 1.19, “Removing the filter to keep generated Java code”里的一个网格行，打开显示了网格里选定employee细节的表单。这就是你准备浏览的强化版表单元件的巧妙。

 

将表单绑定到数据网格行，必须处理一个移动模式；用户选定另外一行。现在呢？绑定的源不同了，你需要想出另外一个方法更新表单数据。

 

当你使用大括号来定义使用简单标志的数据绑定时，汇编器生成额外的代码提供支持。但是最后，需要执行Observer 设计模式，并且当对象属性改变时，需要编写代码发送事件通知注册依赖项。在Java里，编写此代码的就是程序员；在Flex里，是也使用模式注册事件监听者的编译器。

Flex提供表单类，应用程序员将此表单类绑定到代表数据模式的对象上。用户更改UI表单里的数据，模式也被更改。但是最初的表单执行没有途径跟踪数据更改。

如果表单控件（绑定到其模式DataCollection上）可支持类似功能，自动跟踪与ChangeObject类兼容的所有更改，而ChangeObject类使用远程数据服务执行的话，就很好。执行此类功能是首要强化的。

 

第二个改进在数据验证域。强化的数据表单应该能够验证单个表单条目，还能验证整个表单。数据表单应该提供一个API用于存储和读取在表单内，而不是外部全局对象内，的验证程序。这样，表单就成为了自足的黑匣子，有它所需要的一切。（关于验证过程可改进部位的细节，参阅“验证”章节）。

在与商务用户初步的会见中，软件开发员应该快速创建布局展示和批准原始功能，而无需等待设计员想出恰当的像素完美控件和布局。

 

因此，你的第三个目标就是制作视图原型。除了需要统一的控件外，致力于原型开发的软件开发人员会倍感轻松，如果他们不需要明确回答在数据表单上设置哪种控件。这种表单的第一版可以使用 TextInput 控件，但是下一版可以使用 ComboBox 代替。如果你想要一个 UI 中立的数据表单项，该表单项将不是特定的，比如“我是一个 TextInput”或“我是一个 ComboBox”。相反，开发人员将可以使用容易附加的资源，使用一般的数据项创建原型。

 

数据表单元件

实现三方面改进的解决方案就是：一个叫DataForm的新元件（Example 3.14, “Class DataForm”)。DataForm 是 FlexForm 的子类，其代码实现双向绑定，并且包含一个新的属性 dataProvider。其函数 validateAll() 支持数据验证。此 DataForm 组件将正确响应数据更改，将它们传递到其 data provider。

 

Example 3.14. Class DataForm

假定你有一个DataGrid和一个 ComboBox，它们的值是1,2和3，应该显示为John, Paul, 和Mary。这些值是从远程DBMS异步检索到的。但是你不能确定John, Paul, 和Mary是在DataGrid被填充之前还是之后到达。上述代码用propertyresource拓展了DataGridColumn，并且核查应用程序开发员是否提供了labelFunction。如果没有，代码会尝试着根据资源“算”出labelFunction。

如果资源有目的地设置，而方法已定义为Example 3.9, “StateComboBoxResource with hard-coded states”里的DepartmentComboResource，代码上传收集系统，然后根据已上传数据创建labelFunction (参见collection Loaded() method) 。

 

资源可能如Example 3.8, “A CheckBox resource”所示带有已填充的dataProvider，或者来自dataProvider的数据可能从服务器上传。当dataProvider被填充，collectionLoaded() 方法会检查dataProvider的数据，并创建labelFunction。下面的代码将一个labelFunction在fly上，作为获取数据的动态函数，并且寻找文本以显示在网格上。

附在DataGridColumn的资源不但设定了栏的属性，也确定了此栏的条目渲染器和编辑器。

在第二章选定设计模式里已讨论过，如果你把类工厂当作数据网格栏（data grid column）的条目渲染器，类工厂就会变得非常强大。使用这个方法，你还可以在工厂提供的对象里封装很多属性和风格。例如，你可通过添加Example 3.13, “Enabling resources support in DataGridColumn”所示的代码段在强化的code fragment基础上支持资源：

Example 3.13. Enabling resources support in DataGridColumn

就你的企业框架来说，这个类必须一次性编写，之后任何初级程序员都可轻松创建和更新在本章Example 3.9, “StateComboBoxResource with hard-coded states” 和 Example 3.10, “Sample DepartmentComboResource configured for a remote destination” 显示的资源，如DepartmentComboResource 或StateComboResource。

与CSS类似，应该将资源编成单独的SWF文件。它们在运行时可被上传和重新上传，你在第七章可了解到更多有关类装载器的知识。

具有资源的DataGrid

这些资源最有意思的部分就是你不但可以将它们附加在常用的控件上，也可以附加到动态控件如DataGridColumn上。例如，下一个代码段指导DataGridColumn (已被强化，可在clear.swc中获得)转换为code snippet，并且根据Example 3.9, “StateComboBoxResource with hard-coded states” 里显示的被配置的资源DepartmentComboResource填充数据。

当应用程序员为Flex UI控件的一个特别种类设计资源时，他们就是从ResourceBase类来拓展（或以此为基础建立MXML元件），并且如果需要，列出变量和缺省值的名称。

ResourceBase类依靠两组数组：resourceProps 和 resourceStyle。当应用程序开发员创建了具体的资源时，他们也必须填写这些数组。Example 3.12, “Sample ComboBoxResource” 说明执行样本类ComboBoxResource。注意是怎样用构造函数里的数据填充数组resourceProps的。

Example 3.12. Sample ComboBoxResource