Flex登陆界面开发经验分享四
Flex登陆界面开发经验分享四
2009年8月15日
Jackson.Wang
INFO-EC-INFO-08152009
百洋软件研究实验室学习资料文档---Flex登陆界面开发经验分享四
2
四、 Flex中CSS层叠样式表的应用方法
关键词(Keyword)：Flex,css,CSS层叠样式表,Flex登陆界面
在“Flex登陆界面开发经验分享三”中Jackson已经介绍了简单的Flex登陆界面布局的简单流程,Jackson已经将Flex登陆布局的草图设计出来了，Flex登陆界面代码如 图1所示（Flex登陆界面草图代码）演示如 例1（Flex登陆框草图列子演示）。相信大家应该从草图出来的那一刻开始，脑子就开始有想法了，^-^ 因为这个Flex登陆框实在是没有太多的操作体验和美感呈现，我们需要进一步地设计优化它。
图1 Flex登陆界面草图代码 例1 Flex登陆框草图例子演示(请点击连接进入查看例子) 图2 Flex登陆界面自动居中代码
Page 2／5 August 08 Author: Jackson.Wang DesignBy: Jackson.Wang
INFO-EC-INFO-08152009
百洋软件研究实验室学习资料文档---Flex登陆界面开发经验分享四
3
Jackson首先想到的是要让登陆框能根据浏览窗口的伸缩自适应居中，因为对于系统的登陆页面的视觉重点应该是在页面中心。我们可以直接在Application标签对中增加几个布局属性，layout=\"vertical\"和verticalAlign=\"middle\"。前一个属性作用是垂直布局，可以让登陆框的Panel在垂直方向上默认居中；后一个属性作用是水平布局，可以让登陆框的Panel在水平方向上居中。现在看来登陆框的Panel已经可以自适应居中了。按(Alt+Shift+x,f)测试一下代码吧，现在无论你怎样改变IE窗口的大小，登陆框的Panel总是相对IE窗口居中。另外，即使你现在在Panel中加坐标（x或y）值，也不会起作用，登陆框的Panel还是会自使用居中。代码如 图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主场景代码中，只要用“ Page 3／5 August 08 Author: Jackson.Wang DesignBy: Jackson.Wang INFO-EC-INFO-08152009 百洋软件研究实验室学习资料文档---Flex登陆界面开发经验分享四 4 图4 CSS代码内容和代码链接方式 主场景看上去单调丑陋，我们先来改一改背景。Jackson以前在一些web设计中经常会使用循环背景，只要选取好循环背景还是会有好的效果。所以Jackson想尝试一下用循环背景，这里选择了一个斜纹背景图片。但是经过Jackson多次尝试，发现在Flex的CSS层叠样式表中并不能直接使用简单的属性设置让这个斜纹背景循环平铺到整个Application场景中。后来在一个外国朋友的博客中找到了解决方法，这个外国朋友共享了他的解决方法源代码,大家可以到他的博客（www.degrafa.org）看看。对于该外国朋友的as代码就不作深究了，有兴趣的朋友可以下载下来自己研究。这里只对如何使用该代码进行经验分享。只要将源代码中的as文件放到根目录，更改一下文件中的背景图片路径，另外在CSS层叠样式表中加上两个属性值就OK了。As文档中图片路径更改和CSS层叠样式表属性增加如 图5所示（图片路径更改和CSS属性增加）。 Page 4／5 August 08 Author: Jackson.Wang DesignBy: Jackson.Wang INFO-EC-INFO-08152009 百洋软件研究实验室学习资料文档---Flex登陆界面开发经验分享四 5 图5 As文档图片路径更改和CSS属性增加 将修改好的Flex登陆界面源代码编译test一下，你就会看到Flex登陆界面如演示如 例子2（Flex登 陆主场景背景平铺列子演示）的效果了。如果大家对源码有兴趣可以到文章下面的文件下载区域获得该文的 Flex源代码包。 例2 Flex登陆主场景背景平铺列子演示(请点击连接进入查看例子) Flex登陆界面开发经验分享五将分享Flex登陆框的美化工作经验，Jackson将会发布简单的图形设计方法内容的同时共享一些photoshop的源文件和源代码供大家学习，敬请期待。 本文Flex中CSS层叠样式表的应用方法学习文章中不足的地方希望大家指正。Jackson非常愿意与大家一起探讨Flex开发相关的问题，并与大家分享经验。希望Jackson的博客上能看到您宝贵的留言，谢谢！ (更多经验分享留待Flex系统登陆界面开发经验分享五) 提供该文档的机构为 百洋软件研究实验室 ，更多的博客文章可以到 百洋软件研究实验室博客 查看。该文档附件欢迎各位转载，但是在没有获得文章作者许可之前，不得对文章内容或者版权信息进行更改，版权归百洋软件研究实验室所有，仅此声明。 Page 5／5 August 08 Author: Jackson.Wang DesignBy: Jackson.Wang 因篇幅问题不能全部显示，请点此查看更多更全内容