利用代码与布局分离技术构建自定义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/