Data Binding

Le Data binding est une technique qui permet de lier les composant de l'IHM aux données de l'application, ce qui permet aux développeurs d'éviter la tache fastidieuse du transfert de données entre l'IHM et le domaine de l'application.

Akrogen fournit un support expérimental pour le data binding, qui permet de lier un contrôle XUL à une variable Javascript. Dans la version actuelle, seuls textbox et listbox supportent le data binding.

Textbox

Le textbox abrite une valeur. cette valeur peut être liée à une chaine Javascript. Lier la valeur d'un textbox à une chaine Javascript est très simple: il suffit d'utiliser une syntaxe spéciale dans l'attribut value de textbox :

<textbox value="#[jsVar]" />

Où jsVar dénote une variable Javascript déjà declarée..

Une fois ce lien établi, tout changement dans la valeur du textbox est automatiquement reflété dans la variable Javascript et vice-versa.

Un exemple complet de l'utilisation du databinding avec le textBoxe est fourni dans le catalogue usesCases dans le component suivant: Components/Model/Script/Binding/TextBox.ackcpt.xml

Checkbox

TODO

Radio

TODO

RadioGroup

TODO

Menulist

TODO

Tree

TODO

Listbox

Une listBox abrite une collection d'objects. Cette collection peut être liée à un tableau Javascript. Pour lier une listBox XUL à un tableau JavaScript, l'attribut value doit être renseigné sur le nom du tableau par cette syntaxe

<listbox value="#[jsArray]" ... >

Pour pouvoir utiliser ce tableau dans les colonnes de la liste, il faut définir l'attribut var qui représente le contenu de la ligne courante. Cette technique est très similaire à celle utilisée dans JSF pour le dataTable.

A titre d'exemple, soit persons un tableau Javascript contenant une collection de couples (name, age):

var persons = new Array();
persons.push(new Person('Franck', 25));
names.push(new Person('Victor', 35));

Ce tableau peut ensuite être utilisé comme valeur d'une listbox :

<listbox  value="#[persons]" var="person">
    <listhead>
        <listheader label="Name" />
                <listheader label="Age" />
    </listhead>
    <listcols>
        <listcol value="#[person.name]"/>
        <listcol value="#[person.age]"/>
    </listcols>
</listbox>

un exemple complet de l'utilisation du databinding avec la listBox est fourni dans le catalogue usesCases dans le component suivant : Components/Model/Script/Binding/ListBox.ackcpt.xml

Akrogen fournit aussi une classe utilitaire pour simplifier la gestion d'une liste et de son modèle associé. Voici comment déclarer cette classe : 

<script type="text/javascript" src="/Scripts/commons/xul/model/ListboxDataModel.js" /> 
<script type="text/javascript" >
<![CDATA[
        var items = new Array();                        
        var itemsModel = new ListboxDataModel('listbox1', items);
]]>
</script>

Le constructeur de ListboxModelWrapper prend deux paramèters :

  • L'identifiant d'une listbox XUL.
  • Un tableau Javascript qui sera attaché à la liste.

cette classe fournit les méthodes suivantes :

  • appendItem : ajoutes une entrée à la collection.
  • removeSelectedItems : supprime les éléments sélectionnés de la collection.
  • selectAllItems : selectionne toutes les lignes de la listbox.
  • clearSelectionItems : annule la selection.
  • getSelectedItems : retourne un tableau Javascript contenant l'ensemble des éléments sélectionnés.

    un exemple complet de l'utilisation du databinding ainsi que la classe utilitaire avec le listbox est fourni dans le catalogue usesCases dans le component suivant : Components/Model/Script/Binding/ListboxWithDataModel.ackcpt.xml.