Working with Data

Working with Data Chapter 12

Overview • Modeling data & Data Binding • Ще разберем как да работим с данни от клиентска гледна точка, без да обръщаме специално внимание на data обмена на ниво клиент-сървър • Когато работим с данни, искаме да ги съхраним в някакво хранилище в паметта – data models • За да е по-опростено свързването на данни от един data model с контрола, или от една контрола с друга, можем да използваме едно мощно свойство на Flex платформата, наречено data binding • Усвояването на работата с данни във Flex приложение е необходимо за по-нататъчната ни работа данни-изпращане и получаване на данните.

Използване на Data Models • Различни начини: • Като хранилища за данните, върнати от RPC (като web service method call) • За съхранение на входните данни на потребителя преди изпращането им до сървъра • Може просто да използваме data model-a като механизъм за попълване на форма с вход(като combo box)

Model Tag • <mx:Model> тага ни позволява да създаваме обекти, които представят структури от данни , използвайки MXML • За да използваме тага по предназначение, трябва задължително да специфицираме id атрибут: <mx:Model id=”example” /> • Създадения по този начин модел ни позволява да правим следните неща: -да създаваме структура от данни , използвайки тагове -да специфицираме source атрибута, ако искаме да зареждаме данните от файл 1.Създаване на модели от данни чрез тагове • Кога ги използваме?

Когато искаме да използваме data model-a за съхранение на портебителския вход или за съхранение на данни, получени от RPC • Data modela може да съдържа само един корен • Пример: Модел от данни за представяне на потребител <mx:Model id="userData"> <user> <email> </email> <phone> </phone> <address> <city> </city> <country></country> </address> </user> </mx:Model >

Попълване на модела с реални данни и обръщение мъм данните в него Пр: UsingModelTag1.mxml • Data modelобекта(userData)и корена на data model-a (user) са синоними, затова не можем да третираме user като child na data model. Затова за да извлечем стойността за email-a, трябва да използваме: userData.email а не userData.user.email

Попълване на модел от файл • Кога използваме този подход? Когато искаме да използваме data model-a за съхранение на статични данни • Пример: имената на всички U.S. Щатове • Нека имаме файл със всички 50 щата (states.xml ) : <states> <state>Alalbama</state> <state>Alaska</state> <state>Arizona</state> <state>Arkansas </state> <state>California</state> <state>Colorado </state> <state>Connecticut</state> <state>Georgia</state>  </states>

Сега можем да попълним модела с данните от този файл- чрез добавяне на source атрибута: <mx:Model id="statesModel" source="states.xml" /> • Тогава Model обеката чете от файла, който сме подали на source атрибута, и зарежда данните по време на компилация • Затова, след като веднъж е компилиран .swf файла, не е необходимо сорс файла с данните да се дистрибутира със .swf файла, защото те са в самия .swf • Ако модела на структурата от данни се състои от 2 или повече разклонения с еднакви имена, те се конвертират в масив- примера с U.S. states Пр. UsingModelTag2.mxml

Използване на XML • <mx:Model>тага върши работа, ако искаме да работим с данни, съхранени в някои от стандартните типове като обекти, стрингове и масиви. • Но когато искаме да работим с XML-форматирани данни, трябва да използваме <mx:XML> тага • <mx:XML>тага- подобен като структура на <mx:Model> тага: • Също винаги трябва да специфицираме id атрибута: <mx:XML id=“example”/> • Два начина за създаване на структура и/или инициализиране на <mx:XML> data model-a: -да създаваме структура от данни , използвайки тагове -да специфицираме source атрибута, ако искаме да зареждаме данните от файл

XML структура с тагове- Пример: <mx:XML id="chaptersXml" xmlns=""> <chapters label="Chapters"> <chapter label="Chapter 1"> <file label="File 1.1" /> </chapter> <chapter label="Chapter 2"> <file label="File 2.1" /> </chapter> </chapters> </mx:XML> • XML тага има уникален namespace от default namespace-a на съдържащия го MXML документ. Затова: xmlns=“"

Обръщение към данните • XML e E4X XML обект от най-високо ниво. Затова обръщението към данните от модел, създаден чрез <mx:XML> става чрез използване на E4X синтаксис Пр. UsingXML1.mxml • Зареждане на XML от файл: <mx:XML id="chaptersXml" source=“chapters.xml">

Използване на ActionScript класове • <mx:Model> и <mx:XML> предлагат лесен и удобен начин за работа с данни, но не винаги са най-доброто решение: не са подходящи за сложни данни, динамични данни или данни с приложени правила към тях • Тогава: Action Script class като data model • Предимства: Strong Typing Data testing/consistency Business logic Design patterns

Binding 1.На конкретно property на класа, или на setter/getterдвойката [Bindable] private var _nameFirst:String; или [Bindable] public function set nameFirst(value:String):void { _nameFirst=nameFirst; } [Bindable] public function get nameFirst():String { return _nameFirst; }

2.Или на целия клас: [Bindable] public class User { .... } При създаване на инстанция също : [Bindable] private var user:User;

