這篇文章給大家分享的是有關(guān)基于Flex界面的組合SDK有什么用的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)建站是專業(yè)的修武網(wǎng)站建設(shè)公司，修武接單;提供網(wǎng)站制作、成都網(wǎng)站設(shè)計,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行修武網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

Flex是Sun今后的重點產(chǎn)品，用以對抗Adobe的Flash和微軟的Silverlight。這里將介紹基于Flex界面的組合SDK，可以說頁面還是比較簡潔的。

以下是界面類似我們正在開發(fā)的一個產(chǎn)品的主界面，前端展示采用Flex開發(fā)，后端系統(tǒng)是基于Java的SOA框架。界面左邊是導(dǎo)航條，右邊是內(nèi)容區(qū)（當(dāng)然還有其它欄目，在此忽略）。內(nèi)容區(qū)一般由多個UI Part組成，每一個Part利用異步機制從后端獲取數(shù)據(jù)，此外，它還將接收來自后端的通知消息。整個界面非常符合微軟CAB思想，不過Flex沒有CAB組建，但是可以采用Microsoft用戶控件方式定義一塊一塊內(nèi)容。界面內(nèi)容區(qū)的UI Part可能會被重用。

在設(shè)計中，我想利用界面組合思想來設(shè)計，采用該思想的優(yōu)點有：1）界面分割成不同的組成部分，每一部分實現(xiàn)一個功能，更加符合SRP原則；2）實現(xiàn)每一個UI Part時，只需專注復(fù)雜界面中的一塊內(nèi)容的實現(xiàn)，比較簡單；3）容易實現(xiàn)重用；其缺點有：1）每一個界面由多個UI Part組成，需要維護UI Part之間的聯(lián)系；2）新手不太容易看懂界面的實現(xiàn)。

鑒于微軟界面組合諸多優(yōu)點，我決定將其思想引入到Flex，自己實現(xiàn)一個Composition SDK based on Flex，該SDK實現(xiàn)過程中參考了CAB & SCSF和Prism。

考慮到該軟件需要實現(xiàn)的功能，這個SDK將支持如下功能：

1 UI Part生命周期管理。每一個UI Part在顯示的時候，需要從后端獲取數(shù)據(jù)，然后監(jiān)聽數(shù)據(jù)更新消息，當(dāng)點擊界面的“Tab 2”時，Tab 1被隱藏并停止監(jiān)聽消息，Tab 2被顯示。在我看來每一個UI Part具有Activated、Deactivated和Closed生命周期狀態(tài)，當(dāng)處于Activated狀態(tài)時，UI Part顯示呈現(xiàn)所需數(shù)據(jù)，當(dāng)處于Deactivated狀態(tài)時，UI Part被隱藏并停止更新數(shù)據(jù)，當(dāng)處于Closed狀態(tài)時，UI Part被關(guān)閉并停止更新數(shù)據(jù)，它將被銷毀。生命周期管理功能提出的目的是為了實現(xiàn)生命周期變更驅(qū)動數(shù)據(jù)更新，也就是每一個組件數(shù)據(jù)更新是由其自身的生命周期狀態(tài)決定的，不需要由父節(jié)點控制，從而實現(xiàn)更大粒度復(fù)用。

2 UI Part組合和動態(tài)注入。這個功能允許直接在視圖容器類中定義每一個UI Part，在這種方式中，一旦容器被顯示，則所有的UI Part將被顯示；或者是其中某些UI Part是在運行時被動態(tài)注入并呈現(xiàn)的，當(dāng)容器呈現(xiàn)時，根據(jù)需要注入特定的UI Part。

3 Master-Details UI Part支持。Master-Details UI Part是一對特殊的UI Part，當(dāng)Master UI Part的數(shù)據(jù)發(fā)生變更后，Details UI Part也需要更新，和.NET的Master-Details View是一樣的。

