SlideShare a Scribd company logo
1 of 47
Flex 使用經驗談
史偉龍
Ticore Shih
shih.weilung@gmail.com
http://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/tosakunmeeting/flex-101-10833118



• 動態的、資料驅動的應用程式
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 – mxmlc, compc

• 程式語言       AS3, MXML, CSS
• 開發流程
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
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>
Flex 3 案例 - Photo VA
Flex 2 案例 – Triumph
Flex 2 案例 – Triumph
Flex 2 案例 – Triumph
Flex 語法的特色
•   資料綁定     Data Binding Expression
•   複合組件     MXML Composite Component
•   狀態語法     Enhanced States Syntax
•   宣告式向量圖   FXG, MXMLG Graphics
•   宣告式外觀    MXML Skinning
•   進階樣式     Advanced CSS
資料綁定語法例子
<?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>
加強的狀態語法例子
<!-- 宣告三種狀態 -->                <!-- 宣告一矩形,三種狀態下有不同顏色與位置 -->
<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>
加強的狀態語法例子
<!-- 宣告一按鈕,在三種狀態下有不同點擊行為 -->
<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'" />
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, …
FlexFlash 工具差異
       Flex           Flash
•   佈景主題      •   向量畫圖能力
•   多國語言      •   時間軸、動畫能力
•   專案管理      •   WYSIWYG Editor
•   獨立編譯器     •   媒體素材管理
•   程式碼除錯
FlashFlex 整合開發
           Flex + Flash > 2X
Flex 主要輸出對象是 Flash Player Runtime
    Flash 作得到的功能都能整合進 Flex
Flex 開發方式 I


                                   Flex
png, jpg, ttf, svg, ... + as, mxml ─→ swf
                 [Embed]


 所有的圖像、聲音素材與程式碼都由 Flex SDK 編譯
FlashFlex 整合開發方式 II


         Flash             Flex
fla + as ─→ swc + as, mxml ─→ swf


    Flash 負責編譯圖像、聲音素材與少部分 as
         Flex 負責最後整合編譯大部分 as
FlashFlex 整合開發方式 III


      Flash             Flex
  fla ─→ swf + as, mxml ─→ swf
              [Embed]


       程式碼都由 Flex SDK 編譯
    圖像、聲音素材都由 Flash IDE 輸出 SWF
SWF 中間檔案的好處
   單一素材資源檔案格式
  程式碼編譯速度大幅提升
 素材資源 與 程式碼 徹底分離
AS3 Class & Flash Symbol
Flash 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 為主,嵌入 (embed) 一個外部資源
  o 同一個 Symbol 可以鏈結到多個 Class
FlashFlex 整合開發方式 III 優點

       Flash               Flex
    fla --→ swf + as, mxml --→ swf
             [Embed]


•   程式碼編譯快速
•   程式開發環境單純
•   能整合 Flash 所有功能
•   可重複嵌入素材資源到不同類別上
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
Flex App 開發經驗
Flex 不是易開罐組件庫
• 每個人需求不同,Flex 內建組件有限

• Flex 提供了極具彈性的組件模型
 o   先從既有組件挑選使用
 o   嘗試自訂樣式、外觀
 o   以 MXML 組合組件
 o   以 AS3 繼承組件
 o   找別人寫好的
 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

• 支援資料驅動              • 不支援資料驅動

• 每個節點都可任意開關          • 永遠都有一個子容器打開

• 支援用鍵盤瀏覽節點           • 鍵盤瀏覽不能跨子容器

• 能客製化 ItemRenderer   • 本身只能做到第一層分頁
不要過度使用 Flex 組件
組件的開銷不低,每個都是繼承 UIComponent
   (Flex 4.x UIComponent 一萬多行)
適時改用低階 Flash 物件
• e.g. 10 * 10 = 100 簡單按鈕陣列
  o   不需要測量尺寸與排版功能
  o   子物件不需要取得焦點
  o   不需要可樣式化
  o   不需要動態更換 Skin
  o   不需要多國語言


