23、Flex 三快速入门: 处理数据定义数据模型

2012-11-23

23、Flex 3快速入门: 处理数据定义数据模型Flex 3快速入门: 处理数据定义数据模型mx:Application ??? xm

23、Flex 3快速入门: 处理数据定义数据模型
Flex 3快速入门: 处理数据定义数据模型<mx:Application
??? xmlns:mx="http://www.adobe.com/2006/mxml"
??? horizontalAlign="center" verticalAlign="middle"
??? width="360" height="240"
>
??? 
??? <mx:Model id="modelEmployee">
??????? <employee>
??????????? <name>
??????????????? <first>{employeeName.text.substring(0, employeeName.text.indexOf(" "))}</first>
??????????????? <last>{employeeName.text.substring(employeeName.text.indexOf(" ")+1)}</last>
??????????? </name>
??????????? <department>{employeeDepartment.selectedItem}</department>
??????????? <email>{employeeEmail.text}</email>
??????? </employee>
??? </mx:Model>

??? 
??? <mx:Script>
??????? <![CDATA[
??????????? import mx.controls.Alert;
??????????? private function addEmployee(event:MouseEvent):void
??????????? {
??????????????? var message:String = "Name: ";
??????????????? message += modelEmployee.name.first + " " + modelEmployee.name.last + "\r";
??????????????? message += "Department: " + modelEmployee.department + "\r";
??????????????? message += "Email: " + modelEmployee.email;
??????????????? Alert.show(message, "New employee added!");???
??????????? }
??????? ]]>
??? </mx:Script>

??? 
??? <mx:Panel title="New employee details">
??????? <mx:Form>
??????????? <mx:FormItem label="Name:">
??????????????? <mx:TextInput id="employeeName"/>
??????????? </mx:FormItem>
??????????? <mx:FormItem label="Department:" width="100%">
??????????????? <mx:ComboBox id="employeeDepartment">
??????????????????? <mx:dataProvider>
??????????????????????? <mx:String>Administration</mx:String>
??????????????????????? <mx:String>CEO's Office</mx:String>
??????????????????????? <mx:String>Development</mx:String>
??????????????????????? <mx:String>Finance</mx:String>
??????????????????????? <mx:String>IT</mx:String>
??????????????????????? <mx:String>Support</mx:String>
??????????????????? </mx:dataProvider>
??????????????? </mx:ComboBox>
??????????? </mx:FormItem>
??????????? <mx:FormItem label="Email:">
??????????????? <mx:TextInput id="employeeEmail"/>
??????????? </mx:FormItem>
??????? </mx:Form>
??????? <mx:ControlBar horizontalAlign="center">
??????????? <mx:Button label="Add employee" click="addEmployee(event);"/>
??????? </mx:ControlBar>
??? </mx:Panel>
</mx:Application>

使用基于脚本的模型

作为可替代基于MXML模型的方式，可以在<mx:Script>标记中定义数据模式。下边的例子与前一个实现的功能相同，不过是把模式定义在ActionScript脚本块中。

提示：如果你想更简单的通过大括号语法使用数据绑定，那么在MXML中定义你的数据。

