当前位置:首页 >> IT认证 >>

第1章 Flex基础入门(理论)


第1章 Flex基础入门 章 基础入门

本章内容
Flex简介 创建第一个Flex程序 MXML语言简介 使用容器控制界面布局

本章目标
理解Flex相关概念 掌握并创建Flex应用程序 理解MXML文件结构 能够编写简单的ActionScript 理解Flex程序的界面布局

1. Flex简介 简介
1.1 RIA(Rich Internet Application)概述
传统的网络程序一般都采用页面表现内容,在页面中使用HTML标记语言来表 现界面层 而HTML只适合于图文内容,在形式上受到很多限制,已经渐渐不再能满足用 户更高的、全方位的体验要求 用户已经厌倦了网页上单调的表达式,希望网页在内容表现上更“花哨”一些, 更有趣一些,更有个性化特 RIA将桌面应用程序的强交互性与传统WEB应用的灵活性结合起来,为用户带 来全新的体验 RIA的富客户端采用异步方式和服务器端通信,这是一种安全、具备良好适应 性的服务器运行模式 富客户端的优点还表现在界面内容上,大量的界面控制和数据紧密结合在一起, 还可以整合声音、视频等桌面元素,这些都体现了富互联网应用程序的优越性

1.2 什么是Flex 什么是
Flex是一个针对企业级富互联网应用的表示层解决方案 Flex是一种应用程序框架,由一系列的技术和软件产品组成,比如集成开 发环境、程序开发套件、数据库服务器软件等 通过Flex技术,开发人员可将RIA程序编译成为Flash文件,为Flash Player所接受 一个完整的Flex程序由MXML代码和ActionScript代码组成
MXML基于XML标准,用于配置和设置Flex程序的界面及编写表现层数据模 型 ActionScript基于ECMAScript,用于设置Flash动画,其语法类似 JavaScript

Flex4是Flex的一个新版本,它的产品集包含以下几个部分
Adobe Flex4 SDK Flash Builder 4 Adobe LiveCycle Enterprice Suite

2. 创建第一个Flex程序 创建第一个 程序
2.1 安装Flash Builder
Flash Builder 4 是一个基于Eclipse的集成开发环境 通过Flash Builder可以在很大程度上提高Flex的开发效率

2.2 创建Flex Project 创建
创建一个Flex应用程序的步骤如下
选择“开始”→”程序”→” Adobe” →”Adobe Flash Builder Plug-in Beta 2 Eclipse 启动程序”启动Adobe Flash Builder 选择“文件”→ ”新建“ → ”Flex项目“,弹出“新建Flex项目”对话框,在 “项目名”文本框中输入“flexapp”项目名称,其它的使用默认设置 单击“完成”按钮,Adobe Flash Builder将创建一个Flex项目并自动生成所 有基本文件,包括主程序文件、项目库文件、HTML页面模板等
bin-debug文件夹:用来存放程序编译后输出的SWF和HTML等一系列文件 html-template文件夹:生成HTML页面的文件模板,包括检测用户浏览器Flash播 放器插件版本号的JS脚本文件和一个自动下载最新Flash播放器插件的SWF文件 libs文件夹:存放Flex应用程序引用的库文件 flexapp.mxml文件:这个文件即为项目的主程序文件

2.3 添加组件和代码
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" Flex应用程序以<s:Application>开始 xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768"> <s:Button>标签会生成Button按钮 <s:Button y=“154” label=“计算” x=“82” click="this.txtResult.text=String(int(this.txtNum1.text)+int(this.txtNum2.text))"/> <s:Label x="73" y="54" text="第一个数:" width="75" height="19" /> 当单击运行按钮时,应用程序文件中的MXML标签被转换成ActionScript。 <s:TextInput x="133" y="54" id="txtNum1"/> <s:TextInput>标签会生成文本输入框 ActionScript接下来被用来生成SWF文件,SWF是Flash Player能理解的格式。 <s:Label x="73" y="89" text="第二个数:" width="75" height="19"/> 最后,SWF文件被发送给浏览器中的Flash Player来运行 <s:TextInput x="133" y="84" id="txtNum2"/> <s:Label x="73" y="121" text="运算结果:" width="75" height="19"/> <s:TextInput x="133" y="116" id="txtResult"/> <s:Label>标签显示一些说明性的文字 <s:Button x="187" y="155" label="关闭" click="navigateToURL(new URLRequest('javascript:window.opener=null;window.close()'),'_self') "/> </s:Application>
执行Java Script代码,关闭浏览器

