Flex 3使用代码分离构建自定义组件

 

在创建组件时,MXMLActionScript语言有不同的优点和缺点。

·         当你创建一个创建一个符合组件,MXML使得它容易被创建和安置子组件。

·         当你修改组件的行为,也就是说,覆盖他的方法,那么应该使用ActionScript


大多数时间,当创建组件和应用时,同时使用MXMLActionScriptFlex提供几种同时使用MXMLActionScript的途径,包含如下:

·         MXML标记中放置ActionScript代码声明,这使用于内联事件处理

·         <mx:Script>标记中放置ActionScript代码。

·         使用<mx:Script>标记的source属性引入外部ActionScript文件。

·         使用MXML安置组件,把ActionScript代码放在一个类定义中。这种方式被叫做代码分离


要代码behind使用连接ActionScriptMXML,需要让ActionScript类作为MXML组件的更标记。也就是说,MXML组件扩展ActionScript类。

例如,要实现自定义AddressForm组件(显示符合地址登记表),你需要做如下事情:
1
创建一个叫做AddressFormClassActionScript类。你可以使这个类扩展基本的Flex类。既然这样,使用Form容器的布局能力并且使AddressFormClass扩展mx.contain.form 类。
2
创建一个命名为AddressFormMXML组件,并且事他的更标记是AddressFormClass
3
使用MXML布局AddressForm组件的内容
4
使用ActionScript来创建AddressForm组件的逻辑。


提示:你必须声明子组件为公共属性,在ActionScript类中


在下边的例子包含了自定义的AddressForm组件。主程序文件也利用了代码behind,并且这个例子也包含CountryComboxPaddedPanel组件,这些在其他指导中创建的组件。
连接:在构建Flex应用程序时,这被认为是最佳实践架构的引论。更多的信息,查看Arp framework——一个开源的模式基础框架,用来创建FlashFlex应用程序,他使用了代码分离。

数据模型

components/AddressVO.as


package components

{

    public class AddressVO

    {

        // We are using public properties for the

        // value object to keep this example short. In a


        // real-world application, make these properties

        // private and use implicit accessors to expose them

        // so you can do validation, etc. if necessary.

        public var name:String;

        public var street:String;

        public var city:String;

        public var state:String;

        public var country:String;

    }


}

事件模型,定义事件类型和事件对应的数据

components/AddressFormEvent.as

package components

{

    import flash.events.Event;

    import components.AddressVO;


    public class AddressFormEvent extends Event

    {


        public static const SUBMIT:String = "submit";


        private var _data:AddressVO;


        public function AddressFormEvent (eventName:String)


        {

            super (eventName);

        }

       

        public function set data (value:AddressVO):void


        {

            _data = value;

        }

       

        public function get data ():AddressVO

        {


            return _data;

        }

    }

}           

定义视图的模型,处理事件

components/AddressFormClass.as

package components
{
    import mx.events.FlexEvent;
    import mx.controls.Button;
    import mx.controls.TextInput;
    import flash.events.MouseEvent;
    import mx.containers.Form;
   
    public class AddressFormClass extends Form
    {

        // Components in the MXML must be
        // declared public. This is a limitation in
        // the current version of Flex and may change
        // in the future.
        public var submitButton:Button;
        public var nameInput:TextInput;
        public var street:TextInput;
        public var city:TextInput;
        public var state:TextInput;
        public var country:CountryComboBox;
       
        // Constructor

        public function AddressFormClass ():void
        {
            addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler);
        }

       
        // Creation complete is a good time to add event listeners and
        // interact with child components.
        private function creationCompleteHandler (event:FlexEvent):void

        {
            submitButton.addEventListener(MouseEvent.CLICK, submitHandler);
        }
       
        // Gets called when the Submit button is clicked
        private function submitHandler (event:MouseEvent):void

        {
            // Gather the data for this form
            var addressVO:AddressVO = new AddressVO();
            addressVO.name = nameInput.text;
            addressVO.street = street.text;
            addressVO.city = city.text;
            addressVO.state = state.text;
            addressVO.country = country.selectedItem as String;
                       
            var submitEvent:AddressFormEvent = new AddressFormEvent(AddressFormEvent.SUBMIT);
            submitEvent.data = addressVO;
                       
            // Dispatch an event to signal that the form has been submitted

            dispatchEvent(submitEvent);
        }
    }

