Flex各种超酷实例代码大全

### FlexGumbo中利用＜Style/＞自定义Button和TextInput 在Flex开发中，自定义控件样式是一项非常实用的功能，它可以让你根据自己的需求来调整界面的外观和感觉。在这个例子中，我们学习如何在Flex Gumbo（Flex的一个版本）中使用`<Style/>`标签来自定义`Button`和`TextInput`的样式。 #### 示例分析： 1. **命名空间声明**：我们看到`<s:Application>`标签中的`xmlns:`属性指定了Flex SDK的命名空间。这非常重要，因为它们允许我们在样式中引用不同的皮肤和组件类型。 - `xmlns:fx="http://ns.adobe.com/mxml/2009"`：用于定义MXML语法中的脚本和其他元素。 - `xmlns:s="library://ns.adobe.com/flex/spark"`：指向Flex Spark组件库。 - `xmlns:mx="library://ns.adobe.com/flex/halo"`：指向Flex Halo组件库。 2. **样式定义**：通过`<fx:Style>`标签来定义样式。这里的关键是`@namespaces`和`@namespacemx`指令，它们指定了命名空间。这些命名空间是后面样式选择器的基础。 3. **全局样式**：通过`global`选择器定义全局样式，如颜色、字体样式等。 ```mxml global{ color:red; fontStyle:italic; fontWeight:bold; } ``` 4. **组件样式**：可以针对具体的组件进行样式定制。例如，`s|Button`和`mx|Button`分别对应于Spark和Halo组件库中的按钮。 5. **示例代码**：在示例中，我们创建了一个包含Spark按钮、Halo按钮、以及两个文本输入框的`VGroup`布局容器。每个控件都被赋予了特定的样式。 ```mxml <s:VGrouphorizontalCenter="0"verticalCenter="0"> <s:Buttonlabel="I'maSparkButton"/> <mx:Buttonlabel="I'maHaloButton"/> <mx:HRulewidth="100%"/> <s:TextInputtext="I'maSparkTextInput"/> <mx:TextInputtext="I'maHaloTextInput"/> </s:VGroup> ``` 6. **版本显示**：通过`RichEditableText`控件显示了当前Flex SDK的版本号。 ### Flex4中创建头部背景为图片的Accordion Accordion控件是一种常见的用户界面组件，它可以通过折叠和展开各个面板来节省空间。在Flex4中，我们可以轻松地自定义Accordion的头部样式，例如设置一个图片作为背景。 #### 示例分析： 1. **样式定义**：通过`<fx:Style>`标签来定义Accordion头部的样式，并使用`headerStyleName`属性将其应用于Accordion组件。 ```mxml <fx:Style> @namespaces"library://ns.adobe.com/flex/spark"; @namespacemx"library://ns.adobe.com/flex/halo"; .accordionHeaderStyles{ skin:ClassReference("skins.CustomAccordionHeaderSkin"); } </fx:Style> ``` 2. **Accordion配置**：在`Accordion`组件中，我们通过`headerStyleName`属性指定要使用的样式名称。 ```mxml <mx:Accordion headerStyleName="accordionHeaderStyles" width="80%" height="80%" horizontalCenter="0" verticalCenter="0"> <!-- 内容项 --> </mx:Accordion> ``` 3. **自定义皮肤**：在单独的文件中（例如`CustomAccordionHeaderSkin.as`），我们可以编写自定义皮肤来实现特定的视觉效果。通常，这包括定义背景图像、边框以及其他视觉元素。 #### 总结 以上两个例子展示了如何在Flex中使用`<Style/>`标签来自定义组件的样式。这种自定义能力使得开发者能够创建出更加美观且符合项目需求的用户界面。无论是简单的样式修改还是复杂的皮肤设计，Flex都提供了强大的工具和支持。对于想要进一步提高Flex应用外观质量的开发者来说，熟练掌握这些技术是非常有帮助的。