2.4 发布源代码
Adobe Flash Builder默认情况下,不发布源代码,即在浏览页面时通过 “查看” →”源代码”命令并不能查看到Flex源代码 可以使用”导出发行版“命令发布Flex源代码
单击工具栏上的 图标,弹出对话框 单击“完成”按钮完成“导出发行版”功能。切换到代码视图,Adobe Flash Builder会在flexapp.mxml文件中添加“viewSourceURL”属性 运行Flex程序,在浏览器单击右键会弹出“查看源代码“菜单
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 勾选启用查看源代码 xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768" viewSourceURL="srcview/index.html">

3. MXML语言简介 语言简介
Flex程序由以下三种类型的文件组成
以mxml后缀的程序文件
MXML语言,是专用于Flex程序中,描述界面表现的一种XML标记语言 可用它来管理程序的整体布局,控制组件的样式和外观,也可以构建非可视化 对象

以as为后缀的ActionScript文件
ActionScript 是针对 Adobe Flash Player 运行时环境的编程语言 它在 Flash 内容和应用程序中实现了交互性、数据处理以及其它许多功能,是 一种面向对象的编程语言 MXML标签与ActionScript类或者类中的属性是相对应的

以css为后缀的样式表文件

MXML

ActionScript

SWF

3.1 MXML文件结构 文件结构
<?xml version="1.0" encoding="utf-8"?> <s:Application MXML应用程序采用XML文件格式 一个程序中只能出现一个s:Application节点

xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <s:Button y="129" label="计算" x="42" /> </s:Application> Flex主程序文件由于要使用Flex组件,而Flex组件定义于 “library://ns.adobe.com/flex/spark”命名空间中,所以要使用 “xmlns:s="library://ns.adobe.com/flex/spark”的命令格式导入组件的命名空间,以此来使 用组件。这种方法与JAVA Web中使用自定义标签类似,在使用之前也必须通过taglib命令 导入标签库描述文件,即: <%@ taglib uri=”http://com.soft/tags” prefix=”s”%>,其中”xmlns”对应于“taglib”命 令;”http://com.soft/tags” 对应于“library://ns.adobe.com/flex/spark”命名空间;prefix=”s”对 应于xmlns:s后面的s,表示标签的使用前缀 使用s命名空间中定义组件 将s定义为XML的命名空间

3.2 自定义MXML组件 自定义 组件
自定义组件提高了代码的重用性,降低了维护的难度 一般将程序中功能独立或者需要反复使用的部分定义成一个用户组件, 例如关闭浏览器按钮三个应用中会频繁使用,可将其作为自定义组件 在Flex中自定义组件的步骤 <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 在Flex应用程序中创建一个包命名为view,在view包中会存放所有自定义 xmlns:s="library://ns.adobe.com/flex/spark" 组件 xmlns:mx="library://ns.adobe.com/flex/halo" 引用自定义组件所在的命名空间 xmlns:view="view.*" 1.指定自定义组件名所在的包为view 选择“文件”→ ”新建” →“MXML组件”命令弹出”新建MXML组件 minWidth="1024" minHeight="768"> “对话框,并按提示输入各项 <s:Button y="129" label="计算" x="42" click="this.txtResult.text=String(int(this.txtNum1.text)+int(this.txtNum2.text))"/> 单击“完成”按钮,切换到“源代码”视图并输入代码 2.指定自定义组件名 <s:Label x="33" y="29" text="第一个数:" width="75" height="19" id="lblNum1"/> 修改flexapp.mxml主程序文件的代码 <s:TextInput x="93" y="29" id="txtNum1"/> <s:Label x="33" y="64" text="第二个数:" width="75" height="19"/> <s:TextInput x="93" y="59" id="txtNum2"/> <?xml version="1.0" encoding="utf-8"?> <s:Label x="33" <s:Button xmlns:fx="http://ns.adobe.com/mxml/2009" y="96" text="运算结果:" width="75" height="19"/> <s:TextInput x="93" y="91" id="txtResult"/> xmlns:s="library://ns.adobe.com/flex/spark" 使用自定义组件 <view:closeWindowBtn x="134" y="129"/> xmlns:mx="library://ns.adobe.com/flex/halo" 3.单击“浏览”按钮选择自定义组件的父组件 </s:Application> label="关闭" click="navigateToURL(new URLRequest('javascript:window.opener=null;window.close()'),'_self') "> </s:Button>

3.3 编写ActionScript 编写
在组件的属性中使用ActionScript来处理事件
<s:Button y="154" label="计算" x="82" click="this.txtResult.text=String(int(this.txtNum1.text)+int(this.txtNum2.text))"/>

