FLEX初级入门.ppt

基于Flex的RIA应用开发 deli.wu@ 2009/03/04 主要内容 Flex简介及体系结构 建立Flex Builder开发环境 Hello示例 接收远程数据并显示 数据绑定 使用CSS 使用ActionScript 应用程序布局 组件及容器 带数据项的组件使用 使用行为 使用视图栈 建立自定义组件 Flex简介 Flex简介 Flex简介 Flex Builder 建立第一个Flex应用 Hello Flex应用 接收远程数据并显示 使用HttpService与后台交互 使用HttpService与后台交互示例 Flex数据绑定 Flex数据绑定 Flex数据绑定 Flex Css Flex ActionScript 应用程序布局 组件及容器 应用程序布局 既提供关系数据库系统的功能， 又提供面向对象的数据库系统 功能，并且提高了数据的完整 性。 Flex是一套Adobe公司开发的RIA应用开发平台。 它的主要功能包括： 提供了丰富的组件用于应用程序开发 支持事件模型，数据绑定，格式，效验，CSS样式等 支持远程调用，能方便的与后台应用程序服务器整合 支持远程数据同步，多客户端数据实时同步等分布式，SOA应用 典型的Flex应用程序包括 Flex Framework包括用于展示用于界面的组件，带布局的容器，行为等 MXML使用XML来定义程序的结构 ActionScript3.0用于给应用程序添加动态行为，处理事件等，它是一个基于EMCAScript的实现。 CSS用于设置Flex组件样式的标记语言 图形资源，在Flex程序中使用的图标，图像等 数据，Flex程序中组件绑定的数据，如数组，数据模型，外部XML文件等 Flex应用的所有元素最终被打包到一个SWF文件中，它可以运行在支持Flash的Web浏览器中。 Flex Builder IDE是一个建立在Eclipse基础上的一个Flex集成开发环境。 它的主要功能包括： 支持可视化的Flex应用开发 能对Flex应用进行调试 具备与远程服务器协同开发的能力 具备智能代码提示能力 提供对Flex应用编译的能力 建立Flex应用的典型步聚为： 选取一系列预先定制好的、用于设计应用程序界面的组件（如表格、按钮等等） 布置组件以设计用户界面。 使用样式和主题来增强视觉方面的设计。 添加动态行为（例如程序部件之间的相互作用）。 定义并连接所需的数据库服务。 将源代码编译成SWF 文件，然后在Flash Player 中运行 包含一个按钮的Flex示例，此处为按下按钮添加了一个行为 mx:Panel width=200 height=300 mx:Button label=Hello flex! mouseDownEffect=WipeRight/ /mx:Panel Flex支持三种方式与服务器交互 HttpService支持与所有Http服务器交互 WebService支持与能提供WebService的服务器交互 RemoteObject支持调用远程的Java对象的方法需要Flex Data Service的服务器支持 使用HttpService组件与后台交互时，需要滿足以下安全需求 编译后的SWF文件在服务器，即与被请求的服务在同一主机中 也可以通过Flex data service提供代理 通过在被请求服务器上添加crossdomain.xml文件来充许跨域调用 HttpService是异步调用的,当执行成功时该对象的result事件被触发，当失败时触发fault事件 Flex组件的大部分属性都支持数据绑定，当属性的值发生改变时可以自动的设置到模型的属性中，模型的值的改变也能自动的设置到组件的属性中 mx:HSlider id=num maximum=1000 snapInterval=1 minimum=0/ mx:Label text={num.value}/ 示例将水平滑块的值绑定到label上显示 示例将变量值绑定到组件的属性中 mx:Script ![CDATA[ import mx.controls.Alert; [Bindable] var hstr:String = ; ]] /mx:Script mx:Label fontSize=12 text=请输入姓名：/ mx:TextInput id=yourname/ mx:Label text={hstr}/ mx:Button label=SayHello click=hstr = Hello + yourname.text + !;/ 示例将文本框的值绑定到模型对象中，并通过HttpService发送给后台服务 mx:HTTPService id=search url=“…” u