利用代码与布局分离技术构建自定义Flex组件

XML和ActionScript在创建组件方面各有优缺点：

• 在创建复合组件时，MXML可以时创建过程变得很容易，并且方便于对子控件进行布局。
• 在修改组件行为时，我们可以用ActionScript来修改他们的方法。

大多数时候，我们会使用MXML和ActionScript结合的方式来创建Flex组件和应用。

Flex提供了多种方式来结合使用MXML和ActionScript，包括以下几点：

• 直接将ActionScript语句直接放到MXML标记内。这常常会在定义内联时事件句柄时使用。
• 将ActionScript放入<mx:Script>标签内。
• 用<mx:Scriopt>标签来包含外部的。
• 使用MXML代码来做代码布局，并把ActionScript放在类定义中。这就是我们所知的代码隐藏。

要想同时使用ActionScript和MXML并把代码隐藏起来，我们需要把ActionScript类作物MXML组件的根标签；也就是说，你的MXML组件需要继承ActionScript类。例如创建一个用于显示地址输入自定义的AddressForm组件，就需要按以下步骤进行操作：

1. 首先创建一个叫做AddressFormClass的ActionScript类，然后让这个类继承一个Flex类。这样的话我们就可以使用Form容器的布局能力并让AddressFormClass继承mx.containers.Form类。
2. 创建一个叫做AddressForm的MXML组件，并把AddressFormClass作为它的根标签。
3. 用MXML为ActionForm组件的内容进行布局。
4. 用ActionScript为ActionForm组件创建逻辑。

提示：我们必须在ActionScript类中把子控件定义为公共访问。

下面的例子包含了上面描述的自定义组件AddressForm。主应用程序文件利用了代码隐藏技术，例子也把我们在其他教程中创建的CountryComboBox和PaddedPanel组件添加了些特性。

扩展：在创建Flex应用时把本篇当作一个练习介绍。对于更多的信息，请参考Arp框架 — 一个利用代码隐藏技术来创建Flash和Flex应用的开源的基于样式的框架。

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/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/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/PaddedPanel.as

package components
{
    import mx.containers.Panel;
    public class PaddedPanel extends Panel
    {
        public function PaddedPanel()
        {
            // Call the constructor of the superclass.
            super();
            
            // Give the panel a uniform 10-pixel 
            // padding on all four sides.
            setStyle ("paddingLeft", 10);
            setStyle ("paddingRight", 10);
            setStyle ("paddingTop", 10);
            setStyle ("paddingBottom", 10);
        }
    }
}

components/CountryComboBox.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:dataProvider>    
        <mx:String>United States</mx:String>
        <mx:String>United Kingdom</mx:String>
        <!-- Add all other countries. -->
    </mx:dataProvider>
</mx:ComboBox>

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>

原文地址：http://www.adobe.com/devnet/flex/quickstart/building_components_using_code_behind/