Flex笔记(1)

Flex开发生命周期
典型Flex应用程序的SDLC(Systems Development Life Cycle,系统开发生命周期)如下:
1. 使用Flex Builder或SDK,在本地开发环境中编写MXML和ActionScript代码。
2. 需要测试时,使用Flex Builder或SDK编译代码,编译输出的通常是.SWF文件。
3. 通过浏览器启动此文件,此时需要调用Flash Player插件;然后应用程序开始执行。
4. Flex应用程序通常要与服务器层交互以便交换数据。
5. 准备发布应用程序时,将.swf及相关文件(如图像)发布到Web服务器;然后用户就可以通过一个URL调用该应用程序了。

ActionScript之于MXML,就像JavaScript之于HTML。在Flex应用程序开发中,MXML用于布局组件,ActionScript用于添加所有业务逻辑。ActionScript与JavaScript非常相似,它们都遵循ECMAScript脚本标准,都是客户端技术,而且都基于事件驱动模型。

与JavaScript不同,ActionScript中的变量是严格数据类型。也就是说,在声明了每种类型的变量后,赋给该变量的值必须是声明的类型,或者与生命的类型兼容。

ActionScript支持3中主要数组
1. 索引数组,类似Java数组。以数值作为每个值的键。
2. 关联数组。以任何形式的键(一般是字符串)与值建立关联。类似Map。关联数组中的项是以无须方式保存的,即无法预言输出地顺序。
3. 多维数组。

Flex提供了数据绑定[Bindable]这个优雅的功能。通过绑定即可以把一个变量赋值给另一个变量,还可以实现数据自动同步。利用这个功能,就可以在应用程序中节省为复制而编写的所有代码。默认情况下,Flex中的一切并不都是可以绑定的,也就是说,必须明确声明可绑定还是不可绑定。

布局
Flex中的用户界面以布局为基础。在对界面组件进行布局时,可以选择比较简单的绝对布局方式---需要手工控制每个组件的坐标;或者选择绝对布局模式下的几种布局方式,例如基于约束的布局方式要求开发人员为元素相对于窗口自身(边界或中性点)的相对位置。
为了适应用户用户对浏览器窗口大小的调整,可以使用自动布局模式让Flex帮助我们计算组建的位置。可以使用<mx:Space />来用于平均分布元素。

容器
Application:所有Flex程序都含有一个Application容器。但由于应用程序以盖容器为根元素,所以每个创建的应用程序都只能含有一个Application容器。Application是应用程序中的顶级对象,它可以保存全局变量和函数,并且支持应用程序中的代码方位变量和函数。
Xml代码
Canvas:用于绝对布局。
Box HBox VBox:用于自动布局
Panel:作为大众选择的结果,Panel容器从作为整个应用程序的顶级容器使用。该容器的一个奇妙之处在于,在窗口顶部添加了标题title和状态栏status,而且该容器默认带有边框(用于包围子对象)。
ApplicationControlBar ControlBar:用于为应用程序控制条区域。ApplicationCOntrolBar用于Application,ControlBar用于Panel或TitleWindow。
DividedBox HDividedBox BDividedBox:通过分隔条来分隔盒子,而用户拖动分隔条可以调整盒子的大小。
Form:方便在应用程序中布局表单。此外,与HTML要求表单元素包含在form标签中不同,Flex中的Form容器纯粹用作布局目的,不一定包含表单条目。
Grid:类似于HTML教程中的表格。
Tile:在你要显示数量不定的条目时,可以根据需要创建拼贴块。
Repeater:是一种不可见的逐渐,它能够迭代遍历一组信息,在迭代同时动态创建组件。Repeater是基于一组变化的数据生成组件的快捷方式。
Xml代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >  
  3.     <mx:Script>  
  4.         <![CDATA[  
  5.             import mx.collections.ArrayCollection;  
  6.             [Bindable]  
  7.             public var images:ArrayCollection = new ArrayCollection([  
  8.                 {source:"heavyrain.pnd"}, {source:"partlycloudy.pnd"}]);  
  9.         ]]>  
  10.     </mx:Script>  
  11.     <mx:Tile direction="horizontal" >  
  12.         <mx:Repeater id="myRepeater" dataProvider="{images}">  
  13.             <mx:Image source="{myRepeater.currentItem.source}" />  
  14.         </mx:Repeater>  
  15.     </mx:Tile>  
  16. </mx:Application>  
控件
Text控件
Text,Label,TextInput,TextArea,RichTextEditor
Date控件
DateChooser,DateField
Numeric控件
NumericStepper,HSlider,VSlider
Button控件
Button,ButtonBar,LinkButton,LinkBar,ToggleButtonBar,PopUpButton,PopUpMenuButton
选单控件
CheckBox,RadioButton,ComboBox,ColrPicker
创建ArrayCollection变量的好处是把该变量包含的逻辑从现实组件中分离出来。这样就可以读入配置数据并相应地填充变量了。