视图的页面层,这里使用了上面的页面模型

components/AddressForm.mxml

<?xml version="1.0" encoding="utf-8"?>
<custom:AddressFormClass
    xmlns:mx="
http://www.adobe.com/2006/mxml"
    xmlns:custom="components.*">
   <mx:FormItem label="Name">
        <mx:TextInput id="nameInput"/>
    </mx:FormItem>

    <mx:FormItem label="Street">
        <mx:TextInput id="street"/>
    </mx:FormItem>

    <mx:FormItem label="City">
        <mx:TextInput id="city"/>
    </mx:FormItem>

    <mx:FormItem label="State/County">
        <mx:TextInput id="state"/>
    </mx:FormItem>

    <mx:FormItem label="Country">
        <custom:CountryComboBox id="country"/>

    </mx:FormItem>
  
    <mx:Button
        id="submitButton"
        label="Submit"
    />
</custom:AddressFormClass>
 

 

应用层的模型:

components/ApplicationClass.as


package components

{

    import mx.core.Application;

    import mx.events.FlexEvent;

    import mx.controls.Alert;

   

    import components.AddressFormEvent;

    import components.AddressVO;

    import flash.utils.describeType;

   

    public class ApplicationClass extends Application

    {


        // Components in MXML

        public var addressForm:AddressForm;

       

        public function ApplicationClass()


        {

            addEventListener (FlexEvent.CREATION_COMPLETE, creationCompleteHandler);

        }

       

        //

        // Event handlers

        //


        private function creationCompleteHandler(event:FlexEvent):void

        {


            // The custom AddressForm component dispatches a "submit"

            // event the form is submitted. Listen for this.

            addressForm.addEventListener(AddressFormEvent.SUBMIT, submitHandler);

        }

       

        private function submitHandler(event:AddressFormEvent):void


        {

            // Get the value object (data) from the event object

            var data:AddressVO = event.data as AddressVO;

                                   

            // Compose a string to display the contents of the value object to the user.


            var msg:String = "You submitted the following information: /r";

           

            // Use the new introspection API and E4X to get a list of the properties

            // in the data object and enumerate over them to compose the string.

            var dataProperties:XMLList = describeType(data)..variable;

           

            for each (var i:XML in dataProperties)

            {


                var propertyName:String =
i.@name;

                msg += i.@name + ": " + data[i.@name] + "/r";

            }


            // Display the contents of the address form to the user.

            Alert.show(msg, "Thank you for submitting the form!");

        }

    }

应用层的视图

应用程序 MXML 文件

<?xml version="1.0" encoding="utf-8"?>

<custom:ApplicationClass

    xmlns:custom="components.*"


    viewSourceURL="src/CodeBehind/index.html"

    width="400" height="310"

    <custom:PaddedPanel title="Code Behind">


        <custom:AddressForm id="addressForm"/>

    </custom:PaddedPanel>

</custom:ApplicationClass>

 

 

消息流:

用户提交的数据—>submitButton监听到,调用AddressFormClass中的sumbitHandler函数处理,封装的数据到AddressFormEvent中,并转发事件,被注册了AddressFormEventAddressForm监听到,调用ApplicationClass中的submitHandler进行处理。

这个完成了sumbitButton的事件到AddressForm的完美封装。

其中,sumbitButton的事件只负责收集页面的原始数据。而AddressForm的事件才是真正意义上这个自定义控件的事件。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值