Flex模型对象的数据绑定

来源：互联网发布：linux安装tar.xz文件编辑：程序博客网时间：2024/06/05 00:18

在Flex 4 中有两种编写代码的方法：在MXML(.mxml)文件中或在ActionScript 3（.as)文件中编写。模型对象一般使用ActionScript3编写，显示数据界面使用MXML文件。

1、Model模型建立新建ActionScript类代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
package org.jinyan.vo 
{ 
    publicclassStudent
    {
        [Bindable]
        publicvarname:String;
        publicvarage:int;
        publicvargrade:String;
        publicfunctionStudent(name:String="无名",age:int=12,grade:String="七年级")
        {
            this.age=age;
            this.name=name;
            this.grade=grade;
        }
    }
}

其中第4行 [Bindable] 注释确保该变量可以作为数据绑定的源。

2、View建立，新建一个MXML文件代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?xml version="1.0"encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx"minWidth="955"minHeight="600">
      
    <fx:Script>
        <![CDATA[
            importorg.jinyan.vo.Student;
              
            privatevar_student:Student=newStudent("张三",12,"八年级");
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <s:layout>
        <s:VerticalLayout paddingTop="10"paddingLeft="10"/>
    </s:layout>
    <s:HGroup>
        <s:Label text="姓名"/>
        <s:TextInput id="tName"text="{_student.name}"/>
    </s:HGroup>
      
    <s:HGroup>
        <s:Label text="年龄"/>
        <s:TextInput id="age"text="{_student.age}"/>
    </s:HGroup>
      
    <s:HGroup>
        <s:Label text="年级"/>
        <s:TextInput id="grade"text="{_student.grade}"/>
    </s:HGroup>
    <s:Label text="{_student.name+' '+_student.age+' ' + _student.grade}"/>
</s:Application>

3、运行显示效果

总结：模型数据的绑定必须在数据绑定的源属性上使用可绑定注释[Bindable] ，而且在设计引用具有源属性Object的变量上，也要使用[Bindable]注释。双向数据绑定在处理用户界面组件可节省时间，但在模型上使用时要注意。