学习笔记在Flex内应用CSS样式-css flex

本文和大家重点讨论一下在Flex内应用CSS样式，选择用Flex实现CSS的方法必须基于环境和条件。如下的这些方法是用Flex实现CSS样式时最为常用的。

在Flex内应用CSS样式

选择用Flex实现CSS的方法必须基于环境和条件。在考虑设计实现的可用选项时，最好是从较高的层次审视应用程序。如下的这些方法是用Flex实现CSS时最为常用的。

设置一个实例（内联）上的样式

扩展了FlexUIComponent基类的Flex组件允许作为内联属性设置常见样式—换言之，即在MXML组件声明标签内（参见清单1）。一个显示对象的布局属性通常对该对象惟一，所以常常能够看到某个组件被显式地设置了如下这些属性之一：x、y、height、width、top、right、left、bottom、horizontalCenter、verticalCenter、horizontalAlign和verticalAlign。

清单1.用MXML作为某个组件实例的属性设置样式

<mx:Buttonidmx:Buttonid="volumeIcon"cornerRadius="0"alpha="0.9" 
 verticalCenter="0"enabled="true"toolTip="VolumeControl" 
 click="toggleVolumeControl();"/>

清单1展示了设置样式属性的一个函数示例，这些属性对id值为volumeIcon的Button组件的这个特定实例是惟一的。由于我知道它是惟一一个需要这些特定样式值的按钮，因此我已经显式地设置了此特定按钮的cornerRadius、alpha和verticalCenter。

设置MXML组件标签上的样式属性的一条经验是，只有在知道所设置的样式值特定于该组件的情况下才以这种方式设置此属性。比方说，您的应用程序要求一个容器能够垂直堆叠显示对象而不在其间留空隙。同时，您知道应用程序内的其他VBox容器则确实需要显示对象之间有空隙。在这种情况下，您应该在VBox组件的该实例上显式地设置verticalGap属性，如清单2所示。

清单2.在VBox容器组件的这个实例上verticalGap被显式地设为0

<mx:VBoxidmx:VBoxid="myVBox"verticalGap="0"  
 x="15"y="15"width="100%"height="100%"> 
    
(...)  
    
</mx:VBox>

在MXML内嵌入CSS样式

该方法所涉及到的是用<mx:Style/>标签将样式或资源直接嵌入到一个MXML文件内。出于实用的目的，现在需要在其中直接将样式信息嵌入到MXML文件的实例很少。最重要的是要认识到如果应用程序包含很多被嵌入的CSS，那么随着应用程序的增长，设计将越来越难以维护。认识到这一点，在使用这种方法时，要十分慎重，只有在需要的时候才使用它。清单3提供了嵌入样式声明的一个例子，该声明应该保留在一个外部CSS文件内以便获得更好的代码可维护性。

