Romanian Flex User Group

În etapa de dezvoltare a unei aplicaţii Flex, una dintre cele mai importante şi mai des utilizate tehnici este data binding – procesul prin care un obiect ce conţine date este „legat” de o componentă. În acest fel se asigură independenţa operaţiunilor cu date de reactualizarea informaţiilor afişate de componentă – concret, atunci când datele din obiectul legat se schimbă, componenta actualizează informaţiile pe care le afişează din acel obiect, lăsându-i programatorului libertatea de a se concentra exclusiv pe prelucrarea datelor. Data binding în Flex deţine puterea: pe lângă legături între obiecte simple, putem crea şi legături între funcţii şi expresii ActionScript – binding reprezentând „rigidizarea” elementelor „flexibile”.

 

În Flex sunt trei posibilităţi de a crea o astfel de legătură: utilizând acoladele {}, folosind tag-ul <mx:Binding> sau folosind ActionScript şi packet-ul BindingUtils. Nu folosim termenul metodă (în locul lui posibilitate) în mod intenţionat, deoarece prezentarea în contextul programării orientate pe obiecte ne obligă la acest lucru.

Cea mai simplă şi mai utilizată manieră, folosind parantezele acoladă ({}), permite legături rapide între proprietăţile obiectelor, spre exemplu :

<mx:Label id="myLabel" text="Hello World"/>

<mx:Label text="{myLabel.text}" />

După cum puteţi observa, componenta sursă trebuie să aibă o denumire (id=”myLabel”) pentru a-i putea accesa proprietăţile, în cazul nostru proprietatea text – pe care o legăm în componenta destinaţie. Ori de câte ori proprietatea text a componentei sursă myLabel se va schimba şi cea de-a doua componentă (destinaţie) va prelua în proprietatea ei (text) valoarea modificată.

A doua manieră, folosind tag-ul MXML <mx:Binding>, exprimă mult mai clar legătura descrisă mai sus, întrucât proprietăţile tag-ului fac referire directă şi în limbaj natural la sursă, respectiv destinaţie:

<mx:Label id="myLabel" text="Hello World"/>

<mx:Label id=”myLabelDest” text="{myLabel.text}" />

<mx:Binding source=" myLabel.text" destination=" myLabelDest.text"/>

De reţinut că această manieră obligă programatorul să denumească ambele componente pentru a le putea accesa. Ca o informaţie suplimentară, toate componentele sunt denumite automat de către compilator, în cazul în care programatorul a omis să-i atribuie un identificator (id).

Ultima dintre posibilităţi poate fi folosită în ActionScript, utilizând clasa mx.binding.utils.BindingUtils : BindingUtils.bindProperty(myLabel, "text", myLabelDest, "text");

Clasa foloseşte o metodă statică (bindProperty) pentru a crea legătura dintre proprietăţi implementate ca variabile sau o metodă specifică setter-getter-elor (bindSetter) dacă este vorba despre proprietăţi implemetate prin intermediul getter-setter. De reţinut : metodele statice acţionează la nivelul clasei în care este definită, pe când metodele în general acţionează la nivelul instanţei clasei.

 

Să pornim un nou proiect, în care să inserăm un ArrayCollection (care este în fapt, un array complex) :

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:ArrayCollection id="myAC">

<mx:source>

<mx:Object siteURL="http://www.adobe.com" siteNume="Adobe"/>

<mx:Object siteURL="http://www.google.com" siteNume="Google"/>

<mx:Object siteURL="http://www.yahoo.com" siteNume="Yahoo"/>

<mx:Object siteURL="http://flex.akademia.ro" siteNume="ROFUG"/>

<mx:Object siteURL="http://www.badu.ro" siteNume="Badu"/>

</mx:source>

</mx:ArrayCollection>

</mx:Application>

ArrayCollection-ul nostru conţine obiecte care au fiecare definite proprietăţile siteURL şi siteNume. Vom defini o legătură între ArrayCollection şi o etichetă care afişează numărul de elemente pe care le are acesta. Într-un panel, definim eticheta în cauză:

<mx:Panel title="Tutorial II – DataBinding" width="50%" height="50%">

<mx:Label text="Numărul de elemente definite : {myAC.length}" />

</mx:Panel>

Putem observa cu uşurinţă că pe lângă binding-ul definit de noi între proprietatea length a ArrayCollection-ului, eticheta conţine şi text – proprietatea text a etichetei este compusă din concatenarea rezultatului de binding cu o valoare statică, introdusă de noi, rezultatul rulării aplicaţiei fiind eticheta cu textul „Numărul de elemente definite : 5”.

În acelaşi proiect, vom defini o a doua legătură, utilizând maniera tag MXML : între o nouă etichetă şi primul element al ArrayCollection-ului.

Noua etichetă (definită în tag-ul panel-ului):

<mx:Label id="myLabelDest" text="test" />

şi legătura, definită în tag-ul aplicaţiei (dacă am defini-o în tag-ul panel-ului, ar rezulta eroare):

<mx:Binding source="myAC.getItemAt(0).siteURL" destination="myLabelDest.text"/>

Aşa cum puteţi găsi şi în documentaţie, metoda getItemAt întoarce elementul al cărui index este indicat drept parametru, în cazul nostru fiind vorba despre primul element (numărătoarea elementelor în array-uri începe de la 0). Binding-ul citeşte proprietatea siteURL a primului element al ArrayCollection-ului şi îl leagă de proprietatea text a etichetei nou definite – cu riscul de a repeta, modificarea proprietăţii siteURL a elementului în cauză, atrage după sine modificarea conţinutului proprietăţii text a etichetei.

 

Pentru a ne folosi şi de cea de a treia manieră de a crea legături, vom insera cod ActionScript în proiectul nostru, după cum urmează:

 

<mx:Script>

<![CDATA[

 

import mx.binding.utils.BindingUtils;

 

public function facLegatura ():void{

BindingUtils.bindProperty(my_TI, "text", myAC.getItemAt(0), "siteNume");

}

 

]]>

</mx:Script>

 

Bineînţeles, este necesar să adaugăm în cadrul Panel-ului şi următoarele tag-uri, la care codul ActionScript face referire:

 

<mx:TextInput id="my_TI" text=""/>

<mx:Button label="Legătură" click="facLegatura()" />

 

În linii mari, în momentul în care vom face click pe butonul cu eticheta „Legătură”, invocarea metodei facLegatura crează legătura dintre proprietatea siteNume a primului element al ArrayCollection-ului şi proprietatea text a noului TextInput definit. Puteţi observa că în maniera tag <mx:Binding> am făcut legătura accesând direct proprietatea primului element, pe când în cazul legăturii folosind ActionScript, am indicat sursa ca fiind primul element, indicând conform sintaxei, imediat după sursă proprietatea la care facem referire – siteNume.

 

În concluzie, puteţi observa cu uşurinţă că maniera de declarare folosind <mx:Binding> poate ajuta la separarea clară între interfaţă şi nivelul model (cel care se ocupă cu declararea şi procesarea datelor) şi poate crea legături între diverse surse şi aceeaşi destinaţie. Utilizarea clasei BindingUtils ajută la crearea şi gestionarea de legături, dar care poate fi aplicată oriunde într-un proiect complex.

Maniera pe care o veţi folosi va depinde întotdeauna de situaţie: reţineţi că atunci când urmăriţi obţinerea unui rezultat care întârzie să apară (spre exemplu, aveţi în aplicaţie o eroare pe care n-o puteţi depăşi uşor) puteţi schimba oricând maniera de realizare a legăturilor - data binding-ul a fost creat ca să vă ajute, nu să vă încurce.