flex系列文章:第一章. Flex概念和工具初步

转载 2007年10月12日 10:50:00
第一章. Flex概念和工具初步
 
1.1 RIA(Rich Internet Application)
 
我们已经非常熟悉当前标准的WEB应用的触发方式, 客户端请求服务,服务端同步地响应请求并刷新客户端IE.这是一种标准的瘦客户胖服务端的概念.RIA的概念正好相反,RIA应用运行在传统标准的IE上,但是它建立了一套独立于标准Client/Server请求响应模式.请求发出后,客户端异步地侦听响应.在各种解决方案中客户端通常采用回调函数的方式异步地侦听处理响应.RIA减轻了Server处理业务逻辑的负载,加速了系统的并发.但同时对事务和数据管理提出了挑战.目前,业内较成熟的RIA方案有Ajax,Flex/Flash,OpenLaszlo,XUL,WPF等等。
 
1.1.1 Ajax
 
Ajax是Asynchronous JavaScript and XML的缩写,Ajax的提出者Jesse James Garrett是这样阐述的:
1. 使用XHTML和CSS标准化显示
2. 使用DOM(Document Object Model)动态显示和交互
3. 使用XML和XSLT进行数据交互和处理
4. 使用XMLHttpRequest进行异步数据获取
5. 使用JavaScript整合所有这一切(这部分被称为Ajax Engine)
Ajax并不是一门全新的技术,它所包含的技术可能5年前甚至更早就出现了.Ajax应用和传统Web应用运作机制上的不同见图1-1
传统的web应用程序一般是由客户端浏览器向服务器提交数据,服务器返回新的页面,再次在浏览器中显示,这意味着每次数据往返都需要刷新浏览器页面。
Ajax应用程序改变了这种模式。由Javascript编写的Ajax引擎(Ajax Engine),在Ajax应用程序中担负着一个中间层的任务,当用户界面要向服务器提交数据时,由Ajax引擎负责收集数据并通过Http request(XMLHttpRequest)向服务器发送数据,服务器处理完成后返回XML,Ajax引擎将XML处理为便于用户界面显示的XHTML和CSS数据,并更新用户界面相应部分的显示,而非刷新整个页面,从而避免了不必要的数据往返,只有必要的数据在必要的时刻才在浏览器和服务器之间传输。


1.1.2 OpenLaszlo

OpenLaszlo和Flex一样,首先编译成swf,运行时被flashplayer解析。她目前完全opensource,编程主要用JavaScript和XML编码原文件扩展名为LZX。它的有些特点和flex挺像的,不仅可以被编译成swf,而且提供了和flex类似的组件库但是数量和质量比起Flex都远远不及。在Flex1.5时它曾因开源吸引了无数人的目光。前景值得关注。

1.1.3 WPF

WPF包括一个引擎和预装在Windows Vista系统中的架构以及一个名字叫XAML的基于标签的脚本语言组成。XAML和MXML很相象都是标签封装对象的设计。WPF可以开发基于桌面或者WEB的应用。WPF比Flex强壮的地方是本身对三维数据展示的支持,相比之下Flex则暂时只能在2D上游荡。

1.1.4 RIA的优点

首先富客户端的思想使加强用户操作体验而不频繁的装载刷新数据成为可能;另外RIA是基于用户事件出发的,较好的实时反馈和用户验证特性;丰富的组件资源可以利用;可以集成音频视频,增加用户体验等。

1.2 Flex 概览

2004年,Macromedia发布了Flex1.0。2005年,1.5发布。它比上一个版本在功能和稳定性上有很大的提高。在这个版本中首次加入了图表Charting组件,改进了DataGrid组件,首次加入了控件外观Skinning技术。1.5主要面对的是大型公司,因其价格昂贵,所以没有很好地得到普及。2006年2.0的发布改变了这一现状。License价格也降到中小公司可以接受的水平,并且重构了FlashPlayer8,应用运行效率得到很大的提高。Flex2更新了MXML和ActionScript语言,使开发者能够方便地利用MXML或者ActionScript3开发和扩展现有的标准组件。Adobe同时还提供了和Eclipse集成的Flex Builder 插件 IDE。与1.5不同,这个版本还提供FDS应用服务器,对数据Model这一块提供更健壮的封装。另外,Charting组件被单独隔离成一个独立于Flex SDK的产品。最后,FlashPlayer9的改进也是很激动人心的。FlashPlayer9就整体架构而言与历史版本完全不同,内置的AVM虚拟机能够更快的解析应用程序,并且对ActionScript3的面向对象编程模式提供完全支持。支持正则表达式,标准事件模型,二进制套接字等。

