Flex开发界面模式
打开开发界面模式,你将看到代码编辑器,它包括了导航栏/Navigator view、调试栏/Problems view、以及概述视图栏。
Flex Builder中的代码提示
代码编辑器包含了许多特征可以帮助开发人员简化他们的工作。其中最重要的特征称之为代码提示/内容协助/Content Assist(译者注:内容协助是其英文的直译,不太好,所以根据它的实际意思意译成代码提示),它将在你输入MXML、ActionScript以及CSS代码时给出完整的提示。请键入Control+Space以打开代码提示。
在Flex Builder中设计Flex应用程序 在开发界面中有两种设计方式:代码输入方式和可视化设计方式,你可以自由地在两者之间进行切换。当你选择可视化设计方式/Design mode时,Flex界面上将出现设计面板/design canvas、所支持的组件/Components、以及Flex属性栏/Properties views。
Flex调试模式
你可以在代码编辑器中查看和编辑出错或被警告的代码。同时,你还可以设置断点、或单步执行来帮助你进行程序的调试。
编译应用程序
每当项目资源作出改动后,Flex Builder便会自动地将Flex和ActionScript 3.0编译成SWF,并与相应的HTML页面一起放置到项目的输出文件夹中。
第三章 Flex基础
Flex是基于组件来进行开发的,为了更有效率地设计和开发应用程序,你应该熟悉这些开发模式以及操作步骤。
第一节 创建一个Flex应用程序
应用程序模型
Flex创建一个应用程序时,你使用组件(容器/containers和控件/controls)来描述用户的操作界面。例如,容器可以是一个用来进行数据输入的表格容器,如一个盒框/Box或一个栅格/Grid;而控件就是该表格中的元素,如一个按钮/Button或文本输入栏/Text Input field。 举个例子,在随后的图例中显示了两种不同的盒子容器,它们分别包含了三个按钮控件和一个ComboBox控件:
Flex的MVC模型
为了增强系统的复用性和可维护性,应该采用具有良好体系架构的模型,即Model-View-Controller(MVC)。 1. 模型/Model组件封装了数据和与数据相关的行为。 2. 视图/View组件定义了应用程序的用户界面。 3. 控制器/Controller组件则负责处理程序中的数据连接。
web服务器的运用
通常地,会涉及到的web服务器类型有:
1. 纯web服务器,它们仅将用户的请求回复一个简单的静态HTML页面。在这种情况下,你需要将Flex应用程序的SWF文件嵌入到一个HTML页面中。
2. web应用服务器,如JRun、ColdFusion或者PHP,它们可以动态地生成页面。在这种情况下,你将使用到与服务器技术相关的库,并动态地处理它们的内容。
3. J2EE应用服务器或servlet容器。向一个J2EE应用服务器或servlet容器发出请求,如JRun、Tomcat或WebSphere,通常你需要使用Flex Data Services。
程序开发的通常步骤
开发Flex应用程序,通常会采用如下的步骤进行: 1. 在一个文本编辑器或集成开发环境(IDE)中,如Adobe Flex Builder、Eclipse或IntelliJ中插入MXML根标签。
2. 添加一个或更多容器。
3. 在容器中添加控件,如输入栏、按钮和输出栏。 4. 定义一种数据模型。
5. 添加一个web服务器,HTTP服务器,或向远程Java对象发送请求。 6. 为数据输入添加验证。 7. 为组件添加脚本。
8. 将应用程序编译成SWF文件。
发布应用程序
你可以将应用程序发布成一个编译好的SWF文件,或者如果有Flex Data Services的话,则可以将应用程序发布为一组MXML和ActionScript文件。客户端进行访问的格式分别是:
http://hostname/path/filename.swf http://hostname/path/filename.mxml
第二节 Flex编程模型
Flex包含了Flex类库、MXML和ActionScript编程语言,如下图所示:
当然,Flex还包括Flex编译器和调试器,它们并没有在图中示出。
你可以混合MXML和ActionScript来发Flex应用程序。事实上, MXML和ActionScript编程语言都提供了访问Flex类库的能力。通常的做法是:使用MXML去定义用户界面的元素,使用ActionScript 去定义客户端的逻辑并进行控制。
Flex类库包括了Flex组件、管理器和行为。在基于组件的开发模型下,开发人员可以运用预先做好的组件。
将ActionScript添加到Flex应用程序中 ActionScript可以出色地完成如下任务: 1. 处理事件 2. 处理错误
3. 在MXML语句中将数据对象绑定到Flex控件上 4. 定制组件
在随后的例子中,为按钮控件的点击事件添加了事件监听器/event listener。当用户点击按钮时,将TextInput控件中的文本拷贝到TextArea控件中。