• → 改用 Flash 低階物件實作
  → 實作一個組件 取代 複合大量組件
進階 Flex 組件客製化
滑鼠可圈選的 TileList




http://ticore.blogspot.com/2008/04/flex-3-mouse-selectable-tilelist-v3.html
滑鼠可圈選 TileList 繼承樹
• UIComponent               ~13,000 Lines
      ↑
• ScrollControlBase         ~1,500 Lines
      ↑
• ListBase                  ~10,000 Lines
      ↑
• TileBase                  ~2,800 Lines
      ↑
• TileList                  ~100 Lines
      ↑
• MouseSelectableTileList   ~1,000 Lines
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
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/

More Related Content

Similar to Flex 使用經驗談

01 Flex Introduction
01 Flex Introduction01 Flex Introduction
01 Flex Introductionguestd960b1
 
01 Flex Introduction
01 Flex Introduction01 Flex Introduction
01 Flex IntroductionScissor Lee
 
移动Web开发框架jqm探讨
移动Web开发框架jqm探讨移动Web开发框架jqm探讨
移动Web开发框架jqm探讨newker
 
Flex 3 Cookbook 中文版V1
Flex 3 Cookbook 中文版V1Flex 3 Cookbook 中文版V1
Flex 3 Cookbook 中文版V1yiditushe
 
2011 JavaTwo JSF 2.0
2011 JavaTwo JSF 2.02011 JavaTwo JSF 2.0
2011 JavaTwo JSF 2.0Anthony Chen
 
Web前端标准在各浏览器中的实现差异
Web前端标准在各浏览器中的实现差异Web前端标准在各浏览器中的实现差异
Web前端标准在各浏览器中的实现差异cleverpig
 
Flex 入门培训
Flex 入门培训Flex 入门培训
Flex 入门培训7rice
 
Build desktop app_by_xulrunner
Build desktop app_by_xulrunnerBuild desktop app_by_xulrunner
Build desktop app_by_xulrunnerRack Lin
 
Axure RP Prototyping Tool
Axure RP Prototyping ToolAxure RP Prototyping Tool
Axure RP Prototyping ToolSouyi Yang
 
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development FundamentalsExam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development FundamentalsChieh Lin
 
基于Symfony框架下的快速企业级应用开发
基于Symfony框架下的快速企业级应用开发基于Symfony框架下的快速企业级应用开发
基于Symfony框架下的快速企业级应用开发mysqlops
 
Silverlight 2.0 完全新手學堂,基礎入門 10 大招
Silverlight 2.0 完全新手學堂,基礎入門 10 大招Silverlight 2.0 完全新手學堂,基礎入門 10 大招
Silverlight 2.0 完全新手學堂,基礎入門 10 大招Chui-Wen Chiu
 
Workflow Overview
Workflow OverviewWorkflow Overview
Workflow OverviewKevin Cao
 
