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

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

(2009-08-05 14:12)

关键词(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中的可视化开发视图窗口) 所示:

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

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

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

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

Flex Properties中设置组件属性
图7  Flex Properties中设置组件属性

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

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

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

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

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

您可能会对以下文章感兴趣:
阅读:1056
评论

前面这位朋友如果您是从Flex开发经验分享一开始看的话,应该知道Jackson想要分享的内容和范围。希望各位朋友能明白术业有专攻的道理。Jackson最后会放出输入校验的内容代码,也请各位期待,非常感谢!

2009-10-26 08:52:24
游客
XML/HTML代码 太简单了,怎么没用数据库验证?? 2009-10-24 17:38:47
游客
JavaScript代码 现在在出 2009-10-24 17:38:13
我们的 yongtree 会及时处理评论不能完全显示的问题,非常感谢这位朋友的提醒!另外,Flex登陆界面开发经验分享四将在周五发布,包括flex例子演示、第一阶段代码包、两种格式的文档供各位朋友下载,敬请期待! 2009-08-19 14:56:41
游客

期待登陆界面开发经验分享四

2009-08-19 09:42:58
游客

为什么我的评论不能全部显示出来?

2009-08-19 09:42:08
游客

很期待 2009-08-19 09:40:43

Jackson首先感谢这位朋友的关注,Jackson会在往后的经验分享中将不同阶段的代码陆续放出,希望可以继续得到您的支持与期待,谢谢!

2009-08-19 09:22:29
游客

没代码么?

2009-08-18 17:18:00

Jackson感谢这位朋友的关注,Jakcosn尽量加快内容的更新,谢谢!

2009-08-12 11:13:03
发表评论

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

链接