This article comes from: http://www.airia.cn/FLEX_Directory/building_components_using_code_behind/
The MXML and ActionScript languages have different advantages and disadvantages when creating components.
- When you create a conformant component, MXML makes it easy to create and place subcomponents.
- When you modify the behavior of a component, that is, override its methods, you should use ActionScript.
Most of the time, when creating components and applications, both MXML and ActionScript are used. Flex provides several ways to use MXML and ActionScript at the same time, including the following:
- Place ActionScript code declarations in MXML tags, which are used for inline event handling
- Place ActionScript code in the tag.
- Use the source attribute of the tag to introduce external ActionScript files.
- Use MXML to place components and put the ActionScript code in a class definition. This approach is called code separation
To connect ActionScript and MXML using code behind, you need to make the ActionScript class a tag for the MXML component. That is, MXML components extend ActionScript classes.
For example, to implement a custom AddressForm component (displaying a matching address registration form), you need to do the following:
1. Create an ActionScript class called AddressFormClass. You can make this class extend the base Flex class. In this case, use the layout capabilities of the Form container and make AddressFormClass extend the mx.contain.form class.
2. Create an MXML component named AddressForm and its tag is AddressFormClass.
3. Use MXML to layout the content of the AddressForm component
4. Use ActionScript to create the logic for the AddressForm component.
Tip: You must declare the subcomponent as a public property in the ActionScript class
The example below contains a custom AddressForm component. The main program file also utilizes code behind, and this example also contains the CountryCombox and PaddedPanel components, which were created in other tutorials.
Connection: This is considered an introduction to best practice architecture when building Flex applications. For more information, check out the Arp framework – an open source pattern-based framework for creating Flash and Flex applications that uses code separation.
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. var submitButton:Button;
public var nameInput:TextInput;
public var street:TextInput;
public var city:TextInput;
public var state:TextInput;
public var country:CountryComboBox;
public function AddressFormClass ():void
{
addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler);
}// Creation complete is a good time to add event listeners and
// interact with child components.{
submitButton.addEventListener(MouseEvent.CLICK, submitHandler); MouseEvent):void{
// Gather the data for this form
var addressVO:AddressVO = new AddressVO();
var addressVO.name = nameInput.text;
addressVO.street = street.text;
addressVO. city = city.text;
addressVO.state = state.text;
addressVO.country = country.selectedItem as String; .SUBMIT);
dispatchEvent(submitEvent);
.
components/AddressForm.mxml
<custom:AddressFormClass
xmlns:mx=”http://www.adobe.com/2006/mxml“
xmlns:custom=”components.*”>
<mx:Button
id=”submitButton”
label=”Submit”
/>
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
<mx:ComboBox xmlns:mx="http://www.adobe.com/%20%202006/mxml“>
United States
United Kingdom
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.
 // 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
<mx:ComboBox xmlns:mx="http://www.adobe.com/%20%202006/mxml“>
United States
United Kingdom
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!”);
}
}
}
Application MXML files
<custom:ApplicationClass
xmlns:custom=”components.*”
viewSourceURL=”src/CodeBehind/index.html”
width=”400″ height=”310″
>
; 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!”);
}
}
}
Application MXML files
<custom:ApplicationClass
xmlns:custom=”components.*”
viewSourceURL=”src/CodeBehind/index.html”
width=”400″ height=”310″
>
微信扫一扫打赏
支付宝扫一扫打赏
