flex应用开发-教案
FLEX4_Flex4教程
Flex 应用的构建形式 尽管用 Flex 开发 RIA 有多种形式，但现在主流的架构是：Flex 作为 Client（客户端），Java、PHP、 Asp、Ruby 等技术作为 Server（服务器端）。
本教程之后的内容主要介绍 Flex 与 Java 技术的整合。
Flex 访问服务器端数据的 3 种方式 既然 Flex 可以和 Java 等 Sever 端技术整合，那么它们之间怎样实现通信的呢？Flex 通过 HTTPService，WebService 和 RemoteObject 这 3 个组件实现与 Server 端的通信。
外观与样式设计 使用 CSS 和图形属性编辑器自定义应用程序外观。快速设置最常用的属性，并在“Design”（设计） 视图中预览结果。使用新的 Theme Browser（主题浏览器）浏览可用主题，并将它们应用于您的项目。
与 Adobe Creative Suite 设计工具集成 导入使用 Adobe Flash Professional、Illustrator®、Photoshop® 或 Fireworks® 软件创建的设计 资源，或导入使用 Flash Catalyst 创建的整个应用程序用户界面。Flash Professional 与 Flash Builder 之间的新工作流程简化了自定义 Flex 组件的导入和更新。
HTTPService 组件
HTTPService 组件允许你与 HTTP 服务交互，可以是接收 HTTP 请求和发送 HTTP 响应的任何 HTTP URI。 你可以通过 HTTPService 组件调用任何类型的 Server 端技术，包括 PHP pages, ColdFusion Pages, JavaServer Pages, Java servlets, Ruby on Rails 和 ASP pages。 HTTPService 组件允许你发送 HTTP GET、POST、HEAD、OPTIONS、PUT、TRACE 和 DELETE 请求，并典 型的以 XML 形式返回。
Flex从入门到精通 第24章
24.1.2 序列类，坐标轴类和图表事件
序列类（Series Class）用来定义什么数据要在图表控件 中显示。所有的序列类都是 mx.charts.chartClasses.Series类的子类。每种图表类型 都有自己特有的序列类。例如条形图表控件就有相应的 BarSeries类来为BarChart控件定义数据。 一个序列的首要目的是定义在图表中显示的数据。使用序 列定义在数据源中的哪一部分应该用来显示图表X、Y轴上 的数据。它使用xField和yField属性来定义。每个序列都 有一组序列项目组成的。当建立一个新的序列时，就定义 displayName属性，此属性显示其序列，例如数据提示。通 常图表只定义一种序列，编程者也可以使用第二个序列。
24.1 图表组件概览
一个简单的图表表达了一个单个的数据序列。一 个序列是一系列的相关的数据点。例如，一个数 据序列可以是一个年度报告中的月销售额，或者 酒店每日的入住率。这些数据都由在二维象限的 图形，更直接，清晰的表现出来。
24.1.1 使用图表组件
Flex提供了大量的控件来显示图表。 除了饼图表之外的图表控件都是CartesianChart 类的子类。笛卡尔（Cartesian）图表是指在一个 方形的区域，二维象限的空间来表现一组数据。 饼图表是PolarChart类的子类，极面（Polar）图 表在一个圆形的区域显示数据。
BubbleChart控件每个数据点都显示了三项数据： 一个定义x坐标位置的值；一个定义y坐标位置的 值；一个定义图表符号相对于其它数据点大小的 值。使用BubbleSeries图表序列来定义 BubbleChart控件的数据。
24.2.4 蜡烛图表（Candlestick Chart）示例 CandlestickChart控件显示了金融数据为一系列 蜡烛图，以体现其高，低，开和关的数值。每个 蜡烛图垂直线上的上顶和下底代表了每个数据点 高和低的数据值，填充盒子的上顶和下底代表开 放和关闭的数值。基于每个数据点关闭的数值相 对开发的数值是高，还是低，每个蜡烛图就被不 同方式填充。 CandlestickChart控件的CandlestickSeries需要 所有四项数据：高，低，开，关。
Flex入门培训
Flex核心机制
3. 手工派发事件： Flex中可以通过dispatchEvent()方法手工派发事件, 所有 UIComponent的子类都可以调用此方法. 语法: 组件对象.dispatchEvent(new Event("event_type"):Boolean 参数event_type是Event对象的type属性. 函数的返回值总是True. 可以使用此方法派发任意事件, 而不仅仅是用户自定义事件, 比如: 可以派发一个Button 的Click事件. var result:Boolean = buttonInstance.dispatchEvent(new Event(MouseEvent.CLICK));在Flex应用中不是必须对新派发的事件进行处理, 如果触 发了一个事件, 而没有对应的Listener时,Flex忽略此事件.
Flex核心机制
绑定机制 Flex绑定机制的原理就是事件，在被Flex绑定的对象上增加了改变事件的监听，一旦某个 被Flex绑定对象改变后，就会分发一个“propertyChange”事件（默认的，也可以改变成 自己定义的事件），在其他组件中，会有propertyChange的事件监听，当捕捉到该事件后， 则会去更新组件的属性并显示。如果想让变量、类、方法的值与组件的值进行绑定，请在这 些对象上加上[Bindable]标记
Flex与Java通信示例
需求：
Flex有一个输入框、按钮和Lable，在输入框中输入信息后点击按钮，可以通过 RemoteObject方法调用java类中的方法。通过该类中的方法对数据进行处理并返回，将处 理后的数据显示在Lable上。
Flex与Java通信示例
.mxml
生编 成译 时
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从入门到精通 第9章
9.3.5 使用Effect.target和Effect.targets属性应用行为效果
在Flex中，可以使用Effect.target和 Effect.targets属性来调用行为效果的目标组件， 特别是在使用play()方法来调用行为效果时。在 MXML中，Effect.target用来调用一个单一的目标 组件。而用Effect.targets来定义一组目标组件。 示例代码如下。在<mx:Zoom>标签中，绑定属性 target的目标组件为按钮控件， target="{myButton2}"。然后，在<mx:Button>标 签上，定义click行为为显示Zoom的行为效果。
9.1.1 运用行为控制（Apply behavior）
编程者需要使用MXML与ActionScript两者来建立 和运用组件的行为效果。在MXML中，可以将行为 效果和触发器联合起来。例如，在下面的代码片 段中，首先定义行为效果WipeLeft其id标识符数 值为“myWL”，并且在1000毫秒中从开始到结束 的。 <mx:WipeLeft id="myWL" duration="1000"/>
9.4.2 使用嵌入的字体显示行为效果
一些行为控制融合、褪色和旋转只能对嵌入的文本产生作 用。如果在带有系统字体的控件上使用这些效果，文本不 会发生任何改变。下面的示例9-8中，带有了两个标签控件， 一个使用嵌入的文字，一个是系统文字。当在这两个标签 控件上应用褪色的行为控制时，系统文字不发生任何改变。 在示例中，首先在ActionScript中定义嵌入的字体 “myFont”，代码如下所示。 @font-face { @font src:local("Arial"); font-family: myFont; }
物流系统中Flexsim软件应用开发培训
• Flexsim软件的使用步骤 • 开发实例训练 • Flexsim软件的高级开发
9
对象与继承
• Flexsim采用面向对象的技术 • 大部分Flexsim对象都是FixedResource
或TaskExecutor对象的子对象
– 子对象拥有其父对象所有的接口和相应的功 能
– 用户相对比较容易很快掌握子对象的使用
10
Flexsim家族树
11
Flexsim的对象库
12
对象分类
• 资源类（Fixed Resources）
– Source, Queue, Processor, Sink, Combiner, Separator, MultiProcessor, Conveyor, MergeSort, FlowNode, Rack, and Reservoir
– “q”键
• 用来取消对象1的输出端口与对象2的输入端口之间的连接
– “s”键
• 用来连接对象1与对象2的中心端口
– “w”键
• 用来取消对象1与对象2的中心端口的连接
30
步骤2. 定义物流流程 （续2）
• 各类端口连接的显示位置
– 输出端口显示在对象的右上角 – 输入端口显示在对象的左上角 – 中心端口显示在对象底部中心
• Navigation Method
– Model navigation, and fly through
• FlowItem Bin Method
– Defines the FlowItem Characteristics
• TaskExecuter Move Method
Flex讲解
Flex事件机制（二） 事件机制（ 事件机制
Event类作为创建Event对象的基类，当发生事件时，Event对象将作为参数传递 给事件侦听器。如MouseEvent、KeyboardEvent • Event类有几个常用的公共属性： ◆是否冒泡：bubbles; ◆目标对象：target; ◆所处阶段：eventPhase; ◆当前对象：currentTarget; Flex事件机制中的自定义事件，也就是向监听器传递自己定义的事件类型，同 时可以通过事件传递参数。 • 1.创建自定义事件名称的Event dispatchEvent(newEvent(“myEvnet”,true,false)); • 2.创建自定义事件类 Public class MyEvent extends Event{ dispatchEvent是EventDispatcher的方法： publicfunctiondispatchEvent(event:Event):Boolean将事件调度到事件流中。事件 目标是对其调用dispatchEvent()方法的EventDispatcher对象。 •
控件简介（二）
• • • • • • • • • • • • • • • • • • • 5：flex控件： 警告alert弹出警告框 下拉列表combobox下拉数据列表 选色器colorpicker可选择的调色盘 数据表格datagrid 数据表格 日期选择器datechooser选择日期控件 日期条 datefield 单击弹出日期选择器 水平列表horizontalList 水平列表项目 水平尺/垂直尺 hrule vrule单个水平或垂直标尺 水平、垂直滑竿 hslider，vslider 图像 image 支持gif jpeg png svg swf 列表list 可滚动的数据组 计数器numericstepper单击向上的按钮增加数据，单击向下的按钮减少数据 进度条progressbar 当前操作进度 滚动条 水平，垂直滚动 scrllbar，hscrollbar，vscrollbar swf加载器 显示swf文件 列表条tabbar一组水平的列表 排列列表tilelist类似表格的行列对正排列的项目 树tree、以展开树的方式显示继承关系的数据 音像videodisplay flex应用中的数据流媒体
Flex开发指南
有关ActionScript 3的部分，请观看本人总结的ActionScript 3详解文章！1.Flex 3是Adobe出品的开发RIA(Rich Internet Application富互联网应用)的工具，Flex 3包括:Flex 3 SDK软件开发包、编译器、Flex类库和调试工具。
2.Flex Builder 3是基于Eclipse之上的一个开发工具，界面和使用方法很类似Eclipse。
3.Flex的应用程序到底是什么东西？*答:其实就是把可以用Flash播放的swf格式文件封装到了HTML页面中的应用程序，然后程序(可以认为HTML)就可以借助Flash文件(swf)的功能(如事件等)来和服务器端进行交互。
*注意:要运行Flex的应用程序必须在客户端安装Flash Player 9或以上的播放器才行；如果没有安装，那么打开Flex的应用程序时，IE下会提示通过ActiveX插件的形式在线安装。
4.Flash Player 9安装时会有两种版本:非调试版本和调试版本。
非调试版就不用说了就是用来运行Application应用的；*调试版的作用:********************后边讲到5.Flex 3 Application应用的实现方式:主要借助MXML文件和ActionScript 3语言(AS3)来实现。
*MXML的作用:该文件为一个描述文件，非常类似于XML，只不过该文件中的标签都要以"mx"开头(因为名称空间指定)，例如<mx:xx> 。
且该文件的根元素为<mx:Application> ，说白了就是通过这个文件来定义Flash的swf格式文件，只不过编译后就直接将生成的swf封装到了满足"一定格式"的HTML文件中了。
**注意:我们知道Flash文件中只能有ActionScript代码，没听说过也可以有MXML文件，所以Flex中的这个MXML文件只是为了方便视图界面的开发和格式的美观优雅而特别订制的，其实运行Flex的应用时，首先会将MXML文件中的定义内容转换成相对应的ActionScript 代码(变量、对象等)，然后在运行所有ActionScript代码，也就是说如果有MXML的内容的话就先把它们转换成ActionScript，然后将原来的ActionScript和刚转换成的ActionScript一起进行编译(编译后的文件默认会输出到bin-debug目录)，使之作用于Flash文件之上。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
教案
2012～2013学年第2学期
课程名称Flex应用开发
系(院、部) 计算机工程系
教研室(实验室) 教研室
授课班级
主讲教师
职称
使用教材Flex 3开发实践
二○一二年十二月
Flex基础教案
Flex Builder3启动页面
MXML与ActionScript之间的关系。
MXML与ActionScript之间的关系非常有趣，其有趣之处在于：在编写Flex应用时，在MXML文件中可以用MXML标记表示任何
类的对象。
在编译Flex应用时，编译器首先会把MXML代码翻译成
后再将ActionScript代码编译为Flash Player中ActionScript虚拟机可以识别和运行的字节码。
（2）设置工程名称为“CalculateCircleArea”，存CircleArea”，选择“Web application”（Web应用模式）
（3）单击【Finish】按钮，显示如图1-23所示的工程目录结构。
Action Script3语言入门2
可以实例化flash.display 包中的下列类的对象：
（1）Bitmap：使用Bitmap类可定义从外部文件加载或通过ActionScript呈现的位图对象。
（2）Loader：使用Loader类可加载外部资源（SWF文件或图形）。
（3）Shape：使用Shape类可创建矢量图形，如矩形、直线、圆等。
（4）SimpleButton：在Flash创作工具中创建的按钮元件的ActionScript表示形式。
（5）Sprite：可包含它自己的图形，也可包含子显示对象。
（6）MovieClip：在Flash创作工具中创建的影片剪辑元件的ActionScript形式。
3.2 String类
String类包含使用文本字符串的各种方法
在程序开发中经常使用的是HDividedBox组件和VDividedBox组件两种。
Form表单组件的使用非常简单，在实际的程序开发中，表单组件中的元素进行校验的。
Grid/GridRow/GridItem组件
Panel组件是类似Window窗口的面板组件，它是
件。
TabNavigator组件是标签页导航组件。
本次课程主要内容为1.flex事件概述
7.2.2 元数据定义
在使用Flex中自带的组件时，会用到组件的一些属性和事件，
等属性，还有click等事件。
如果在自定义组件中想要使用自定义的属性和事件，可以把属性和事件定义成元数据。
7.2.3 添加自定义事件
定义在<mx:Metadata></mx:Metadata>
在MyComponent.mxml文件中添加以下内容：
<mx:Script>
<![CDA TA[
internal function init():void{
this.dispatchEvent(new Event("myEvent"));
}
所示。
自定义组件的MyComponent.mxml页面的<mx:Script>标签中添加一段ActionScript
定义自定义属性，如下所示：
//自定义属性
private var _myData:String;
//编写set和get函数，需要注意的是：变量值和函数名是一样的，变量前面加了一个下画线。
这种//方式被称做后台变量（backing variable
public function set myData(mdata:String):void
{
_myData=mdata;
}
public function get myData():String
可以建立套接字连接并读取和写入原始
选择Desktop application类型
14.3 第一个AIR桌面应用程序
最终Flex AIR工程的目录结构如图
右击工程“AirExample”，选择“
录下选择“Release Build”选项，导出为
单击【Next】按钮进入导出文件设置对话框，
单击【Create】按钮新建一个，填写名称和密码，并选择一个保存的路径和文件名，如图14-6所示，完成后单击【OK】按钮返回。
14.3.4 安装单击【安装】按钮，进入安装配置界面，如图14-8
本次课程主要内容为 1.什么是AIR
2. 开发环境的配置
15.3 在不可见容器中使用PrintDataGrid类
15.4 打印自定义组件
在PrintExample工程中新建一个
件中定义一个VBox
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="/2006/mxml"
height="250" width="450"
共享对象。