在下边的例子中，在ActionScript中定义一个层次结构对象的数据模型。在initailize事件处理器中，增加updateModel方法作为view视图中的form元素的change事件处理器。updateModel()方法类似于View Helper。他检查你视图中控件的值并且使用你输入到控件中的值更新数据模型。你也可以定义validateModel()方法，他在数据模型上执行非常简单的校验并且设置一个modeValid标志。绑定Add employee按钮到modelValid标志，这样，用户只有模型符合逻辑时才能被提交。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
??? xmlns:mx="http://www.adobe.com/2006/mxml"
??? viewSourceURL="src/DataModelsModelAS/index.html"
??? horizontalAlign="center" verticalAlign="middle"
??? width="360" height="240"
??? initialize="initializeHandler(event);"
>
??? <mx:Script>
??????? <![CDATA[
??????????? import mx.events.FlexEvent;
??????????? import mx.controls.Alert;
??????????? // Boolean to keep track of valid the model is valid
??????????? [Bindable]
??????????? public var modelValid:Boolean = false;
??????????? // Model
??????????? private var modelEmployee:Object =
??????????? {
??????????????? name:
??????????????? {
??????????????????? first:"",
??????????????????? last:""
??????????????? },
??????????????? department:"",
??????????????? email:""
??????????? }
??????????? // Set up listeners for form item change events
??????????? // when the application starts.
??????????? private function initializeHandler(event:FlexEvent):void
??????????? {
??????????????? employeeName.addEventListener(Event.CHANGE, updateModel);
??????????????? employeeDepartment.addEventListener(Event.CHANGE, updateModel);
??????????????? employeeEmail.addEventListener(Event.CHANGE, updateModel);
??????????? }???????????
??????????? // Gets called when a form item on the view changes.
??????????? // Acts like a View Helper: It inspects the view to
??????????? // update the model with data supplied by the user.
??????????? private function updateModel(event:Event):void
??????????? {
??????????????? // Split the employee's full name string into
??????????????? // first name and last name strings.
??????????????? var employeeFullName:String = employeeName.text;
??????????????? var nameSpaceIndex:uint = employeeFullName.indexOf(" ");
??????????????? var employeeFirstName:String = employeeFullName.substring(0, nameSpaceIndex);
??????????????? var employeeLastName:String = employeeFullName.substring(nameSpaceIndex+1);
??????????????? // Store data values from the view in the model.
??????????????? modelEmployee.name.first = employeeFirstName;
??????????????? modelEmployee.name.last = employeeLastName;
??????????????? modelEmployee.department = employeeDepartment.selectedItem;
??????????????? modelEmployee.email = employeeEmail.text;
??????????????? // Do some simple validation on the model.
??????????????? validateModel();
??????????? }
??????????? // A very simple custom validation method.
??????????? private function validateModel():void
??????????? {
??????????????? modelValid =
??????????????????? modelEmployee.name.first != "" &&
??????????????????? modelEmployee.name.last != "" &&
??????????????????? modelEmployee.department != "" &&
??????????????????? modelEmployee.email != "";????
??????????? }
??????????? // The handler for the Add employee button
??????????? private function addEmployee(event:MouseEvent):void
??????????? {
??????????????? // Display the data values in the model
??????????????? var message:String = "Name: ";
??????????????? message += modelEmployee.name.first + " " + modelEmployee.name.last + "\r";
??????????????? message += "Department: " + modelEmployee.department + "\r";
??????????????? message += "Email: " + modelEmployee.email;
??????????????? Alert.show(message, "New employee added!");???
??????????? }
??????? ]]>
??? </mx:Script>

??? <mx:Panel title="New employee details">
??????? <mx:Form>
??????????? <mx:FormItem label="Name:">
??????????????? <mx:TextInput id="employeeName"/>
??????????? </mx:FormItem>
??????????? <mx:FormItem label="Department:" width="100%">
??????????????? <mx:ComboBox id="employeeDepartment">
??????????????????? <mx:dataProvider>
??????????????????????? <mx:String>Administration</mx:String>
??????????????????????? <mx:String>CEO's Office</mx:String>
??????????????????????? <mx:String>Development</mx:String>
??????????????????????? <mx:String>Finance</mx:String>
??????????????????????? <mx:String>IT</mx:String>
??????????????????????? <mx:String>Support</mx:String>
??????????????????? </mx:dataProvider>
??????????????? </mx:ComboBox>
??????????? </mx:FormItem>
??????????? <mx:FormItem label="Email:">
??????????????? <mx:TextInput id="employeeEmail"/>
??????????? </mx:FormItem>
??????? </mx:Form>
??????? <mx:ControlBar horizontalAlign="center">
??????????? <mx:Button
??????????????? label="Add employee"
??????????????? enabled="{modelValid}"
??????????????? click="addEmployee(event);"
??????????? />
??????? </mx:ControlBar>
??? </mx:Panel>
</mx:Application>

? 使用基于类的模型

使用基于脚本，或基于MXML的数据模型是，你无法定义模型类型。要定义属性类型，你必须使用基于类的数据模型。

当使用带类型的属性存储复杂数据结构，或者你想要一句应用程序数据执行客户端业务逻辑时，使用类作为数据模型是一个非常好的选择。当数据模型传递到服务器端数据服务时，基于类数据模型的类型信息也会被保留下来。

