Flex可视化组件开发-1
2.Flex可视化组件开发-1
2.1 Flex 可视化类UIomponent属性作为基础类
UIComponent类属性:
doubleClickEnabled :Boolean true 为允许双击 false则不允许
Enabled:Boolean true为有效 false时组件无效 组件无效时不能接受事件或获取焦点/.
Height:Number 组件的高度
Id:组件的唯一标识
percentHeight:Number 组件的相对高度
percentWidth:Number 组件的相对宽度
toolTip:String 提示信息 （鼠标停留时显示的内容）
styleName:String 样式
visible:Boolean 是否可见 true为可见 false为不可见
x:Number 组件横坐标 仅在父窗口布局绝对定位中有效
y:Number 组件纵坐标 公在父窗口布局绝对定位中有效(Absolute Positioning)
2.2创建flex工程
2.2.1 在配置好flex builder后我们来创建工程
2.2.1.1打开eclipse--->file-->new--->new project---->flex project这样我们就创建了一个flex工程了
2.2.2 如图:(2.1)
如图:(2.2)
如图:(2.3)
2.3数据集成与绑定可视化组件的数据操作
2.3.1集合数据与Data Provider
集合类的标准框架是ArrayCollection和XMLListCollection继承自mx.collections.ListCollection实现了mx.,collections.ICollectionView接口和mx.collections.IList接口
2.3.2 Flex集合类特征
2.3.2.1 确保数据源更改后数据及时更新.
2.3.2.2 提供了运行远程数据源的分页机制.
2.3.2.3 提供了数据源中的数据操作，可以通过index修改数据源中的数据,而不用关心数据源的具体实现，如Array和XML
2.3.2.4 支持单独数据集合作为多个可视化组件的数据源.(一个ArrayCollection可以显示在多个组件中);
2.3.2.5 使用集合类的方法可以访问数据源中的数据.(如，可以访问sql,mysql,db2,oralce,access,sybase)
2.3.3 Flex可视化组件均支持dataProvider属性:
2.3.3.1 例：
ButtonBar、ColorPicker、ComboBox DataGrid.DateField,
HorizontalList,LinkBar,List,Menu,MenuBar, PopUpMenuButton
Pepeater,TabBar,TileList,ToggleButtonBar,Tree
2.3.4 Flex可视化组件对于dataProvider处理的两种方式
2.3.4.1 List结构 (一般用于可视化组件的数据源) 不用于Tree
2.3.4.2 多层结构 (有继承关系的那一种) 可用于Tree
2.3.5 Flex数据三种绑定方式
2.3.5.1在MXML中使用大括号定义属性
例:
<mx:TextInput id="t1" text="please input"/>
<mx:Text id="t2" text={t1.Text}/> //这是是绑定t1的属性
2.3.5.2 在MXML中使用<mx:Binding>标签
例:
<mx:TextInput id="t1" text="please input"/>
<mx:Text id="t2" />
//以下进行绑定
<mx:Bindding source="t1.Text" destination="t2.text" />
Tip:source为要值 destination为赋值到的目标对象
2.3.5.3 在ActionScript中使用BindingUtil类的方法
2.3.5.3.1 BindingUtil.bindProperty(源id名称,"源属性名",目的id名称,"目的属性名")
2.3.5.3.2 使用[Bindable]标签
<mx:Script>
<![CDATA[
[Bindable]
public var td1:Number=15;
]]>
</mx:Script>
<mx:Text text="{td1}"/>
2.4 CSS,可视化组件的样式处理
2.4.1 Flex CSS 规范样式
2.4.1.1支持style属性
(可以对Label组件定义字体，字号，
可以对Panel组件定义背景色
可以对各种可视化组件进行外观庙宇)
Tip 1.不能通过CSS定义组件的布局( 如x,y,width和height)
2.Flex只有实现IStyleClient接口定义，才能通过CSS定义style属性
2.4.1.2 与HTML的CSS非常相似
2.4.1.2.1 <mx:Style source="名称.css"/>
2.4.1.2.2 <mx:Style>
.样式名{
fontSize:大小;
Color:green;
}
</mx:Style>
通过styleName属性进行引用
2.5 容器组件，可视化组件的结合形式
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel>
</mx:Panel>
<mx:Application>
2.6 IO 控制组件
2.6.1按钮之基本教程
//普通的
<mx:Button id="id" label="显示在界面的名称" click="事件名"/>
//链接的
tip:
useCodePage 一个布尔值，它决定使用哪个代码页来解释外部文本文件。当此属性设置为 false 时，
会将外部文本文件解释为 Unicode。（保存这些文件时，必须使用 Unicode 对其进行编码。
<mx:LinkButton label="显示在界面的名称" click="navigateToURL(new URLRequest('链接到的外部地址/文件'),'_blank/')"
-----------------------------------基本说明
id="在整个mxml文件唯一的id
label="显示的名称"
click="单击事件"
可以添加事件
id名.addEventListener(event:Event /Event.MouseEvent /other event listener);
2.6.2 Bar 类组件
说明:Bar 类组件属于导航组件. 所使用的事件 ItemClickEvent: 获得当前发 互相事件的数据条目(某个按钮) ItemClickEvent中包含了index属性,通过 index属性我们来触发按钮的数组下标.
Tip:(horizontalGap属性来控制按钮之间的距离)
2.6.2.1 ButtonBar 和 ToggleButtonBar组件
2.6.2.1.1 ButtonBar
<mx:ButtonBar horizontalGap="5" id="t">
<mx:dataProvider>
<mx:String>首页</mx:String>
<mx:String>上一页</mx:String>
<mx:String>下一页</mx:String>
<mx:String>末页</mx:String>
</mx:dataProvider>
</mx:ButtonBar>
2.6.2.1.2 ToggleButton 是一个单独的组件,相当于一个单选按钮集合.
2..6.2.1.3 TabBar组件 表现为一组水平或垂直的标签栏
2.6.3 CheckBox 与 RadioButton
2.6.3.1 CheckBox ,.RadioButton都可以通过event.currentTarget属性对组件进行了处理
2.6.3.2 CheckBox是用来处理多项选择的.
2.6.3.3 RadioButton 是用来处理单项选择的. RadioButton都是成组出现的。单独出现没有意义
2.6.4 NumbericStepper组件
2.6.4.1通过两个Button组件来调整大小 s
2.6.4.2 stepSize属性来调整步长,minimum和maximum属性设置最小值和最大值勤
2.6.5 DateChooser 和 DateField组件
2.6.5.1 DateChooser组件是一个非常实用的日期输入组件
2.6.5.2 DateField组件是一个文本形式的组件
2.6.6 HSlider 与 VSlider组件
2.6.6.1 HSlider水平滑动条,VSlider为垂直滚动条.
2.6.6.2 得到值 id名.value
2.6.6.2 通过minimum和maximum来设置 (可以用于分页)
2.7 多媒体处理类组件
2.7.1 SWFLoader组件
2.7.1.1通过SWFLoader组件加载到另一个Flex程序中.
2.7.1.2 加载外部 文件时要使用到一个类 SystemManager对象.通过SystemManager(外部id名.content)得到外部对象(SystemManager)
Var externtobject:SystemManager=SystemManager((外部id名.content);
2.7.1.3调用对象属性
Externtobject.aplicaiont["外部对象名"].text/label(属性名)
2.7.1.4 调用方法
Externobject..application["对象名"].方法名(参数/无参数);
2.7.2 Image组件
2.7.2.1 Image组件支持多种格式，包括gif,jpeg,png,svg同时支持swf
2.7.2.2 关联方式
2.7.2.2.1 <mx:Image id="id名称" source="路径"/>不支持svg格式
2.7.2.2.2<mx:Image id="id名称" source=@2Embed(source='文件名')"/>
2.7.3 VideoDisplay组件
2.7.3.1 VideoDisplay组件用于加载flv格式的视频流. 表现为一个展示窗口。需要通过其它组件(Button)来播放图像
2.7.3.2 属性方法介绍
2.7.3.2.1 source=flv文件存放的路径
2.7.3.2.2 play();//播放 pause();//暂停 stop();停止 load();加载视频流; close();关闭视频流
2.7.3.3 摄像头信息的捕获
2.7.3.3.1通过Camera对象可以连接到计算机的摄像机.
Import flash.media.Camera;
var camera:Camera=Camera.getCamera();
Videodisplayer id.attachCamera(camera);
2.7.4 快捷交互类组件
2.7.4.1 flex提供的交互组件 ColorPicker,Alert,ProgressBar
2.7.4.2 ColorPicker组件(颜色选择器) 通过<mx:ColorPicker/>创建，使用showTextField属性可以设置是否显示器选定颜色的RGB数值.
2.7.4.2.1 备用颜色可以通过DataProvider设定
2.7.4.2.2 支持open 和change事件.通过selectItem得到当前选中的颜色.
2.7.4.3 Alert组件
2.7.4.3.1 使用于各种可视化组件的使用过程中与用户进行信息交互.
2.7.4.3.2 通过Alert.show("输出的信息","标题",flags,parent,clickListener,iconClass,defaultButton)
Flags:Alert.OK/NO/CANCEL/YES
clickListener:单击事件，可以通过这个来监听鼠标事件.
iconClass: 图标，显示在窗口左边的.
defaultButton:指定默认按钮,等同于按Esc键,必须符合flags参数列表。.
2.7.4.4 ProgressBar组件
2.7.4.4.1 ProgressBar组件是一个可视化的进度条组件.用于描述需要较长时间的任务进度.
2.7.4.4.2 ProgressBar 组件表现任务的执行完成度有3种方式,
2.7.4.4.2.1 事件方式[event]:
设定ProgressBar组件的source属性为监测的目标对象[SWFLoader或Image组件].该对象会发出progress事件和complete事件
2.7.4.2.2 填充方式[polled]:
设定ProgressBar组件的source属性为监测的目标对象[SWFLoader或Image组件].通过对象的bytesLoaded属性和bytesTotal属性进行了计算确实当前的加载完成度.
2.7.4.2.3 手动设置[manual]
通过设定ProgressBar组件的maximum,minimum和indeterminate属性和setProgress()方法手动设定当前的任务完成度.
例:
<mx:ProgressBar source="加载对象的id" mode="event/polled/manual"/>
2.7.5 辅助类组件
2.7.5.1 HRule组件和VRule水平分割线，和垂直分割线.
2.8 文本组件
2.8.1 label和text
2.8.1.1 转义字符
< <
> >
& &
' '
"" "
在ActionScript中使用嵌套时候 使用 \作为转义字符来表示.
2.8.1.2 htmlText 是text标签的子标签
2.8.2 RichTextEditor组件
2.8.2.1 由Panel,TextArea,和Toolbar构成的复合组件.
2.8.2.2 所有的属性可以通过 RichTextEditor组件的id来得到.