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

关键词(Keyword)：Flex3.0,Flex学习, Flex组件,Flex登陆界面

　　在Eclipse中的Flex代码编辑器中可以看见自动生成的代码行，其中有个"Application"标签对，这个标签对就是标志该页面是应用主场景（这个概念相信使用过Flash设计动画或者网站的界面设计师不会陌生。），而且这个"Application"标签对在整个系统中只能有一个，这个与大家一直设计的Html代码形式web页面有很大区别，Html代码形式web页面没有应用主场景的概念，页面间都是相对独立的，页面间的表单数据传递都是通过页面间的跳转实现。而Flex系统中则基本不会用到页面跳转，Flex是在一个应用场景页面中通过不同的"Moudle(组件)"过渡切换以实现功能逻辑，所有表单数据传递都是在一个页面中完成，也就是现在很多人说的"页面零刷新"。用户在使用Flex开发的系统时，只要第一次下载的主场景页面完整，在不同的功能组件间进行表单数据传递时，组件的切换会在主场景中通过"Loading"提示自然过渡到下一逻辑组件或者结果组件，不会看见浏览器的页面刷新现象。

　　回到我们的Flex登陆界面开发进程，其实无论对于编程人员或者界面设计人员，可视化的开发视图可以减少我们的开发时间和提高页面效果开发的效率，我们可以通过"Source/Design"功能按钮切换开发视图。现在Jackson将视图切换到"Design",如 图5(Eclipse中的可视化开发视图窗口) 所示：

图5  Eclipse中的可视化开发视图窗口

　　在这个视图中，我们可以通过拖拉一些常用组件到场景中来完成页面开发。现在开发的是登陆界面，所以得有录入框组件和提交按钮组件。我们从左下角的"Components(组件)"功能标签页中，首先在"Layout(布局)"中要找到"Panel(面板)"并拖拉到右边的主场景编辑窗口。具体如 图6(在Components中寻找到Panel添加到场景) 所示。一个"Panel(面板)"从某种意义上说相当于一个Html代码形式的web页面，我们将录入组件和提交按钮组件"装"到"Panel(面板)"中，就可以对"Panel"内的所有组件进行整体操作。

图6  在Components中寻找到Panel添加到场景

　　我们看见可视化视图中，右边有一个Flex Properties的功能标签页，具体如 图7（Flex Properties中设置组件属性） 所示。在这里可以对"Panel"的相关属性进行设置，比如对"Panel"窗口标题(Title)进行设置；对"Panel"窗口样式(Style)进行设置；对"Panel"窗口布局(Layout)进行设置等。

图7  Flex Properties中设置组件属性

　　在组件功能标签也中找到"Controls(控制)"，拖拉两个"Label(标签)"、两个"TextInput(文本输入)"和两个"Button(按钮)"到主场景的"Panel(面板)"中并更改"Label(标签)"和"Button(按钮)"的文本内容。组件放置的位置如 图8(在主应用场景中添加”Label、TextInput、Button”组件) 所示：

图8  在主应用场景中添加”Label、TextInput、Button”组件

　　这样一个Flex3.0基础登陆界面的设计草图就出来了。

　　该Flex3.0学习文章中不足的地方希望大家指正。Jackson非常愿意与大家一起探讨与Flex3.0相关的问题，并与大家分享经验。希望Jackson的博客上能看到您宝贵的留言，谢谢！ (更多经验分享留待Flex登陆界面开发经验分享四)
　　

推荐文章：Jackson.Wang 的 Flex登陆界面开发经验谈一
　　　　　Jackson.Wang 的 Flex登陆界面开发经验谈二
　　　　　Jackson.Wang 的 Flex登陆界面开发经验谈三上
　　　　　yongtree　的　  整合Flex和Java—配置篇