Flex从入门到精通 第25章
第1章 Flex基础入门(理论)
3. MXML语言简介 语言简介
Flex程序由以下三种类型的文件组成
以mxml后缀的程序文件
MXML语言,是专用于Flex程序中,描述界面表现的一种XML标记语言 可用它来管理程序的整体布局,控制组件的样式和外观,也可以构建非可视化 对象
以as为后缀的ActionScript文件
ActionScript 是针对 Adobe Flash Player 运行时环境的编程语言 它在 Flash 内容和应用程序中实现了交互性、数据处理以及其它许多功能,是 一种面向对象的编程语言 MXML标签与ActionScript类或者类中的属性是相对应的
1.2 什么是Flex 什么是
Flex是一个针对企业级富互联网应用的表示层解决方案 Flex是一种应用程序框架,由一系列的技术和软件产品组成,比如集成开 发环境、程序开发套件、数据库服务器软件等 通过Flex技术,开发人员可将RIA程序编译成为Flash文件,为Flash Player所接受 一个完整的Flex程序由MXML代码和ActionScript代码组成
执行Java Script代码,关闭浏览器
2.4 发布源代码
Adobe Flash Builder默认情况下,不发布源代码,即在浏览页面时通过 “查看” →”源代码”命令并不能查看到Flex源代码 可以使用”导出发行版“命令发布Flex源代码
单击工具栏上的 图标,弹出对话框 单击“完成”按钮完成“导出发行版”功能。切换到代码视图,Adobe Flash Builder会在flexapp.mxml文件中添加“viewSourceURL”属性 运行Flex程序,在浏览器单击右键会弹出“查看源代码“菜单
3.2 自定义MXML组件 自定义 组件
自定义组件提高了代码的重用性,降低了维护的难度 一般将程序中功能独立或者需要反复使用的部分定义成一个用户组件, 例如关闭浏览器按钮三个应用中会频繁使用,可将其作为自定义组件 在Flex中自定义组件的步骤 <?xml version="1.0" encoding="utf-8"?>
如何学习Flex 简明教程!对于初学者太有用啦!
如何学习Flex 简明教程!对于初学者太有用啦!阅读次数: 356次发布时间: 2011-07-26 18:32:48发布人: xiangkun来源: ITeye原来有人问我:怎样学好Flash?我的回答一般就是:仔细看帮助、多做练习、多看优秀的源码、多上专业论坛参加讨论。
可是Flex来了,于是又有人问:怎样学好Flex?我不知如何回答,因为我也是Flex新手,也在“仔细看帮助、做练习、看源码、上论坛……”。
现在d.CAT 的这篇优秀的文章,详细的回答了这个问题。
下面的文章转自d.CAT RIA Blog,由于原文是繁体中文的,所以转载过来的时候我对文章的繁体字部分进行了替换,对一些词语进行了修改以符合简体中文语言习惯,对一些术语进行了注释。
最后,文中所有第一人称处所指的都是原文作者而不是“我”,有麻烦可以找他以下为转载:==================================================================*Flex 的基础架构关于flex 基本上常被问到的不外乎就是“如何可以学好它?”,要了解这个问题的答案基本上只要看懂下面这个图就OK了。
*Actionscript 该学的重点从最底层看起,最下面的actionscript 3是一切的基础,它是flash/flex 编程使用的唯一程式语言,因此任何人想学好flex 第一件事绝对是先摸熟actionscript 这个语言,包含:1.它的基本语法与结构(array, hash, loop, if else…)2.DisplayList (DisplayObject, DisplayObjectContainer)与Event system(bubbling,propagating…)3.Sound, Video, NetConnection 与Graphics class掌握as3 的精华后,接下来就可以进入flex framework。
《Flex 4 0 RIA开发宝典》读书笔记模板
第11章 Flex 1
可视化组件基 础
2
第12章 Flex 常用组件概览
3
第13章 Flex 程序设计进阶
4
第14章 Flex 模块化编程
5
第15章图表组 件
第11章 Flex可视化组件基础
11.1 Flex组件概述 11.2可视化组件的类结构 11.3 Flex组件生命周期 11.4 Flex可见组件 11.5 Libray和Definition标签 11.6小结
第15章图表组件
15.1图表组件开发基础图表数据 15.2图表组件常用属性 15.3图表事件 15.4复合坐标轴 15.5图表组件效果 15.6小结
1
第16章第一个 Flex程序
第17章使用多 2
种方法创建应 用程序
3 第18章
ActionScrip t 3.0程序结 构应用实例
4
第19章 Math 类应用实例
谢谢观看
第21章 String类应用实例
21.1使用字符串方法分割字符串 21.2使用字符串方法查找字符串 21.3使用字符串方法制作“打字效果”实例 21.4使用字符串方法制作“逐字逐句”实例 21.5小结
第22章 Date类和Timer类应用实例
22.1设计一个数字式电子表 22.2设计一个指针式盘表 22.3制作一个秒表计时器 22.4小结
第32章 Flex 开发企业局域 应用实例解析
第33章利用 Flex和PHP创 建站视频发布
系统
第32章 Flex开发企业局域应用实例解析
32.1实例工程设置 32.2 Spark Intranet SampIe App应用 32.3数据/服务视图、测试选项视图和Getter/Setter方法自动生成 32.4使用络监视器 32.5小结
Flex布局语法教程菜鸟教程
Flex布局语法教程菜鸟教程⽹页布局(layout)是CSS的⼀个重点应⽤。
布局的传统解决⽅案,基于盒状模型,依赖display属性 + position属性 + float属性。
它对于那些特殊布局⾮常不⽅便,⽐如,垂直居中就不容易实现。
2009年,W3C提出了⼀种新的⽅案—-Flex布局,可以简便、完整、响应式地实现各种页⾯布局。
⽬前,它已经得到了所有浏览器的⽀持,这意味着,现在就能很安全地使⽤这项功能。
Flex布局将成为未来布局的⾸选⽅案。
本⽂介绍Flex布局的语法。
以下内容主要参考了下⾯两篇⽂章:A Complete Guide to Flexbox和A Visual Guide to CSS3 Flexbox Properties。
⼀、Flex布局是什么?Flex是Flexible Box的缩写,意为”弹性布局”,⽤来为盒状模型提供最⼤的灵活性。
任何⼀个容器都可以指定为Flex布局。
.box{display: flex;}⾏内元素也可以使⽤Flex布局。
.box{display: inline-flex;}Webkit内核的浏览器,必须加上-webkit前缀。
.box{display: -webkit-flex; /* Safari */display: flex;}注意,设为Flex布局以后,⼦元素的float、clear和vertical-align属性将失效。
⼆、基本概念采⽤Flex布局的元素,称为Flex容器(flex container),简称”容器”。
它的所有⼦元素⾃动成为容器成员,称为Flex项⽬(flex item),简称”项⽬”。
容器默认存在两根轴:⽔平的主轴(main axis)和垂直的交叉轴(cross axis)。
主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
FLEX快速入门介绍
Flex快速入门介绍一、Flex简介:Flex是一个针对企业级富互联网应用的表示层解决方案,是一种应用程序框架。
Flex系列产品包括编译工具和IDE,通过编写MXML和ActionScript代码,用编译器来生成swf文件,使用浏览器的Flash Player插件就可以进行观看。
MXML代码与jsp 很像,主要是用于布局和显示,ActionScript代码和javascript很像,语法也有很多相似之处。
总的来说,使用java的程序员很容易入手学习flex。
二、Flex与ActionScript基础:一个Flex应用程序有ActionScript和MXML两种语言代码组成。
从3.0开始ActionScript已经从基于原型脚本语言进化到完全面向对象的。
MXML则是一种标记语言,非常类似于大家所熟悉的超文本标记语言(HTML),扩展标记语言(XML)。
如何把MXML和ActionScript相互关联起来呢?对于编译器来说,解析这两种语法后最终被翻译成同一个对象,比如:<mx:Button id="btn"label="My Button"height="100"/>和Var btn:Button=new Button();bel="MyButton";btn.height=100;产生的是同一个对象,两者的主要不同是,ActionScript创建的对象(上面第二个例子)除了Button就没有别的了,而MXML中创建的对象将Button添加到包含MXML代码的任何组件上。
Flex框架根据MXML中的对象描述来调用构造函数,然后将其添加到父对象上或设置其为父对象的某个属性。
MXML文件中可用<mx:Script>标签包含ActionScript,不过ActionScript文件是不能包含在MXML里的。
Flex
Flex 简明中文教程本书特色用通俗易懂的语言,不要求华丽的语句(部分可能由用词错误)介绍难懂的语法,通过图片讲解每一个操作步骤,让初学者快速入门,让懂一点皮毛的人快速提高语言尽量精简,不说废话,句句重点注重从实际例子中讲解,不让学习枯燥无味涵盖Flex全部基础知识写作目的介于现在市面上,甚少的书介绍Flex,好不容易看见一本还是英语的,使好的想学Flex 的人感到无从下手,本人通过自己对Flex的一段时间研究编写了一本简明教程,希望大家喜欢联系作者由于此书使本人兴趣来了写的,肯定存在诸多不完善的地方,由的地方可能不使说很清楚,望大家批评指正qq:403617596email:yanming4036@编者:严铭版权声明:此教程由个人制作,可以随便转载,但不可以用作商业用途Flex是Adobe公司推出的一系列开发工具和技术,使开发人员开发和可部署升级的富媒体技术(简称RIAs),Flex使一种年轻的,现代的开发技术,基于标准的语言,运行在客服端、支持公共模板、支持高级数据处理的技术。
RIAs能支持在客户端开发就向web开发一样,这样就减轻了服务器端的负担。
本节将简单介绍Flex的特点,让大家对Flex有一个大致的了解。
1.1.1Flex的技术特点Flex可以在企业内部,和web服务器上创建和运行,是公认的最强大,最完整的RIA 开发技术,使企业、个人开发富有个性的web应用程序。
彻底改变人与web的交互能力。
1.1.2Flex的开发环境搭建可以直接到Adobe公司的官方网站下载。
Adobe buildler3.0(由于你看到书的时间不同可能是4.0或者更加高了),安装办法就不用多说了哈。
另外还可以在Eclipse下面装一个叫Flex builder3 bate plugin的插件(推荐使用第一种开发环境,本书基于Adobe builder3.0讲解)。
1.1.3 Flex开发语言介绍开发Flex可以使用两种语言来写,可能对熟悉flash的人一定听说过ActionScript 吧,对,Flex可以用基于ActionScript3.0来开发,另外还有就使一种基于脚本和xml 的语言——Mxml。
Flex快速入门
Flex 快速入门无衣摘自/cn/ (版权归原作者所有)Flex 快速入门: 使用 MXML 和 ActionScript 进行编码Adobe® 将 Flex 实施为 ActionScript 类库。
该类库包含组件 (容器和控件)、管理器类、数据服务类和所有其他功能的类。
您通过将 MXML 和 ActionScript 语言与该类库一起使用来开发应用程序。
MXMLMXML 是用于为 Adobe® Flex™ 应用程序进行用户界面组件布局的 XML 语言。
您还使用 MXML 来显式定义应用程序的非可视方面, 例如访问服务器端数据源和用户界面组件与数据源之间的数据绑定。
例如, 您通过使用下面的 MXML 语句, 使用 <mx:Button> 标签来创建 Button 控件的实例:<mx:Button id="myButton" label="I'm a button!"/>您设置 id 属性以赋予 Button 实例一个唯一的名称, 以后可以使用该名称引用到它。
label属性设置在 Button 实例上显示的标签的文本。
下面的示例显示创建显示 Button 控件的 Flex 应用程序所需的完整代码:<?xml version="1.0" encoding="utf-8"?><mx:Applicationxmlns:mx="/2006/mxml"horizontalAlign="center" verticalAlign="center"><mx:Button id="myButton" label="I'm a button!" /></mx:Application>在编写 Flex 应用程序之后, 您必须使用 Flex 编译器来编译它。
Flex完全自学入门手册
Flex入门教程编写日期:2009-02作者:Dason 主要讲3个主题:1.Flex是什么,用途和前景;2.Flex Builder基础;3.MXML基础;现在进入第1个主题:首先我们要明白,flex不是专门用来做网页的,它主要是用来做RIAs的RIAs=Rich Internet Applications富英特网应用程序Flex现在虽然是2.0,以前是1.0和1.5,但是不要担心1.0和1.5版本自己没有用过,因为2.0版本才是Flex真正的开始,首先,Flex2.0的技术基础很高,采用Action Script3.0为编程核心,以FlashPlayer9.0为平台它与以前版本的区别是FlashPlayer9.0采用全新的虚拟机,运行速度是8.0的10倍以上Flash8.0和Flex1.0,1.5,都是Action Script2.0用的FlashPlayer8.0,在性能上,跟Flex2.0的Action Script3.0和FlashPlayer9.0相差太远了我们现在处于RIAs浏览器时代,意思是,我们用Flex做的程序,必须要用浏览器打开,以网页的形式发布,明年,我们将步入下一个RIAs时代――桌面RIAs时代,我们现在所有用flex2.0做的程序,明年都可以被重新发布成桌面应用程序,就跟我们现在用的软件是一样了,到时候,我们的程序不再被浏览器限制了,flex能做的程序很多,比如QQ这样的即时聊天软件、论坛、股票软件、网络视频聊天、等等。
你能想到的基本都能做出来,Flex的前景是一片明朗的,而且越往后越会被广泛采用,这一切都从Flex2.0开始,所以,对于我们来说,这是个前所未有的好机会。
现在学flex的人很少很少,如果你等到他已经大面积普及,那就没有竞争力了。
好,现在提问时间,马上要进入下一主题:Flex是纯面向对象语言,C是面向过程语言,ActionScript3.0相对2.0,改动太大了,如果有2.0基础,对3.0帮助不大,所以,如果你第一次接触的就是3.0,也不要紧,3.0删除了很多2.0的东西,而且增加了很多新类,3.0跟JAVA基本没什么区别了,所以,有JAVA基础的人,学起来更快。
北风网-Flex系列从入门到精通配项目案例(S2SH+Mysql实现在线通讯录)
北风网-Flex系列从入门到精通配项目案例(S2SH+Mysql实现在线通讯录)/goods.php?id=68讲师Tony:北风网特邀讲师,先后在南京各大培训机构从事多年IT教学,拥有至少5年的讲师经验,具有丰富的教学经验,本次讲师为大家带来精彩的flex系列讲座,是一个完整的从入门到精通系列课程,课程采用由浅切入,配合在线通讯录的案例开发进行实现flex效果!至此讲带领大家由浅入深进行探讨flex 技术!课程截图请参照:/read-htm-tid-32981.html课程大纲如下:1.RIA技术讨论,Flex技术介绍,Flex Builder软件安装,第一个Flex程序。
2.ActionScript语言基础学习。
变量,常量,数据类型,表达式,3.ActionScript语言基础学习。
判断语句,循环语句,函数4.ActionScript语言面向对象基础学习。
面向对象讨论,包,类和对象。
5.ActionScript语言面向对象基础学习。
继承,接口,多态,重写,重载。
6.ActionScript语言常用类介绍。
String 类, Date类,Timer类,7.ActionScript语言常用类介绍。
Array类,Xml相关操作类。
8.ActionScript语言事件模型,异常介绍。
事件体系介绍,Event相关类,Error类9. MXML语言学习。
容器和组件,常用容器和组件介绍。
10. MXML语言学习。
表单及常用表单控件介绍。
11. MXML语言学习。
DataGrid, Repeater组件介绍。
12.MXML语言学习。
导航栏的制作。
13.Flex动画学习。
状态,过度概念。
14.Flex动画学习。
常用动画组件介绍,实例演示。
15.Flex页面美化CSS介绍1。
16.Flex页面美化CSS介绍2。
17.Flex与服务器的交互URLLoader,URLRequest,URLVariable,HttpService类介绍,演示实际的一个例子。
flex入门完全教程
第一章Flex是如何工作的该部分文档的内容是为用户提供关于Adobe®Flex工作机制的一个快速综述。
通过本章节的学习,你可以创建你的第一个Flex应用程序,并将它与你以前所熟悉的Web开发技术进行比较,以领会Flex的内涵和精髓。
第一节构建并运行Flex应用程序Flex是一个提供开发设计和运行支持的架构,它可以使开发人员创建利用Adobe®Flash®Player9作为前台的“富客户端互联网应用程序/rich Internet applications/RIA”,以满足用户更为直观和极具交互性的在线体验。
开发Flex应用程序的典型步骤如下(通常是这样):1.选取一系列预先定制好的、用于设计应用程序界面的组件(如表格、按钮等等)2.布置组件以设计用户界面。
3.使用样式和主题来增强视觉方面的设计。
4.添加动态行为(例如程序部件之间的相互作用)。
5.定义并连接所需的数据库服务。
6.将源代码编译成SWF文件,然后在Flash Player中运行。
一个典型的Flex应用程序包括如下元素:1.Flex frameworkAdobe®Flex2framework包含了创建RIA所需要的所有组件,它们是:用于应用程序布局规划的容器;针对用户界面和从用户处获取数据的控制(例如文本框和按钮);广泛支持的数据绑定、数据格式化、以及有效值验证;事件驱动的开发模式。
Flex framework被包含在公用组件库(SWC)文件中。
2.MXML每个Flex应用程序至少包含有一个MXML文件,它被作为该程序的主文件。
MXML是一种标记语言,它是基于XML的一种实现,用来创建Flex应用程序。
你可以使用它去声明程序中所使用的标签结构的定义。
3.ActionScript3.0你可以使用ActionScript3.0为应用程序添加动态行为,它是基于ECMAScript的一种实现,类似于Jav aScript。
Flex培训
24
Content 内容
Flex简介 Flex示例 Flex与J2EE应用结合 常见问题的解决方案 Flex开发框架
Inspur group 2012-2-28
25
Flex与J2EE的结合:新建项目时 Flex与J2EE的结合: 的结合
选择J2EE型的应用服务类型
26
Flex与J2EE的结合:新建项目时 Flex与J2EE的结合: 的结合
编辑应用服务地址,引用url,上下文
编辑完了要点击检验正确性
27
Flex嵌入html,jsp Flex嵌入html, 嵌入html
参照你应用下的bin目录下的html文件
28
Flex嵌入html,jsp Flex嵌入html, 嵌入html
29
在Flex里访问传入的参数 Flex里访问传入的参数
11
Flex的优势五:自动解析xml文件 Flex的优势五:自动解析xml文件 的优势五 xml
Flex中的Actionscrip包含了针对XML的Ecmascript或者 叫做E4X。它通过把XML看作一个原始变量使得操作一个 XML对象变得简单。 Xml对象及其子元素还可以直接作为Tree,DataGrid对象 的数据集,直接以图形化的方式进行展现。
<?xml version="1.0" encoding="utf8"?> <mx:Application xmlns:mx="/20 06/mxml" layout="absolute"> <mx:Button id="btn" lab el=" 确定"/> </mx:Application>
Flex操作手册
系统Flex编码规范参考对系统平台涉及到Flex部分的建议Qinmao2010-2-9目录1.架构目录 (5)1.1.主要文件结构 (5)1.2.SRC文件结构 (5)1.3.UTILS文件结构 (5)2.ACTIONSCRIPT (6)2.1.文件结构 (6)2.2.样式 (6)2.2.1.行与换行 (6)2.2.2.变量声明 (6)2.2.3.括号 (7)2.2.4.换行与空格 (7)2.3.注释 (8)2.3.1.文档注释 (8)2.3.2.执行注释 (8)3.MXML (9)3.1.文件结构 (9)3.2.样式 (9)3.2.1.行与换行 (9)3.2.2.属性 (9)3.2.3.脚本 (9)3.3.注释 (10)3.3.1.文档注释 (10)3.3.2.执行注释 (10)4.JAVA (11)4.1.文件结构 (11)5.命名 (11)5.1.一般规则 (11)5.2.语言 (11)5.3.包 (11)5.4.类 (12)5.5.接口 (12)5.6.方法 (12)5.7.变量 (12)5.8.常量 (12)5.9.命名空间 (12)6.配置文件 (12)6.1.F LEX配置文件 (12)7.插件安装 (15)7.1.安装文件 (15)【内部资料注意保密】版本:v1.0武汉市精建工程科技有限公司信息部二〇一〇年二月1.架构目录1.1. 主要文件结构bin-debug:调试生成文件html-template:libs:存放swc插件包src:开发文件目录1.2. src文件结构assets:图片,css,资源文件business:业务逻辑文件controller:前端控制文件events:事件文件model:模型文件utils:工具文件views:自定义组件Main.mxml:项目的主运行文件1.3. utils文件结构line:关于线工具文件2.A ctionScript2.1. 文件结构ActionScript文件包含以下组成部分:定义包Import 描述(flash包,mx包,com.adobe包,公司组件,第三方包,属于该文件的工程包)对类的注释属性的声明属性的注释方法方法注释2.2. 样式2.2.1.行与换行如果一段描述不能放在一行中,依据下列规则将其拆分成多行:从逗号后换行;在运算符之前换行;最好在较高级别代码处换行;换行后与上一行对齐;如果上一条规则不适用,加入两个缩进2.2.2.变量声明每行只有一个声明。
Flex从入门到精通 第25章
25.4.2 城市信息视图程序 CityInfoPanel.mxml 城市信息视图程序代码是用来显示返回结果中的 城市信息的用户界面。在如上一小节相同的文件 夹下,同样的步骤创建文件名为 “CityInfoPanel.mxml”的城市信息视图的面板 组件。在面板的表单标签下,使用文本条显示一 系列有关城市的信息。其完整的代码如下所示;
25.5 模型定位器代码
模型定位器代码部分建立了整个程序的数据模型 定位器,在客户端共享数据。存放在 “com/weather/example/model”文件夹下面。根 据项目的需求,建立了2个ActionScript代码。一 个模型定位器和一个所有的变量文件。
25.5.1 模型定位器程序 ModelLocator.as
25.9 服务层代码
这一层的代码是建立了Cairngorm框架的服务程序 和服务委托程序,定义所使用的远程服务的具体 参数。代码存放在 “com/weather/example/business”文件夹下面。 包含了Services.mxml和ServicesDelegate.as两 个文件。
25.9.1 服务程序Services.mxml
25.10 主程序 WeatherForeCastExample.mxml 主程序代码是布局整个界面。其创建的步骤如下: (1)在新的项目的根目录的文件夹下,建立一个 新的MXML Component文件。使用鼠标右键单击项 目名称,选择【New】|【MXML Application】选 项, (2)弹出对话框,在“Filename”文本条中输入 “WeatherForeCastExample”。 (3)选择“Finish”按钮,这样就主程序。
Flex 简单培训
Flex 培训大纲1、简介2、AS3语言基础与JSON格式3、简单组件的编写(常用组件)4、复合组件的编写与打包swc5、Css的设置与动画6、前后台传输7、sprite图形绘图8、一些小经验/开发规范一、简介Flex 通常是指Adobe Flex,是最初由Macromedia公司在2004年3月发布的,基于其专有的Macromedia Flash平台,它涵盖了支持RIA的开发和部署的一系列技术组合。
现在flex使用的脚本是ActionScript3.0,并且建立起类似于java swing的类库和相应的UI 组件。
Flex是通过java或者.net等非Flash方法,解释.mxml文件生成相应的.swf文件。
Flex 的组件和flash的组件很相似,但是有所改进增强。
目前Macromedia公司已经被ADOBE(奥多比)收购。
当前的最新版本为flex4,常用版本为flex3,flex4目前中文资料很少,了解的还不深入,所以目前还用flex3。
运用flash是完全可以做到flex效果的,相应的,flex也可完成flash的功能特效,它们在底层是相通的,只是开发工具与开发标准的不同,都被解释为As来运行(个人观点),所以我认为flex在效果上达的的目标是实现flash的各种功能的同时还可快速的组件式开发。
它能更好的为用户一种不同与html+js的交互方式,得到较好的用户体验。
AIR 是flex基础上的桌面应用,它可以开发出脱离浏览器之外的桌面应用,与本地数据库交互,操作本地文件,调用exe文件,从而调用dll(动态链接库)文件等操作。
LCDS:Flex和Java通信,一般来说使用LCDS(LiveCycle Data Service),不过这个是收费的,所以就用免费的BlazeDS代替。
BlazeDS是官方从LCDS中分离出来的开源数据服务中间件。
为什么来说一般来说是用LCDS,也就是说不一定非要用LCDS,因为LCDS提供的功能完全可以自己实现,而且除了RemoteObject方式,还有WebService、HTTPService等等。
Flex入门教程
Flex 入门教程[来源:蓝色理想| 作者:Robert Crooks | 时间:2008-03-24 | 点击:1912 | 收藏本文【大中小】]创建第一个Flex应用程序作者:Robert Crooks (Macromedia培训小组)翻译:MoonFun.qhwa轉載請註明來自藍色理想在本教程中,你可以阅读到Flex的简单介绍,还可以利用MXML创建一个简单的分类购物车,从而学习到Macromedia Flex应用程序的基本构成。
你将会学到:创建一个应用程序、添加一个布局的容器、添加控件、创建与控件关联的简单数据模型,以及利用ActionScript对事件进行处理。
本文是Robert Crooks编写的四步Flex入门系列的第一部分,Robert Crooks现就职于Macromedia客户培训部门Flex 入门(2):创建一个Flex计算器Flex 入门(3):使用容器Flex 入门(4):使用数据模型点击这里下载整个系列教程:Flex入门系列(144KB)如果你需要更加详细的信息,Macromedia客户培训小组提供了为期两天的在线培训课程:《利用Flex开发丰富的互联网应用程序》,教你快速学习Flex应用程序开发。
让我们开始吧!如果你是一个XML新手,请记住下面的基本规则如同所有的XML语言一样,在MXML中,标签和属性都是区分大小写的;所有的属性值必须用双引号(")或单引号(包含所有的标签必须是闭合的。
没有子标签的标签可以以斜杠直接结束,而无需额外的结束标签:<mx:Label text="Hello"></mx:Label>或<mx:Label text="Hello"/>如果你是一个ActionScript新手,你可以发现它的语法和你熟悉的语言的语法很相近,比如JavaScript或者Java。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
25.4.3 天气预报数据格栅视图程序 WeatherResultPanel.mxml
• 天气预报数据格栅视图程序代码是在数据格栅中 显示天气预报结果的用户界面。在如上一小节相 同的文件夹下,同样的步骤创建文件名为 “WeatherResultPanel.mxml”的天气预报数据格 栅组件,不同的是此组件以“Canvas”为基础组 件。其具体步骤如下:
ห้องสมุดไป่ตู้
25.1 Cairngorm框架概览
• Cairngorm框架是Flex建立的一个应用框架。使用它,可以将代码 按照逻辑功能分块。这个方法也被称为MVCS。这里的M代表模型 (Model),V代表视图(View),C代表控制(Control),S代表 服务(Service)。Cairngorm在代码结构上分为以下几个部分:
• 命令(Command):处理业务逻辑,调用Cairngorm Delegates, 更新Model Locator中存储的对象和变量。
25.2 查询天气系统分析
• 在本章的实例中,将实现一个查询天气预报的系 统。参照图25-1,首先用户在查询数据的视图组 件中输入需要的数据,可以输入城市名称或邮政 编码。然后单击“查询”按钮后。使用一个公用 的Web Services,其返回所查询城市的一周天气 预报值,返回的数值,将在三个视图组件中显示 结果:高级数据格栅,折线图表,和城市信息表 格。根据Cairngorm框架的结构,下面从其每个部 分来对代码进行解释。
• 查询信息值对象代码是用来存储所有将要发出的 查询信息的类。
25.3.2 城市信息值对象程序 CityInfoVO.as
• 城市信息值对象代码是用来存储所有有关城市信 息的类。同上,在与QueryItemVO.as文件相同的 文件夹下,建立文件名为“CityInfoVO.as”的城 市信息值对象代码。在代码中包含了 “cityName”;“stateName”;“latitude”; “longitude”;“zipcode”;这几项变量,并 且变量类型均为“String”。
25.2.1 实例整体结构
• 依据Cairngorm框架的构造,主要分成下面七个部分: • 值对象部分(ValueObject):用来存储项目所使用的数据
类型。 • 视图部分(View):项目的图像界面。 • 模型定位器(Model Locator):绑定视图界面和命令代码
中相应的数据。 • 事件(Event):定义用户自定义的事件,用来广播给命令
• Web Services,中文名称是网络资讯服务计算技术,也称 之为网络服务,简单的说,Web Services是透过Web通讯协 议和资料格式的开放式标准来为其他的应用程序提供服务 的。Web Services的基础技术包括:XML、WSDL、SOAP和 UDDI。其底层的操作如下:以XML格式为标准,将资料转换 为Web Services的资料,利用WSDL描述将服务的对象做一 个描述,使另一端可以通过这个描述,解释所得的资料。 以SOAP为通讯底层,进行传送的动作,向UDDI进行搜寻或 注册动作。
• 视图部分(View):由一个或多个的Flex组件组成的用户界面构 成。其作用是显示数据,表达内容,并与用户形成互动。
• 数据服务模型(Model Locator):用于存储程序中所有的值对象 (Value Objects),并且共享变量。它存储在客户端,而不是在 服务器端。
• 前端控制器(Front Controller):用于接收Cairngorm事件,并 将它们映射到Command。
第25章 查询天气系统——基于Cairngorm框架
• 本章将讲解一个查询天气预报的系统。它基于 Cairngorm框架结构,远程调用一个公用的Web Services网站的数据,提供美国地区各个地区的 天气预报的数据,并在数据格栅和图表中将数据 显示出来。通过本章,读者可以掌握Flex项目的 构建,Cairngorm框架的应用和远程Web Services 的调用。
25.4 视图代码
• 视图部分也就是用来显示的用户界面。存放在 “com/weather/example/view”文件夹下面。根 据项目的需求,在这一部分,一共建立了4个视图 组件,分部用来显示查询信息、城市信息、天气 预报数据、天气预报图表。
25.4.1 查询信息视图程序 QueryPanel.mxml
• 查询信息视图程序代码是让用户输入查询信息的 用户界面。其创建的步骤如下:
25.4.2 城市信息视图程序 CityInfoPanel.mxml
• 城市信息视图程序代码是用来显示返回结果中的 城市信息的用户界面。在如上一小节相同的文件 夹下,同样的步骤创建文件名为 “CityInfoPanel.mxml”的城市信息视图的面板 组件。在面板的表单标签下,使用文本条显示一 系列有关城市的信息。其完整的代码如下所示;
程序所要执行的工作。 • 控制器(Control):对应事件和命令代码。 • 命令(Commands):具有处理查询和处理结果数据。 • 商务层(Business):定义所要使用的Web Services有关
数据。
25.2.2 实例的数据来源
• 在实例中,使用一个公用的Web Services的地址来作为数 据源。简单的说就是发送所要查询的城市信息,然后用此 Web Services返回相应的结果值。
25.2.3 建立实例项目
• 首先需要做的建立实例项目,简单的说就是要建 立一个Flex项目,并且在该项目中使用Cairngorm 框架。因为需要下载Cairngorm2.swc文件,然后 在Flex Builder中建立一个新的Flex项目。
• 在完成建立项目后,就需要在每个部分写入相应 的代码来完成整体的工作。
25.3 值对象代码
• 首先在“com/weather/example/vo”文件夹下面 建立两个值对象程序,一个是查询信息值对象, 一个是返回的城市信息值对象。值对象是用来定 义所需要实体的信息,例如城市信息值对象中就 包含了所以有关这个城市的信息。
25.3.1 查询信息值对象 QueryItemVO.as