Flex系统登陆界面开发体会分享(三)上

上一篇关于Flex开发经验分享前的学习资料分享，相信大家都应该有所学习，对Flex有了个基本的了解，特别是对Jackson上篇提到的一个外国网站平台，大家从中应该大概的知道Flex能实现怎样的客户体验，究竟Flex能开发怎样的网站或者系统有了一个直观的感受。应该已经激起大家学习Flex的热情了，呵呵。
　　接下来，Jackson将开始分享实际的开发经验。Jackson将从自己设计过程中想法与创意的变化为主线来进行经验的分享。会从起初简陋的Flex登陆界面草图开发讲起，到最后的登陆界面成品。中间将讲到登陆界面的一些创意意图，也会讲到一些用Phoshop进行简单的界面设计方法与技巧(这对于一些没有进行过界面设计的程序员又想通过简单的设计达到有自己风格的系统界面或许能起到点作用)，最后Jackson也将共享一些Flex3.0源代码供大家学习使用。在此先将最终成品Show一下，如 图1(百洋医药集团网络办公自动化系统登陆界面成品截图) 所示:



图1 百洋医药集团网络办公自动化系统登陆界面成品截图

　　题外话，非常欢迎各位朋友转载所有Jackson的经验分享的文章内容，但是希望转载文章内容的朋友们能够体现网络道德，标明出处并给 Jackson博客 一个链接，您的链接就是对Jackson的肯定，将会是Jackson继续分享经验的动力，在此先感谢各位朋友！

　　我们继续,首先大家还是需要先搭建好自己的Flex3.0开发环境(后面提及到的Flex都是指Flex3.0版本)，Jackson所在团队没有直接使用FlexBuilder作为开发环境，而是安装了Flex Builder Eclipse插件版，这是因为Jackson开发的这个Flex登陆界面是用于以Java开发的系统中使用，整个团队使用的开发环境是Eclipse，所以选择Flex Builder Eclipse插件版。关于环境配置不是Jackson经验分享的重点，如果各位朋友对Flex+Java的环境配置感兴趣，可以访问Jackson所在团队组员yongtree的博客，查阅“整合Flex和Java—配置篇”，文章中有环境配置的详细介绍。其实对于界面设计工程师来说，哪种版本的Flex IDE都没有太大问题。

　　好了，Jackson默认大家已经安装好了开发环境，现在建一个项目名为JcksonLogin。建立项目的菜单点击步骤为：File → New → Flex Project ，如 图2(新建一个Flex项目) 所示：



图2 新建一个Flex项目

　　在弹出的Flex配置窗口中将你的项目名称填写好，这里Jackson建立了一个名为"JacksonLogin"的项目名称，其他选项基本使用默认项就OK了。在配置窗口中有"Application type"一项，其中"Web application"指的是生成在浏览器下运行的网页形式项目；"Desktop application"则指的是生成可在桌面独立运行的可执行文件项目（当然这个可执行项目需要用户在本机安装了Adobe的AIR运行环境才可以正常运行）。Jackson所在项目是web项目，所以使用默认的"Web application"。如 图3(在Flex项目配置窗口中建立项目JacksonLogin) 所示：



图3 在Flex项目配置窗口中建立项目JacksonLogin



图4 Eclipse自动生成Flex项目JacksonLogin的文件目录

　　Flex项目建立好以后Eclipse自动生成目录结构，可以参见 图4(Eclipse自动生成Flex项目JacksonLogin的文件目录) 中左边文件目录中的目录结构，自动生成并打开了一个JacksonLogin.mxml，这个就是一个默认的主应用场景页面。

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

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

欢迎您到我在百洋软件实验室的正式博客里留言讨论

本文Flex系统登陆界面开发体会分享(三)上转载自百洋软件实验室