验证器Validator
Flex通过让内置逐渐负责处理艰难的工作并提供多种调用手段简化了验证工作。以下列出验证用户输入的几种常见方式:
1. 实时验证:应用程序给予每次键盘敲激活鼠标来验证输入的内容是否符合要求或正确无误。为此必须监听change触发器事件(triggerEvent)。
2. 提交值验证:类似实时验证,但不验证每次键盘操作,而是在用户填写完成并提交其输入值时验证(例如按回车或Tab键更该字段)。需要把触发器事件由change改为valueCommit。
3. 通过性验证:通常有单击提交按钮触发,这种验证会一次性检查所有表单输入字段,以确保所有输入值都是有效的。要把处发言中操作的对象有默认的source对象改为提交表单的按钮,使用按钮实例的click事件。
4. 脚本式验证:使用ActionScript动态创建验证器,甚至在多个元素中重用同一个验证器。
Validator组件的重要属性和函数
1. enabled:true或false。设置是否启用验证功能。
2. required:true或false。设置当前字段对用户而言是否必填。
3. requiredFieldError:如果required为true,通过这个属性设置显示给用户的信息。如果未设置这个属性,则显示默认的通用消息。
4. source:逍遥验证的对象(如TextInput)
5. property:逍遥验证的对象属性(如TestInput的text属性),判断提供的值是否符合要求。
6. listener:默认为source对象。如果source对象的属性为通过验证,Flex会突出显示source对象。可以通过设置listener属性来修改突出显示的对象。
7. valid:在验证通过的情况下调用的函数名称。
8. invalid:在验证失败的情况下调用的函数名称。
9. trigger:默认为source对象。是导致出发的对象的名称(如提交按钮)。
10. triggerEvent:导致基于触发器执行验证的事件的名称(如提交按钮的click事件)。默认为valueComit事件(通常在用户按Tab键或单击表单其他地方从而移动到另一个字段的情况下被触发)。
内置验证器:
StringValidator,NumberValidator,Datevalidator,EmailValidator,CreditCardValidator,CurrentyValidator,PhoneNumberValidator,RegExpValidator,SocialSecurityvalidator,ZipCodeValidator
如果用户输入的值与多个条件不相符,Flex会按照预定安排行事,一个条件一个条件地检查,遇到一个条件验证失败,会立即停止验证。

格式化数据Formatter
格式化程序的应用模式有两种:
1. 实时格式化:格式化时通过数据绑定自动完成的。
2. 脚本式格式化:在必要时,可以使用ActionScript明确创建格式化程序实例,然后在对应地处理数据。使用脚本式方法还有另外一个好处,就是可以处理格式化过程中发生的错误。
内置格式化程序
NumberFormatter,CurrencyFormatter,DateFatter,PhoneFormatter,zipCodeFormatter,SwitchSymbolFormatter。

dataProvider集合

大多数组件现实的数据项都来自dataProvider,这些组件也称为数据驱动控件。填充dataProvider的对象是一个集合。如果不选用集合,逐渐会自动将该低级对象包装为集合。
新手可以把集合想象成一种高性能数组,它具有可内置的排序及筛选能力。此外,集合还为具有dataProvider的对象提供通用且即插即用的接口(方法是抽象出数据交互过程的复杂性)。
集合还有另一个重要优势,即在它的状态变化时,会自动向使用它的组件发送变化通知,以便这些组件刷新显示的数据。低级对象不支持这种自动变化通知特性;如果被修改的是低级对象,则使用他们的任何组件(例如,显示他们数据的组件)都不会得知变化的发生。
集合的类型:ArrayCollection、XMLListCollection、GroupingCollection。
列表组件:List、HorizontalList、TiltList、DataGrid、Tree、AdvancedDataGrid。

自定义类表
标签函数labelFunction:使用标签函数自定义基于类表的组件的显示。标签函数易于初始化,而且常常与格式化程序结合使用
标签函数的常见用途:
1. 连接多个数据列创建一个字符串,以便在一列中显示。
2. 格式化原始数据
3. 将原始数据转换为易于阅读的格式。
4. 针对行中的数据运行条件逻辑,但不现实原始数据,而是显示自定义信息。
自定义类表组件的主要工具是项渲染器(itemRenderer)。项渲染器为控制显示逻辑赋予最大的灵活性。与项渲染器互为补充的是项编辑器,项编辑器(itemEditor)可以让用户在行内完成编辑。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值