flex教程 flex2需要升级flex3吗

Flex Builder教程

Flex Builder教程

一,概述

Flex语言包含了一个丰富的用户界面组件库,MXML(一种基于XML的标记语言)和ActionScript(基于ECMA262的、强类型面向对象编程语言)。MXML用于排布用户界面和处理应用中其他方面的问题,而ActionScript用来处理用户交互逻辑。由于Flash平台的普及,Flex使开发者可以开发广泛的应用程序。开发者可以使用工业标准(如XML,CSS和SVC)和他们所熟悉的模式和范例来创建应用。Flex的分离协作方式和Flex公用组件模型也使得开发者和界面设计者能更好的进行协作,在可靠的、易于维护的架构上生产出在用户体验方面有突破性的产品。

FlexBuilder(FB)之于MXML就如DREAWEAVER之于HTML。FB实现了代码与界面分开,FLEX的类程序扩展名为*.as,语法与java/c++很象,FLEX程序文件扩展名为.mxml,其实就是拥有很多特殊元素的XML文件。

二,使用MXML组件构建用户界面

MXML 语言支持两种用户界面组件类型:控件和容器。容器是包含控件和其他容器的屏幕的矩形区域。控件是表单元素,如按钮、文本字段和列表框。

可以使用Flex Component ExplorerFlexMXML组件浏览工具来查看所有控件的代码和样例。

1,加入常用可视控件:使用可视控件组织界面,可以定义组件属性供外部访问

A, 基于文本的控件(Text controls):Label(单行文本显示)、Text(多行文本显示)、TextInput(单行文本显示与输入)、TextArea(多行行文本显示与输入)和 RichTextEditor(富文本显示与输入)控件。用于显示文本和/或接收来自用户的文本输入,都有一个text 属性用于设置要显示的文本。使用 RichTextEditor控件可以输入文本、编辑文本和设置文本格式。用户通过使用位于RichTextEditor 控件底部的子控件, 应用文本格式和 URL 链接。

B, 基于按钮的控件组件(Button 系列,Formcontrols):Button(激活时会发出click和buttonDown事件)、LinkButton(用于打开URL)、CheckBox(标签会被自动裁剪以适合控件边界。)、RadioButton(指由<mx:RadioButtonGroup> 标签创建的组) 和 PopupButton控件(常用于打开List控件或Menu控件签。)。

2,加入基于列表的控件,并获取数据

基于列表的控件: 是在其继承层次结构内的某些点上扩展 ListBase类的那些控件。它们包括ComboBox、List、HorizontalList、DataGrid、Tile、Menu 和 Tree控件。都可从某数据提供程序的数据获得数据列表。

另: 许多标准控件 (包括 ColorPicker 和 MenuBar 控件)也是数据提供程序控件。

可以使用两种方法设置组件的数据提供程序:

1),直接在MXML标签中加入数据,将 Array 或 Collection定义为取得数据提供程序的控件的子标签。该方法具有实施快速的优点,适合与静态数据一起使用及用于原型设计。<mx:ComboBox id="userRating" width="100%">
<!-- An inline data provider -->
<mx:Array>
<mx:Object data="0" label="Zero" />
<mx:Object data="1" label="One" />
</mx:Array>
</mx:ComboBox>

2),使用数据绑定:使用[Bindable]元数据标签(属性非默认绑定,必须明确的声明被绑定的属性),将控件绑定到使用ActionScript 定义的现有 Array 或 Collection。

<mx:Script>
<![CDATA[
[Bindable]
private var subscriptions:ArrayCollection =
new ArrayCollection
(
[
{data:0, label:"Print"},
{data:1, label:"Website"},
]
);

]]>
</mx:Script>
<mx:FormItem label="Subscriptions:" width="100%">
<mx:List
id="userSubscriptions" rowCount="3"
allowMultipleSelection="true" width="100%"
dataProvider="{subscriptions}"
/>


3, 使用REPEATER:是非可视控件,类似于编程语言里的For循环,可在执行期复制其它组件。<mx:Repeater>的卷标要自己输入,而dataProvider可在<mx:Script>区段之中,以[Bindable]的Metadata定义之数组作连结。REPEATER还可嵌套使用。

<mx:Script>
<![CDATA[
[Bindable]
public var dp:Array=[1,2,3,4];
]]>
</mx:Script>

<mx:ArrayCollection id="myAC"source="{dp}"/>

<mx:Repeater id="r"dataProvider="{myAC}">
<mx:Button id="repbutton" label="button{r.currentItem}"/>
</mx:Repeater>


4,加入数据验证:数据模型支持自动数据验证,这就意味着你可以很方便地使用Flex验证器。as3.0验证的类包为mx.Validators.包中有一个基类Validator,其他的类都为其子类:

1),用标签实现验证://绑定验证对象:source:表示验证的对象,property:表示验证对象的属性
<mx:PhoneNumberValidator id="pnV"source="{phoneInput}" property="text"/>

