jackson的空间

我们一直在努力....

Flex登陆界面开发经验分享六:自定义组件的设计与属性设置

标签: Flex Flex自定义组件 Flex属性设置 Flex登陆

六、设计Flex登陆自定义组件的设计与属性设置

  关键词(Keyword):Flex,Flex自定义组件,Flex属性设置,Flex登陆

  相信各位朋友在Flex登陆界面开发经验分享五:Flex登陆框美化中已经知道了简单处理图片的流程了。同时也知道了如果要让Flex支持较好的透明背景或者阴影效果,就应该输出PNG24格式的图片。朋友们准备好的图标很快就可以得到应用。稍微打一下岔,我在Flex登陆界面开发经验分享四中看见有朋友问,输入框组件右侧的图标是怎么设置的?答案为:不能设置。但是你可以通过组件重叠来制作出你想要的效果,这就是为什么Jackson不使用表单组件来做登陆,因为表单组件制作登陆时,输入框与图片都属于一个布局设置内的,因此不能进行简单的叠加,也就达不到我想要的效果。所以Jackson就自定义了自己想要的登陆框组件。接下来的内容将会给这位朋友更详细的解答。

  好了,我们将制作好的PNG24格式的图标已经导入到您的项目文档中,Jackson将assets文件夹放置在src文件夹中,然后将制作好的图标都复制到该assets文件夹中,如图1 Flex项目中图标文件夹建立所示Flex图标放置文件夹位置。OK,现在Eclipse中打开你的登陆组件页面,Jackson项目中是JacksonLogin.mxml,我们来放置一个登陆框左上角的公司logo(logo图标的处理方法请看Flex登陆界面开发经验分享五)。这个只要设置Panel中的titleIcon属性,指定图标路径就可以了。你可能在Eclipse的普通面板中看不到这个属性,你可以点击属性“Flex Properties”面板右边的“Category View”功能图标,就可以看见如图2“ Category View”属性面板所示的很多属性值。找到“titleIcon”属性,将图标地址指向你的文件地址。你现在应该可以看见如出现在Panel的左上角了。

Flex项目中图标文件夹建立
图1  Flex项目中图标文件夹建立

 “ Category View”属性面板
图2 “ Category View”属性面板

  接下来我们继续处理输入框右边放置图标,但是你会发现没有让你直接放置图标的属性。Jackson这里直接在输入框的上方放置小图标来达到效果。你可以在Eclipse编辑环境的左下角“Components”面板中找到“Controls”下的“Image”组件,直接拖拉“Image”组件到你想要放置图标的位置上。如图3 Flex登陆框图标位置所示。拖动完“Image”组件后,你在“Flex Properties”面板中会看到一些普通属性,在“Source”属性中将你的图标路径指向好。两个图标都是照葫芦画瓢一样设置,完了调整一下两个图标的位置,最后的效果如图4 Flex登陆框图标显示效果所示。

Flex登陆框图标位置
图3  Flex登陆框图标位置

Flex登陆框图标显示效果
图4  Flex登陆框图标显示效果

  剩下按钮的提示图标没有加上了,按钮的图标就相对简单了,跟“Panel”的设置相似,按钮有图标设置属性,你点击按钮组件,在“Flex Properties”的普通属性中找到“Icon”属性,将图标路径指向正确。好了,这下图标都齐全了,按(Alt+Shift+x,f)看看效果吧如图5 Flex登陆框按钮图标设置效果所示。
  登陆框像个样了,但是Jackson希望输入框看上去能更舒服点,现在是一个矩形边角的输入框,矩形锐利的边角会让你感觉很生硬死板。还是圆角的输入框会亲民一点,跟做人一样要“圆润”嘛,^-^ 呵呵。这个也容易,只要在点中输入框组件的状态下在属性面板的样式面板中“Border Style”和“Corner radius”属性分别设置为“solid”和一个你认为恰当的数值,Jackson设置为“5”。设置与效果如图6 Flex登陆框输入组件设置效果所示。OK,输入框变得“圆滑”起来了,希望各位朋友喜欢这个初具雏形的登陆框。

Flex登陆框按钮图标设置效果
图5  Flex登陆框按钮图标设置效果

Flex登陆框输入组件设置效果
图6  Flex登陆框输入组件设置效果

  下期将分享图标嵌入到Flex登陆框和关于增加输入框对内容的验证方面的编码设计,敬请各位朋友期待。该Flex3.0开发学习文章中不足的地方希望大家指正。Jackson非常愿意与大家一起探讨与Flex3.0开发与美化的相关问题,并与大家分享经验。希望Jackson的博客上能看到您宝贵的留言,谢谢! (更多经验分享留待Flex系统登陆界面开发经验分享七)

  如果大家对Flex项目源文件感兴趣,可以到文章下面的文件下载区域获得该文相关的Flex源文件压缩包和该文章的word格式文档和pdf格式文档。

附件:


    分享: 收藏到CSDN 收藏到javaeye 收藏到博客园 收藏&分享
  • 浏览 (2479)
  • 评论 (0)
  • 发表于 2009-10-09 11:23
  • FLEX开发
    评分: 请先登录再投票,同一篇博客一月只能投票一次!
    无人投票

相关博客:


评论


发表评论

关注此文的人们还关注