登山者-Jackson的交互设计经验谈

六、设计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的左上角了。

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

图2 “ Category View”属性面板

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

图3  Flex登陆框图标位置

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

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

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

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

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

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