自定义组件--分布代码组件

Example

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:ComboBo</mx:ComboBox>

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!");

}

}

}

Main application MXML file

<?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>