22、Flex 3快速入门: 构建自定义组件 部署组件
?
??????????? }
??????????? // Display the contents of the address form to the user.
??????????? Alert.show(msg, "Thank you for submitting the form!");
??????? }
??? }
}
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>
要创建SWC文件，确定compc编译器在你的系统路径中（如果没有，添加到PATH环境变量中）。从QuickStartLibrary 文件夹开始，输入如下命令：
compc -source-path+=.
-output=bin/QuickStartLibrary.swc
-include-classes components.AddressForm
?? components.AddressFormClass
?? components.AddressFormEvent
?? components.AddressVO
?? components.ApplicationClass
?? components.CountryComboBox
?? components.PaddedPanel
注意：打字先前的命令在一个单独的行。前边是多行是为了清晰。
提示：你使用compc编译器创建SWC文件时，通过命名空间，或者manifest文件你可以包含任意数量的组件。这可以避免命令行变得过长和无法控制。更多关于使用命名空间和manifest文件的信息，参看Creating and Extending Adobe Flex 3 Components.
source-path选项在souce path中包含当前文件夹。这指明了compc如何发现include-classes选项列表中的各种类。
output选项指明输出SWC文件的位置。也就是，compc向名称为bin的文件夹输出QuickStartLibrary.swc文件。
include-classes选项指明你想包含进SWC文件中的类。他们是你定义的类。
?
部署SWC文件
当编译MXML文件的时候使用SWC文件。你一般要在library-path选项中指定应用程序中要用到的SWC文件。
下边的例子使用QuickStartLibrary.swc中”Creating SWC Files”一节创建的AddressForm组件。
例子
<?xml version="1.0" encoding="utf-8"?>
<custom:ApplicationClass
??? xmlns:mx="http://www.adobe.com/2006/mxml"
??? xmlns:custom="components.*"
??? width="400" height="310"
>
??? <custom:PaddedPanel title="Creating Libraries">
??????? <custom:AddressForm id="addressForm"/>
??? </custom:PaddedPanel>
</custom:ApplicationClass>
要使用独立的Flex编译器编译这个离职，输入下边的命令，用本机的QuickStartLibrary.swc的位置取代，-library-path+=后的部分。在这个例子中，library是在../QuickStartLibrary/bin目录中。
mxmlc -library-path+=.;../QuickStartLibrary/bin Main.mxml
由于在flex_install_dir/libs文件夹中所有的SWC文件都被默认的加入到编译器类库中。你也可以仅将QuickStartLibrary.swc文件放入这个目录中，然后编译应用程序就能够找到他们。
提示：你也能添加SWC文件到FlexBulder项目中。要添加你的SWC文件，选择“Project > Propertise > Flex Build Path”。在Library选项卡，单击“Add SWC”按钮，并且添加QuickStartLibrary到你的项目中。下边的图片展示了QuickStartLibrary.sec文件在你的项目库路径中。
?
?
