Flex 3快速入门（21）: 构建自定义组件 使用代码分离构建自定义组件
?
<custom:AddressFormClass>
?? <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>
?