清单3.将样式直接嵌入到MXML应用程序文件内

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:WindowedApplication 
 xmlns:mx="http://www.adobe.com/2006/mxml" 
 layout="absolute" 
 showFlexChrome="false" 
 borderStyle="none" 
 keyUp="{this.onKeyStrokeEvent(event);}"> 
   
   
 <mx:Style> 
  .bGroup{  
   borderSides:"left,bottom,right";  
   borderStyle:"solid";  
   borderColor:#6d6f71;  
   borderLeftThickness:3;  
   borderRightThickness:3;  
   borderBottomThickness:1;  
   dividerColor:#6d6f71;  
   dividerThickness:3;  
  }  
 </mx:Style> 
   
 <mx:Script> 
  <![CDATA[  
     
   (...)

不过，这并不是说它将永远不会发生。清单4就是我基于FlexAplicationControlBar而为我的应用程序所构建的一个向下扩展（scaled-down）的组件。在所提供的设计内，控制栏内的每个按钮实际上都是一个简单的文本单词，看上去更像是一个链接，而非按钮。此外，所有这些单词链接之间都有一个小的bullet分隔符。由于我已经有了整个应用程序的设计，因此我知道这种bullet分隔符是应用程序主控制栏所特有的，在任何其他地方都不会出现。最为重要的是，由于bullet在同一个组件内出现若干次，因此非常有必要将此图像作为其自己的私有类嵌入到这个MXML文件内，以便我能从放置在这些链接之间的每个图像控件中绑定它。否则，结果很有可能是正在创建的同一个图像却具有多个实例，这是对系统资源的一种浪费。

清单4.直接嵌入一个图像

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:ApplicationControlBarxmlns:mxmx:ApplicationControlBarxmlns:mx="http://www.adobe.com/  
2006/mxml"> 
 
<mx:Script> 
<![CDATA[  
   
[Embed(source="assets/bullet_black.png")]  
[Bindable]  
privatevarbullet:Class;  
 
]]> 
</mx:Script> 
 
 <mx:HBoxxmx:HBoxx="10"y="10"id="hbox"horizontalGap="10"  
width="350"> 
  <mx:LinkButtonlabelmx:LinkButtonlabel="Help"styleName="appBarButton"/> 
  <mx:Imagesourcemx:Imagesource="{bullet}"/> 
  <mx:LinkButtonlabelmx:LinkButtonlabel="About"styleName="appBarButton"/> 
  <mx:Imagesourcemx:Imagesource="{bullet}"/> 
  <mx:LinkButtonlabelmx:LinkButtonlabel="Minimize"styleName="appBarButton"/> 
  <mx:Imagesourcemx:Imagesource="{bullet}"/> 
  <mx:LinkButtonlabelmx:LinkButtonlabel="Quit"styleName="appBarButton"/> 
 </mx:HBox> 
</mx:ApplicationControlBar>

外部CSS样式表

一个Flex或AIR应用程序在其源代码目录的根部具有一个MXML文件，应用程序可以基于Application类（Flex）或WindowedApplication类（AIR）。这个文件就是默认的MXML应用程序文件，开始于<mx:Application/>或<mx:WindowedApplication/>。应用程序的样式表源代码应该立即出现在应用程序基类声明之后（参见清单5）。

清单5.在除主应用程序MXML文件之外的任何文件内声明样式表都会导致错误

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:WindowedApplication 
 xmlns:mx="http://www.adobe.com/2006/mxml" 
 layout="absolute" 
 showFlexChrome="false" 
 dropShadowEnabled="false" 
 borderStyle="none" 
 applicationComplete="{this.appInit(event);}" 
 > 
   
 <mx:Stylesourcemx:Stylesource="com/passalong/assets/RED_SKIN_MAIN.css"/> 
   
 <mx:Script> 
  <![CDATA[  
   ...

◆保持应用程序样式设置的最简便也是最安全的方法是使用外部样式表。实际上，从一个CSS文件就能合理保存一个大型应用程序的所有样式。我选择只使用一个CSS文件，出于两个原因：第一个原因是我将始终知道到哪里可以找到我的样式设置；第二个原因是在团队开发情况下，其他开发人员也可以很容易找到样式。此外，一种好的做法是很好地组织该文件，因为随着应用程序的增长，CSS文件也必然会增长。

在构建您自己的主应用程序CSS文件时，通常一种好的做法是首先放置那些默认的组件样式声明。比如，若想要所有的工具提示在应用程序中都具有同样的外观，就可以使用ToolTip作为样式名并将其放置在文件的开始。我趋向于将tooltip放置在应用程序的所有内容之前，以便让我的应用程序尽量的保持用户友好性。因此，tooltip组件在应用程序内出现的次数比其他任何组件都要多。由于默认组件样式对应用程序的整体观感具有巨大的影响，所以您需要能够快速和容易地访问到它们。这也是为什么要将这些样式放在首位的原因了。

请注意在大多数应用程序内，为每个组件创建一个默认样式并不意味着就完事大吉了。Button组件就是这样一个例子。同样地，要让CSS代码保持整齐，可以考虑对组件样式子集进行分组。比如，三个称为Button.musicPlayerPlay、Button.pageDown和Button.backToMenu的可选按钮样式将被一个挨一个地放置在样式表内并被来自其他样式组的注释所分隔。

【编辑推荐】

学习笔记 在Flex内应用CSS样式

学习笔记在Flex内应用CSS样式