v2_09 介绍ActionScript类编程

v2_09 Programming ActionScript classes  介绍ActionScript类编程

 

ex2_07

 

 很多教程中讲到的跟java类似的概念及写法就不写出来了

 

Mxml与ActionScript的数据绑定,需要在声明实例时带上Bindable

 Bindable 可以写在Class上面,以表明所有字段都是可以绑定的

[Bindable] 
public class Employee

 

但要注意的是,不建议使用全部绑定,因为这样会消耗更多的资源,系统会监控所有字段是否发生变化

所以,应该尽量在需要绑定的数据上进行绑定

 

试试ctrl+shift+c的效果,进行块注释

 

例子:

开始时,EmployeeDisplay.mxml中定义了两个属性

[Bindable] 
public var imageFile:String;
[Bindable]
public var fullName:String; 

  

在引用时,需要绑定两个这两个属性

<components:EmployeeDisplay x="10" y="41" 
imageFile="{firstEmployee.imageFile}" 
fullName="Andrew Brilliam"/>
<components:EmployeeDisplay x="105" y="41"
imageFile="{secondEmployee.imageFile}" 
fullName="Annette Kotter"/> 

  

既然有了Employee对象,那我们就使用这上类来绑定数据

让EmployeeDisplay.mxml持有employee对象

 

该例子最终的效果就是

EmployeeDisplay.mxml作为employee的显示组件,持有employee对象

主程序将从服务端获得的数据绑定到EmployeeDisplay

employee的类型Employee,它有属性及方法两部分.可以自由实现业务逻辑

EmployeeDisplay.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">
	
    <!-- Properties of the parent ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    
    
    
    <!-- Metadata ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    
    
    
    <!-- Styles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    
    
    
    <!-- Script ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    
    <fx:Script>
        <![CDATA[
            
            // import statements ----------------------------------------
            
            import components.Employee;
            // variable declarations ------------------------------------
            
            [Bindable]
            public var employeeData:Employee;
            
            // getter/setters -------------------------------------------
            
            
            // helper methods -------------------------------------------
            
            
            // event handlers -------------------------------------------
                  
        ]]>
    </fx:Script>
    
    <!-- Declarations ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    
    
    
    <!-- UI components ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    
    <mx:Image x="0" y="0" 
        source="images/{employeeData.imageFile}" />
    
    <s:Label x="0" y="80" 
        text="{employeeData.createFullName()}"/>
    
</s:Group>

 

Employee.as

 

package components
{
    public class Employee
    {
        [Bindable]
        public var imageFile:String;
        public var firstName:String;
        public var lastName:String;
        
        public function Employee(fileName:String, fName:String, lName:String)
        {
            imageFile = fileName;
            firstName = fName;
            lastName = lName;
        }
        
        public function createFullName():String
        {
            return firstName + " " + lastName;
        }
    }
}

 

ex2_07_solution.mxml

<?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="1024" minHeight="768" 
    xmlns:components="components.*">
	
    <!-- Exercise 2.07: Creating an ActionScript class and instances -->
    
    <!-- Properties of the parent ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    
    
    
    <!-- Metadata ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    
    
    
    <!-- Styles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    
    
    
    <!-- Script ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    
    <fx:Script>
        <![CDATA[
            import components.Employee;
            
            [Bindable]
            private var firstEmployee:Employee = new Employee("abrilliam.jpg","Andrew","Brilliam");
            
            [Bindable]
            private var secondEmployee:Employee = new Employee("akotter.jpg","Annette","Kotter");
        ]]>
    </fx:Script>
    
    <!-- Declarations ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    
    
    
    <!-- UI components ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    
    <s:Label x="10" y="10" 
        text="Employees" 
        fontWeight="bold" fontSize="20"/>
    
    <components:EmployeeDisplay  x="10" y="41"
        employeeData="{firstEmployee}"/>
    
    <components:EmployeeDisplay x="105" y="41"
        employeeData="{secondEmployee}"/>

</s:Application>