建站
咨詢
售后
建站咨詢
新聞中心
Flex是Sun今后的重點產(chǎn)品，用以對抗Adobe的Flash和微軟的Silverlight。這里將介紹基于Flex界面的組合SDK，可以說頁面還是比較簡潔的。
創(chuàng)新互聯(lián)公司專注于中大型企業(yè)的成都網(wǎng)站制作、網(wǎng)站設(shè)計和網(wǎng)站改版、網(wǎng)站營銷服務(wù)，追求商業(yè)策劃與數(shù)據(jù)分析、創(chuàng)意藝術(shù)與技術(shù)開發(fā)的融合，累計客戶近千家，服務(wù)滿意度達97%。幫助廣大客戶順利對接上互聯(lián)網(wǎng)浪潮，準確優(yōu)選出符合自己需要的互聯(lián)網(wǎng)運用，我們將一直專注品牌網(wǎng)站制作和互聯(lián)網(wǎng)程序開發(fā)，在前進的路上，與客戶一起成長！
以下是界面類似我們正在開發(fā)的一個產(chǎn)品的主界面，前端展示采用Flex開發(fā)，后端系統(tǒng)是基于Java的SOA框架。界面左邊是導(dǎo)航條，右邊是內(nèi)容區(qū)（當然還有其它欄目，在此忽略）。內(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ù)更新消息，當點擊界面的“Tab 2”時，Tab 1被隱藏并停止監(jiān)聽消息，Tab 2被顯示。在我看來每一個UI Part具有Activated、Deactivated和Closed生命周期狀態(tài)，當處于Activated狀態(tài)時，UI Part顯示呈現(xiàn)所需數(shù)據(jù)，當處于Deactivated狀態(tài)時，UI Part被隱藏并停止更新數(shù)據(jù)，當處于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)的，當容器呈現(xiàn)時，根據(jù)需要注入特定的UI Part。
3 Master-Details UI Part支持。Master-Details UI Part是一對特殊的UI Part，當Master UI Part的數(shù)據(jù)發(fā)生變更后，Details UI Part也需要更新，和.NET的Master-Details View是一樣的。
4 采用Hook機制實現(xiàn)，使得在實現(xiàn)1～3功能的時候，可以盡量與標準控件兼容，不必創(chuàng)建自定義控件或者僅需創(chuàng)建非常簡單的自定義控件。Hook機制原理如下：A）每一個功能由一個Hook實現(xiàn)；B）比如LifecycleHook，對于一個葉子節(jié)點的組件，當其被顯示/隱藏/關(guān)閉時，該Hook要維護其狀態(tài)；對于一個容器節(jié)點，它除了要維護自己的狀態(tài)，還要維護子控件的狀態(tài)，比如VBox容器，當VBox被顯示時，其狀態(tài)為Activated且其所有一級子節(jié)點狀態(tài)也是Activated；而對于TabNavigator容器，當其被顯示時，其狀態(tài)為Activated且當前選中的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標準容器控件定義了界面的布局；UI Part是界面每一部分功能的實現(xiàn)，自己封裝了生命周期驅(qū)動的數(shù)據(jù)更新。
代碼的設(shè)計比較簡單，其結(jié)構(gòu)如下：
ComponentTreeHook是整個Hook機制的核心類，它將遞歸監(jiān)聽根節(jié)點控件的onChildAdded/Removed，當有子節(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);
- }
- }
- }
- }
新聞名稱：淺析基于Flex界面的組合SDK
URL鏈接：http://m.5511xx.com/article/djpcces.html
