Contrôler le déclenchement du Data Binding

Le Data Binding est un des atouts de Flex, mais sont déclenchement n'est pas toujours heureux, il alourdis parfois votre application, ou ne se déclenche pas forcement au moment propice, pour mieux contrôler le Binding, une solution très simple existe : les Bindable Event

Principe

Les Bindable Event sont des tags qui vont indiquer à flex quand executer le Binding d'un getter ou d'une fonction. Le tag doit être situé avant la déclaration de variable/méthode et renseignera le type d'événement susceptible de déclencher le binding. La syntaxe du tag est la suivante :

[Bindable(event="nomDeLevenement")]

La chaine "nomDeLEvenement" correspond à la propriétés type de l'événement dispatché, passons à la pratique

Exemple

Nous partirons d'une DataGrid contenant une serie de donnée, un bouton global permettra de supprimer certains enregistrement si ces derniers remplissent certaines conditions précises. Dans notre exemple bien connu, nous afficherons une liste de créateur, et le bouton "supprimer" ne sera actif que pour les enregistrements dont la date de naissance est supèrieur à 1900 (Ca n'a aucun interêt ormis l'exemple :P)

Voici le code complet :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script source="dt_createurs.as" />
    
    <mx:Script>
        <![CDATA[
            [Bindable(event="selectionCreateurChange")]
            private function peutEtreSupprimer() :Boolean
            {
                trace("Execution de 'peutEtreSupprimer()'");
                // Si un créateur est bien selectionné dans la liste
                if( dg.selectedItem && dg.selectedItem.anneeNaiss > 1900){
                    return true;
                }
               
                // sinon non
                return false;
            }
        ]]>
    </mx:Script>
    
    <mx:VBox width="100%" height="100%">
        <mx:Button label="supprimer" enabled="{peutEtreSupprimer()}" />
        <mx:DataGrid id="dg" dataProvider="{createurs}"
            creationComplete="dispatchEvent(new Event('selectionCreateurChange'))"
            itemClick="dispatchEvent(new Event('selectionCreateurChange'))"
            width="100%"
            height="100%"
        />
    </mx:VBox>
    
</mx:Application>

Je ne vais pas m'attarder sur la fonction elle même qui présente peu d'intérêt, par contre regarder à quel moment l'événement "selectionCreateurChange" est dispatché :

• Au creationComplete de la DataGrid : Pour initialiser l'étaat du bouton
• Au itemClick : Et c'est globalement là que ca se joue, la selection change donc on force le binding pour adapter l'état du bouton à la situation

Et voilà, j'espère que cet article vous sera utile,

Cordialement