4 采用Hook機制實現(xiàn)，使得在實現(xiàn)1～3功能的時候，可以盡量與標(biāo)準(zhǔn)控件兼容，不必創(chuàng)建自定義控件或者僅需創(chuàng)建非常簡單的自定義控件。Hook機制原理如下：A）每一個功能由一個Hook實現(xiàn)；B）比如LifecycleHook，對于一個葉子節(jié)點的組件，當(dāng)其被顯示/隱藏/關(guān)閉時，該Hook要維護其狀態(tài)；對于一個容器節(jié)點，它除了要維護自己的狀態(tài)，還要維護子控件的狀態(tài)，比如VBox容器，當(dāng)VBox被顯示時，其狀態(tài)為Activated且其所有一級子節(jié)點狀態(tài)也是Activated；而對于TabNavigator容器，當(dāng)其被顯示時，其狀態(tài)為Activated且當(dāng)前選中的Tab的狀態(tài)也是Activated，其余Tab的狀態(tài)都是Deactivated；C）Hook的創(chuàng)建過程是遞歸的監(jiān)聽界面根節(jié)點onChildAdded/Removed事件；D）SDK提供Hook注冊表和Hook管理器，Hook注冊表定義了每一類型的組件對應(yīng)的Hook，而Hook管理器定義了每一個控件對應(yīng)的Hook實例。

5 基于該SDK，每一個視圖的設(shè)計由Workspace和UI Part組成，Workspace使用Flex標(biāo)準(zhǔn)容器控件定義了界面的布局；UI Part是界面每一部分功能的實現(xiàn)，自己封裝了生命周期驅(qū)動的數(shù)據(jù)更新。

代碼的設(shè)計比較簡單，其結(jié)構(gòu)如下：

ComponentTreeHook是整個Hook機制的核心類，它將遞歸監(jiān)聽根節(jié)點控件的onChildAdded/Removed，當(dāng)有子節(jié)點添加時，遞歸掛載整個控件樹，掛載過程代碼如下：

 /**    * Create the hooks for current component tree and listen the CHILD_ADD/CHILD_REMOVE     * events of each component.     *       * @param comp The root component of the component tree.     *      */            override public function hook(comp:UIComponent):void  {      if(!isHooked)      {           super.hook(comp);           hookComponentTree(component);       }   }      private function hookComponentTree(comp:UIComponent):void  {       doComponentTreeHooking(comp, true, hookComponentNode);   }      /**    * Do the hooking for a component tree.     * @param comp The root component.    * @param hookComponentFunc The actual hook function.    *     */           private function doComponentTreeHooking(comp : UIComponent, hooked : Boolean, hookComponentFunc : Function) : void  {       if(!comp)       {           return;       }              // Hook the node from top to bottom.       var queue : Array = [ comp ];       var tempComp : UIComponent = null;       var tempContainer : Container = null;       var tempContainerChildren : Array;       while(queue.length > 0)       {           // Get a component from queue.           tempComp = queue.shift() as UIComponent;           if(!tempComp)           {               continue;           }                      // Do the hook for this component.           hookComponentFunc(tempComp);                      // Get the children of current component and push them to queue.           tempContainer = tempComp as Container;           // SmartPart here is treast as a Component.           if(tempContainer && !(tempContainer is ISmartPart))           {               if(hooked)               {                   tempContainer.addEventListener(ChildExistenceChangedEvent.CHILD_ADD, onChildAdded, false, CompositionEventPriority.CREATE_HOOK);                   tempContainer.addEventListener(ChildExistenceChangedEvent.CHILD_REMOVE, onChildRemoved, false, CompositionEventPriority.DESTORY_HOOK);               }               else              {                   tempContainer.removeEventListener(ChildExistenceChangedEvent.CHILD_ADD, onChildAdded);                   tempContainer.removeEventListener(ChildExistenceChangedEvent.CHILD_REMOVE, onChildRemoved);               }               tempContainerChildren = tempContainer.getChildren();               for each(var child : UIComponent in tempContainerChildren)               {                   queue.push(child);               }           }       }   }

感謝各位的閱讀！關(guān)于“基于Flex界面的組合SDK有什么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！