Flex开发：表单提交与组件皮肤定制

### Flex开发：表单提交与组件皮肤定制 #### 1. Flex表单提交到服务器端脚本 在开发中，有时需要将Flex表单的数据提交到服务器端脚本（如PHP脚本），就像使用HTML表单那样。可以使用`URLVariables`实例和`sendToURL()`方法来实现。 具体步骤如下： 1. 收集表单变量数据到`URLVariables`实例中。 2. 创建`URLRequest`实例，设置请求的URL、数据和方法。 3. 使用`sendToURL()`方法发送请求。 以下是一个示例代码，展示了如何创建一个电子邮件联系表单，并将表单数据提交到服务器： ```xml <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:layout> <s:VerticalLayout/> </s:layout> <fx:Script> <![CDATA[ import flash.net.sendToURL; protected function submit():void { var variables:URLVariables = new URLVariables(); variables.name = nameText.text; variables.email = emailText.text; variables.subject = subjectText.text; variables.message = subjectText.text; variables.reason = reason.text; var url:String = 'http://www.example.com/script.php'; var request:URLRequest = new URLRequest(url); request.data = variables; request.method = URLRequestMethod.POST; sendToURL(request); } ]]> </fx:Script> <fx:Declarations> <s:ArrayCollection id="reasonArrayCollection"> <fx:String>Complement</fx:String> <fx:String>Comment</fx:String> <fx:String>Complaint</fx:String> </s:ArrayCollection> </fx:Declarations> <mx:Form> <mx:FormItem label="Name"> <s:TextInput id="nameText"/> </mx:FormItem> <mx:FormItem label="Email"> <s:TextInput id="emailText"/> </mx:FormItem> <mx:FormItem label="Subject"> <s:TextInput id="subjectText"/> </mx:FormItem> <mx:FormItem label="Message"> <s:TextArea id="messageText"/> </mx:FormItem> <mx:FormItem label="Reason"> <s:HGroup verticalAlign="middle"> <s:Label id="reason" text="{reasonArrayCollection.getItemAt( reasonSpinner.value )}"/> <s:Spinner id="reasonSpinner" minimum="0" maximum="{reasonArrayCollection.length −1}" allowValueWrap="true"/> </s:HGroup> </mx:FormItem> <s:Button label="Submit" click="submit()"/> </mx:Form> </s:Application> ``` 在这个示例中，点击提交按钮会调用`submit()`方法，该方法收集表单的值，并使用`sendToURL()`方法将数据发送到指定的URL。如果需要为表单添加验证逻辑，可以在`submit()`方法中添加。 #### 2. Flex组件的皮肤与样式 使用Flex框架组件进行开发时，虽然能提高开发效率，但可能会损失一定的视觉定制性，导致应用程序外观千篇一律。为了弥补这一不足，Flex 4的Spark组件配备了全新且改进的皮肤架构。 在Flex 4中，皮肤是一个类，通常在MXML中定义，它继承自`s:Skin`，用于决定Spark组件的视觉外观。被皮肤化的Spark组件（即宿主组件）可以声明并访问皮肤类中的部分内容。这种新的皮肤架构增强了功能（在宿主组件中）和设计（在皮肤组件中）的分离，使得皮肤和Spark组件可以轻松复用和更新，且只需进行少量的代码重构。 样式是用于修改组件外观的属性设置，如颜色、大小或字体指令等，可以在编译时和运行时通过编程方式进行定制。样式属性可以通过多种方式定义：在组件声明中内联设置、使用`setStyle()`方法应用，或者使用级联样式表（CSS）。可以在MXML文件中本地定义CSS样式，也可以在外部文件中定义。 以下是几种常见组件的皮肤定制示例： ##### 2.1 创建`s:Button`的皮肤 当标准的`s:ButtonSkin`不符合设计需求时，可以通过MXML扩展`s:SparkSkin`来创建可复用的自定义按钮皮肤。 在皮肤组件中，需要包含与宿主组件中声明的属性相对应的三个部分： - **HostComponent元数据**：使用`HostComponent`元数据标签在皮肤组件中引用被皮肤化的组件。 - **状态**：在宿主组件中，使用`SkinState`元数据标签引用皮肤状态，皮肤中应包含相应的状态。 - **皮肤部分**：使用`SkinPart`元数据标签将宿主组件中的属性定义为必需或可选的皮肤部分。 以下是一个示例代码： ```xml <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:Button skinClass="skins.WireButtonSkin" label="Click Me!" top="50" left="50"/> </s:Application> ``` ```xml <?xml version="1.0" encoding="utf-8"?> <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5"> <fx:Metadata> <![CDATA[ [HostComponent("spark.components.Button")] ]]> </fx:Metadata> <fx:Declarations> <s:SolidColor id="fillColor" color="#FFFFFF" color.over="#DDDDDD"/> <s:SolidColorStroke id="strokeColor" color="#333333" color.over="#111111" weight="2"/> </fx:Declarations> <s:states> <s:State name="up"/> <s:State name="over"/> <s:State name="down"/> <s:State name="disabled"/> </s:states> <s:Rect top="0" left="0" bottom="0" right="0" radiusX="15" radiusY="15" fill="{fillColor}" stroke="{strokeColor}"/> <s:Label id="labelDisplay" left="25" right="25" top="9" bottom="6" color="{strokeColor.color}" fontWeight="bold"> </s:Label> </s:SparkSkin> ``` 这个示例中，`s:Rect`实例在按钮标签周围创建了一个圆角矩形。 ##### 2.2 为应用程序应用重复背景图像 若要为应用程序的主类应用包含重复背景图像的皮肤，可以通过MXML扩展`s:Application`，并包含一个具有重复位图填充的`s:Rect`实例。 以下是示例代码： ```xml <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" skinClass="skins.AppSkin"> <s:Button left="2 ```