• 您好!欢迎来到jackson的博客

Flex登陆界面开发经验分享(四)

(2009-08-21 09:09)

四、Flex中CSS层叠样式表的应用方法

  关键词(Keyword):Flex,css,CSS层叠样式表,Flex登陆界面

  在“Flex登陆界面开发经验分享三”中Jackson已经介绍了简单的Flex登陆界面布局的简单流程,Jackson已经将Flex登陆布局的草图设计出来了,Flex登陆界面代码如 图1(Flex登陆界面草图代码)演示如 例1(Flex登陆框草图列子演示)相信大家应该从草图出来的那一刻开始,脑子就开始有想法了,^-^ 因为这个Flex登陆框实在是没有太多的操作体验和美感呈现,我们需要进一步地设计优化它。

Flex登陆界面草图代码
图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登陆界面自动居中代码)

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了。

CSS目录创建图解
图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编译文件中发生效果了,呵呵。

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

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

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

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


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

  Flex登陆界面开发经验分享五将分享Flex登陆框的美化工作经验,Jackson将会发布简单的图形设计方法内容的同时共享一些photoshop的源文件和源代码供大家学习,敬请期待。
  本文Flex中CSS层叠样式表的应用方法学习文章中不足的地方希望大家指正。Jackson非常愿意与大家一起探讨Flex开发相关的问题,并与大家分享经验。希望Jackson的博客上能看到您宝贵的留言,谢谢! (更多经验分享留待Flex系统登陆界面开发经验分享五)

您可能会对以下文章感兴趣:
阅读:1503
评论
很好的东西,正在学习flex的界面美化,遇到背景平铺的问题,支持博主,不过代码下载好像有问题,不过word的没问题 2009-10-21 09:15:13

您好,回应前一位朋友,经验分享五已经发布,名称为 Flex登陆界面开发经验分享五:Flex登陆框美化 ,您可以到Jackson博客的文章分类的 flex开发 分类中进入查看。回应后一位朋友,我没有做右键查看源代码的功能,您可以在文章下方的文件下载区下载你想要的source code压缩包。谢谢支持!

2009-09-30 08:28:56
source code在那里看 2009-09-28 11:46:22
游客
怎么没有经验分享5了? 2009-09-26 10:19:40

在文件下载区域的PDF文档后面(Flex登陆界面项目代码包(第一阶段)) ,因为没有标出压缩包文件的图标,所以辨别有些困难。Jackson将尽快通知开发人员增加代码包的识别图标。谢谢理解!

2009-09-07 09:22:20
游客
代码在哪download 2009-09-05 16:38:18
1
发表评论

博主简介
  • jackson
  • 博客积分:0分
  • 博客访问:9164次
  • 来自:
我要留言
公告
  希望通过这个博客与大家探讨有关界面交互设计方面的技巧与方法,希望能引起大家对用户体验的关注与讨论.
  (Jackson的人生态度:每个人都是一座山。世上最难攀越的山,其实是自己。往上走,即便一小步,也有新高度,我希望自己是一个合格的登山者)
 
访客

链接