flexsim十大入门案例模型及答案,flexa编程
包括Flex类库、MXML和ActionScript编程语言,如下表所示:
Flex中包含但上图中未显示的是Flex编译和Flex调试器。
我们使用MXML和ActionScript的组合来编写Flex程序。MXML和ActionScript编程语言都让我们能够访问Flex类库。MXML用于定义程序的用户界面元素,ActionScript用于定义客户逻辑和流程控制。
Flex类库包含Flex组件、管理器和行为。使用基于组件的Flex开发模型,开发人员可以组合预编译的组件,创建新的组件,或将预编译的组件组合成复合组件。
Flex类库与MXML和ActionScript的关系
Flex实现为ActionScript类库。这个类库包含组件(容器和控件)、管理类、数据服务类和其他功能。我们结合类库使用MXML和ActionScript语言来开发程序。
MXML标签对应于ActionScript类或该类的属性。解析flexmxml标记并编译包含相应ActionScript对象的SWF Flex。例如,Flex提供ActionScript按钮类来定义Flex按钮控件。在MXML,我们可以用下面的MXML语句创建一个按钮控件:
mx:按钮标签=提交/
当我们使用MXML标签声明一个控件时,我们创建了该类的一个实例。这个MXML语句创建一个按钮对象,并将这个按钮对象的label属性初始化为提交字符串。
与ActionScript类对应的MXML使用与ActionScript类相同的命名约定。类名以大写字母开头,并且在类名中用大写字母分隔单词。每个MXML标签属性对应于ActionScript对象的一个属性,该属性适用于对象的样式或对象的事件侦听器。
设计我们的程序
我们使用代表用户界面的组件来声明Flex程序的用户界面。有两种类型的组件:控件和容器。控件是表单元素,如按钮、文本框和列表框。容器是屏幕上包含控件和其他容器的矩形区域。
Flex的根是一个单独的容器,叫做程序容器,它代表了整个Flash player的接口。这个程序容器包含所有其他代表对话框、面板和表单的容器。
容器有预定义的规则来布局其子容器和控件,包括大小和位置。Flex定义了布局规则来简化富网络程序的设计和实现,但它也为我们创建多样化的程序集合提供了足够的灵活性。
使用预定义布局规则的一个好处是我们的用户可以很快习惯我们的程序。也就是说,通过规范用户交互的规则,我们的用户不需要考虑如何导航程序,相反,他们可以专注于程序提供的内容。
另一个好处是,我们不必花很多时间在设计中定义导航和布局规则。相反,我们可以专注于我们想要传达的信息和我们想要提供给用户的选择,而不必担心所有用户行为和程序响应的细节。通过这种方式,Flex提供了一种结构,允许我们快速、轻松地开发具有丰富功能和交互集的程序。
使用Flex Builder设计我们的程序。
我们可以使用Flex Builder来构建Flex程序的用户界面。我们可以使用Flex Builder通过可视化编码和设计工具来开发Flex和ActionScript程序。我们还可以使用编辑器编写MXML、ActionScript和CSS代码,这些编辑器可以提供代码提示和代码辅助功能,从而帮助我们的开发工作。
在这个编辑器中,我们可以切换到设计模式来可视化地开发我们的程序,在设计画布上使用容器和组件,使用约束来布局我们的组件,并查看运行时用户界面的转换。然后,我们使用定制的编译器来构建我们的项目,使用集成的调试工具来调试我们的项目。
定义MXML的用户界面
我们的程序可以由一个或多个MXML文件组成。使用多个MXML文件可以促进代码重用,简化构建复杂程序的过程,并使多个开发人员更容易参与同一个项目。
下面的示例是一个MXML程序,它使用一个按钮控件来触发将文本从文本输入控件复制到文本区域控件:
?xml版本=1.0 编码=utf-8 ?
!- ?xml标记必须从第1行第1列开始-
!- MXML根元素标记。-
MX:Application xmlns:MX= http://www . adobe . com/2006/mxml
!- Flex控件存在于容器中。定义一个面板容器。-
mx:面板标题=我的应用程序
!-用于用户输入的TextInput控件。-
MX:TextInput id= my input width= 150 text= /
!-输出TextArea控件。-
MX:TextArea id= my text text= width= 150 /
!-触发复制的按钮控件。-
MX:Button id= my Button label= Copy Text /
/mx:面板
/mx:应用程序
这个程序的第一行表示XML声明,它必须放在MXML文件的第一行第一列。
第二行以mx:Application标记开始,这是Flex程序的根元素。该标签包含Flex名称空间声明。Flex程序定义在起始和结束mx:Application标记之间的部分。
下图显示了在Flash player中运行该程序的效果:
正如这段代码中所写的,这个示例展示了我们的用户界面,但是它不包含从文本输入框控件到文本区域控件的复制逻辑。
向Flex程序添加ActionScript
我们可以将ActionScript用于以下目的
用于处理事件Flex用户界面是事件驱动的。例如,当用户选择一个按钮时,该按钮会生成一个事件。我们在ActionScript中定义了一个名为event listener的函数来处理事件。我们的事件监听器可以打开一个窗口,播放SWF文件,或采取任何必要的行动来执行我们的程序。
处理错误我们在ActionScript中处理运行时错误。我们可以检测数据验证错误,向用户发送错误消息,向服务器重新提交请求,或者基于我们的程序执行其他事件。
在MXML语句中将数据对象绑定到Flex控件。我们可以使用数据绑定来组织Flex控件中的数据模型,组织数据模型中的组件,或将数据从一个组件复制到另一个组件。
定义我们可以从Flex组件类层次结构继承的自定义组件,以创建符合我们程序要求的组件。
下面的示例基于前面的示例,将事件侦听器添加到按钮的click事件中。事件侦听器为响应用户事件而执行的ActionScript代码。我们示例中的事件侦听器是在用户选择按钮控件时将文本从文本输入控件复制到文本区域:
?xml版本=1.0 编码=utf-8 ?
!- ?xml标记必须从第1行第1列开始-
!- MXML根元素标记。-
MX:Application xmlns:MX= http://www . adobe . com/2006/mxml
!- Flex控件存在于容器中。定义一个面板容器。-
mx:面板标题=我的应用程序
!-用于用户输入的TextInput控件。-
MX:TextInput id= my input width= 150 text= /
!-输出TextArea控件。-
MX:TextArea id= my text text= width= 150 /
!-触发复制的按钮控件。-
mx:按钮id=myButton 标签=复制文本
click= my text . text=my input . text;/
/mx:面板
/mx:应用程序
在前面的示例中,ActionScript代码被直接插入到MXML代码中。虽然这对于一两行ActionScript代码很有效,但对于更复杂的逻辑,我们通常在mx:Script块中定义我们的ActionScript,如下例所示:
?xml版本=1.0 编码=utf-8 ?
!- ?xml标记必须从第1行第1列开始-
!- MXML根元素标签
MX:Application xmlns:MX= http://www . adobe . com/2006/mxml
mx:脚本
![CDATA[
//定义ActionScript函数。
私有函数duplicate():void {
my text . text=my input . text;
}
]]
/mx:Script
!- Flex控件存在于容器中。定义一个面板容器。-
mx:面板标题=我的应用程序
!-用于用户输入的TextInput控件。-
MX:TextInput id= my input width= 150 text= /
!-输出TextArea控件。-
MX:TextArea id= my text text= width= 150 /
!-触发复制的按钮控件。-
mx:按钮id=myButton 标签=复制文本
click= duplicate();/
/mx:面板
/mx:应用程序
在本例中,我们将事件监听器实现为ActionScript函数。Flex调用这个函数来响应用户选择按钮控件。这项技术允许我们将MXML代码与ActionScript代码分开。为了增加程序的模块性,我们也可以选择把我们的程序分成多个文件。
使用数据绑定
它为在Flex组件之间或向数据模型绑定属性提供了简单的语法。在下面的示例中,花括号中的值将文本区域的text属性绑定到文本输入控件的text属性。当用户在文本输入控件中输入文本时,他会自动将文本复制到文本区域控件,如下例所示:
?xml版本=1.0 编码=utf-8 ?
!- ?xml标记必须从第1行第1列开始-
!- MXML根元素标记。-
MX:Application xmlns:MX= http://www . adobe . com/2006/mxml
!- Flex控件存在于容器中。定义一个面板容器。-
mx:面板标题=我的应用程序
!-用于用户输入的TextInput控件。-
MX:TextInput id= my input width= 150 text= /
!-输出TextArea控件。-
MX:TextArea id= my text text= { my input . text } width= 150 /
/mx:面板
/mx:应用程序
控制程序显示
Flex定义了我们可以在程序中使用的默认显示,或者修改它来定义我们特定的显示。作为修改演示的一部分,我们可以修改以下部分或全部内容:
组件或程序的高度或宽度。的所有组件都有默认大小。我们可以使用默认的大小,指定我们自己的大小,或者让Flex调整组件的大小,作为设计程序的一部分。
格式特征的集合,如字体、字号、文本对齐属性和颜色。这与级联样式表(CSS)中定义和使用的相同。
皮肤控制组合显示符号。外观是通过修改或替换组件的可视元素来更改组件显示的过程。这些元素可以由图像、SWF文件或包含绘图API方法的类文件组成。
由程序或用户行为引起的Flex组件的可见或可听变化。基于鼠标移动的点击移动或组件大小的重新调整等行为的示例。
在许多富网络程序中,界面的改变是基于用户执行的任务。视图状态允许我们通过修改基本内容来改变组件或程序的内容和显示。
转换定义了视图状态的变化如何显示在屏幕上。我们使用特殊效果类来定义转换,并结合显式效果设计来处理转换。
使用数据服务
Flex旨在与能够访问本地和远程服务器端逻辑的服务进行交互。例如,Flex程序可以使用AMF连接到使用简单对象访问协议(SOAP)的网络服务,返回XML的HTTP URL,或者Flex数据服务和Java对象位于与Flex相同的程序服务器上。提供数据访问的MXML组件称为数据服务组件。MXML包含以下数据服务组件:
WebService提供对基于SOAP的网络服务的访问。
HTTPService提供对返回数据的HTTP URL的访问。
Remote使用AMF协议提供对Java对象的访问。此选项仅在Flex数据服务或Macromedia ColdFusion MX 7.0.2中可用。
如何在我们的Flex程序中访问数据会影响我们程序的性能。因为Flex程序在第一次请求后缓存在浏览器中,所以当程序运行时,数据访问是影响程序性能的主要原因。Flex提供了几种向用户交付数据的解决方案。他将数据提供给运行时服务,该服务调用Flex类路径中加载的Java类,或者向网络服务或HTTP服务器发送代理请求。
使用WebService组件允许我们使用基于SOAP的方法,但是它并不总是产生最佳的性能。同时,由SOAP编码的额外XML比AMF需要更多的内容。
网络中的SOAP性能取决于我们的网络服务的实现。不同的程序服务器使用不同的web服务后端,因此我们将看到依赖于不同实现的性能。了解我们的实现如何执行的唯一方法是加载和测试我们的服务。
在很多情况下,我们的选择取决于我们现有的程序,以及我们选择如何将它们集成到后台服务器资源中。网络服务的性能在很大程度上取决于我们的程序服务器的网络服务引擎的底层实现,因此我们应该加载并测试它们的性能。
将我们的数据模型从视图中分离出来。
为了清晰地分离用户界面、程序相关数据和数据服务,我们可以使用Flex数据模型来存储控制器和数据服务之间的数据。这种三层设计是输入数据和数据服务交互的结果。
当我们计划一个程序时,我们必须决定程序必须存储什么样的数据以及如何处理它。这有助于我们决定我们需要什么类型的数据模型。例如,假设我们决定我们的程序必须存储雇员的相关数据。一个简单的雇员模型可能包括姓名、部门和电子邮件地址等属性。
Flex数据模型是一个ActionScript对象,它包含我们用来存储程序相关数据的属性。我们可以使用数据模型进行数据验证,这样它就可以包含客户端业务逻辑。我们可以在MXML或ActionScript中定义数据模型。在MVC设计模式中,数据模型代表模型层。
我们可以在MXML标签、ActionScript函数或ActionScript类中定义数据模型。用MXML写的模型对于快速开发和简化数据存储是有用的,但是它不能提供任何额外的功能,我们也不能设置模型属性的数据类型。如果我们想要设置数据类型并为额外的函数提供方法,我们应该使用基于ActionScript的类。一般来说,我们应该使用基于MXML的模型来简化数据结构,并使用ActionScript来处理更复杂的结构和客户端业务逻辑。
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。