探讨Flex设计理念如何为Flex应用程序设计界面布局-flex布局应用

本文和大家重点讨论一下 FlashPlayer安全性方面的问题以及Flex设计中如何为Flex应用程序设计界面布局两大部分内容，希望本文的介绍能让你有所收获。

一、关于FlashPlayer安全性方面的问题

出于安全方面的考虑，在客户端的FlashPlayer中运行的应用程序，只有在满足如下条件之一的情况时才能访问远程的数据源：

1.应用程序所编译的SWF文件与远程数据源位于同一个域中。

2.使用代理（proxy），并且你的SWF文件位于和代理相同的服务器上。AdobeFlexDataServices为Flex应用程序提供了一个完整的代理管理系统。同时，你还可以通过使用一种web脚本语言，如ColdFusion、JSP、PHP或者ASP来创建一个简单的代理服务。

3.安装crossdomain.xml（跨域策略/cross-domainpolicy）文件在数据源的宿主Web服务器上。crossdomain.xml文件允许位于其它域中的SWF文件对数据源的访问。

二、Flex设计为Flex应用程序设计界面布局

让我们来详细分析一下前面那个“SayHellotoFlex“的简单例子，你可以通过设置组件的属性值来控制Flex应用程序的界面布局，就象如下所示：

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"> 
<mx:Panellayoutmx:Panellayout="absolute"width="80%"height="80%"> 
<mx:TextAreatextmx:TextAreatext="SayhellotoFlex!"top="10"bottom="70"left="10"  
right="30"/> 
<mx:Buttonlabelmx:Buttonlabel="Close"right="30"bottom="40"/> 
</mx:Panel> 
</mx:Application>

许多容器组件都允许以绝对坐标的方式创建布局，这就意义着你可以使用精确的x和y的坐标来放置组件。你还可以对应其父容器的相对位置来放置组件并约束它们，使它们在应用程序的界面放大或缩小时仍然保持其彼此的位置。
在这个例子中，面板/Panel组件的布局属性被设置为绝对值方式，同时所有容器的大小都被设置为应用程序的百分之八十。两个组件（TextArea和Button）被放置到距离面板容器边界的特定象素位置上。

使用风格和主题增强视觉方面的Flex设计

如果样式/style的属性值没有被指定，它们将由整个程序中运行的主题/theme来进行控制。在默认情况下，Flex应用程序使用Halo主题（就象上面那个例子那样）。当然，你可以修改默认的主题或者干脆自己创建一个。你还可以简单地指定新的样式定义来改变默认的主题样式，就象这样：

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"> 
 
<mx:Style> 
TextArea{  
font-size:36px;  
font-weight:bold;  
}  
</mx:Style> 
 
<mx:Panellayoutmx:Panellayout="absolute"width="80%"height="80%"x="122"y="24"> 
<mx:TextAreatextmx:TextAreatext="SayhellotoFlex!"top="10"bottom="70"left="10"right="30"/> 
 
<mx:Buttonlabelmx:Buttonlabel="Close"right="30"bottom="40"/> 
</mx:Panel> 
</mx:Application>

通过明确地为TextArea组件定义一个样式，应用程序现在看起来就会象这样了：

在这个例子中，一种新样式在MXML文件中的<mx:Style>标签里进行了定义。如同我们前面所提到过的，你还可以通过修改主题或应用新主题、使用一个外部CSS文件、或者设置单独的样式属性来达到设置新样式的目的。
将一个样式单导入到MXML文件中，你需要添加如下的代码：

<mx:Stylesourcemx:Stylesource="styles.css"/>

【编辑推荐】

探讨Flex设计理念 如何为Flex应用程序设计界面布局

探讨Flex设计理念如何为Flex应用程序设计界面布局