2010-06-30 73 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机制)。这不是最优雅的设计,但它比我想象中的任何其他东西都好。所谓的设计问题是视图与呈现者的复杂性之间的耦合,它必须处理多个视图并且具有与视图之间的交互相关的方法(而不是代表特定操作的方法视图)。事情是,在商业方面,这两种观点是耦合的(因为一个中的信息影响另一个中的导航树),因此呈现者在它们之间耦合。这个耦合也是通过提交者的接口完成的,所以每个视图都不会真正“知道”另一个视图。

我希望它可以帮助别人。

谢谢, 丹尼尔