1.   3Flex开发工具介绍

开发Flex应用的时候,开发者可以选择集成开发环境Flex Builder2 或者利用Commandline Flex SDK. FDS是J2EE服务器内置flex web服务器。商业版FDS只对单CPU服务器有效。

1.4      FDS概要分析

FDS主要包括以下几个主要部件和功能。

1.
     FMS。 Flex消息服务,此功能主要支持实时消息服务,和后台java 消息服务JMS协作可以实现跨平台聊天应用等。

2.
     发布订阅消息部件。此机制主要是采用生产者/消费者模式发布消息和订阅消息。

3.
     数据自动更新(data push) 此机制的思想是在没有客户端触发的情况下自动刷新敏感数据到客户端,实现实时数据刷新。例如实时全球股票市场Charting展示。

4.
     远程过程调用(RPC 服务)这一块主要是用来连接外部数据,一般说来也就是怎样和后台数据连接的功能模块。经典的数据存取和连接方式有以下几种:Web Service, HTTP Service, Remote Object 等。
 
1.5 Flex Builder 背景信息
毫无疑问,Flex Builder2是Flex产品库中非常重要的一员。最初版本的Flex Builder是Macromedia开发团队以Dreamwaver平台为蓝图开发的。实践证明这是一次非常失败的尝试。Adobe Flex开发组意识到这个问题,于是果断地扼杀了Flex Builder1以后,便尝试在以Eclipse IDE为基础的平台上,开发了Flex Builder2的Eclipse 单机版和Flex Builder2的插件版以适应不同开发者的需求。原因有若干,一是Eclipse是当前J2EE企业级开发人员非常熟悉并且也很稳定强大的集成开发环境;二是,选定Eclipse作为整体基本框架也是与Adobe未来的开源战略分不开的;最后就是Eclipse极其强大且灵活的扩展性。Flex Builder2有Eclipse的单机版和插件版两种,其实运作方式大同小异。单机版集成了Eclipse平台的一个子集,运行时比标准的Eclipse平台会消耗更少的内存资源。但是考虑到实际的情况,对已经在利用Eclipse标准平台做系统开发的人员可以考虑用插件版,操作上可以简单的把Flex Builder作为Eclipse的一个标准插件就可以了,十分方便。
 
1.6 创建一个项目
 
我想大家在安装Flex Builder2以后,根据创建项目向导就可以成功地创建一个项目。在这里我不想在重复这些具体的操作过程。不过,我认为很有必要说明一下在创建项目时的一些关键概念的理解。
1. 和Eclipse的其他类型项目一样,只能先创建一个项目,然后才能创建代码源文件mxml或者as。
2. 创建项目向导中关于存取数据的种类有三种,Basic类型是指从项目本地的XML文件或者是Web服务中存取数据。也就是说这种类型的项目部署时不需要FDS服务器Runtime提供存取数据服务。如果选择FDS类型那么你的这个Flex项目物理位置应该在J2EE WEB应用的WebContent文件夹下。
3. 向导中对于主应用文件的命名要慎重,不要与你系统中别的组件mxml文件名重名。输出文件路径系统默认路径是项目目录下Bin子文件夹,也可以自定义。
4. Flex Builder2在创建任何种类型的项目时都会默认地把若干标准swc库导入到项目BuildPath下面,也就是说如果你的项目中要索引到别的第三方库文件的话则必须手动地加入这些类库索引。或者可以手动编辑项目.actionScriptProperties文件将你的类库加入。
5. Flex编译器默认的编译参数为-locale en_US,如果你的项目中有对多语言的支持的话,那么你要把所有的参数都配上去,否则ResourceBundle类可能找不到所需要的多语言properties文件。
 
1.7 Flex Builder IDE的视图
 