下边的例子展示了雇员数据模型被定义为EmployeeModel 的ActionScript类。EmployeeModel半含各种类型的属性，还有存取器方法，简单的自定义iaoyan方法，和一个返回Transfer对象的方法

注意：Tranfer对象（也被称作值对象）是一个将但对象，它只包含了业务逻辑某些单元需要的数据。在下边的例子中，Employee tranfer对象只包含描述员工的属性的各类型。它不想数据模型类那样，拥有方法。Transfer对象在使用不同技术的层次间传递数据时特别有用。比如FlashRemoting(一种数据传输机制，Flex Data Service也使用这种机制)和JSON，它是序列化反序列化复杂对象存取在不同对象且包含类型信息。

关于Transfer对象的更多信息，查看他们在Arpframework中是如何使用的。

当使用一个基于类的数据模型时，你可以在AS或MXML中实例化他们。下边的例子中，在MXML中实例化数据模型，并且设置它的id属性为modelEmployee。然后，当定义用户界面的时候，绑定某form控件到数据模型属性上，并且使用change时间管饱来将form控件的值跟新到数据模型中。

例子
EmployeeModel.as

package
{
??? public class EmployeeModel
??? {
??????? private var _firstName:String = "";
??????? private var _lastName:String = "";
??????? private var _department:uint = 0;
??????? private var _email:String = "";
???????
??????? [Bindable]
??????? public var modelValid:Boolean = false;
???????
??????? [Bindable]
??????? public var departments:Array;
??????? public function EmployeeModel()
??????? {
??????????? departments =
??????????? [
??????????????? "Administration",
??????????????? "CEO's Office",
??????????????? "Development",
??????????????? "Finance",
??????????????? "IT",
??????????????? "Support"
??????????? ];
??????? }
??????? public function set name(employeeFullName:String):void
??????? {
??????????? // Split the employee's full name string into
??????????? // first name and last name strings and store them separately.???????????
??????????? var nameSpaceIndex:uint = employeeFullName.indexOf(" ");
??????????? _firstName = employeeFullName.substring(0, nameSpaceIndex);
??????????? _lastName = employeeFullName.substring(nameSpaceIndex+1);
??????????? // Do some simple validation on the model.
??????????? validateModel();
??????? }
??????? [Bindable]
??????? public function get department():uint
??????? {
??????????? return _department;
??????? }
??????? public function set department(department:uint):void
??????? {
??????????? _department = department;
??????????? validateModel();
??????? }
??????? public function set email(email:String):void
??????? {
??????????? _email = email;
??????????? validateModel();
??????? }
??????? public function get name():String
??????? {
??????????? return firstName + " " + lastName;
??????? }
??????? public function get firstName():String
??????? {
??????????? return _firstName;
??????? }
??????? public function get lastName():String
??????? {
??????????? return _lastName;
??????? }
??????? public function get departmentName():String
??????? {
??????????? return departments[_department];
??????? }
??????? public function get email():String
??????? {
??????????? return _email;
??????? }
??????? // Returns a Transfer Object (also known as a Value Object).
??????? public function get transferObject():EmployeeTO
??????? {
??????????? var employeeTO:EmployeeTO = new EmployeeTO();
??????????? employeeTO.firstName = firstName;
??????????? employeeTO.lastName = lastName;
??????????? employeeTO.department = department;
??????????? employeeTO.email = email;
??????????? return employeeTO;
??????? }
???????????????
??????? // A very simple custom validation method.
??????? private function validateModel():void
??????? {
??????????? modelValid =
??????????????? firstName != "" &&
??????????????? lastName != "" &&
??????????????? email != "" && email.indexOf("@") < email.indexOf(".");
??????? }
??? }
}

EmployeeTO.as

package
{
??? public class EmployeeTO
??? {
??????? public var firstName:String;
??????? public var lastName:String;
??????? public var department:uint;
??????? public var email:String;
??? }
}

MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
??? xmlns:mx="http://www.adobe.com/2006/mxml"
??? viewSourceURL="src/DataModelsModelAS/index.html"
??? horizontalAlign="center" verticalAlign="middle"
??? width="360" height="240"
??? xmlns:local="*"
>
??? <mx:Script>
??????? <![CDATA[
??????????? import mx.controls.Alert;
??????????? // The handler for the Add employee button
??????????? private function addEmployee(event:MouseEvent):void
??????????? {
??????????????? // Display the data values in the model
??????????????? var message:String = "Name: ";
??????????????? message += modelEmployee.lastName + ", " + modelEmployee.firstName + "\r";
??????????????? message += "Department: " + modelEmployee.departmentName + "\r";
??????????????? message += "Email: " + modelEmployee.email;
??????????????? Alert.show(message, "New employee added!");???
??????????? }
??????? ]]>
??? </mx:Script>
??? <local:EmployeeModel id="modelEmployee"/>
??? <mx:Panel title="New employee details">
??????? <mx:Form>
??????????? <mx:FormItem label="Name:">
??????????????? <mx:TextInput
??????????????????? id="employeeName"
??????????????????? change="{modelEmployee.name = employeeName.text;}"
??????????????? />
??????????? </mx:FormItem>
??????????? <mx:FormItem label="Department:" width="100%">
??????????????? <mx:ComboBox
??????????????????? id="employeeDepartment"
??????????????????? dataProvider="{modelEmployee.departments}"
??????????????????? selectedIndex="{modelEmployee.department}"
??????????????????? change="{modelEmployee.department=employeeDepartment.selectedIndex;}"
??????????????? />
??????????? </mx:FormItem>
??????????? <mx:FormItem label="Email:">
??????????????? <mx:TextInput
??????????????????? id="employeeEmail"
??????????????????? change="{modelEmployee.email=employeeEmail.text;}"
??????????????? />
??????????? </mx:FormItem>
??????? </mx:Form>
??????? <mx:ControlBar horizontalAlign="center">
??????????? <mx:Button
??????????????? label="Add employee"
??????????????? enabled="{modelEmployee.modelValid}"
??????????????? click="addEmployee(event);"
??????????? />
??????? </mx:ControlBar>
??? </mx:Panel>
</mx:Application>

<mx:Application
??? xmlns:mx="http://www.adobe.com/2006/mxml"
??? viewSourceURL="src/DataModelsXMLTag/index.html"
??? horizontalAlign="center" verticalAlign="middle"
??? width="360" height="240"

>
???
??? 
??? <mx:XML id="modelEmployee" format="e4x">
??????? <employee>
??????????? <name>
??????????????? <first>{employeeName.text.substring(0, employeeName.text.indexOf(" "))}</first>
??????????????? <last>{employeeName.text.substring(employeeName.text.indexOf(" ")+1)}</last>
??????????? </name>
??????????? <department>{employeeDepartment.selectedItem}</department>
??????????? <email>{employeeEmail.text}</email>
??????? </employee>
??? </mx:XML>

??? 
??? <mx:Script>
??????? <![CDATA[
??????????? import mx.controls.Alert;
??????????? private function addEmployee (event:MouseEvent):void
??????????? {
??????????????? var message:String = "Name: ";
??????????????? message += modelEmployee.name.first + " " + modelEmployee.name.last + "\r";
??????????????? message += "Department: " + modelEmployee.department + "\r";
??????????????? message += "Email: " + modelEmployee.email;
??????????????? Alert.show(message, "New employee added!");???
??????????? }
??????? ]]>
??? </mx:Script>

??????????? <mx:FormItem label="Department:" width="100%">
??????????????? <mx:ComboBox id="employeeDepartment">
??????????????????? <mx:dataProvider>
??????????????????????? <mx:String>Administration</mx:String>
??????????????????????? <mx:String>CEO's Office</mx:String>
??????????????????????? <mx:String>Development</mx:String>
??????????????????????? <mx:String>Finance</mx:String>
??????????????????????? <mx:String>IT</mx:String>
??????????????????????? <mx:String>Support</mx:String>
??????????????????? </mx:dataProvider>
??????????????? </mx:ComboBox>
??????????? </mx:FormItem>

??????????? <mx:FormItem label="Email:">
??????????????? <mx:TextInput id="employeeEmail"/>
??????????? </mx:FormItem>
??????? </mx:Form>

??????? <mx:ControlBar horizontalAlign="center">
??????????? <mx:Button label="Add employee" click="addEmployee(event);"/>
??????? </mx:ControlBar>
??? </mx:Panel>
???
</mx:Application>

热点排行

flex

23、Flex 三快速入门: 处理数据 定义数据模型

23、Flex 三快速入门: 处理数据定义数据模型