<mx:TextInput id="phoneInput"/>

2),用AS编程实现验证 <mx:Script>
<![CDATA[
import mx.validators.PhoneNumberValidator;
// 创建验证器
private var v:PhoneNumberValidator = newPhoneNumberValidator();
private function createValidator():void {
// 设置验证器
v.source = phoneInput;
v.property = "text";
}
]]>
</mx:Script>

<mx:TextInput id="phoneInput"creationComplete="createValidator();"/>


还可以加入按钮触发器,并修改默认提示错误//trigger:表示触发验证事件的对象
//triggerEvent:表示对象触发验证事件的时机(如click,mouseOver等)
//requiredFieldError属性表示必填项没填入数据的时的提示错误信息
//wrongLengthError:表示输入的数据阿拉伯数字长度小于10时提示的错误信息
//invalidCharError:表示输入数据不是阿拉伯数字时提示的错误信息
<mx:PhoneNumberValidator id="pnV"source="{phoneInput}" property="text"
trigger="{btn}" triggerEvent="click"
requiredFieldError="此项为必填"invalidCharError="请输入阿拉伯数字"wrongLengthError="请至少输入请输入10个阿拉伯数字"/>

<mx:TextInput id="phoneInput"/>
<mx:Button label="Button" id="btn"/>


3),高级用法: 使用正则表达式创建自定义验证器

5,加入资源(图片,音频,视频,程序):运行时外载和编译时直接内嵌两种方式,外载方式要多花一段载入时间,但使用简单;内嵌方式可直接调用资源,但加重了程序的负担(体积变大,且图片编辑后需要重新编译)

1),Image(图画)控件: 可外载或内嵌多种富媒体资源:JPEG、GIF、PNG位图、SVG矢量图(只能内嵌) ,SWF动画(非Flex的SWF应用程序。),SWF库按钮(Button),SWF库动画(MovieClip),//外载一个富媒体,可使用绝对或者相对路径。
但加入SWF文件时,可用use-network参数指定其使用网络或者本地文件二者之一。
<mx:Image id="myLogo0" source="assets/logo.png"/>

//简单地内嵌一个富媒体.png,.jpg,.gif,
.swf(可将嵌入的SWF文件的实例当作 MovieClip.MovieClipAsset类的实例处理,
不能直接访问嵌入的SWF文件的属性或方法。
但可用 LocalConnection以允许SWF之间进行通信。),
.SVG(可将嵌入的SVG文件的实例当作Sprite.SpriteAsset类的实例处理。)
<mx:Image id="myLogo"source="@Embed('assets/logo.png')"/>

//在脚本中定义富媒体对象,然后在MXML中可以多次嵌入
<mx:Script>
<![CDATA[
[Embed(source="assets/logo.png")]
[Bindable]

public varLogo:Class;
]]>
</mx:Script>

<mx:Image id="myLogo" source="{Logo}"/>
<mx:Imageid="myLogo2" source="{Logo}"/>

//在脚本中定义图片的scale-9像框缩放功能就可以保持边框的清晰,
(旋转嵌入的scale-9 图像的实例会关闭该图像的scale-9功能。)。
<mx:Script>
<![CDATA[
[Embed(
source="assets/fancy_border.png",
scaleGridTop="55", scaleGridBottom="137",
scaleGridLeft="57", scaleGridRight="266"
)]

[Bindable]
public var FancyBorderImage:Class;
]]>
</mx:Script>

<mx:Image source="{FancyBorderImage}" width="146"height="82"/>

//嵌入 SWF 库资源

<mx:Script>
<![CDATA[
[Embed(source="assets/library.swf", symbol="BadApple")]

[Bindable]
public var BadApple:Class;
]]>
</mx:Script>

<mx:Image id="badApple" source="{BadApple}" width="150"

height="151.8"/>

2) 设置翻转的图片:使用 CSS为外观外载/内嵌翻转的图像

可以定义一个现有的CSS类型选择器为该类型的所有组件设置外观。还可以进一步创建自定义CSS类。

<mx:Style>
Button
{
upSkin: Embed("assets/box_closed.png");
overSkin: Embed("assets/box.png");
downSkin: Embed("assets/box_new.png");
}
</mx:Style>

<mx:Button/>


3), SWFLoader控件:通常用来加入Flex应用程序(可以使用AS与其通信),当然也能用于加入Image控件所能加入的富媒体资源。//外载入SWF程序
<mx:SWFLoader id="loader1" source="FlexApp.swf"/>
//内嵌入SWF程序
<mx:SWFLoader id="loader2"source="@Embed(source='flexapp.swf')"/>
//还可以在FDS环境下加入MXML文件,要以b--uttonicon.mxml.swf形式加入,以提示FDS编译该文件。
<xml version="1.0">
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml">
<mx:SWFLoader source="buttonicon.mxml.swf"scaleContent="false"/>
</mx:Application>


4), 加入MP3音频: 您可以在 Flex应用程序中通过使用[Embed]元数据标签嵌入MP3文件并播放它。注意音频文件的体积要优化。

