2010-06-30 40 views
0

簡要說明:我正在使用Flex 3.5。Flex取消樹上的更改事件

我有一個樹組件用作不同「頁面」之間的導航菜單。 當用戶點擊菜單中的某個選項時,我通過在應用程序中的狀態組件之間切換來切換「頁面」。 問題是,當用戶確實點擊菜單中的一個選項時,我想對某個組件中的某些信息進行驗證。如果驗證失敗,我會顯示一個提醒,並且我想阻止導航到其他頁面。其中一部分不會改變文檔的當前狀態,但樹組件仍然繼續進行更改事件,結果是頁面A仍然顯示在屏幕上,而樹中選定的選項是頁面B(用戶想要瀏覽的內容,但由於某些信息無效而失敗)。

我試圖找出如何取消樹組件本身的更改事件。 我的想法不太適合:

我搜索了一個稍微不同的事件(比如'changing'或'startChange'),我可以在其上調用stopPropagation()方法(自定期'更改'event不可取消),但Tree組件不存在。

我也考慮過一直保存當前在Tree組件中被選中的選項,當驗證失敗時,我會將樹的selectedItem設置爲保存的選項。這也是醜陋的,因爲這樣的行爲會在樹上引發另一個變化事件,因此對國家組件的另一個改變以及我已經在其中的頁面的另一個變化。這是我真的不想做的事情。

我也在使用不同的組件,例如Menu(我也發現了一個垂直菜單的實現),但這似乎沒有幫助。那裏會存在同樣的問題。

有沒有適當的方法來做到這一點? 必須有一個最佳做法,以防止更改過程提交!

回答

0
<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*"> 

    <mx:Script> 
    <![CDATA[ 
     import mx.controls.Alert; 
     import mx.events.ListEvent; 

     private function tree_changeHandler(event:ListEvent):void 
     { 
      trace("Change, selectedItem.label is: " + tree.selectedItem.label); 
     } 

     protected function tree_itemClickHandler(event:ListEvent):void 
     { 
      var data:Object = event.itemRenderer.data; 
      if (!tree.isItemSelectable(data)) 
       Alert.show("Item \"" + data.label + "\" is not selectable"); 
     } 

    ]]> 
    </mx:Script> 

    <local:MyTree id="tree" change="tree_changeHandler(event)" itemClick="tree_itemClickHandler(event)"> 
     <local:dataProvider> 
      <mx:ArrayCollection> 
       <mx:Object label="Label 1"/> 
       <mx:Object label="Label 2"/> 
       <mx:Object label="Label 3 (non-selectable)"/> 
       <mx:Object label="Label 4"/> 
      </mx:ArrayCollection> 
     </local:dataProvider> 
    </local:MyTree> 

</mx:Application> 

來源爲MyTree.as:

package 
{ 
import mx.controls.Tree; 

public class MyTree extends Tree 
{ 

    override public function isItemSelectable(data:Object):Boolean 
    { 
     if (!super.isItemSelectable(data)) 
      return false; 

     var label:String = data.label; 
     if (label.indexOf("non-selectable") >= 0) 
      return false; 

     return true; 
    } 

} 
} 
0

最後我發現把它確定每個項目的可選擇性代碼的地方:當應驗證信息發生變化時,我執行驗證,並根據其結果,我將屬性設置爲樹組件中的所有項目,以指示它們是否可以導航到。如果驗證成功,則該屬性設置爲允許導航,如果不成功,則設置爲不允許導航。

與Maxim一樣,我擴展了Tree組件,並且重寫了isItemSelectable()方法來檢查指定項目的這個屬性,這樣可以防止更改過程。

保存待驗證信息的視圖與保存Tree組件的視圖(它們不一定是相同的視圖)之間的訪問是通過一個包含兩個視圖的呈現器類來完成的(我使用MVP機制)。這不是最優雅的設計,但它比我想象中的任何其他東西都好。所謂的設計問題是視圖與呈現者的複雜性之間的耦合,它必須處理多個視圖並且具有與視圖之間的交互相關的方法(而不是代表特定操作的方法視圖)。事情是,在商業方面,這兩種觀點是耦合的(因爲一箇中的信息影響另一箇中的導航樹),因此呈現者在它們之間耦合。這個耦合也是通過提交者的接口完成的,所以每個視圖都不會真正「知道」另一個視圖。

我希望它可以幫助別人。

謝謝, 丹尼爾