FLEX初级入门.ppt_第1页
FLEX初级入门.ppt_第2页
FLEX初级入门.ppt_第3页
FLEX初级入门.ppt_第4页
FLEX初级入门.ppt_第5页
免费预览已结束,剩余14页可下载查看

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、基于Flex的RIA应用开发, 2009/03/04,2,主要内容,Flex简介及体系结构 建立Flex Builder开发环境 Hello示例 接收远程数据并显示 数据绑定 使用CSS 使用ActionScript 应用程序布局 组件及容器 带数据项的组件使用 使用行为 使用视图栈 建立自定义组件,3,Flex简介,Flex是一套Adobe公司开发的RIA应用开发平台。 它的主要功能包括: 提供了丰富的组件用于应用程序开发 支持事件模型,数据绑定,格式,效验,CSS样式等 支持远程调用,能方便的与后台应用程序服务器整合 支持远程数据同步,多客户端数据实时同步等分布式,SOA应用,4,Flex

2、简介,典型的Flex应用程序包括 Flex Framework包括用于展示用于界面的组件,带布局的容器,行为等 MXML使用XML来定义程序的结构 ActionScript3.0用于给应用程序添加动态行为,处理事件等,它是一个基于EMCAScript的实现。 CSS用于设置Flex组件样式的标记语言 图形资源,在Flex程序中使用的图标,图像等 数据,Flex程序中组件绑定的数据,如数组,数据模型,外部XML文件等,5,Flex简介,Flex应用的所有元素最终被打包到一个SWF文件中,它可以运行在支持Flash的Web浏览器中。,6,Flex Builder,Flex Builder IDE是

3、一个建立在Eclipse基础上的一个Flex集成开发环境。 它的主要功能包括: 支持可视化的Flex应用开发 能对Flex应用进行调试 具备与远程服务器协同开发的能力 具备智能代码提示能力 提供对Flex应用编译的能力,7,建立第一个Flex应用,建立Flex应用的典型步聚为: 选取一系列预先定制好的、用于设计应用程序界面的组件(如表格、按钮等等) 布置组件以设计用户界面。 使用样式和主题来增强视觉方面的设计。 添加动态行为(例如程序部件之间的相互作用)。 定义并连接所需的数据库服务。 将源代码编译成SWF 文件,然后在Flash Player 中运行,8,Hello Flex应用,包含一个按

4、钮的Flex示例,此处为按下按钮添加了一个行为, ,9,接收远程数据并显示,Flex支持三种方式与服务器交互 HttpService支持与所有Http服务器交互 WebService支持与能提供WebService的服务器交互 RemoteObject支持调用远程的Java对象的方法需要Flex Data Service的服务器支持,10,使用HttpService与后台交互,使用HttpService组件与后台交互时,需要滿足以下安全需求 编译后的SWF文件在服务器,即与被请求的服务在同一主机中 也可以通过Flex data service提供代理 通过在被请求服务器上添加crossdoma

5、in.xml文件来充许跨域调用 HttpService是异步调用的,当执行成功时该对象的result事件被触发,当失败时触发fault事件,11,使用HttpService与后台交互示例,12,Flex数据绑定,Flex组件的大部分属性都支持数据绑定,当属性的值发生改变时可以自动的设置到模型的属性中,模型的值的改变也能自动的设置到组件的属性中, ,示例将水平滑块的值绑定到label上显示,13,Flex数据绑定,示例将变量值绑定到组件的属性中, ,14,Flex数据绑定,示例将文本框的值绑定到模型对象中,并通过HttpService发送给后台服务, ,15,Flex Css,Flex组件的外观

6、主要通过样式和主题来展现,指定组件的样式有三种方式: 使用内联的样式,即直接指定组件的样式属性 使用MXML标识声明, /*按组件名称指定样式,指定Application的样式*/ Application background-color:#FFFFFF; /*自定义样式类*/ .foo font-size:12; ,将样式声明在一个样式文件中,之后使用的方式引用,16,Flex ActionScript,Flex中可以使用ActionScript来执行动态逻辑,ActionScript是一种动态语言,与JavaScript一样实现了EMCAScript,Flex中使用ActionScript

7、主要有两种方式: 使用script代码块 使用外部script文件, ,在Flex中应当尽量使用OOP的方式编写AS代码,17,应用程序布局,每个Flex应用程序都需要至少一个MXML文件,必需有一个Application元素,Application元素提供了应用程序的主界面,其中可以添加其它的容器或控件 Application的布局主要有三种: Absolute采用绝对定位的方式添加子组件,但充许子组件采用相对边距指定大小。 Horizontal采用横向布局的方式添加子容器或控件 Vertical采用纵向布局的方式添加子容器或控件,18,组件及容器,组件在Flex中主要有容器和控件两大类,容器具有布局,容器可以包含其它容器或控件。 图一使用Accordion容器组装的组件样式

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论