Flex 使用經驗談史偉龍Ticore Shihshih.weilung@gmail.comhttp://ticore.blogspot.com/
Flex 介紹FlashFlex 之間的比較  分享整合開發經驗
第一次看到 Flash UI 組件...
Flash UI 組件的缺點•   缺乏排版能力,容易變形•   功能易被破壞•   效能不好•   不易客製化
正常的 Flash 組件
變形的 Flash 組件
Flex 提供更好的 UI 組件2004   2005-2011   2012
Flex 是什麼 ?• Flex = FL + EX  o FL : Flash  o EX : Extensible Markup Language (XML)  http://www.slideshare.net/tosakunmeetin...
Flex 應用對象• 對象平台 o Adobe Flash Player Runtime o Adobe AIR Runtime• 應用種類 o Web App o Desktop App o Mobile App
Flex 組成• 開發工具       Flash Builder• Flex SDK   開放原始碼  o 組件框架     Flex UI Framework – mx, spark  o 編譯器      Flex Compiler – ...
Flex MXML• XML 可擴充式標記語言• 宣告 UI 與排版方式• 名稱由來 o Magic eXtensible Markup Language o Macromedia eXtensible Markup Language o Ma...
Flex Application MXML<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"     xml...
Flex 3 案例 - Photo VA
Flex 2 案例 – Triumph
Flex 2 案例 – Triumph
Flex 2 案例 – Triumph
Flex 語法的特色•   資料綁定     Data Binding Expression•   複合組件     MXML Composite Component•   狀態語法     Enhanced States Syntax•   ...
資料綁定語法例子<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"       xmlns:s="libra...
加強的狀態語法例子<!-- 宣告三種狀態 -->                <!-- 宣告一矩形,三種狀態下有不同顏色與位置 --><s:states>                     <s:Rect id="rect" width...
加強的狀態語法例子<!-- 宣告一按鈕,在三種狀態下有不同點擊行為 --><s:Button verticalCenter="0" horizontalCenter="0"    label.state01="State 01"    labe...
Flex 基礎類別 UIComponent• Flash API 原本設計目標並非應用程式界面• 覆寫大量 Flash 基礎類別的屬性方法  o width, height, scaleX, scaleY, x, y, z, rotation,...
FlexFlash 工具差異       Flex           Flash•   佈景主題      •   向量畫圖能力•   多國語言      •   時間軸、動畫能力•   專案管理      •   WYSIWYG Edito...
FlashFlex 整合開發           Flex + Flash > 2XFlex 主要輸出對象是 Flash Player Runtime    Flash 作得到的功能都能整合進 Flex
Flex 開發方式 I                                   Flexpng, jpg, ttf, svg, ... + as, mxml ─→ swf                 [Embed] 所有的圖像、...
FlashFlex 整合開發方式 II         Flash             Flexfla + as ─→ swc + as, mxml ─→ swf    Flash 負責編譯圖像、聲音素材與少部分 as         Fl...
FlashFlex 整合開發方式 III      Flash             Flex  fla ─→ swf + as, mxml ─→ swf              [Embed]       程式碼都由 Flex SDK 編...
SWF 中間檔案的好處   單一素材資源檔案格式  程式碼編譯速度大幅提升 素材資源 與 程式碼 徹底分離
AS3 Class & Flash SymbolFlash Symbol 元件與 AS3 Class 是一種鍊結關係,並非繼承        e.g. Class02→Class01→MovieClip     Class01, Class02...
AS3 Symbol 鏈結方式比較• Flash IDE  o Symbol 為主,鏈結 (linkage) 一個外部 Class  o 同一個 Symbol 無法鏈結到多個 Class• Flex SDK  o Class 為主,嵌入 (em...
FlashFlex 整合開發方式 III 優點       Flash               Flex    fla --→ swf + as, mxml --→ swf             [Embed]•   程式碼編譯快速•  ...
FlashFlex 整合開發技巧•   MovieClip as Spark Skin         http://ticore.blogspot.com/2011/10/movieclip-as-spark-skin.html•   Fla...
Flex App 開發經驗
Flex 不是易開罐組件庫• 每個人需求不同,Flex 內建組件有限• Flex 提供了極具彈性的組件模型 o   先從既有組件挑選使用 o   嘗試自訂樣式、外觀 o   以 MXML 組合組件 o   以 AS3 繼承組件 o   找別人寫...
非不得已,不要直接修改  Flex 內建類別   必須自行維護相關組件  不能有效使用 RSL SWF, SWZ
如何挑選適合的組件  或是組件原型 最好將每個內建組件都玩過一下
Flex 組件挑選條件•   是否為資料驅動的集合物件?•   是否包含其他子物件?•   子物件能不能被選擇?•   子物件排版功能?•   是否需要更換 Skin, Style?•   …
http://flex.org/tour/
Flex 組件挑選實例http://ticore.blogspot.com/2008/04/flex-tab-tree.html
組件功能需求•   不同深度節點有不同的背景色•   相同深度下的節點同時只能打開一個•   可以使用鍵盤瀏覽每個節點•   來源資料是樹狀的,節點數量不固定
候選者 Tree VS Accordion        Tree              Accordion• 支援資料驅動              • 不支援資料驅動• 每個節點都可任意開關          • 永遠都有一個子容器打開...
不要過度使用 Flex 組件組件的開銷不低,每個都是繼承 UIComponent   (Flex 4.x UIComponent 一萬多行)
適時改用低階 Flash 物件• e.g. 10 * 10 = 100 簡單按鈕陣列  o   不需要測量尺寸與排版功能  o   子物件不需要取得焦點  o   不需要可樣式化  o   不需要動態更換 Skin  o   不需要多國語言• ...
進階 Flex 組件客製化
滑鼠可圈選的 TileListhttp://ticore.blogspot.com/2008/04/flex-3-mouse-selectable-tilelist-v3.html
滑鼠可圈選 TileList 繼承樹• UIComponent               ~13,000 Lines      ↑• ScrollControlBase         ~1,500 Lines      ↑• ListBas...
Application Frameworks用過的                                           沒用過的• Cairngorm                                   • Ma...
Reference•   Adobes view of Flex and its commitments to Flex in the future        http://www.adobe.com/devnet/flex/whitepa...
Upcoming SlideShare
Loading in …5
×

Flex 使用經驗談

4,901 views

Published on

介紹 Flex 與 Flash 比較
分享整合開發經驗

Published in: Self Improvement, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,901
On SlideShare
0
From Embeds
0
Number of Embeds
2,278
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Flex 使用經驗談

  1. 1. Flex 使用經驗談史偉龍Ticore Shihshih.weilung@gmail.comhttp://ticore.blogspot.com/
  2. 2. Flex 介紹FlashFlex 之間的比較 分享整合開發經驗
  3. 3. 第一次看到 Flash UI 組件...
  4. 4. Flash UI 組件的缺點• 缺乏排版能力,容易變形• 功能易被破壞• 效能不好• 不易客製化
  5. 5. 正常的 Flash 組件
  6. 6. 變形的 Flash 組件
  7. 7. Flex 提供更好的 UI 組件2004 2005-2011 2012
  8. 8. Flex 是什麼 ?• Flex = FL + EX o FL : Flash o EX : Extensible Markup Language (XML) http://www.slideshare.net/tosakunmeeting/flex-101-10833118• 動態的、資料驅動的應用程式
  9. 9. Flex 應用對象• 對象平台 o Adobe Flash Player Runtime o Adobe AIR Runtime• 應用種類 o Web App o Desktop App o Mobile App
  10. 10. Flex 組成• 開發工具 Flash Builder• Flex SDK 開放原始碼 o 組件框架 Flex UI Framework – mx, spark o 編譯器 Flex Compiler – mxmlc, compc• 程式語言 AS3, MXML, CSS• 開發流程
  11. 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. 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>
  13. 13. Flex 3 案例 - Photo VA
  14. 14. Flex 2 案例 – Triumph
  15. 15. Flex 2 案例 – Triumph
  16. 16. Flex 2 案例 – Triumph
  17. 17. Flex 語法的特色• 資料綁定 Data Binding Expression• 複合組件 MXML Composite Component• 狀態語法 Enhanced States Syntax• 宣告式向量圖 FXG, MXMLG Graphics• 宣告式外觀 MXML Skinning• 進階樣式 Advanced CSS
  18. 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. 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. 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. 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. 22. FlexFlash 工具差異 Flex Flash• 佈景主題 • 向量畫圖能力• 多國語言 • 時間軸、動畫能力• 專案管理 • WYSIWYG Editor• 獨立編譯器 • 媒體素材管理• 程式碼除錯
  23. 23. FlashFlex 整合開發 Flex + Flash > 2XFlex 主要輸出對象是 Flash Player Runtime Flash 作得到的功能都能整合進 Flex
  24. 24. Flex 開發方式 I Flexpng, jpg, ttf, svg, ... + as, mxml ─→ swf [Embed] 所有的圖像、聲音素材與程式碼都由 Flex SDK 編譯
  25. 25. FlashFlex 整合開發方式 II Flash Flexfla + as ─→ swc + as, mxml ─→ swf Flash 負責編譯圖像、聲音素材與少部分 as Flex 負責最後整合編譯大部分 as
  26. 26. FlashFlex 整合開發方式 III Flash Flex fla ─→ swf + as, mxml ─→ swf [Embed] 程式碼都由 Flex SDK 編譯 圖像、聲音素材都由 Flash IDE 輸出 SWF
  27. 27. SWF 中間檔案的好處 單一素材資源檔案格式 程式碼編譯速度大幅提升 素材資源 與 程式碼 徹底分離
  28. 28. AS3 Class & Flash SymbolFlash Symbol 元件與 AS3 Class 是一種鍊結關係,並非繼承 e.g. Class02→Class01→MovieClip Class01, Class02 可以自由決定鏈結的資源
  29. 29. AS3 Symbol 鏈結方式比較• Flash IDE o Symbol 為主,鏈結 (linkage) 一個外部 Class o 同一個 Symbol 無法鏈結到多個 Class• Flex SDK o Class 為主,嵌入 (embed) 一個外部資源 o 同一個 Symbol 可以鏈結到多個 Class
  30. 30. FlashFlex 整合開發方式 III 優點 Flash Flex fla --→ swf + as, mxml --→ swf [Embed]• 程式碼編譯快速• 程式開發環境單純• 能整合 Flash 所有功能• 可重複嵌入素材資源到不同類別上
  31. 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
  32. 32. Flex App 開發經驗
  33. 33. Flex 不是易開罐組件庫• 每個人需求不同,Flex 內建組件有限• Flex 提供了極具彈性的組件模型 o 先從既有組件挑選使用 o 嘗試自訂樣式、外觀 o 以 MXML 組合組件 o 以 AS3 繼承組件 o 找別人寫好的 o 最後才是從頭創造自己的組件
  34. 34. 非不得已,不要直接修改 Flex 內建類別 必須自行維護相關組件 不能有效使用 RSL SWF, SWZ
  35. 35. 如何挑選適合的組件 或是組件原型 最好將每個內建組件都玩過一下
  36. 36. Flex 組件挑選條件• 是否為資料驅動的集合物件?• 是否包含其他子物件?• 子物件能不能被選擇?• 子物件排版功能?• 是否需要更換 Skin, Style?• …
  37. 37. http://flex.org/tour/
  38. 38. Flex 組件挑選實例http://ticore.blogspot.com/2008/04/flex-tab-tree.html
  39. 39. 組件功能需求• 不同深度節點有不同的背景色• 相同深度下的節點同時只能打開一個• 可以使用鍵盤瀏覽每個節點• 來源資料是樹狀的,節點數量不固定
  40. 40. 候選者 Tree VS Accordion Tree Accordion• 支援資料驅動 • 不支援資料驅動• 每個節點都可任意開關 • 永遠都有一個子容器打開• 支援用鍵盤瀏覽節點 • 鍵盤瀏覽不能跨子容器• 能客製化 ItemRenderer • 本身只能做到第一層分頁
  41. 41. 不要過度使用 Flex 組件組件的開銷不低,每個都是繼承 UIComponent (Flex 4.x UIComponent 一萬多行)
  42. 42. 適時改用低階 Flash 物件• e.g. 10 * 10 = 100 簡單按鈕陣列 o 不需要測量尺寸與排版功能 o 子物件不需要取得焦點 o 不需要可樣式化 o 不需要動態更換 Skin o 不需要多國語言• → 改用 Flash 低階物件實作 → 實作一個組件 取代 複合大量組件
  43. 43. 進階 Flex 組件客製化
  44. 44. 滑鼠可圈選的 TileListhttp://ticore.blogspot.com/2008/04/flex-3-mouse-selectable-tilelist-v3.html
  45. 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. 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. 47. Reference• Adobes 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/

×