Flex 基础

 应用程序模型

简单的说Flex程序用MXML来实现界面设计，用ActionScript来实现程序逻辑。

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。

程序开发的通常步骤

1、在一个文本编辑器或集成开发环境（IDE）中插入MXML根标签；

2、添加一个或多个容器；

3、在容器中添加控件，如输入栏、按钮和输出栏；

4、定义一种数据模型；

5、添加一个web服务器，HTTP服务器，或向远程Java对象发送请求；

6、为数据输入添加验证；

7、为组件添加脚本

8、将应用程序编译成SWF文件

发布应用程序

可以将应用程序发布成一个编译好的SWF文件，或者如果有Flex Data Service的话，则可以将应用程序发布为一组MXML和ActionScript文件。客户端进行访问的格式分别是：http://hostname/path/filename.swf      http://hostname/path/filename.mxml

Flex编程模型

Flex包含了Flex类库、MXML和ActionScript编程语言，

ActionScript可以出色地完成如下任务：

1、处理事件

2、处理错误

3、在MXML语句中将数据对象绑定到Flex控件上

4、定制组件

使用数据绑定{}

使用事件去处理错误

< mx:Script >
<! [CDATA[
public  function  showErrorDialog(error:String): void   ... {
// 具体功能实现...
}
]] >
</ mx:Script >
...
< mx:WebService id = " WeatherService "  ... " >
<mx:operation name= " getFoo "
fault= " showErrorDialog(event.fault.faultString); " />
</mx:WebService>

 

控制应用程序的外观

1、Sizes，即组件或应用程序的高度和宽度；

2、Styles，一组特性，如字体、排列方式、颜色等。它们都是通过层叠样式（CSS）来进行设置的；

3、Skins，可以改变组件视觉元素；

4、Behaviors，Flex组件在视觉或听觉效果方面的变化；

5、View state，通过修改它的基础内容，来改变组件或程序的内容和外观；

6、Transitions，定义屏幕上发生改变的视图状态。

使用数据服务器

1、WebService提供对使用SOAP的web服务器的访问；

2、HTTPService提供对返回数据的HTTP URLs的访问；

3、RemoteObject通过使用AML协议提供对Java对象（Java Beans、EJBs、POJOs）的访问。该选项目前仅适用于Flex Data Services或Macromedia coldFusion MX 7.0.2.

Flex Data Services

Flex Data Services在Java应用服务器上或Java容器中执行，提供如下所示的强大的功能：

1、增强的数据服务；

2、与多个客户端进行数据共享；

3、支持客户端到客户端的通信；

4、自动服务器数据推进；

5、客户端对服务器端资源的可靠访问；

6、数据服务日志；

7、增强的远程过程调用（RPC）功能。

Flex图表组件

1、Area charts－－－区域形图表

2、Bubble charts－－－气泡形图表

3、Candlestick charts－－－烛形图表

4、Column charts－－－柱形图表

5、HighLowOpenClose charts－－－高低开合形图表

6、Line charts－－－线形图表

7、Pie charts－－－饼形图表

8、Plot charts－－－标绘形图表

所有的图表控件都使用dataProvider属性去定义图表的数据。

MXML程序中的ActionScript的使用方法

1、在<mx:Script>标签中插入ActionScript代码块；

2、调用存储在system_classes目录结构中的全局ActionScript功能函数；

3、引用user_classes中的外部类和包来处理更为复杂的任务；

4、使用标准Flex组件；

5、使用ActionScript类扩展已有的组件；

6、使用ActionScript创建新的组件；

7、在Flash创建环境中创建新的组件（SWC文件）。

创建ActionScript组件

package myControls
... {
public class MyButton extends Button ...{
public function MyButton() ...{
...
}
...
}
}

< mx:Application xmlns:mx = " http://www.adobe.com/2006/mxml "
xmlns:cmp = " myControls.* "   >
< cmp:MyButton label = " Jack " />
</ mx:Application >

 

一个样例代码：

<? xml version = " 1.0 "  encoding = " utf-8 " ?>
<!-- MXML root Element -->
< mx:Application xmlns:mx = " http://www.adobe.com/2006/mxml "  layout = " absolute " >

     < mx:Script >
         <! [CDATA[
            private  function  Duplicate(): void ... {
                myArea.text=myInput.text;
            }
        ]] >
     </ mx:Script >
     <!-- Define a Panel to contain other components -->
     < mx:Panel title = " My Application "  paddingTop = " 10 "  paddingRight = " 10 "  paddingBottom = " 10 "
        paddingLeft = " 10 " >
         < mx:Label text = " Hello World "  fontWeight = " bold "  fontSize = " 24 " />
         <!-- Get user input -->
         < mx:TextInput id = " myInput "  text = ""  width = " 150 " />
         <!-- Display user ' s input-->
        <mx:TextArea id="myArea" text="" width="150"/>
        <!--To invoke the copy action to happen-->
        <!--
        <mx:Button id="myButton" label="Copy Text" click="{myArea.text=myInput.text}"/>
        -->
        <mx:Button id="myButton" label="Copy Text" click="Duplicate()"/>
        <!--Use Data Binding-->
        <mx:TextArea id="myDisplay" text="{myInput.text}" width="150"/>
    </mx:Panel>
</mx:Application>