Weitere ähnliche Inhalte Ähnlich wie Flex 使用經驗談 (20) Flex 使用經驗談8. Flex 是什麼 ?
• Flex = FL + EX
o FL : Flash
o EX : Extensible Markup Language (XML)
http://www.slideshare.net/tosakunmeeting/flex-101-10833118
• 動態的、資料驅動的應用程式
9. Flex 應用對象
• 對象平台
o Adobe Flash Player Runtime
o Adobe AIR Runtime
• 應用種類
o Web App
o Desktop App
o Mobile App
10. Flex 組成
• 開發工具 Flash Builder
• Flex SDK 開放原始碼
o 組件框架 Flex UI Framework – mx, spark
o 編譯器 Flex Compiler – mxmlc, compc
• 程式語言 AS3, MXML, CSS
• 開發流程
11. Flex MXML
• XML 可擴充式標記語言
• 宣告 UI 與排版方式
• 名稱由來
o Magic eXtensible Markup Language
o Macromedia eXtensible Markup Language
o Macromedia Studio MX、Flash MX、
MX Component
http://en.wikipedia.org/wiki/MXML
12. Flex Application MXML
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:Panel title="Panel" width="70%" height="70%"
verticalCenter="0" horizontalCenter="0">
<s:Button label="Button"
verticalCenter="0" horizontalCenter="0"/>
</s:Panel>
</s:Application>
17. Flex 語法的特色
• 資料綁定 Data Binding Expression
• 複合組件 MXML Composite Component
• 狀態語法 Enhanced States Syntax
• 宣告式向量圖 FXG, MXMLG Graphics
• 宣告式外觀 MXML Skinning
• 進階樣式 Advanced CSS
18. 資料綁定語法例子
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" fontSize="14">
<s:layout>
<s:HorizontalLayout
verticalAlign="middle" horizontalAlign="center" />
</s:layout>
<s:TextArea id="txt1" />
<s:TextArea id="txt2" text="@{txt1.text}" />
</s:Application>
19. 加強的狀態語法例子
<!-- 宣告三種狀態 --> <!-- 宣告一矩形,三種狀態下有不同顏色與位置 -->
<s:states> <s:Rect id="rect" width="100" height="100"
<s:State name="state01" /> top.state01="10"
<s:State name="state02" /> top.state02="150"
<s:State name="state03" /> top.state03="200"
</s:states> left.state01="100"
left.state02="250"
left.state03="20">
<s:fill>
<s:SolidColor id="fillColor"
color.state01="#FF0000"
color.state02="#00FF00"
color.state03="#0000FF" />
</s:fill>
</s:Rect>
20. 加強的狀態語法例子
<!-- 宣告一按鈕,在三種狀態下有不同點擊行為 -->
<s:Button verticalCenter="0" horizontalCenter="0"
label.state01="State 01"
label.state02="State 02"
label.state03="State 03"
click.state01="currentState = 'state02'"
click.state02="currentState = 'state03'"
click.state03="currentState = 'state01'" />
21. Flex 基礎類別 UIComponent
• Flash API 原本設計目標並非應用程式界面
• 覆寫大量 Flash 基礎類別的屬性方法
o width, height, scaleX, scaleY, x, y, z, rotation, rotationX, rotationY,
• 設定 width, height 不會直接造成內容被縮放
• 從 AS3 實作各種功能介面:
o ILayoutManagerClient, IRepeaterClient, IStateClient, IAdvancedStyleClient ,
IToolTipManagerClient, …
22. FlexFlash 工具差異
Flex Flash
• 佈景主題 • 向量畫圖能力
• 多國語言 • 時間軸、動畫能力
• 專案管理 • WYSIWYG Editor
• 獨立編譯器 • 媒體素材管理
• 程式碼除錯
23. FlashFlex 整合開發
Flex + Flash > 2X
Flex 主要輸出對象是 Flash Player Runtime
Flash 作得到的功能都能整合進 Flex
24. Flex 開發方式 I
Flex
png, jpg, ttf, svg, ... + as, mxml ─→ swf
[Embed]
所有的圖像、聲音素材與程式碼都由 Flex SDK 編譯
25. FlashFlex 整合開發方式 II
Flash Flex
fla + as ─→ swc + as, mxml ─→ swf
Flash 負責編譯圖像、聲音素材與少部分 as
Flex 負責最後整合編譯大部分 as
26. FlashFlex 整合開發方式 III
Flash Flex
fla ─→ swf + as, mxml ─→ swf
[Embed]
程式碼都由 Flex SDK 編譯
圖像、聲音素材都由 Flash IDE 輸出 SWF
28. AS3 Class & Flash Symbol
Flash Symbol 元件與 AS3 Class 是一種鍊結關係,並非繼承
e.g. Class02→Class01→MovieClip
Class01, Class02 可以自由決定鏈結的資源
29. AS3 Symbol 鏈結方式比較
• Flash IDE
o Symbol 為主,鏈結 (linkage) 一個外部 Class
o 同一個 Symbol 無法鏈結到多個 Class
• Flex SDK
o Class 為主,嵌入 (embed) 一個外部資源
o 同一個 Symbol 可以鏈結到多個 Class
30. FlashFlex 整合開發方式 III 優點
Flash Flex
fla --→ swf + as, mxml --→ swf
[Embed]
• 程式碼編譯快速
• 程式開發環境單純
• 能整合 Flash 所有功能
• 可重複嵌入素材資源到不同類別上
31. FlashFlex 整合開發技巧
• MovieClip as Spark Skin
http://ticore.blogspot.com/2011/10/movieclip-as-spark-skin.html
• Flash Stateful MovieClip
http://ticore.blogspot.com/2011/08/flash-stateful-movieclip.html
• Flex Compiler 編譯參數嵌入外部資源技巧
http://ticore.blogspot.com/2011/08/mxmlc-define-embed-source.html
• Flex 編譯器快取的問題與開發技巧
http://ticore.blogspot.com/2010/04/flex-compiler-cache-issue-and-trick.html
• Flex Embed SWF 與 Embed Symbol 的差異
http://ticore.blogspot.com/2007/12/flex-embed-swf-embed-symbol.html
• 用 Flash 開發 Flex Skin 才是王道
http://ticore.blogspot.com/2007/10/flash-flex-skin.html
36. Flex 組件挑選條件
• 是否為資料驅動的集合物件?
• 是否包含其他子物件?
• 子物件能不能被選擇?
• 子物件排版功能?
• 是否需要更換 Skin, Style?
• …
39. 組件功能需求
• 不同深度節點有不同的背景色
• 相同深度下的節點同時只能打開一個
• 可以使用鍵盤瀏覽每個節點
• 來源資料是樹狀的,節點數量不固定
40. 候選者 Tree VS Accordion
Tree Accordion
• 支援資料驅動 • 不支援資料驅動
• 每個節點都可任意開關 • 永遠都有一個子容器打開
• 支援用鍵盤瀏覽節點 • 鍵盤瀏覽不能跨子容器
• 能客製化 ItemRenderer • 本身只能做到第一層分頁
42. 適時改用低階 Flash 物件
• e.g. 10 * 10 = 100 簡單按鈕陣列
o 不需要測量尺寸與排版功能
o 子物件不需要取得焦點
o 不需要可樣式化
o 不需要動態更換 Skin
o 不需要多國語言
• → 改用 Flash 低階物件實作
→ 實作一個組件 取代 複合大量組件
45. 滑鼠可圈選 TileList 繼承樹
• UIComponent ~13,000 Lines
↑
• ScrollControlBase ~1,500 Lines
↑
• ListBase ~10,000 Lines
↑
• TileBase ~2,800 Lines
↑
• TileList ~100 Lines
↑
• MouseSelectableTileList ~1,000 Lines
46. Application Frameworks
用過的 沒用過的
• Cairngorm • Mate
• PureMVC • Swiz
• Spring ActionScript • Parsley
• RobotLegs
http://www.slideshare.net/RichardLord/application-frameworks-the-good-the-bad-the-ugly
http://www.slideshare.net/RichardLord/application-frameworks-the-new-kids-on-the-block
47. Reference
• Adobe's view of Flex and its commitments to Flex in the future
http://www.adobe.com/devnet/flex/whitepapers/roadmap.html
• Apache Flex Blog
http://blogs.apache.org/flex/
• Apache Flex Dev Summary
http://blog.teotigraphix.com/
• Falcon JS
http://blogs.adobe.com/bparadie/
• Adobe Flex Doc
http://www.adobe.com/devnet/flex/documentation.html
• Flex Open Source SDK, Doc
http://opensource.adobe.com/