Flex 3快速入门: 构建自定义组件 使用代码分离构建自定义组件
来源:互联网 发布:php内页设为首页代码 编辑:程序博客网 时间:2024/09/21 08:17
本文来自:http://www.airia.cn/FLEX_Directory/building_components_using_code_behind/
在创建组件时,MXML和ActionScript语言有不同的优点和缺点。
- 当你创建一个创建一个符合组件,MXML使得它容易被创建和安置子组件。
- 当你修改组件的行为,也就是说,覆盖他的方法,那么应该使用ActionScript。
大多数时间,当创建组件和应用时,同时使用MXML和ActionScript。Flex提供几种同时使用MXML和ActionScript的途径,包含如下:
- 在MXML标记中放置ActionScript代码声明,这使用于内联事件处理
- 在<mx:Script>标记中放置ActionScript代码。
- 使用<mx:Script>标记的source属性引入外部ActionScript文件。
- 使用MXML安置组件,把ActionScript代码放在一个类定义中。这种方式被叫做代码分离
要代码behind使用连接ActionScript和MXML,需要让ActionScript类作为MXML组件的更标记。也就是说,MXML组件扩展ActionScript类。
例如,要实现自定义AddressForm组件(显示符合地址登记表),你需要做如下事情:
1. 创建一个叫做AddressFormClass的ActionScript类。你可以使这个类扩展基本的Flex类。既然这样,使用Form容器的布局能力并且使AddressFormClass扩展mx.contain.form 类。
2. 创建一个命名为AddressForm的MXML组件,并且事他的更标记是AddressFormClass。
3. 使用MXML布局AddressForm组件的内容
4. 使用ActionScript来创建AddressForm组件的逻辑。
提示:你必须声明子组件为公共属性,在ActionScript类中
在下边的例子包含了自定义的AddressForm组件。主程序文件也利用了代码behind,并且这个例子也包含CountryCombox和PaddedPanel组件,这些在其他指导中创建的组件。
连接:在构建Flex应用程序时,这被认为是最佳实践架构的引论。更多的信息,查看Arp framework——一个开源的模式基础框架,用来创建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;
// Constructorpublic 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 submitteddispatchEvent(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 MXMLpublic 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>
- Flex 3快速入门: 构建自定义组件 使用代码分离构建自定义组件
- Flex 3入门教程: 使用代码分离构建自定义组件
- Flex 3使用代码分离构建自定义组件
- Flex 3快速入门: 构建自定义组件 部署组件
- 使用代码分离构建自定义组件
- Flex 3快速入门: 构建自定义组件 在 MXML 中构建组件
- Flex 3快速入门: 构建自定义组件 在ActionScript 中构建组件
- Flex 3快速入门: 构建自定义组件 在ActionScript 中构建组件
- 利用代码与布局分离技术构建自定义Flex组件
- Flex 3快速入门: 构建高级用户界面 使用 Repeater 组件
- Flex 3入门教程: 在ActionScript 中构建自定义组件
- Flex 3入门教程: 在 MXML 中构建自定义组件
- Flex 3在MXML中构建自定义组件
- Flex 3在ActionScript 中构建自定义组件
- 构建自定义组件
- 构建自定义组件
- 构建自定义组件
- 构建自定义组件
- COM 数组参数
- [学习] FPGA之基本原理(可能理解不对)
- Hibernate中Criteria的完整用法
- 股票入门:对K线图的具体分析
- Flickr 网站架构研究
- Flex 3快速入门: 构建自定义组件 使用代码分离构建自定义组件
- Flex 3快速入门: 构建自定义组件 部署组件
- sql 小应用
- 要人命的小细节~
- wap标签之select
- C#对switch语句的优化
- 浅析C++中的this指针
- 堆排序
- [转贴]DOS联盟 灰色按键杀手.bat 全文