<mx:Script>
<![CDATA[
import mx.core.SoundAsset;
import flash.media.*;
[Embed(source="assets/pie-yan-knee.mp3")]
[Bindable]
//MP3 的一个新实例
public var Song:Class;
//将该实例创建为一个 SoundAsset
public var mySong:SoundAsset = new Song() as SoundAsset;
public var channel:SoundChannel;
//使用 SoundAsset 类的 play() 方法来播放 MP3文件的实例
public function playSound():void
{
// 先消音,防止同时多次播放
stopSound();
// 播放该音频,并存储返回的SoundChannel对象结束播放。
channel = mySong.play();
}

public function stopSound():void
{
// 当音频播放时,调用SoundChannel对象的 stop() 方法以停止播放
if ( channel != null ) channel.stop();
}
]]>
flex教程 flex2需要升级flex3吗
</mx:Script>
<mx:Button label="play" click="playSound();"/>
<mx:Button label="stop"click="stopSound();"/>


5), 加入字体: 您希望在 Flex应用程序中嵌入一种字体并将它用作基于文本的组件的样式。

下面的示例创建引用嵌入的字体的 font-family 名称的一个类选择器。接着它会创建一个 Text 控件并将其样式设置为该类选择器。

提示: 您在嵌入字体以节省文件大小时仅可以从字体添加某些字符,方法是指定您的 @font-face 声明的 unicode-range 属性。

<mx:Style>
@font-face
{
font-family: Copacetix;

src: url("assets/copacetix.ttf");
unicode-range:
U+0020-U+0040,

U+0041-U+005A,
U+005B-U+0060,
U+0061-U+007A,
U+007B-U+007E;

}

.MyTextStyle
{
font-family: Copacetix;
font-size:24pt;
}

</mx:Style>

<mx:Text styleName="MyTextStyle" text="Embedded fonts rock!"width="100%"/>

三,数据绑定

以MXML标记来描述UI,数据绑定(Databinding)来连接数据,这样就真正实现了UI和程序逻辑的分离。Databinding可以一绑多或者多绑一。

1, 在MXML中使用大括号{}语句:格式为:{源对象.属性}。可直接传送给目标对象;高级用法是在{}中包含AS表达式、AS函数或者E4X表达式

2,在MXML中使用<mx:Binding>标签:这是{}语句的替代用法,格式为:<mx:Bindingsource="源对象.属性"destination="目标对象.属性"/>;高级用法是在标签中包含AS表达式或者E4X表达式//在Model数据中使用{}语句来绑定数据
<mx:Modelid="thing1">
<data>
<part>{input1.text}</part>
</data>
</mx:Model>
//用<mx:Binding>标签来绑定数据
<mx:Binding source="input2.text"destination="thing1.part"/>

<mx:TextInput id="input1"/>
<mx:TextInput id="input2"/>

<mx:TextArea text="{thing1.part}"/>


3,使用AS类来绑定:使用mx.binding.utils.BindingUtils的bindProperty()或者bindSetter()方法

  

爱华网本文地址 » http://www.413yy.cn/a/25101014/232302.html

更多阅读

iOS8.3 beta3升级图文教程 ios10 beta2升级教程

iOS8.3 beta3升级图文教程——简介在ios8.2刚刚推送不久之后,苹果又向Beta 版软件计划的成员推送了iOS 8.3 beta 3 版,正式开启公测试。用户只需要通过 AppleSeed 就可以登录下载iOS 8.3 Beta 3 系统。iOS8.3 beta 3 引进了全新的表情

苹果iOS7.0.6升级教程 苹果6升级ios10.0.2

苹果iOS7.0.6升级教程——简介苹果在14年22号凌晨发布了 iOS7.0.6 正式版更新固件,主要是修复一个 SSL 连接验证问题。下面简单介绍下 iOS7.0.6 的升级方法。苹果iOS7.0.6升级教程——工具/原料苹果手机苹果iOS7.0.6升级教程——通

怎么去角质?你需要去角质吗? 去角质啫喱怎么用

  爱自己的女人都会给自己选择好的护肤品,不会在乎它的价钱,但是却发现好的护肤品用在自己的脸上会看不到效果,那就赶快检查一下是不是角质太厚了,导致营养吸收不进去呢?如果是这样的话,就一起来学习一下怎样去角质吧!  你需要去角质

5可以升级iOS8吗,苹果5s怎么升级iOS8 苹果5s可以升级ios8吗

5可以升级iOS8吗,苹果5s怎么升级iOS8——简介苹果在2014年的 iOS8 系统终于如期发布,新系统中自然有很多新功能,如支持第三方输入法,互联互通等功能。对于很多使用苹果5s的小伙伴想知道空间可不可以使用 iOS8 系统,答案是肯定的“可以”

声明:《flex教程 flex2需要升级flex3吗》为网友趣途无百里分享!如侵犯到您的合法权益请联系我们删除