Data Binding • Свойство на Flex платформата, което улеснява обработката на данните • Позволява да асоциираме данните от един обект с друг • Начини за използване на data binding: -връзка от входящи контролис datа models -свързване на две или повече контроли

Синтаксис на Data Binding • Три начина за прилагане на Data Binding: - Къдрави скоби {} - <mx:Binding> -BindingUtils • Предимства и недостатъци на трите различни техники

Къдрави скоби {} • Най-простата и бърза техника • Поставянето на къдрави скоби около някакъв израз оценява израза • Пр.1: CurlyBraces1.mxml • Пр.2: CurlyBraces2.mxml AddStudent.mxml • Също можем да използваме data binding за свързване за данни директно от контроли(или от data model) с RPC компонента , като напр. Remote Object.

<mx:RemoteObject id="example" destination="exampleService"> <mx:method name="saveContactInformation" > <mx:arguments> <email> {dataModel.email} </email> <phone> {dataModel.phone} </phone> <city> {dataModel.city} </city> <state> {dataModel.state} </state> </mx:arguments> </mx:method> </mx:RemoteObject> Като се ъпдейтват стойностите в data model-a, ще се ъпдейтват също и стойностите в Remote Object method arguments . Това позволява извикването на send(): <mx:Button label="Save" click="example.saveContactInformation.send()“ />

Използването на data bining по този начин ни позволява да правим RPCs, без да е необходимо да пишем дълъг Action Script. • Същите принципи са в сила, когато работим с HTTP Service и WebService • Data Binding с E4X изрази: От Пр.2 вместо Model обект можем да използваме XML обект: <mx:XML id=“xmlData”> <userData email= “{email.text}” phone=“{phone.text}” city=“{city.text}” state=“{state.value}” /> </mx:XML> • Тогава можем да изполваме E4X изрази за да свържем стойността на Text Area със стойностите от XML обекта: <mx:TextArea width="200“ height="200" text=“ {'Contact information\nEmail: ' + xmlData.@email +'\nPhone: '+ xmlData. @phone + ‘\nLocation: ' + xmlData. @city + ', ' + xmlData. @state}" />

<mx.Binding> • Можем да правим същото, както с {}, но използвайки MXML тагове. • <mx:Binding> тага изисква следните атрибути: -source: източника на данни, които искаме да свържем -destination: точката, в която искаме да се отразят променитена стойност от source-a <mx:HBox> <mx:ComboBox id=“comboBox"> <mx:Array> <mx:Object label="A" data=“Apples"/> <mx:Object label="B" data=“Bananas"/> <mx:Object label="C“data=“Cucumbers"/> <mx:Object label=“T" data=“Tomatos"/> </mx:Array> </mx:ComboBox> <mx:TextInput id=“txt“text="level.value" /> </mx:HBox>

<mx:Binding source=“comboBox.selectedItem.data” destination=“txt.text” /> • Пример 2, но с <mx:Binding /> • Можем също да използваме E4X изрази с <mx:Binding> таг: Вместо dataModel.email  xmlData.@email

Предимства и недостатъци: <mx:Binding> повече код в отделен таг но чрез него се получава по-ясно разделение между UI layout и използваните данни по-чиста имплементация на data binding-a същата функционалност (Ако искаме по-голяма функционалност-BindingUtils)

BindingUtils • Единствено BindingUtils от трите техники позволява динамично конфигуриране на data bindings в runtime • mx.binding.utils.BindingUtils класа има специален static метод наречен bindProperty(), който позволява конфигурирането на data bindings от Action Script • Синтаксис на bindProperty() метода: BindingUtils.bindingProperty (destintionObject, destinationProperty, sourceObject, sourceProperty); destination& source Object – Object references destintion & source Property – Strings Пример: Създаване на data binding между combo box и text input

<mx:VBox> <mx:ComboBox id="comboBox"> <mx:Array> <mx:Object label="1"/> <mx:Object label="2"/> <mx:Object label="3"/> <mx:Object label="4"/> </mx:Array> </mx:ComboBox> <mx:TextInput id="textInput" /> <mx:Button label="enable data binding" click="BindingUtils.bindProperty( textInput,'text',comboBox,'value')" /> </mx:VBox>

Метода bindProperty() връща указател към нов mx.binding.utils.ChangeWatcher обект • Обекта ChangeWatcher, върнат от извикването на метода bindProperty() представя data binding асоциацията, и ако искаме да променим тази асоциация или да я прекратим, трябва да използваме обекта ChangeWatcher • Спиране на data binding асоциацията между две точки: changeWatcher.unwatch(); • Извличане на текущата стoйност на сорса: changeWatcher.getValue(); • Промяна на сорс обекта: changeWatcher.reset(newSourceObject); Този reset() метод обаче не позволява да промeняме property параметъра на сорса. За целта, първо викаме unwatch() и след това: changeWatcher=BindingUtils.bindProperty(newSource, newProperty, destination, destinationProperty);

Working with Data