一Q概q?/p>
Flex语言包含了一个丰富的用户界面lg库，MXMLQ一U基于XML的标记语aQ和ActionScriptQ基于ECMA 262的、强cd面向对象~程语言Q。MXML用于排布用户界面和处理应用中其他斚w的问题，而ActionScript用来处理用户交互逻辑。由于Flashq_的普及， Flex使开发者可以开发广泛的应用E序。开发者可以用工业标准（如XMLQCSS和SVCQ和他们所熟悉的模式和范例来创建应用。Flex的分d作方式和Flex公用lg模型也得开发者和界面设计者能更好的进行协作，在可靠的、易于维护的架构上生产出在用户体验方面有H破性的产品?
Flex Builder(FB)之于MXML如DREAWEAVER之于HTML。FB实现了代码与界面分开QFLEX的类E序扩展名ؓ*.asQ语法与java/c++很象QFLEXE序文g扩展名ؓ.mxmlQ其实就是拥有很多特D元素的XML文g?
二，使用MXMLlg构徏用户界面
MXML 语言支持两种用户界面lgcd: 控g和容器。容器是包含控g和其他容器的屏幕的矩形区域。控件是表单元素, 如按钮、文本字D和列表框?
可以使用Flex Component ExplorerFlex MXMLlg览工具来查看所有控件的代码和样例?
1Q加入常用可视控? 使用可视控gl织界面Q可以定义组件属性供外部讉K
A, Z文本的控?Text controls): Label(单行文本昄)、Text(多行文本昄)、TextInput(单行文本昄与输??TextArea(多行行文本显CZ输入)?RichTextEditor (富文本显CZ输入)控g。用于显C文本和/或接收来自用L文本输入Q都有一?text 属性用于设|要昄的文本。?RichTextEditor 控g可以输入文本、编辑文本和讄文本格式。用户通过使用位于 RichTextEditor 控g底部的子控g, 应用文本格式?URL 链接?
B, Z按钮的控件组?Button pd,Form controls):Button(ȀzL会发出click和buttonDown事g)、LinkButton(用于打开URL)、CheckBox(标签会被自动裁剪以适合控g边界?、RadioButton(指由 <mx:RadioButtonGroup> 标签创徏的组) ?PopupButton 控g(常用于打开List控g或Menu控g{??
2Q加入基于列表的控gQƈ获取数据
Z列表的控? 是在其承层ơ结构内的某些点上扩?ListBase cȝ那些控g。它们包?ComboBox、List、HorizontalList、DataGrid、Tile、Menu ?Tree 控g。都可从某数据提供程序的数据获得数据列表?
? 许多标准控g (包括 ColorPicker ?MenuBar 控g) 也是数据提供E序控g?
可以使用两种Ҏ讄lg的数据提供程?
1)Q直接在MXML标签中加入数据，?Array ?Collection 定义为取得数据提供程序的控g的子标签。该Ҏh实施快速的优点, 适合与静态数据一起用及用于原型设计?nbsp; <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)Q用数据绑? 使用[Bindable]元数据标{?属性非默认l定,必须明确的声明被l定的属?Q将控gl定C?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}"
/>
3Q?使用REPEATER: 是非可视控gQ类g~程语言里的For循环Q可在执行期复制其它lg?lt;mx:Repeater>的卷标要自己输入Q而dataProvider可在<mx:Script>区段之中Q以[Bindable]的Metadata定义之数l作q结。REPEATERq可嵌套使用?
<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, 加入数据验证:数据模型支持自动数据验证Q这意味着你可以很方便C用Flex验证器。as3.0验证的类包ؓmx.Validators.包中有一个基cValidator,其他的类都ؓ其子c?
1)Q用标签实现验证: //l定验证对象:source:表示验证的对象，property:表示验证对象的属?br /> <mx:PhoneNumberValidator id="pnV" source="{phoneInput}" property="text"/>
<mx:TextInput id="phoneInput"/>
2)Q用AS~程实现验证 <mx:Script>
<![CDATA[
import mx.validators.PhoneNumberValidator;
// 创徏验证?br />
private var v:PhoneNumberValidator = new PhoneNumberValidator();
private function createValidator():void {
// 讄验证?br />
v.source = phoneInput;
v.property = "text";
}
]]>
</mx:Script>
<mx:TextInput id="phoneInput" creationComplete="createValidator();"/>
q可以加入按钮触发器Qƈ修改默认提示错误 //trigger:表示触发验证事g的对?br />
//triggerEvent:表示对象触发验证事g的时?如click,mouseOver{?
//requiredFieldError属?表示必填Ҏ填入数据的时的提C错误信?br />
//wrongLengthError:表示输入的数据阿拉伯数字长度于10时提C的错误信息
//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)Q高U用? 使用正则表达式创定义验证?
5Q?加入资源(囄,音频,视频,E序):q行时外载和~译时直接内嵌两U方式，外蝲方式要多׃D蝲入时_但用简单；内嵌方式可直接调用资源，但加重了E序的负?体积变大Q且囄~辑后需要重新编?
1)QImage(囄)控g: 可外载或内嵌多种富媒体资? JPEG、GIF、PNG位图、SVG矢量?只能内嵌) , SWF动画(非Flex的SWF应用E序?,SWF库按?Button)QSWF库动?MovieClip)Q?//外蝲一个富媒体Q可使用l对或者相对\径?br /> 但加入SWF文gӞ可用use-network参数指定其用网l或者本地文件二者之一?br /> <mx:Image id="myLogo0" source="assets/logo.png"/>
//单地内嵌一个富媒体.png,.jpg,.gif,
.swf(可将嵌入的SWF文g的实例当?MovieClip.MovieClipAsset cȝ实例处理,
不能直接讉K嵌入的SWF文g的属性或Ҏ?br />
但可?LocalConnection以允许SWF之间q行通信?Q?br />
.SVG(可将嵌入的SVG文g的实例当作Sprite.SpriteAssetcȝ实例处理?
<mx:Image id="myLogo" source="@Embed('assets/logo.png')"/>
//在脚本中定义富媒体对象，然后在MXML中可以多ơ嵌?br />
<mx:Script>
<![CDATA[
[Embed(source="assets/logo.png")]
[Bindable]
public var Logo:Class;
]]>
</mx:Script>
<mx:Image id="myLogo" source="{Logo}"/>
<mx:Image id="myLogo2" source="{Logo}"/>
//在脚本中定义囄的scale-9像框~放功能可以保持边框的清晰,
(旋{嵌入的scale-9 囑փ的实例会关闭该图像的scale-9功能??br />
<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 库资?br />
<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为外观外?内嵌{的图?
可以定义一个现有的CSScd选择器ؓ该类型的所有组件设|外观。还可以q一步创定义CSS cR?
<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控g: 通常用来加入Flex应用E序(可以使用AS与其通信)Q当然也能用于加入Image控g所能加入的富媒体资源?//外蝲入SWFE序
<mx:SWFLoader id="loader1" source="FlexApp.swf"/>
//内嵌入SWFE序
<mx:SWFLoader id="loader2" source="@Embed(source='flexapp.swf')"/>
//q可以在FDS环境下加入MXML文gQ要以buttonicon.mxml.swf形式加入Q以提示FDS~译该文件?br />
<xml version="1.0">
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:SWFLoader source="buttonicon.mxml.swf" scaleContent="false"/>
</mx:Application>
4), 加入MP3音频: 您可以在 Flex 应用E序中通过使用[Embed]元数据标{ֵ入MP3文gq播攑֮。注意音频文件的体积要优化?
<mx:Script>
<![CDATA[
import mx.core.SoundAsset;
import flash.media.*;
[Embed(source="assets/pie-yan-knee.mp3")]
[Bindable]
//MP3 的一个新实例
public var Song:Class;
//该实例创徏Z?SoundAsset
public var mySong:SoundAsset = new Song() as SoundAsset;
public var channel:SoundChannel;
//使用 SoundAsset cȝ play() Ҏ来播?MP3 文g的实?nbsp;
public function playSound():void
{
// 先消韻I防止同时多次播放
stopSound();
// 播放该音频，q存储返回的SoundChannel对象l束播放?br />
channel = mySong.play();
}
public function stopSound():void
{
// 当音频播放时Q调用SoundChannel对象?stop() Ҏ以停止播?br />
if ( channel != null ) channel.stop();
}
]]>
</mx:Script>
<mx:Button label="play" click="playSound();"/>
<mx:Button label="stop" click="stopSound();"/>
5), 加入字体: 您希望在 Flex 应用E序中嵌入一U字体ƈ它用作Z文本的组件的样式?
下面的示例创建引用嵌入的字体?font-family 名称的一个类选择器?接着它会创徏一?Text 控gq将其样式设|ؓ该类选择器?
提示: 您在嵌入字体以节省文件大时仅可以从字体d某些字符, Ҏ是指定您?@font-face 声明?unicode-range 属性?
<mx:Style>
@font-face
{
font-family: Copacetix;
src: url("assets/copacetix.ttf");
unicode-range:
U+0020-U+0040, /* Punctuation, Numbers */
U+0041-U+005A, /* Upper-Case A-Z */
U+005B-U+0060, /* Punctuation and Symbols */
U+0061-U+007A, /* Lower-Case a-z */
U+007B-U+007E; /* Punctuation and Symbols */
}
.MyTextStyle
{
font-family: Copacetix;
font-size: 24pt;
}
</mx:Style>
<mx:Text styleName="MyTextStyle" text="Embedded fonts rock!" width="100%"/>
三，数据l定
以MXML标记来描qUIQ数据绑?Data binding)来连接数据，q样q正实CUI和程序逻辑的分RData binding可以一l多或者多l一?
1Q?在MXML中用大括号{}语句: 格式?{源对?属性}。可直接传送给目标对象Q高U用法是在{}中包含AS表达式、AS函数或者E4X表达?
2Q?在MXML中?lt;mx:Binding>标签:q是{}语句的替代用法，格式?<mx:Binding source="源对?属? destination="目标对象.属?/>Q高U用法是在标{中包含AS表达式或者E4X表达?nbsp; //在Model数据中用{}语句来绑定数?br />
<mx:Model id="thing1">
<data>
<part>{input1.text}</part>
</data>
</mx:Model>
//?lt;mx:Binding>标签来绑定数?br />
<mx:Binding source="input2.text" destination="thing1.part"/>
<mx:TextInput id="input1"/>
<mx:TextInput id="input2"/>
<mx:TextArea text="{thing1.part}"/>
3Q?使用AScLl定:使用mx.binding.utils.BindingUtils的bindProperty()或者bindSetter() Ҏ
四，界面布局和导?/p>
容器定义了Flash Player的绘图表面的一个矩形区域。子容器包括控g和容器。Container cL所?Flex 容器cȝ基本cR扩?Container cȝ容器d它们自己的功能以q行子组件布局。Application 容器是的Flex应用E序的唯一栚w容器, 代表整个 Flash Player l图表面?
1Q布局容器: 使用布局容器可进行用L面布局?
A, 面板(Panel)容器 昄一个标题栏、一个标题、一个边框及其子U。默认情况下, Panel 容器会对子组件进行垂直布局, q且可以通过布局属性设|ؓ "absolute" ?"horizontal"来覆盖此讄?
B, HDividedBox容器 对子lgq行水^布局, 除了在子U之间插入一个可调整的分割线之外, 它与 HBox 容器很相伹{?VDividedBox 容器对子lgq行垂直布局, 而且也在子之间插入一个可调整的分割线?
C, q铺(Tile)容器 以多行或多列的Ş式排列其子?
D, 表单(Form)容器 以标准的表单格式排列其子U?
E, ApplicationControlBar 容器 容纳提供全局D和应用程序命令的lg, q可以停靠在 Application 容器的上边缘?
F, ControlBar容器控件置?Panel ?TitleWindow 容器的下边缘?
G, 另外可用Spacer控g来辅助布局。Spacer控gq容器Q而是Z癑ֈ比的可用于挤占留IZ准确定位的一个不可见控g?
2, D容器: 使用D容器可以控制其他容器的多个子U之间的用户Ud或导航。导航器容器不能直接嵌套控gQ只能嵌套容器?
AQ手风琴(Accordion)容器 定义一个子面板序列, 但一ơ仅昄一个面ѝ?若要D容器, 用户会单M他们需要访问的子面板相对应的导航按钮?使用 Accordion 容器, 用户可以按Q何顺序访问子面板以在表单中前后移动?
B, TabNavigator容器 创徏和管理一l选项? 使用它们可在其子U中间导航?TabNavigator 容器的子U是其他容器?TabNavigator 容器为每个子U创Z个选项卡?当用户选中某个选项卡时, TabNavigator 容器会显C相兌的子U?
C, ViewStack容器 由彼此堆叠在一L子容器的一个集合组? 一ơ只有一个容器是可见的或zd的?ViewStack 容器不ؓ用户定义切换当前zd容器的内|机Ӟ您必M?LinkBar、TabBar、ButtonBar ?ToggleButtonBar 控g或自己在 ActionScript 中构建逻辑让用h更改当前zd的子U?
3, 使用容器Containersq行定位布局
定位方式有三U?
A, 自动定位:多数Flex容器使用默认预定义的规则来自动定位你在其中定义的所有的子组件?
B, 使用l对定位: 用于使控仉?
C, 使用ZU束的布局: 可以锚定容器的边~或者中心点Q然后控件就会随着容器的~而~?
Canvas容器Q和layout属性ؓabsolute的Application或Panel容器才能q行l对定位Q或U束布局?
4Q用视囄?或ViewStackD容器)q行用户界面切换D
可以Z个FlexE序或组件定义几U视囄态，然后通过改变(切换)视图状态而改变用L面?ViewStackD容器可实现同h?
1)Q设计基状?Base state,Start,currentState=''):是在默认状态下设计用户界面?
2)Q设计视囄?currentState='SomeState'):在设计模式中Q在状态查看（Window > StatesQ上点击新状?New State 按钮。然后在此状态下~辑的界面即视图的对应界面?
3)Q创建用戯为切换控? 定义用户变换状态的点击事g处理器。一般是使用一个LinkButtunQ激zcurrentState='SomeState'以切换到某界面，ȀzcurrentState=''以回到默认界面?
五，使用CSS格式化组?/p>
1. 文字横竖排列Aligning Text Vertically & Horizontally
样式对于定义Flex应用E序的外观和感觉 (外观) 很有用。您可以使用它们来更改单一lg的外? 或在所有组件上应用它们?
?Flex 中应用样式有许多Ҏ?某些样式提供更多_度控制q能以编E方式被执行。其他样式不像那么灵z? 但可能需要较的计算。在 Flex ? 可以使用以下几种Ҏ样式应用到控g:
1, 使用本地样式定义
2, 使用外部样式?
3, 使用U上样式
4, 使用 setStyle() Ҏ
六，使用Ҏ丰富用户体验
1, d效果
1), 效果是在较短旉上发生的对组件的更改?效果的例子有: 淡化lg、调整组件大和Udlg?一U效果与一个触发器相结合才能Ş成一个行? 如组件上的鼠标单凅R组件获得焦Ҏlg变成可见的??MXML ? 您将效果应用为控件或容器的属性?Adobe Flex 提供h默认属性的一l内|效果?
作ؓҎ些用h~程操作的响? 行ؓ使您可以动甅R动作和声音d到应用程序中?例如, 您可使用行ؓ在获得焦Ҏ弹出对话? 或是在用戯入无效的值时发出声音?
Flex 触发器属性是作ؓ层叠样式?(CSS) 样式被实施的??Adobe Flex 2 语言参考中, 触发器被列出在标?#8220;效果”的下面?
若要创徏行ؓ, 您定义一个具有唯一 ID 的特定效果ƈ它l定到触发器?例如, 下面的代码创Z个羃放效? 一个用于轻微羃组? 一个用于将lgq原臛_原始大小?q些效果通过使用它们的唯一 ID 被分配到“按钮”lg上的 mouseDownEffect ?mouseUpEffect 触发器上?
注意如何?Panel 容器?autoLayout 属性设|ؓ "false"。这hZL在按钮改变大时面板改变大小?
2)Q用效果方法和事g
您可以调用效果上的方法来改变它们播放的方式?例如, 可以通过调用效果?pause() Ҏ来暂停效? q过使用?resume() Ҏ来l该效果。可以通过调用效果?end() Ҏ来结束该效果?
当效果开始和效果l束? 它也会发?startEffect ?endEffect 事g?您可以监听这些事件ƈ响应您的事g状态中的更攏V?
下面的示例?#8220;Ud”效果的方法和事g来创Z个简单的游戏?该游戏的目标是直升飞机可能接q靶而又不撞到它?靠得近, 赢得的点数越多?
3, 使用q渡增加用户界面切换效果
q渡(transition,变换)是定义在视图状态切换之间播攄一U或多种视觉效果。过渡不会替换效果；? 您仍可以单一效果应用C个组? q过使用一个效果触发器或?playEffect()Ҏ来调用该效果。创渡样例如? <mx:transitions>
//fromState 属性指定当应用该过渡时您要更改的视囄?br />
//toState 属性指定您要更改ؓ的视囄?br />
//effect 属性是对要播放?Effect 对象的引?br />
<mx:Transition id="myTransition" fromState="*" toState="Advanced">
//<mx:Parallel> ?<mx:Sequence> 标签分别引发q行或按序播放的效?br /> <mx:Parallel target="{myVBox}">
//效果标签
<mx:WipeDown duration="2000"/>
<mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="2000"/>
</mx:Parallel>
</mx:Transition>
</mx:transitions>
4, 为用h供工hC?
Adobe Flex ToolTip 使您能够为您的用h供有帮助的信息。当用户在图形组件上Ud鼠标指针? 会弹出包含文本信息的工具提示。您可以使用工具提示来指导用户完成用应用程序或自定义它们来提供其他功能?
扩展 UIComponent c?(该类实现 IToolTipManagerClient 界面) 的每个可?Flex lg都支?toolTip 属性。您?toolTip 属性的D|ؓ一个文本字W串, q且, 当鼠标指针悬停在该组件上? 会显C文本字符丌Ӏ?
管长消息很难读? 但对工具提示文本的大不存在M限制。当工具提示文本辑ֈ工具提示框的宽度? 文本会自动换至下一行。可以在工具提示文本中添加换行符。在 ActionScript ? 您?\n 转义的新行字W。在 MXML 标签? 您?XML 实体?
可以通过使用层叠样式?(CSS) 语法?mx.styles.StyleManager cL改工hC文本和工具提示框的外观。对工具提示样式的更攚w用于当前应用程序中的所有工hC?
5, 控制光标
使用Flex光标理器可以控?Flex 应用E序中的光标囑փ?例如, 如果应用E序执行的处理需要用L? 直到处理完成为止, 则可以将光标更改为某个自定义的光标图? 比如沙漏, 以它反映该{待期?
您还可以更改光标以向用户提供反馈, 指示用户可以执行的操作?例如, 您可以用一个光标图像来指示用户输入被启? 而用另一个光标图像来指示输入被禁用?
CursorManager cL制一个光标优先顺序列? 在其中具有最高优先的光标当前是可见的?如果光标列表包含h相同优先U的多个光标, 则光标管理器会显C最q创建的光标?
1), 使用默认的忙光标
Flex 定义了一个默认的忙光? 可用来指C应用程序正在处? 且在应用E序对用戯入作出响应之? 用户应等? 直到处理完成?默认的忙光标是一个动L钟?
可以使用以下几种方式来控制忙光标:
可以使用 CursorManager Ҏ来设|和删除忙光标?
可以使用 SWFLoader、WebService、HttpService ?RemoteObject cȝ showBusyCursor 属性自动显C忙光标?
下面的示例?CursorManager cȝ静?setBusyCursor() ?removeBusyCursor() Ҏ, Ҏ切换按钮的状态显C和隐藏默认?Flex 忙光标?
2), 使用自定义光?
可以使用 JPEG、GIF、PNG ?SVG 囑փ, Sprite 对象?SWF 文g作ؓ光标囑փ?
若要使用光标理? 您将 mx.managers.CursorManager cd入到应用E序? 然后引用其属性和Ҏ?
下面的示例嵌入一个在 Adobe Flash 中创建的沙漏?SWF 动画, q将它用作一个自定义光标?在该CZ? 创徏自定义光标的Ҏ? 调用 CursorManager cȝ setCursor() 静态方? 然后它传送给Ҏ希望用作自定义光标的嵌入资源的类的引用?可以通过调用 CursorManager cȝ removeCursor() 静态方法ƈ它传送给 CursorManager cȝ currentCursorID 静态属性来删除zd的自定义光标?
七，使用ActionScript处理事g
1, 事g模型与机?
Flex的事件模型基于DOM3事g模型。通过创徏注册事g监听?事g处理E序,事g处理?是函数方法用于响应指定的事g)Q可以在lg的实例发出某个事?如用户何时与界面lg交互, 以及在组件的外观或生命周期中何时发生重要的变? 如组件的创徏或破坏或调整其大等)? 对象事g自动z֏此事件到所有注册过的监听器?
1)Q事件流:当一个事件被z֏出来? 事g对象从根节点开始自上而下开始扫描display list(?, 一直到目标对象, 查每个节Ҏ否有相应的监听器。目标对象指的是display list中生事件的对象. 比如:<mx:Panel><mx:HBox><mx:VBox><mx:Button /></mx:VBox></mx:HBox></mx:Panel>。如果此?resize了VBox, 则会从根(Application)开? 下来查Panel, HBox, 直到目标对象-产生resize事g的VBox为止.
2), 事g的派?Flex中可以通过dispatchEvent()Ҏ手工z֏事g, 所有UIComponent的子c都可以调用此方? 语法: //参数event_type是Event对象的type属?br />
//函数的返回值LTrue.
objectInstance.dispatchEvent(new Event("event_type"):Boolean
可以使用此方法派发Q意事? 而不仅仅是用戯定义事g, 比如: 可以z֏一个Button的Click事g. var result:Boolean = buttonInstance.dispatchEvent(new Event(MouseEvent.CLICK));
在Flex应用中不是必d新派发的事gq行处理, 如果触发了一个事? 而没有对应的Listener?Flex忽略此事?
如果想给Event对象d新属? 必ȝ承Eventc?然后定义新属?
3), 事g的传?
事g触发? Flex?个检事件监听器的阶D? 3个阶D늚发生的顺序如?
A. 捕获阶段:在捕获阶D?Flex在显C列表中查事件的先是否注册了事件的监听? Flex从根节点开始顺序而下. 大多数情况中, 根节ҎApplication对象. 同时, Flex改变事g的currentTarget? ~省情况? 在此阶段,没有容器监听事g. use_capture参数的值是False,在此阶段d监听的唯一Ҏ是在调用add_listener?传入一个ؓTrue值的use_capture参数, 比如: myAccordion.addEventListener(MouseEvent.MOUSE_DOWN, customLogEvent, true);
如果是在Mxml中添加监? Flex讄此参CؓFalse, 没有办法q行修改. 如果讄了use_capture为True, 那么事g不会上? 如果既想捕获又想上Q必调?addEventListener两次. 一ơuse_capture参数为true, 一ơؓfalse; 捕获很少使用, 上Q的用更为普?
B. 目标阶段: 在目标阶D? FlexȀ发事件的监听E序, 不检查其他的节点.
C. 上Q阶段:事g只在bubbles属性ؓTrue时才q行上Q. 可以上Q的事件包? change, click, doubleClick, keyDown, keyUp, mouseDown, mouseUp. 在上阶D? Flex改变事g的currentTarget属? 而target属性是初始z֏事g的对?
在Q意一个阶D? 节点们都有机会操作事? 比如: 用户点击了一个在VBox中的Button,在捕获阶D? Flex查Application对象(根节?和VBox是否有监听器处理此事? Flex然后在目标阶D触发按钮的监听?在上阶D? VBox和应用以与捕获阶D늛反的序再次获得Z处理事g.
在Actionscript3.0?你可以在L目标节点上注册事件监听器. 但是部分事g会被直接传给目标节点,比如Socketc? 捕获阶段的节炚w序是从父节点到子节点? 而上阶D刚好相?
捕获事g~省是关闭的,也就是说如果要捕获事? 必须昑ּ指定在捕获阶D进行处?
每一个Event都有target和currentTarget属? 帮助跟踪事g传播的过E?
4), 查询事g阶段
使用事g的eventPhase可以获得事g当前的阶D?
1): CAPTURE_PHASE
2): AT_TARGET
3): BUBBLING_PHASE
CZ: private function determineState(event:MouseEvent):Void { Debug.trace(event.eventPhase + ":" + event.currentTarget.id); }
5), 停止传播
使用下面两个函数停止事g的传?
stopPropagation()
stopImmediatePropagation()
2, 创徏监听?
lg有Flex提供的内Z? 也可以用派?监听模型定义自己的事件监听器, q指定监听器监听何种事g.
有三U方?
1), 内部MXML中的AS函数? 在MXML?lt;mx:Script></mx:Script>声明中注册监听器: q是W一个和使用最q泛的方法，?MXML 中定义事件发生时会调用的事g处理E序?
2), 外部AS文g中的AS函数?通过ActionScript定义注册事g处理E序: 可以通过使用ActionScript 中的 addEventHandler() {方法来注册事g处理E序?可将 addEventHandler() Ҏ|于 Application 容器?creationComplete 事g(?Application 表单及其子被初始化之后, 在启动应用程序时发生)的事件处理程序中?详见Action Script教程?
3), 代码混写? 在MXML的控件标{中直接完全嵌入监听?q也UCؓ使用U上事g处理E序): q样比较直接Q代码也较少Q但会导致代码很N诅R维护和~放。如果监听器是多个AS语句甚至更复杂的逻辑Q不推荐此方法?
六，数据服务器访问概q?/p>
Flex 被设计ؓ可以与许多类型的服务器打交道Q从而提供对本地和远端逻辑的访问。提供数据访问的MXML lg被称之ؓ数据服务器组?data service components)。MXML 包含了如下几U类型的数据服务器组Ӟ
1. HTTPService 提供对返回数据的HTTP URLs 的访问。通过 Http get/post 来传递纯文字资料。好处是非常普及于所有的后台Q但~点则是复杂的数据类型要l过复杂的序列化与解序列化程序才能在client/server间交换?
2. WebService 提供对用SOAP 的web 服务器的讉K。WebService 也是很常见的选择Q好处是规则共通，方便不同技术^C换资料，~点则同h某些复杂数据l构无法L的交换，在编码与译码的过E中往往会出现意外，例如 Date 的表现方式。以 .NET 来说Q?web service 应该是再方便不过的选择Q只要把 asmx 档案准备好再?flex client 呼叫卛_?
3. RemoteObject(Flash Remoting) 技?官方支持的^台有三种Q分别是 Java Coldfusion(但实际上Coldfusion应该只算是java的subsetQ它是一U?scripting tag library)?NET。Flex Data Services 或Macromedia ColdFusion MX 7.0.2通过使用AMF协议提供对Java 对象QJava Beans、EJBs、POJOsQ的讉K?
4Q其它非官方RemoteObject技? ׃AMF格式已被非官方反~译Q所以有许多开源的remoting替代ҎQ?
AQAMFPHP: q是php版的remoting
BQOPENAMF: java版的remoting
CQFlap: Perl 与Python版的remoting
SQFlashORB: 商业版的remoting替代ҎQ目前支持java?net
七，HTTPService
使用plaine text format的传输方式，通过xml, loadVars, loadVariables {方?
外部XML讀?Actionscript 3.0 的賣點之一Q就是加強XML讀取的方便性，讀取外部XML是常用的前後端整合手D，而XML點的操作Q比之前AS2用DOM更直觀Q可以直接運用標c與屬性名Ep問節點?
主要參考章Q?Reading external XML documents Traversing XML structures
Lesson 6: RETRIEVING XML DATA (37 min) 1. Setting Up an XML Data Project & Setting HTTP Service 2. Setting Up a DataGrid to Display XML Data 3. Adding a Label Control to a DataGrid 4. Using an ArrayCollection 5. Examining a Data Structure in Debugging Mode 6. Utilizing Data Returned in an Event Object 7. Using the HTTP Service Class to Catch Faults 8. Creating a Cross Domain Security File
Lesson 13: MANIPULATING XML (34 min) 1. Manipulating Client Side Data Using E4X Syntax 2. Creating a Tree Control to Display the XML Data 3. Adding a Change Event to Display Data from the Tree 4. Populating the Shopping Cart with Raw XML Content 5. Working with an XML List Collection 6. Using Conditional Logic to Compare & Update Values
八，WebService
Lesson 14: USING WEB SERVICES (25 min) 1. Accessing Web Services 2. Invoking Web Services Methods & Results 3. Using a FaultHandler 4. Call Multiple Methods from One Web Service Object 5. Passing Parameters to Web Services
九，Flex Data Services
FDS (Data Service, Messaging)
Flex Data Service ?Flex 2 里新出现的技术，主要目地是希望提供更自动的方法来?client ?server 交换资料Q它的核心实际上仍然?AMF ?RTMP (对，是 Flash Media Server 用的那种)Q部份功能也?FMS 重叠Q但它着重在 Data Sharing ?Exchange q部份?
目前 FDS 只有 Java 的版本，也就?server 端要?java 写，?Adobe 宣称来会有 FDS for .NET 版。不q好消息是，有一家叫 theMidnightCoders 的公司抢先推Z FDS 兼容版本Q不但同时支?AMF0 ?AMF3Q更支持部䆾 FDS 的功?主要是资料同步的部䆾Q与server端的冲突处理与资料储??
?.NET 来说Q付费的选择?weborb 是目前最优的选择Qh钱只有官方版的一半，但功能更完整Q而免q选择则当?Fluorine 莫属?
功能描述Q如果你有Flex Data servicesQ你可以发布一lMXML和AS文gQFlex Data Services可以在收到Httph前，把你的MXML和AS文g~译成Swf文g?
Flex执行以下步骤Q?
1Q?~译MXMLq生一个SWF文g
2Q?贮藏已编译的MXML文g
3Q?向安Lq回SWF文g
发布你的E序Ҏ一Q发布一个SWF文g
讉KҎQhttp://hostname/path/filename.swf
Ҏ二：发布MXML和AS文g
讉KҎQhttp://hostname/path/filename.mxml
FDS在你的Java服务器上或者Java容器内运行。以保证在以下几个特征领域的q泛?
1>多个客户端的数据׃n
1Q?支持C2C的数据通讯
2Q?服务器端数据增加
3Q?安户端访问服务器资源的证?
4Q?数据服务日志
2>提高RPC的广泛?
十，其它RemoteObject技?/p>
现有许多非官方的开源RemoteObject(Flash Remoting)技术，行的服务端QJava、Php?Net、Perl/Python、RubyQ技术Flex都已打通，您可以直接在Flex/Flash中通过RemoteObject直接调用 AQAMFPHP: Flash和PHP的整?AMFPHP
BQAMF.NET: Flex调用不同参数cd?Net WebMethod
CQAMF::Perl
DQRubyAmf
EQ与JAVA:
FQ和ASP的整合：Flash2ASP是能自动生成ASP和AS代码的工兗虽然Flash2ASP作后台速度不如AMFphpQ但׃国内ASP资源丰富Q而且Flash2ASP教程文档详细Q也可作Z个选择?
在线?
说明?
55分钟详细使用Ҏ以及留言范例视频教E?
本地q行版下?exe)
详细情况
十一, 创徏自定义组?/p>
1, Flex是由ascȝ构实现的。类l构包含了组件类Q管理类Q数据服务类Q和其他用来实现flex功能的类。下囑ֱC的是类l构中flex可视化组件的一部分Q关于控制和容器的部分：
所有的可视化组件承自UIComponent ascRFlex中非可视化组件也是依靠ascȝ构来实现的。大部分的非可视化组仉是ValidatorQFormatterQ或者是Effect cR?
通过使用mxml和as语言扩展Flexcȝ构来创徏自定义的lg。组仉l承了父cȝ属性，ҎQ行为，风格和效果?
通过as创徏一个flexlgӞ必须l承自一个flexcR类的名U必dcL件的名称相同。子cȝ承了父类的所有属性的和方法。在mxml中用这个组件时Q通过使用cdU的标签来引用。例如，cdU是myASButtonQ文件名则ؓmyASButton.asQ在mxml中?lt; myASButton>标签来用组件?
在通过mxml创徏一个组建时Qflex~译器将自动的生成一个ascRmxml文g的名U必dascdU相同。同P在mxml中用这个名U标{来使用q个lg?
下图展示了分别通过as和mxml创徏的Flex Buttonlg的自定义lgQ?Button.as
MyASButton.as
package
{
public class MyASButton extends Button
{
//Override inherited methods and properties.
//Define new methods and properties.
//Define custom logic in ActionScript.
}
}
<mx:Button>
<ms:Script>
//Override inherited methods and properties.
//Define new methods and properties.
//Define custom logic in ActionScript.
</mx:Script>
<!-- Add MXML code. -->
</mx:Button>
上面的两U实现方法都生成了一个Buttoncȝ子类。同Ll承了所有的属性，Ҏ和buttoncȝ所有元素。都可以重写cȝ属性，Ҏ和逻辑?
注意Q父cM的变量是不能被覆盖，但是可以覆盖通过setter和getterҎ实现的属性。你可以重新讄q些变量的倹{?
另外Q如果用mxml创徏l徏Qflex~译器完成了创徏一个组件的子类的大部分工作Q因此用mxml创徏lg比用as创徏lg更加Ҏ?
2, 军_是用mxmlq是as创徏lg
在创建组件之前需要做的一个首要决定是Q用asq是mxml。由你需要开发应用程序来军_你需要用什么样的组件?
下面是一些基本的指导斚wQ?
mxml和aslg都定义了新的ascR基本上所有能用as完成的自定义lg都可以通过mxml来实现。一般来_对于单的自定义组建，例如修改已有l徏的一些属性和ҎQ用mxml要比使用as方便得多。当你在新的lg中用了别的l徏Q而且需要用flex layout容器来进行多个组件的布局讄Q那么需要用mxml来定义。如果你想修Ҏ一个组件的行ؓQ例如一个容器中子元素的布局方式Q则使用as。如果你想通过创徏UIComponent的子cL创徏一个全新的可视化组Ӟ则用as。如果你惛_Z个全新的非可视化lgQ例如formatterQvalidatorQ或者effectQ则使用as。注意：Flash Professional 8是不能开发AS3.0的组件的Q如果要使用AS3.0开发Flex2lgQ应该用Flex Builder IDE?
3, lg部v
在部|你的mxml或as文g的自定义lgӞ一般将q些文g攄在你的应用程序的子目录内Q或者一个定义好的asc\径下?
Z保密Q你可能不希望用源码的形式来部|你的源文g。因此你可以使用swc文g或者共享资源库QRSLQ作为用来部|的文g?
Swc文g是Flexlg的一U集合格式。用swc文g可以方便的在开发h员之间进行交，q样你用用一个文Ӟ而不是很多mxmlQas文gQ或者图片和其他资源。更重要的是Qswc文g中的swf已经被编译了Q这意味着你不用看着J杂的代码?
Swc文g可以包含多个lgQ用PKZip打包格式其打包在一赗你可以使用winzipQjar或者Q何打包工h打开q个文g。但是，一般来说不要直接在swc外部q行打包在swc里面的swf文g?
创徏swc文gQ需要用compc工具Q该工具在flex安装目录下的bin目录内。compc工具可以mxml文gQ或as文gQ或两种文g一P打包成swc文g?
要羃你的swf格式的应用程序的大小Q有一U方式是共享资源打包到文g外部Q由client下蝲q保存在~存中。这些外部职员可以在E序q行的时候多ơ被使用Q但是只需要从服务器传输到client端一ơ。这些文件就是共享资源库QRSLQ?
本文转自Qhttp://www.deepcast.net/wiki/ow.asp?FlexBuilder%BD%CC%B3%CC
]]>