??xml version="1.0" encoding="utf-8" standalone="yes"?>
AdobeNFlexĹ߾Flex BuilderȻn""ټһ㿪˵dzãDӛϵ֮͑ͬٗUCtrl + CǸƣCtrl + VϣIϵy༭Dzǃأעͻe֣ʵFlex BuilderaܶEclipse༭҂}?/font>
ðɣ
Ctrl-F11: УRun
Flex Builder:http://labs.adobe.com/
иFDT & EclipseټAο֙
]FDTEclipsePluginȫFlash Development ToolrFlashʽfǷ\õ]
õFlex Builderݼ
]Bing :D Դ:
Ris
F11: Debug
Ctrl-Alt-Down: ظĿǰr༭УRepeat current line
Alt-Up: ؚУxؚMove line (or selection) up
Alt-Down: ؚУxؚMove line (or selection) down
Ctrl-Click: Go to definition (also F3)
Ctrl-D: hУDelete line
Alt-/: hɣWord completion (cycles through possible matches)
Ctrl-Up: ϣScroll up
Ctrl-Down: nScroll Down
http://www.betriebsraum.de/blog/wp-content/uploads/2006/03/fdt_shortcuts.pdf
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init(event)" layout="absolute">
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
private function init(event:FlexEvent):void {
}
]]>
</mx:Script>
</mx:Application>
既然?HelloWorld Q我们就?init 里面输入 trace("HelloWorld!"); 吧,?Debug 模式下输出, OK Q?Console H口出现 HelloWorld! 字样Q恭喜你Q成功的制作Z?Flex E序来(W一节就到这里大家没意见吧?反正也就只是 HelloWorld ……)。当ӞZ避免臭鸡蛋烂番茄什么的Q偶再增加点内容…?br />代码里加上: private var str:String = "HelloWorld!"; Q?然后 trace(str); Q嗯Q一个稍微复杂点点的E序出来了Q真?br />?trace 换成 Alert 或许会更有成感Q?br /><?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init(event)" layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
private var str:String = "HelloWorld!";
private function init(event:FlexEvent):void {
Alert.show(str);
}
]]>
</mx:Script>
</mx:Application>
当一个组件的外观或者生命周期发生重要改变,比如创徏或者销毁一个容器,或改 变一个容器的大小的时候,事g也会通知E序员?/font>
当一个组件的实例分派一个事件时Q你为那个事件注册的监听器对象就会被通知?你可以在 ActionScript 中定义事件监听器Q或者叫做事件处理器Q来处理事g。你 既可以在 MXML 声明中ؓ一个组件注册事件监听器Q也可以?ActionScript 中实?相同的功能?/font>
接收事g通知有三U方式:
在 MXML 中注册一个事件处理器
在 MXML 中创Z个内联(inlineQ的事g处理?br /> 通过 ActionScript 注册一个事件处理器
?MXML 中注册一个事件处理器
W一个,而且是最q泛地被用来接收事g通知的方法就是在 MXML 中定义一个事件处 理器Q当事g发生时就调用它?br />在这个例子中Q你Z?Button 控g?clickQ点击)事g定义了一个事件处理器?当用L击这?Button 控gӞ事g处理器会?Label 控g?text 属性设成?"HelloQWorld!"?/font>
CZ
Q?xml version="1.0" encoding="utf-8"?>
Qmx:Application
xmlns:mx="
http://www.adobe.com/2006/mxml
"
width="300" height="200"
horizontalAlign="center" verticalAlign="middle"
viewSourceURL="src/HandlingEventsEventHandler/index.html">
Qmx:Script>
Q?[CDATA[
import flash.events.MouseEvent;
private function clickHandler ( event:MouseEvent ):void
{
myLabel.text = "HelloQWorld!";
}
]]>
Q?mx:Script>
Qmx:Panel
title="My Application" horizontalAlign="center"
paddingTop="10" paddingBottom="10" paddingLeft="10"
paddingRight="10" >
Qmx:Label id="myLabel" width="180" fontWeight="bold"
fontSize="24"/>
Qmx:Button id="myButton" label="Click Me!"
click="clickHandler(event);" />
Q?mx:Panel>
Q?mx:Application>
q行l果囄Q?/font>
译注Q由于文档中无法嵌入 SWF 文gQ代码运行结果请查看原文中相应的部分?/font>
?MXML 中创Z个内联(inlineQ的事g处理?/strong>
有时响应事g的最单的Ҏ是完全在一个组件的 MXML 声明中定义事件处理器?q就是用一个内联(inlineQ的事g处理器?/font>
在下面的例子中,你设定了Qmx:Button>标签的click属性,所以它可以直接讑֮ Label控g的text属性,而不需要调用一个事件处理器Ҏ?/font>
提示Q用内联事件处理器可能比较快而且代码较少Q但是它也可以媄响代码的易读性,可维护性和可扩展性。一个好的经验法则就是不要在内联事g处理器中包含 一条语句以上的 ActionScript。如果你必须包含更复杂的逻辑Q就把它攑ֈ一?ActionScript helper ҎQ即W一U方法)或者一?ActionScript 事g处理器(?W三U方法)中?/font>
CZ
Q?xml version="1.0" encoding="utf-8"?>
Qmx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/HandlingEventsInlineMethod/index.html"
horizontalAlign="center" verticalAlign="middle"
width="300" height="200">
Qmx:Panel
title="My Application" horizontalAlign="center"
paddingTop="10" paddingBottom="10" paddingLeft="10"
paddingRight="10">
Qmx:Label id="myLabel" width="180" fontWeight="bold"
fontSize="24"/>
Qmx:Button id="myButton" label="Click Me!" click="myLabel.text =
'Hello, World!'" />
Q?mx:Panel>
Q?mx:Application>
q行l果囄Q?/font>
通过 ActionScript 注册一个事件监听器
你也可以通过使用 ActionScript 注册一个事件处理器来响应事件?在这个例子中Q用ActionScript中的addEventHandler() Ҏ注册了一个事件监
听器。这个addEventHandler()Ҏ被放在了用来处理Application容器?br />creationComplete事g的事件处理器中?br />提示Q程序开始运行的时候,在Application的外观和它的子组件初始化完毕之后Q?Application的creationComplete事g׃发生。creationComplete事g的处理器?供了一个很方便的地Ҏ攄注册事g监听器的ActionScript代码?/font>
CZ
Q?xml version="1.0" encoding="utf-8"?>
Qmx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/HandlingEventsActionScript/index.html"
horizontalAlign="center" verticalAlign="middle"
width="300" height="200"
creationComplete="creationCompleteHandler(event);">
Qmx:Script>
Q?[CDATA[
import flash.events.MouseEvent;
import mx.events.FlexEvent;
private function
creationCompleteHandler(event:FlexEvent):void
{
clickHandler);
}
// Listen for the click event on the Button control
myButton.addEventListener (MouseEvent.CLICK,
private function clickHandler ( event:Event ):void
{
myLabel.text = "Hello, World!";
}
]]>
Q?mx:Script>
Qmx:Panel
title="My Application" horizontalAlign="center"
paddingTop="10" paddingBottom="10" paddingLeft="10"
paddingRight="10">
Qmx:Label id="myLabel" width="180" fontWeight="bold"
fontSize="24"/>
Qmx:Button id="myButton" label="Click Me!" />
Q?mx:Panel>
Q?mx:Application>
q行l果囄Q?/font>
编物语Q本文援?/font> Dreamer's Blog Q特此感谢作者的努力。大家如果觉得这教E正是你所需要的话,请别忘了M者的博客打打气啊?/font>
<mx:Panel>标签定义了一个Panel容器Q它包含有一个标题栏Q一个标题,一个状?信息Q一个边框,以及用来攄子容器或I间的内容区域。它的titleQ标题)属?的D讑֮为?"My Application"?br /><mx:Label>标签定义了一个Label控gQ它是一个可以显C文本的很简单的用户界面 lg。它的text属性被讑֮为?"Hello, World!"?br /><mx:Label> 标签的fontWeight 和?fontSize 属性改变了使用字体的样式。你也可 以用CSSl你的组件加上样式?br />更多信息Q请看Flex开发者指南中的“用层叠样式表QCSSQ”?注意Q你可以使用命o行编译器 mxmlc 或?Flex Builder 2 来编译你?Flex E序?br />关于使用 mxmlc ~译E序的步骤,L?/font> 使用 MXML ?ActionScript ~程 ”(译注Q?此篇我已l译成中文)?/font>
CZ
<?xml version="1.0" encoding="utf-8"?Q?br /><mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/HelloWorld/index.html"
horizontalAlign="center" verticalAlign="middle"
width="300" height="160"Q?br /><mx:Panel
paddingTop="10" paddingBottom="10" paddingLeft="10"
paddingRight="10"
title="My Application"Q?/font>
<mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/Q?br /></mx:PanelQ?br /></mx:ApplicationQ?/font>
q行l果囄Q?/span>>
译注Q由于文档中无法嵌入 SWF 文gQ代码运行结果请查看原文中相应的部分?/font>
Adobe Flex 2.0 是一Ҏ兴的技术,它基于强大的已经很成熟的 J2EE q_Q具有一些很强大q?且迷人的Ҏ,比如 Flash 的表现能力,丰富的媒体和ȝ能力{等。Flex 2.0 虽然在前台表?br />?FlashQ却是更多地面向开发者(developerQ,而不是设计者(designerQ。你只需要编写代码就 可以使用各种控g做出很漂亮的东西Q这是许多缺艺术细胞的开发h员向往的事情。而且 Flex 除去?Flash 中一些o很多解的东西Q比如Q元件等Q我本h怎么努力也无法学?FlashQ?郁闷Q,完全可以界面设计和逻辑实现分离开来,使美工和E序员专注于自己的东西,怿q?也是大家所希望看到的?/font>
其实 Flex 2.0 也不是 太新的东?Q在 Flex 2.0 之前已经 有了 MacroMedia Flex 1.0 ?MacroMedia Flex 1.5Q不q国内很有人关注。Flex 1.0 ?1.5 的性能都不是很好,~译出来?SWF 文g很大Q而且 Flex Builder 1.5 是一个类g Dreamweaver 的编辑器Q狂占内存,我的?器配|又不是太先q,用v来苦不堪aQ调试的时候每每都要等上一D|间页面才能编译ƈ?C出来。由于这些原因,大多Ch?Flex 都只是观望态度。但?Adobe 收购?MacroMedia ?后推出的 Flex 2.0 相对?Flex 1.5 可以说是一个全新的版本Q是 Flex 的真正的L。它使用了强 面向对象的功能强大的 ActionScript 3.0 取代了以前的 ActionScript 版本Q得运行效率大大提高, ~译出来?SWF 文g体积也羃很多。而且 Adobe 摒弃了以前的 Flex BuilderQ做了全新的?br />?Eclipse ?Flex Builder 2.0Q得开发环境改q良多,提高了开发者的体验Q用h实舒服 多了Q代码提C等斚w做的很不错,我可以证明?^_^Q?/font>
Adobe Flex 2.0 可以U得上是最强大?RIAQRich Internet ApplicationQ富因特|应用程序)开?工具。但是由于国内比较落后,很多新技术出来好像都要等上几q才能传到国内ƈ且流行。?么办Q加强经徏设,加快攚w开放,使中国赶紧成为发辑֛Ӟ让h家做的Y件研I的技?发行出来有中文版的……?不过q些好像Ua是惻I臛_q期是不可能了,没有办法Q只?d英文文档。然而关?Flex 的英文资料也不是很多QFlex 自带的帮助是最好的文档Q而且?英文文档的效率是很低的,q不如看母语来的畅快。我q其中痛楚Q所以就想翻译一些入?的文章供大家参考,而最好的入门文章莫过?Adobe Flex 开发者中心的q些 Quick Starts。以?我会逐步把它们翻译出来,可能全部译Q也可能只翻译其中一部分Q我会把译的所有这?都做?PDF 文g攑ֈ|上Q算是对初学者的帮助Q也是对自己的一U历l(说了那么多ؕ七八 p的Q现在才说重点,发现自己废话也够多)。原文中的一些示例不能嵌入到 PDF 中,所以大?如果想看代码q行情况Q还请到原文中去找。另外,׃本hp水^和技术水qx其有限, 审校工作也做得不好,书中出现错误或者不妥之处在所隑օQ恳请ƈ热烈Ƣ迎大家批评指正Q?先谢谢大家?/font>
虽然只是译几篇文章发出来,读者也可能很少Q但是我q是惛_q里感谢几个人(虚荣一下, 莫怪?^_^Q,他们是我的兄弟们Q冬瓜,侯Q雷子,张霄。虽然他们没有对译做Q何A献?且有可能?Flex 是不是很好吃Q但是他们是我的_支柱和生zM的重要部分。谢谢你们,?以你们ؓ荣?/font>
使用 MXML ?ActionScript ~程
Adobe]是把 Flex 作ؓ一?ActionScript cd实现的。这个类库包含了lgQ容?br />和控ӞQmanager c,数据服务c,以及h其他Ҏ的cR你可以通过使用带有 cd?MXML ?ActionScript 语言来开发应用程序?/font>
MXML
MXML 是一个可以让你在 Adobe] Flex™中布局用户界面lg的一U?XML 语言。你也可 以?MXML 声明来定义程序中的非可视化组Ӟ比如Ҏ务器端数据源的访问以?用户界面lg和数据源之间的数据绑定?br />比如Q你可以像下面这P使用Qmx:ButtonQ标{来创徏 Button 控g的一个实例:
Qmx:Button id="myButton" label="I‘m a button!"/Q?br />q里通过讑֮ id 属性赋予了q个 Button 实例一个独一无二的名字,你以后可以 用这个名字来引用q个实例。?label 属性用来设|显C在q个 Button 实例上的?{ֆ宏V?/font>
下面的例子展CZ用来创徏一个展C?Button 控g?Flex E序的完整代码:
Q?xml version="1.0" encoding="utf-8"?Q?br />Qmx:Application
xmlns:mx="
http://www.adobe.com/2006/mxml
"
horizontalAlign="center" verticalAlign="center"Q?/font>
Qmx:Button id="myButton" label="I’m a button!" /Q?br />Q?mx:ApplicationQ?/font>
当你~写完一?Flex E序之后Q你必须使用 Flex ~译器编译它。Flex ~译器是一 个叫做?mxmlc 的小型执行文Ӟ它在你的 Flex 2 安装目录下的 Flex SDK 2.0\bin 文g夹中?br />提示Q请定 Flex 2 安装目录\ Flex SDK 2.0\bin 文g夹在你的pȝ变量中。把 Flex ~译器设定到你的pȝ变量中可以你不在哪个文g夹下都可以从命o行直
接调用它?/font>
步骤Q?/font>
1. 用你喜欢的文本编辑器创徏一个新的文Ӟ比如Q记事本Qƈ把它保存?br />MyFirst.mxml?/font>
2. 把前面例子中的代码写?MyFirst.mxml 中ƈ保存文g?/font>
3. 通过选择 开始?Q?所有程序?Q?附g Q?命o提示W?Q打开一个命令行H口?br />4. 改变当前的目录,它指向你在W一步中保存?Flex E序所在的文g夏V?br />5. 敲入下面的命令来调用 Flex ~译器:
mxmlc --strict=true --file-specs MyFirst.mxml
命o行中以两个短划线开头的两个元素是所谓的~译器选项Q它们被用来 定义 Flex ~译器的行ؓ。在上一个例子中Q你把?–strict 选项设ؓ true ?强制~译器执?strict 模式。在 strict 模式中,~译器对你的代码有更?格的查。比如,它会查你是否为变量定义了cd?-file-specs 用来?义需要编译的 MXML 文g?br />6. 你可以在 Windows 资源理器中双击 SWF 文g来运行它Q也可以在命令行?输入它的名字在独立的 Adobe Flash Player 9 中运行它?/font>
q行l果囄Q?/font>
译注Q由于文档中无法嵌入 SWF 文gQ代码运行结果请查看原文中相应的部分?/font>
提示Q你也可以用Adobe Flex Builder 2 来创建和~译你的Flex应用E序。AdobeFlex Builder2是一个含有一个可视化设计视图的开发Flex的集成开发环境(IDEQ?惌获得更多关于Flex Builder2的信息,L使用 Flex Builder2?/font>
ActionScript
MXML 标签?ActionScript cL者类中的属性是相对应的。当你编译你?Flex 应用 E序的时候,Flex 解析你的 MXML 标签q且生成相应?ActionScript cR然后这?ActionScript cM被编译成 SWF 字节码存储到一?SWF 文g中?br />提示Q你可以?-keep-generated-actionscript 选项dC?mxmlc 命o行中Q?来查?Flex 生成?ActionScript 中间文g?br />l箋看上面的例子QFlex 提供了一个定?Flex Button 控g?ActionScript ButtoncR?br />注意Q在上面的例子中Q<mx:ButtonQ标{中的?mx 前缀是一个命名空间。它是通过
?Application 标签中用一个独一无二?URL 来声明的。mx 前缀把在 mx 命名I间 中的每个lg映射到它的完全限定类名。这是Z?Flex ~译器可以在扑ֈ?mx 命名I间中的 MXML 标签相对应的 ActionScript cR?br />下面的例子展CZ如何使用 ActionScript 来创Z?Button 控g。最后结果和?面的 MXML 版本的结果是一L?/font>
Q?xml version="1.0" encoding="utf-8"?Q?br />Qmx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/GettingStartedActionScript/index.html"
creationComplete="creationCompleteHandler();"
width="300" height="80" Q?br /> Qmx:ScriptQ?br />Q?[CDATA[
import mx.controls.Button;
import mx.events.FlexEvent;
private var myButton:Button;
private function creationCompleteHandler():void
{
// 创徏一?Button 实例q设|其标签
myButton = new Button();
myButton.label = "I‘m a button!";
//一?button lg创徏完毕p通知应用E序q对布局q行处理
myButton.addEventListener (FlexEvent.CREATION_COMPLETE,
buttonCreationCompleteHandler);
// ?Button 实例d刊W?DisplayList
addChild (myButton);
}
private function buttonCreationCompleteHandler
( evt:FlexEvent ):void
{
// 按钮居中显C?br />myButton.x = parent.width/2 - myButton.width/2;
myButton.y = parent.height/2 - myButton.height/2;
}
]]Q?br />Q?mx:ScriptQ?br />Q?mx:ApplicationQ?/font>
当你通过 ActionScript 来创Z?Flex lgӞ你必d入这个组件的cR你q?br />必须使用 addChild()Ҏ组件添加到E序?DisplayList 中来使其可见。通过?较这两个{h的例子的长度和复杂性,你可以发现这U简单的Q基于标{Q而且 h声明式语法的 MXML 是如何你避免编写很多行 ActionScript 代码来布局lg 的?/font>
q行l果囄Q?/font>
译注Q由于文档中无法嵌入 SWF 文gQ代码运行结果请查看原文中相应的部分?/font>
注意Q这个例子展CZ如何?Script 标签中编?ActionScriptQ这是在 Flex E序 中包?ActionScript 代码的一U可行的Ҏ。其它的Ҏ是将 script 代码块分?到外?ActionScript 文g中或者用外部的 ActionScript cR?/font>
This page contains a list of useful Keyboard shortcuts available within Flex Builder.
You can get a complete list within Flex Builder by pressing CTRL-SHIFT-L.
CTRL-LEFT_ARROW | Beginning of line |
CTRL-D | Delete Current Line |
Ctrl-Shift - T | Open Class Browser |
Ctrl-j | Incremental search (forward) |
Ctrl-J | Incremental search (backward) |
Alt-Up Arrow | Move line up |
Alt-Down Arrow | Move line down |
Ctrl-F6 | Cycle through editors |
Ctrl-Shift - F6 | Cycle through editors backwards |
Ctrl-Up Arrow | Scroll up |
Ctrl-Down Arrow | Scroll down |
Ctrl-f | Find |
Ctrl-Shift - Enter | Insert blank line above |
Ctrl-Enter | Insert blank line below |
Ctrl-Alt - Up Arrow | Copy line up |
Ctrl-Alt - Down Arrow | Copy line down |
Alt-/ | Word completion |
Ctrl-Delete | Delete next word |
Ctrl-Backspace | Delete previous word |
Ctrl-Shift - Delete | Delete to end of line |
Ctrl-l | Go to line |
Ctrl-Shift - l | Open keyboard shortcuts |
E序代码Q?/strong> |
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml" xmlns="*"> <mx:Canvas width="100%" height="100%"> <mx:Label x="20" y="60" text="Email"/> <mx:TextInput x="90" y="60" width="300"/> </mx:Canvas> </mx:Application> |
E序代码Q?/strong> |
<mx:Label x="20" y="90" text="Comments"/>
<mx:TextArea x="90" y="90" width="300" /> <mx:Button x="330" y="150" label="Send"/> |
E序代码Q?/strong> |
<mx:TextInput y="60">
<mx:layoutConstraints> <mx:EdgeAnchor left="90" right="60"/> </mx:layoutConstraints> </mx:TextInput> |
E序代码Q?/strong> |
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml" xmlns="*"> <mx:Canvas width="100%" height="100%"> </mx:Canvas> </mx:Application> |
E序代码Q?/strong> |
<mx:Label text="Welcome to Flex!" mouseDownEffect="WipeRight" x="20"
y="20" /> |