在MXML文件中插入ActionScript块
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" > <fx:Script> 在<fx:Script>标签内定义事件处理函数 <![CDATA[ protected function button1_clickHandler(event:MouseEvent):void { this.txtResult.text=String(int(this.txtNum1.text)+int(this.txtNum2.text)); } ]]> </fx:Script> <s:Button y="129" label="计算" x="42" click="button1_clickHandler(event)"/> </s:Application> 在按钮的click事件中引用预先定义的事件处理函数

4. 使用容器控制界面布局
4.1 控制Application的布局 Application是一个特殊的容器,位于界面元素层级的根部,它包含 <?xml version="1.0" encoding="utf-8"?> 了整个程序中的所有元素 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" Application的layout属性用于决定Application界面布局,该属性有以 xmlns:s="library://ns.adobe.com/flex/spark" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" 下几个取值: xmlns:mx="library://ns.adobe.com/flex/halo"> minWidth="1024" minHeight="768"> <s:layout> BasicLayout: <s:layout> <s:HorizontalLayout paddingLeft="20" paddingTop="20"/>
将布局设置为HorizontalLayout 布局 <s:HorizontalLayout/> </s:layout> 默认属性,当不指定定位后,则是绝对定位布局 </s:layout> <s:Button label="按钮一"/> <s:Button label="按钮一"/> HorizontalLayout <s:Button label="按钮二"/> paddingLeft(左边距) 、paddingTop(顶边距) paddingLeft(左边距) 、paddingTop(顶边距) <s:Button label="按钮二"/> <s:Button label="按钮三"/> <s:Button label="按钮三"/> spark组件库里面的水平布局方式 <s:Button label="按钮四"/> <s:Button label="按钮四"/> </s:Application> VerticalLayout </s:Application>

spark组件库里面的竖直布局方式

TileLayout
这是spark组件库新增的布局方式,即格子布局方式

4.2 控制容器的布局
Panel容器
Panel容器是使用最多的一种容器,默认布局方式是BasicLayout布局

<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <s:layout> <s:BasicLayout/> </s:layout> <s:Panel x="51" y="33" width="290" height="182" title="系统登录 "> 系统登录 <s:Button x="110" y="100" label="登录" id="btnlogin"/> <s:Button x="198" y="100" label="退出" id="btnExit"/> <s:Label x="46" y="26" text="用户名:" width="63" height="15"/> <s:TextInput x="95" y="21" id="txtUid"/> <s:Label x="46" y="58" text="密 码:" width="63" height="15"/> <s:TextInput x="95" y="53" id="txtPwd"/> </s:Panel>

控制容器的布局
Group容器
Group是常用的一种容器,其体积小,使用灵活
<s:Application <s:layout> <s:HorizontalLayout paddingTop="10" paddingLeft="10"/> </s:layout> <s:Group x="6" y="9" width="190" height="111"> <s:layout> <s:VerticalLayout paddingLeft="10" paddingTop="10"/> </s:layout> <s:Button x="31" y="26" label="按钮1"/> <s:Button x="110" y="26" label="按钮2"/> </s:Group> <s:Group width="190" height="111"> <s:layout> <s:HorizontalLayout paddingTop="10" paddingLeft="10"/> </s:layout> <s:Button x="31" y="26" label="按钮3"/> <s:Button x="110" y="26" label="按钮4"/> </s:Group> </s:Application>

控制容器的布局
Scroller滚动显示组件区域
当Scroller里面的内容边界超出Scroller后,以便显示滚动条
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?> <s:Application <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 三个按钮超出了panel窗体, xmlns:s="library://ns.adobe.com/flex/spark" 而没有出现滚动条 <s:Panel x="86" y="60" width="337" height="235" enabled="true" title="在panel中使用Scroller"> xmlns:mx="library://ns.adobe.com/flex/halo"> <s:layout> <s:Panel x="86" y="60" width="337" height="235" > <s:HorizontalLayout/> <s:layout> </s:layout> <s:VerticalLayout horizontalAlign="center" <s:Scroller width="100%" height="100%"> paddingTop="10"/> </s:layout> <s:Group width="100%" height="100%"> <s:Button label="按钮1" width="400" height="50"/> <s:layout> <s:Button label="按钮2" width="400" height="50"/> <s:VerticalLayout/> <s:Button label="按钮3" width="400" height="50"/> </s:layout> 注意:使用 horizontalCenter="0" verticalCenter="0" 代码可以让子元素在容器中居中 <s:Button label="按钮4" width="400" height="50"/> <s:Button label="按钮1" width="400" height="50"/> </s:Panel> <s:Button label="按钮2" width="400" height="50"/> </s:Application> <s:Button label="按钮3" width="400" height="50"/> <s:Button label="按钮4" width="400" height="50"/> </s:Group> </s:Scroller> </s:Panel> </s:Application>