Flex Builder的视图有开发视图和调试视图两种。对于开发视图开发者可以方便的在源代码编辑区手动写代码或者在设计模式选项卡中所见既所得的拖动Flex组件,代码会自动更新到代码模式选项卡中,并且这两种开发模式是保持代码同步的。当项目中已设置好断点,调试时Flex Builder会自动切换到调试试图,并停止运行到断点处,开发者可以在单步跟踪的过程中,watch 或者 display所感兴趣的变量。Flex Builder编译项目源文件时,首先会扫描所有源文件,遇到被修改的文件时才会重新编译这个文件,然后连接所有主文件mxml中索引到的所有资源。一般会消耗不少的内存资源,如果你不想每次改完源文件后都让系统重新build一遍项目,那么可以勾掉Flex Builder顶端project菜单中的build automatically选项。在你需要的时候可以手动地build项目。


 Flex技术专栏 --by mervyn_lee
本章总结:

   本章主要介绍了RIA的基本概念以及业内比较成熟的RIA解决方案。然后介绍了Flex家族成员中的比较核心的部分。最后讲解了Flex Builder2集成开发环境的一些注意事项。下面的章节将详细介绍Flex各种开发环境配置初步的知识. 

flex在线查看word文档

1.将word文档打开,另存为时选择pdf格式,不懂的自己百度,不同版本的offer工具,可能没办法另存为pdf格式 2.在用swfTools工具将pdf转换为swf格式的文件 3.将swf格式的...
  • wpz0713
  • wpz0713
  • 2015年01月22日 15:42
  • 493

Flex入门基础——Flex布局、容器container的属性

1、作用: 利用Flex可实现完美居中效果; 例(1)——display:flex; (注意:无论父元素以何种比例递增,元素依旧保持水平居中) .container{ width:200p...
  • zxy9602
  • zxy9602
  • 2016年11月11日 21:16
  • 937

词法分析器生成工具flex的简单使用

词法分析器生成工具flex的简单使用 2010-10-17 00:30:38 分类: C/C++ 1.FLEX简介    单词的描述称为模式(Lexical Pattern),模...
  • killmice
  • killmice
  • 2017年02月24日 16:20
  • 377

Flex面试题及答案

1.我不想在容器里显示滚动条怎么办? 答:指定horizontalScrollPolicy和verticalScrollPolicy为off 2.请问Flex bulider3可以创建几种不同...
  • wanlixingzhe
  • wanlixingzhe
  • 2014年06月07日 19:46
  • 2647

一劳永逸的搞定 flex 布局

寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联想到 Wo...
  • Magneto7
  • Magneto7
  • 2017年04月27日 14:49
  • 30803

浅撸 css3 flex 布局

css3 flex box css 前端
  • ling369523246
  • ling369523246
  • 2016年02月06日 19:22
  • 3352

flex4与Java交互的三种通信方式

原文链接: http://www.blogjava.net/sxyx2008/archive/2010/07/17/326360.html   flex4出来一段时间了,去年看了一段时间fle...
  • luohuayuan69
  • luohuayuan69
  • 2013年10月30日 14:24
  • 1729

selenium对flex程序的自动化测试

因为公司的项目需要导入selenium对flex程序进行测试,我研究了一段时间稍有成就,因为在研究过程中发现selenium对flex的应用资料比较少,当然在这里也学到一些东西。所以研究后就把我学到的...
  • wangyutian2011
  • wangyutian2011
  • 2015年03月25日 10:19
  • 1142

Flex 布局教程:实例篇

上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法。你会看到,不管是什么布局,Flex往往都可以几行命令搞定。 我只列出代码,详细的语法解释请查阅《Flex布局教程:语法篇》。我的主...
  • javaloveiphone
  • javaloveiphone
  • 2016年04月08日 10:48
  • 1506

基于flex弹性布局实现“头尾固定,中间滚动”的页面(纯CSS实现)

之前写过一个小项目,首先这个页面布局是这个样子滴,举个栗子,京东的首页: 这算是一种还算常见的页面样式吧,头部和底部固定(或者底部固定没有头、头部固定没有底),有的会用fixed去做,但有在...
  • qazxbjp2010
  • qazxbjp2010
  • 2017年02月23日 14:14
  • 3531
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:flex系列文章:第一章. Flex概念和工具初步
举报原因:
原因补充:

(最多只允许输入30个字)