[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am iTwinsen Liang
 
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型Jackson Tian
 
非常靠谱 Html 5
非常靠谱 Html 5 非常靠谱 Html 5
非常靠谱 Html 5 Tony Deng
 
美团前端架构简介
美团前端架构简介美团前端架构简介
美团前端架构简介pan weizeng
 

Similar to Flex 使用經驗談 (20)

Flex 4 Skinning
Flex 4 SkinningFlex 4 Skinning
Flex 4 Skinning
 
01 Flex Introduction
01 Flex Introduction01 Flex Introduction
01 Flex Introduction
 
01 Flex Introduction
01 Flex Introduction01 Flex Introduction
01 Flex Introduction
 
移动Web开发框架jqm探讨
移动Web开发框架jqm探讨移动Web开发框架jqm探讨
移动Web开发框架jqm探讨
 
Flex 3 Cookbook 中文版V1
Flex 3 Cookbook 中文版V1Flex 3 Cookbook 中文版V1
Flex 3 Cookbook 中文版V1
 
2011 JavaTwo JSF 2.0
2011 JavaTwo JSF 2.02011 JavaTwo JSF 2.0
2011 JavaTwo JSF 2.0
 
Web前端标准在各浏览器中的实现差异
Web前端标准在各浏览器中的实现差异Web前端标准在各浏览器中的实现差异
Web前端标准在各浏览器中的实现差异
 
Flex 入门培训
Flex 入门培训Flex 入门培训
Flex 入门培训
 
Html5
Html5Html5
Html5
 
Build desktop app_by_xulrunner
Build desktop app_by_xulrunnerBuild desktop app_by_xulrunner
Build desktop app_by_xulrunner
 
Axure RP Prototyping Tool
Axure RP Prototyping ToolAxure RP Prototyping Tool
Axure RP Prototyping Tool
 
JSFL share
JSFL shareJSFL share
JSFL share
 
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development FundamentalsExam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
 
基于Symfony框架下的快速企业级应用开发
基于Symfony框架下的快速企业级应用开发基于Symfony框架下的快速企业级应用开发
基于Symfony框架下的快速企业级应用开发
 
Silverlight 2.0 完全新手學堂,基礎入門 10 大招
Silverlight 2.0 完全新手學堂,基礎入門 10 大招Silverlight 2.0 完全新手學堂,基礎入門 10 大招
Silverlight 2.0 完全新手學堂,基礎入門 10 大招
 
Workflow Overview
Workflow OverviewWorkflow Overview
Workflow Overview
 
[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am i
 
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
 
非常靠谱 Html 5
非常靠谱 Html 5 非常靠谱 Html 5
非常靠谱 Html 5
 
美团前端架构简介
美团前端架构简介美团前端架构简介
美团前端架构简介
 

Flex 使用經驗談

  • 2. Flex 介紹 FlashFlex 之間的比較 分享整合開發經驗
  • 4. Flash UI 組件的缺點 • 缺乏排版能力,容易變形 • 功能易被破壞 • 效能不好 • 不易客製化
  • 7. Flex 提供更好的 UI 組件 2004 2005-2011 2012
  • 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>
  • 13. Flex 3 案例 - Photo VA
  • 14. Flex 2 案例 – Triumph
  • 15. Flex 2 案例 – Triumph
  • 16. Flex 2 案例 – Triumph
  • 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
  • 27. 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
  • 33. Flex 不是易開罐組件庫 • 每個人需求不同,Flex 內建組件有限 • Flex 提供了極具彈性的組件模型 o 先從既有組件挑選使用 o 嘗試自訂樣式、外觀 o 以 MXML 組合組件 o 以 AS3 繼承組件 o 找別人寫好的 o 最後才是從頭創造自己的組件
  • 34. 非不得已,不要直接修改 Flex 內建類別 必須自行維護相關組件 不能有效使用 RSL SWF, SWZ
  • 35. 如何挑選適合的組件 或是組件原型 最好將每個內建組件都玩過一下
  • 36. Flex 組件挑選條件 • 是否為資料驅動的集合物件? • 是否包含其他子物件? • 子物件能不能被選擇? • 子物件排版功能? • 是否需要更換 Skin, Style? • …
  • 39. 組件功能需求 • 不同深度節點有不同的背景色 • 相同深度下的節點同時只能打開一個 • 可以使用鍵盤瀏覽每個節點 • 來源資料是樹狀的,節點數量不固定
  • 40. 候選者 Tree VS Accordion Tree Accordion • 支援資料驅動 • 不支援資料驅動 • 每個節點都可任意開關 • 永遠都有一個子容器打開 • 支援用鍵盤瀏覽節點 • 鍵盤瀏覽不能跨子容器 • 能客製化 ItemRenderer • 本身只能做到第一層分頁
  • 41. 不要過度使用 Flex 組件 組件的開銷不低,每個都是繼承 UIComponent (Flex 4.x UIComponent 一萬多行)
  • 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/