Flex annule un événement de modification sur un arbre

Question

Informations succinctes: J'utilise Flex 3.5.

J'ai un composant Tree qui est utilisé comme un menu de navigation entre différentes 'pages'. Lorsque l'utilisateur clique sur une certaine option dans le menu, je permute la «page» en basculant entre les composants d'état dans mon application. Le fait est que lorsque l'utilisateur clique bien sur une option dans le menu, je veux effectuer une validation de certaines informations dans un certain composant. Si la validation échoue, je montre une alerte, et je voudrais empêcher la navigation vers l'autre page. Une partie de ceci ne change tout simplement pas l'état actuel du document, mais le composant arbre continue avec l'événement change, et le résultat est la page A toujours affichée à l'écran, alors que l'option sélectionnée dans l'arbre est la page B (auquel l'utilisateur voulait naviguer, mais a échoué car certaines informations n'étaient pas valides).

J'ai essayé de comprendre comment je peux annuler l'événement de changement sur le composant d'arbre lui-même. Les pensées que j'avais ne correspondaient pas très bien:

J'ai cherché un événement légèrement différent (comme 'changing' ou 'startChange') sur lequel je peux appeler la méthode stopPropagation() (depuis le 'changement' régulier 'event n'est pas annulable), mais aucun n'existe pour le composant Tree. J'ai également pensé à toujours enregistrer l'option actuelle qui est sélectionnée dans le composant Tree par moi-même, et lorsque la validation échoue, je vais définir l'élément selectedItem de l'arbre à cette option sauvegardée. C'est aussi moche parce qu'une telle action soulèvera un autre événement de changement sur l'arbre, donc un autre changement aux composants d'états, et une autre population de la page dans laquelle je suis déjà. C'est quelque chose que je ne veux vraiment pas faire. Je pense aussi à l'utilisation d'un composant différent, tel que Menu (et j'ai également trouvé une implémentation d'un menu vertical), mais cela ne semble même pas aider. Le même problème existera là.

Existe-t-il un moyen approprié de le faire? Il doit y avoir une meilleure pratique pour empêcher un processus de modification de s'engager!

Answer 1

<?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> 

Source pour 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; 
    } 

} 
} 

Answer 2

Finalement, j'ai trouvé l'endroit pour mettre le code qui détermine le selectability de chaque élément: lorsque les informations qui doivent être validées est modifiée, j'effectue la validation, et en fonction de son résultat, j'ai défini une propriété pour tous les éléments du composant Arborescence, indiquant s'ils peuvent être navigués ou non. Si la validation a abouti, la propriété est définie pour autoriser la navigation, et si elle échoue, elle est configurée pour ne pas autoriser la navigation.

Comme Maxim, j'élève le composant Tree et remplace la méthode isItemSelectable() pour vérifier cette propriété de l'élément spécifié, empêchant ainsi le processus de modification.

L'accès entre la vue qui contient les informations à valider et la vue qui contient le composant Arborescence (elles ne sont pas nécessairement la même vue) se fait via une classe de présenteurs qui contient les deux vues (j'utilise le Mécanisme MVP). Ce n'est pas le design le plus élégant, mais c'est beaucoup mieux que tout ce que j'aurais pu imaginer. Le prétendu problème avec la conception est le couplage entre les vues et la complexité du présentateur, qui doit traiter plus d'une vue et avoir des méthodes qui sont liées à l'interaction entre les vues (au lieu de méthodes qui représentent des actions d'un vue). La chose est que, d'un point de vue commercial, les deux vues sont couplées (puisque l'information dans l'un affecte l'arbre de navigation dans l'autre), ainsi le présentateur les couple.Le couplage se fait également à travers l'interface du présenteur, de sorte que chaque vue ne "connaisse" pas vraiment l'autre vue.

J'espère que cela pourrait aider d'autres personnes.

Merci, Daniel