4.3 表单布局
简单的用户输入表单
<mx:Form width="100%" height="168"> <mx:FormItem label="用户名:" required="true"> <s:TextInput id="txtUid"/> </mx:FormItem> <mx:FormItem label="密码:" required="true"> <s:TextInput id="txtPwd"/> </mx:FormItem> <mx:FormItem label="邮箱:" required="true"> <s:TextInput id="txtEmail"/> </mx:FormItem> <mx:FormItem label="电话:"> <s:TextInput id="txtTel"/> </mx:FormItem> <mx:FormItem label="出生年月:"> <s:TextInput id="txBirth"/> </mx:FormItem> </mx:Form>

表单布局
表单验证
<fx:Declarations> <mx:StringValidator id="v1" source="{txtUid}" property="text" minLength="6" maxLength="12" trigger="{submit}" triggerEvent="click"/> </fx:Declarations>

演示代码

声明验证对象

<mx:Form width="100%" height="168"> <mx:FormItem label="用户名:" required="true"> <s:TextInput id="txtUid"/> </mx:FormItem </mx:Form>

总结
RIA将桌面应用程序的强交互性与传统WEB应用的灵活性结合起来,为用 户带来全新的体验 Flex是一个针对企业级富互联网应用的表示层解决方案。Flex是一种应用 程序框架 当编译Flex应用的时候,MXML文件生成相应的ActionScript 类,ActionScript类被编译成SWF字节码存储到一个SWF文件中 Application是一个特殊的容器,位于界面元素层级的根部,它包含了整个 程序中的所有元素 在<s:layout>布局控制标签中,还可设置paddingLeft(左边距)、 paddingRight(右边距)、paddingTop(顶边距)、paddingBottom(底边距)等 属性进一步按需要进行页面布局的控制 <mx:Form>标签将创建一个标签,而<mx:FormItem>表示表单中的表单项


赞助商链接
相关文章:
flex 基础入门
flex 基础入门_IT/计算机_专业资料。Flex 入门--Flex 基本语法 1 Flex 变量 v1:int var v1:int = 9; //int v1 = 9; v2:uint 10; var v2:uint =...
ActionScript 3.0动画基础
flex动画的基础入门ActionScript 3.0 动画基础 本文...说第一章是有点哲学意义的动画概述,那么这一章则...2 语法,但我决定尽量避开 许多难懂的 OOP 理论。然而...
Flex 开发入门_图文
Flex 开发入门_IT/计算机_专业资料。调试你的flex与Ecplice程序 本文介绍 Flex 开发的基础知识:包括如何搭建开发环境,如何调试,以及如何建立和部署 简单的 Flex 项目...
LANTEK Tube Manual 切管软件简明用户手册(V30)
1 / 40 Flex3D 切管软件简明手册 V30 版 第一章 兰特切管软件入门介绍 1 ...加工管材需要的基本步骤大致可以分为 4 步,首先将需要加工的管材通过 SAT 接口...
flex 快速入门示例demo
Flex 快速入门示例 demo Flex+BlazeDS 整合 j2ee 开发环境的配置过程: 开发环境的配置过程: 第一步: 第一步:下载 Flex 配置文件以及 Flex 需要的 jar 包 http...
Flex3.0学习笔记总结入门者必看
Flex3.0学习笔记总结入门者必看_IT/计算机_专业资料。Flex3.0学习笔记总结入门者必看,这是我总结出来的,希望对初学者有点帮助。Flex3.0 学习笔记总结 Flex 3.0 布局...
Visual Modflow软件操作及应用教程
提供快速熟悉和操作 Visual MODFLOW Flex入门学习课程,分基本理论和软件学习两...章节名称 第一章 地下水流运动基本方程(一) 第一章 地下水流运动基本方程(二)...
第01章-AIR
第1章 谈谈 RIA RIA(Rich Internet Applications)的...(即用户体验)认知基础上的对软件的一 种期望.理解...完整入门与开发实录 使用 Flex\Flash\Ajax 开发 AIR...
第1章 认识WAP
基本情况,我们先在本章对 WAP 的发展历史、形成 背景及相关情况等作简单...(2) WAP 支持目前常用的绝大多数无线电设备,包括移动电话、FLEX 寻呼机、双向...
flex快速入门必读
flex快速入门必读_IT/计算机_专业资料。flex的简介、flex与ActionScript基础flex新能优化Flex 快速入门介绍 快速入门介绍简介: Flex 简介: Flex个针对企...
更多相关标签: