Flex CSS的应用方法

当大家了解过Flex3.0的基础知识之后该如何美化，如何应用Flex CSS呢，下面就以jackson亲身实践的Flex登陆框为便来详细说明Flex CSS的应用方法。

图1  Flex登陆界面草图代码

例1  Flex登陆框草图例子演示

 　　Jackson首先想到的是要让登陆框能根据浏览窗口的伸缩自适应居中，因为对于系统的登陆页面的视觉重点应该是在页面中心。我们可以直接在Application标签对中增加几个布局属性，layout="vertical"和verticalAlign="middle"。前一个属性作用是垂直布局，可以让登陆框的Panel在垂直方向上默认居中；后一个属性作用是水平布局，可以让登陆框的Panel在水平方向上居中。现在看来登陆框的Panel已经可以自适应居中了。按(Alt+Shift+x,f)测试一下代码吧，现在无论你怎样改变IE窗口的大小，登陆框的Panel总是相对IE窗口居中。另外，即使你现在在Panel中加坐标（x或y）值，也不会起作用，登陆框的Panel还是会自使用居中。代码如 图2(Flex登陆界面自动居中代码) 。

图2  Flex登陆界面自动居中代码

　　现在继续研究代码内容，这些标签当中的布局属性与我们在传统web页面中的布局属性基本一致。我们这个时候会想了，web页面可以使用CSS层叠样式表，那么Flex的MXML页面是否可以使用CSS层叠样式表呢？答案是肯定的，Flex页面中一样可以使用CSS层叠样式表。现在Jackson在Flex项目的src目录中创建了一个新的文件夹"css"。你可以在src文件夹上 右点击 → New → Css File，如 图3（CSS目录创建图解），然后起一个CSS文件名称（这里取名为Jackson_css）就OK了。

图3  CSS目录创建图解

　　好了，我们首先将Flex的application中自适应居中的相关属性加入到CSS中。想对主场景中的组件（这里主要是Flex登陆框的Panel）进行样式控制，可以对保留关键词Application加入到CSS样式表中，代码如 图4（CSS代码内容和代码链接方式） 。CSS文件完成后，就要在主场景页面将CSS层叠样式表链接到application主场景代码中，只要用“<mx:Style source="css/jackson_css.css"/>”就可以将CSS层叠样式表链接进来。现在将原来在Application标签对中的布局属性去掉。按(Alt+Shift+x,f)测试一下代码吧，CSS样式已经在Flex编译文件中发生效果了，呵呵。

图4  CSS代码内容和代码链接方式

　　主场景看上去单调丑陋，我们先来改一改背景。Jackson以前在一些web设计中经常会使用循环背景，只要选取好循环背景还是会有好的效果。所以Jackson想尝试一下用循环背景，这里选择了一个斜纹背景图片。但是经过Jackson多次尝试，发现在Flex的CSS层叠样式表中并不能直接使用简单的属性设置让这个斜纹背景循环平铺到整个Application场景中。后来在一个外国朋友的博客中找到了解决方法，这个外国朋友共享了他的解决方法源代码,大家可以到他的博客（www.degrafa.org）看看。对于该外国朋友的as代码就不作深究了，有兴趣的朋友可以下载下来自己研究。这里只对如何使用该代码进行经验分享。只要将源代码中的as文件放到根目录，更改一下文件中的背景图片路径，另外在CSS层叠样式表中加上两个属性值就OK了。As文档中图片路径更改和CSS层叠样式表属性增加如 图5（图片路径更改和CSS属性增加） 。

图5  As文档图片路径更改和CSS属性增加

　　将修改好的Flex登陆界面源代码编译test一下，你就会看到Flex登陆界面如演示如 例子2（Flex登陆主场景背景平铺列子演示）的效果了。如果大家对源码有兴趣可以到文章下面的文件下载区域获得该文的Flex源代码包。

例2  Flex登陆主场景背景平铺列子演示

　　本文Flex中CSS层叠样式表的应用方法学习文章中不足的地方希望大家指正。Jackson非常愿意与大家一起探讨Flex开发相关的问题，并与大家分享经验。希望Jackson的博客上能看到您宝贵的留言，谢谢！

　　相关下载：

(word格式)Flex登陆界面开发经验分享四 (pdf格式)Flex登陆界面开发经验分享四 Flex登陆界面项目代码包（第一阶段）

此文“Flex中CSS层叠样式表的应用方法”来自于百洋软件研究实验室