`
coral0212
  • 浏览: 101553 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

Flex编程模型

    博客分类:
  • UI
阅读更多
Flex编程模型

Flex包含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类或是类的属性相对应。Flex分析MXML标签,并且编译包含相应ActionScript对象的SWF文件。例如,Flex提供了ActionScript Button类来定义Flex按钮控件。在MXML中,我们可以用下面的MXML语句来创建一个按钮控件:
<mx:Button label="Submit"/>
当我们使用MXML标签声明了一个控件,我们就创建了那个类的一个实例。这个MXML语句创建了一个按钮对象,并且初始化这个按钮对象的label属性为Submit字符串。
与ActionScript类相对应的MXML使用与ActionScript类相同的命名约定。类名以一个大写字母开头,而且在类名中以大写字母分隔单词。每一个MXML标签属性对应着ActionScript对象的一个属性,适合于对象的一种风格,或者是这个对象的一个事件监听器。

布局我们的程序
我们使用代表用户界面的组件来声明Flex程序的用户界面。有两种类型的组件:控件与容器。控件是窗体元素,如按钮,文本框,列表框。容器是屏幕上包含控件和其他容器的矩形区域。
在Flex的根部是单一的容器,称之为程序容器,这代表整个Flash播放器的界面。这个程序容器保存所有的其他的代表对话框,面板和窗体的容器。
一个容器有预定义的规则来布局他的孩子容器和控件,包括尺寸以及位置。Flex定义了布局规则来简化富网络程序的设计与实现,然而也提供了足够的灵活性来使得我们可以创建多样的程序集合。
使用预定义的布局规则的一个优点就是我们的用户可以很快的习惯我们的程序。也就是说,通过标准化用户交互的规则,我们的用户就不需要考虑如何来导航程序,相反却可以集中于程序所提供的内容。
另一个优点就是我们不必在定义导航以及作为设计一部分的布局规则上花费大量的时间。相反,我们可以集中精力于我们想要传递的信息以及我们要提供给用户的选择,并且不需为所有用户行为的细节与程序响应担心。通过这样的方式,Flex提供了一个结构可以让我们快速容易的使用丰富的特性与交互集合来开发程序。

使用Flex Builder来布局我们的程序
我们可以使用Flex Builder构建Flex程序的用户界面。我们可以使用Flex Builder通过可视的编码与设计工具来开发Flex与ActionScript程序。我们也可以使用可以提供代码提示与代码辅助特性的编辑编写MXML,ActionScript与CSS代码,从而帮助我们的开发工作。
在这个编辑器中,我们可以切换到设计模式来可视化的开发我们的程序,在设计画布上使用容器与组件,使用约束来布局我们的组件,并查看运行时用户界面的转化。然后我们使用定制的编译器来构建我们的工程,并且使用集成的调试工具来调试我们的工程。

在MXML中定义用户界面
我们的程序可以由一个或是多个MXML文件组成。使用多个MXML文件可以促进代码重用,简化构建复杂程序的过程,并且使得多个开发者贡献同一个工程变得更为容易。
下面的例子是一个MXML程序,这个程序使用一个按钮控件来触发从一个文本输入控件拷贝文本到一个文本区控件:
<?xml version="1.0" encoding="utf-8"?>
<!-- ?xml tag must start in line 1 column 1 -->
<!-- MXML root element tag. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <!-- Flex controls exist in a container. Define a Panel container. -->
    <mx:Panel title="My Application">
        <!-- TextInput control for user input. -->
        <mx:TextInput id="myInput" width="150" text=""/>
        <!-- Output TextArea control. -->
        <mx:TextArea id="myText" text="" width="150"/>
        <!-- Button control that triggers the copy. -->
        <mx:Button id="myButton" label="Copy Text"/>
           
    </mx:Panel>
</mx:Application>
这个程序第一行指明了XML声明,而且必须放在MXML文件的第一行,第一列。
第二行以<mx:Application>标签开始,这是Flex程序的根元素。这个标签包含了Flex名字空间声明。在起始与结束的<mx:Application>标签之间的部分定义了Flex程序。
下图演示了在Flash播放器中运行这个程序的效果图:


正如这段代码所写的,这个例子布局了我们的用户界面,但是却并没有包含从文本输入框控件到文本区控件的拷贝逻辑。

向Flex程序中添加ActionScript
我们可以为了下列目的使用ActionScript
处理事件 Flex用户界面是事件驱动的。例如,当用户选择一个按钮时,这个按钮生成一个事件。我们在ActionScript中定义名为事件监听器的函数来处理事件。我们的事件监听器可以打开一个窗口,播放SWF文件,或者是执行我们的程序所必须的任何动作。
处理错误 我们在ActionScript处理运行时错误。我们可以检测数据验证错误,向用户发送错误信息,向服务器重新提交请求,或者是执行基于我们程序的其他事件。
在MXML语句中向Flex控件绑定数据对象 我们可以使用数据绑定从一个Flex控件组织数据模型,或是从数据模型组织组件,或者是从一个组件向另一个组件拷贝数据。
定义自定义组件 我们可以从Flex组件类层次继承来创建适合我们程序需求的组件。
下面的例子是在前一个例子的基础上所做的更改,为按钮的click事件添加事件监听器。一个事件监听器为了响应用户的事件而执行的ActionScript代码。在我们这个例子中的事件监听器是当用户选择按钮控件时从文本输入控件向文本区拷贝文本:
<?xml version="1.0" encoding="utf-8"?>
<!-- ?xml tag must start in line 1 column 1 -->
<!-- MXML root element tag. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <!-- Flex controls exist in a container. Define a Panel container. -->
    <mx:Panel title="My Application">
        <!-- TextInput control for user input. -->
        <mx:TextInput id="myInput" width="150" text=""/>
        <!-- Output TextArea control. -->
        <mx:TextArea id="myText" text="" width="150"/>
        <!-- Button control that triggers the copy. -->
        <mx:Button id="myButton" label="Copy Text"
            click="myText.text=myInput.text;"/>
           
    </mx:Panel>
</mx:Application>
前一个例子在MXML代码中直接插入了ActionScript代码。虽然这对于一或是两行的ActionScript代码可以工作的很好,但是对于更为复杂的逻辑,通常我们会在<mx:Script>块中定义我们的ActionScript,如下面的例子所示:
<?xml version="1.0" encoding="utf-8"?>
<!-- ?xml tag must start in line 1 column 1 -->
<!-- MXML root element tag -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
           
            // Define an ActionScript function.
            private function duplicate():void {
                myText.text=myInput.text;
            }
        ]]>
    </mx:Script>
    <!-- Flex controls exist in a container. Define a Panel container. -->
    <mx:Panel title="My Application">
        <!-- TextInput control for user input. -->
        <mx:TextInput id="myInput" width="150" text=""/>
        <!-- Output TextArea control. -->
        <mx:TextArea id="myText" text="" width="150"/>
        <!-- Button control that triggers the copy. -->
        <mx:Button id="myButton" label="Copy Text"
            click="duplicate();"/>
           
    </mx:Panel>
</mx:Application>
在这个例子中,我们使事件监听器作为一个ActionScript函数来实现。Flex为了响应用户选择按钮控件调用这个函数。这种技术使得我们可以将我们的MXML代码从我们的ActionScript代码中分离出来。为了增加程序的模块性我们也可以选择将我们的程序分为多个文件。

使用数据绑定
Flex为了组件之间属性的绑定,或是到数据模型的绑定提供了简单的语法。在下面这个例子中,花括号中的值将文本区的text属性绑定到了文本输入控件的text属性。当用户在文本输入控件中输入文本时,他会自动的拷贝到文本区控件,如下面的例子所示:
<?xml version="1.0" encoding="utf-8"?>
<!-- ?xml tag must start in line 1 column 1 -->
<!-- MXML root element tag. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <!-- Flex controls exist in a container. Define a Panel container. -->
    <mx:Panel title="My Application">
        <!-- TextInput control for user input. -->
        <mx:TextInput id="myInput" width="150" text=""/>
        <!-- Output TextArea control. -->
        <mx:TextArea id="myText" text="{myInput.text}" width="150"/>
    </mx:Panel>
</mx:Application>
 
控制程序显示
Flex定义我们在程序中可以使用的默认显示,或者是修改来定义我们特定的显示。作为修改演示的一部分,我们可以修改下面的一些或是全部:
尺寸 一个组件或是程序的高度或是宽度。所有的组件都有一个默认的尺寸。我们可以使用默认的尺寸,指定我们自己的尺寸,或者作为布局我们程序的一部分让Flex重新调整一个组件的尺寸。
格式 特性集合,例如字体,字号,文本对齐属性,颜色。这与在层叠样式表(CSS)定义与使用的相同。
皮肤 控制组合显示的符号。皮肤化就是通过修改或是替换他的可视化元素来改变一个组件显示的过程。这些元素可以图像,SWF文件,或者是包含绘画API方法的类文件组成。
行为 程序或是用户行为引起的对于一个Flex组件的可见的或是可听的变化。行为的例子如基于鼠标移动点击的移动或是组件尺寸的重新调整。
视图状态 在许多富网络程序中,界面的改变基于用户所执行的任务。视图状态可以让我们通过修改基内容来变化一个组件的内容和显示或者是程序。
转化 转化定义了视图状态的改变如何显示在屏幕上。我们使用特效类,结合处理转化的显式效果设计来定义转化。

使用数据服务工作
Flex被设计用来与可以访问本地和远程服务端逻辑的服务进行交互。例如,一个Flex程序可以使用AMF来连接使用简单对象访问协议(SOAP)的网络服务,返回XML的HTTP URL,或者是Flex数据服务,与位于与Flex同一个程序服务器上的Java对象。MXML提供数据访问的组件称之为数据服务组件。MXML包含下列的一些数据服务组件:
WebService 提供到基于SOAP的网络服务的访问。
HTTPService 提供到返回数据的HTTP URL的访问。
RemoteObject 提供到使用AMF协议的Java对象的访问。这个选项只在Flex数据服务或是Macromedia ColdFusion MX 7.0.2中可用。
在我们的Flex程序中选择如何来访问数据影响着我们程序的性能。因为Flex程序是在第一次请求之后缓存在浏览器中的,当程序运行时,数据访问是影响程序性能的主要原因。为了向用户传递数据Flex提供了几种解决方案。他将数据交给调用在Flex类路径中装入的Java类的运行时服务,或者是向网络服务或是HTTP服务器发送代理请求。
使用WebService组件允许我们使用基于SOAP的方法,但是他并不总是产生最优的性能。同时,使用SOAP编码的额处XML需要比AMF所做的更多的内容。
网络服务中的SOAP性能同时依赖于我们的网络服务的实现。不同的程序服务器使用不同的网络服务后端,所以我们会看到依赖于不同实现的性能。理解我们的实现表现如何的唯一方法就是装入并测试我们的服务。
在许多情况下,我们的选择依赖于我们已存在的程序以及我们如何选择将他们集成到后台服务器资源中。网络服务的表现在很大程度上依赖于我们的程序服务器的网络服务引擎的底层实现,所以我们应装入并测试他们的性能。

将我们数据模型从我们的视图中分离
为了清楚的分离用户界面,程序相关的数据,数据服务,我们可以使用Flex数据模型来存储控制器与数据服务之间的数据。这种三层设计是输入数据与数据服务共同作用的结果。
当我们计划一个程序,我们要决定程序必须存储的数据类型以及这些数据要如何处理。这有助于我们决定我们需要什么类型的数据模型。例如,假设我们决定我们的程序必须存储顾员的相关数据。一个简单的顾员模型可能包含姓名,部门以及邮箱地址属性。
一个Flex数据模型是一个包含我们用来存储程序相关数据的属性的ActionScript对象。我们可以将数据模型用于数据验证,从而他可以包含客户端业务逻辑。我们可以在MXML或是ActionScript中定义一个数据模型。在MVC设计模式中,数据模型代表模型层。
我们可以在MXML标签,ActionScript函数或是ActionScript类中定义数据模型。在MXML中编写的模型用利于快速开发与简化数据存储,但是他不能提供任何额外的功能,而我们不可以设定模型属性的数据类型。如果我们想要设定数据类型以及为额外的功能提供方法,我们应使用基于ActionScript的类。在通常情况下,我们应为了简化数据结构使用基于MXML的模型,为更为复杂的结构以及客户端业务逻辑使用ActionScript。

 

分享到:
评论

相关推荐

    Flex资料大全(Flex白皮书 Flex cookbok Flex编程指南 Flex设计模式等)

    Flex编程指南可能详细阐述了Flex开发过程中的核心概念和技术,如ActionScript 3.0语法、MXML组件模型、数据服务集成、移动应用开发等方面,帮助开发者掌握Flex编程的基础和高级技巧。 4. **client_server_...

    流程设计器(flex版)

    《流程设计器(flex版)详解》 流程设计器(flex版)是一种基于Adobe Flex技术的图形化工具...同时,对源码的深入研究可以帮助开发者理解Flex编程模型,掌握如何构建类似的图形化工具,提升自身在企业级应用开发中的能力。

    flex帮助文档3

    6. **Flex编程模型**:Flex的编程模型包括Flex类库、MXML和ActionScript。MXML用于定义用户界面,ActionScript则用于处理客户端逻辑。这两种语言都可以访问Flex类库,其中包含了一系列预定义的组件、管理器和行为,...

    Flex 3 RIA开发详解与精深实践一

    - **Flex编程模型**:基于组件的架构,允许开发者使用预定义的UI组件快速构建界面,并通过事件驱动的模型实现交互。 - **MXML**:一种标记语言,用于描述Flex应用的界面布局和组件属性,易于学习且表达力强。 - **...

    flex资料

    源码可能是Flex应用的实例,帮助读者理解Flex编程模型和组件工作原理。而“工具”可能是指Flex Builder,这是Adobe提供的一个集成开发环境(IDE),专门用于Flex和ActionScript开发,或者提及了其他辅助开发的工具和...

    MVC模式在Flex框架的应用研究.pdf

    #### 三、Flex编程模型 Flex的编程模型主要包括三个方面:MXML、ActionScript以及Flex类库。 1. **MXML**:是一种基于XML的语言,用于定义用户界面及其与服务器端数据源的绑定。 2. **ActionScript**:提供了对...

    Flex Spring框架成BlazeDS

    整合Flex、Spring和BlazeDS可以带来高效的数据传输和丰富的用户界面,但同时也需要对Flex编程模型、AMF通信机制以及Spring的依赖注入和AOP有深入理解。在实际项目中,还需要考虑安全性、性能优化以及错误处理等问题...

    Flex 4 高级编程 Flex 4 高级编程

    5. **数据绑定和依赖注入**:Flex 4 提供了强大的数据绑定功能,简化了模型与视图之间的数据同步。同时,通过依赖注入框架,如 Cairngorm 或 Mate,可以实现模块化的代码组织,提高代码的可维护性。 6. **事件处理*...

    FLEX 编程入门教程及操作说明

    Flex编程是一种基于Adobe Flash平台的开发技术,用于创建富互联网应用程序(Rich Internet Applications,简称RIA)。这个入门教程和操作说明将带你逐步了解Flex的基本概念、界面操作以及如何开始你的Flex编程之旅。...

    数字时钟 表盘时钟 示例

    1. **Adobe Flex**:了解Flex编程模型,包括ActionScript和MXML的结合使用,以及如何构建用户界面。 2. **ActionScript**:学习ActionScript语言基础,它是Flex中编写逻辑和交互的核心语言。 3. **MXML**:理解MXML...

    flex实战项目,flex开发

    Flex支持事件驱动的编程模型,允许开发者构建具有复杂用户界面的应用。 2. **ActionScript**:ActionScript是Flex的主要编程语言,基于ECMAScript,类似于JavaScript,但增加了面向对象的特性。开发者可以用它来...

    Flex3+Socket编程示例

    Flex3是一种基于ActionScript 3.0的开源框架,用于构建富互联网应用程序(RIA),它提供了强大的图形和用户界面设计工具,以及丰富的编程模型。在本示例中,我们将探讨如何利用Flex3进行Socket编程,以创建一个实时...

    FLEX网站源码 FLEX网站源码 FLEX网站源码

    6. **事件处理**:Flex使用事件驱动的编程模型,用户交互或其他系统事件会触发相应的事件处理函数,增强了应用的响应性和交互性。 7. **Flex与后端通信**:Flex应用可以与各种后端服务(如Java、PHP、ASP.NET等)...

    flex_api (FLEX接口)

    Flex API遵循事件驱动的编程模型,当用户进行交互或者系统状态改变时,会触发事件。开发者可以注册事件监听器来响应这些事件,实现程序的响应式设计。 7. **图形和动画** Flex API提供了强大的图形绘制和动画功能...

    flex教程_chm

    Flex 4.0(中文)API.chm文件是Flex 4.0的中文API文档,它是开发者在进行Flex编程时的重要参考资料。API(Application Programming Interface)文档详细列出了Flex框架提供的所有类、方法、属性和事件,这对于理解...

    flex学习笔记 flex学习总结 flex学习教程

    4. **数据绑定**:Flex支持数据绑定,允许视图组件直接与数据模型关联,当数据变化时,界面会自动更新,反之亦然。这是Flex实现动态界面的重要机制。 5. **ActionScript深入**:除了基本的变量、函数、类之外,...

Global site tag (gtag.js) - Google Analytics