Adobe Flex — технологія швидкої розробки RIA

Прив’язка даних (Data binding)

Додати до моєї бази знань

Flex  RIA  Flash

Про прив’язку даних

Прив'язка даних (Data binding) — процес приєднання даних в одному об'єкті до іншого об'єкту. Він забезпечує зручний шлях передачі даних між різними рівнями застосунку. Прив'язка даних вимагає властивості джерела, властивості адресату та події запуску, яка вказує, коли копіювати дані з джерела прив’язки до адресату прив’язки. Об'єкт здійснює запущену подію, коли змінюється властивість джерела.

Adobe Flex надає три шляхи конкретизації прив'язки даних: синтаксис з фігурними дужками ({}) в MXML, тег в MXML і методи BindingUtils в ActionScript. Наступний приклад використовує синтаксис з фігурними дужками ({}), щоб показати текстове поле (Text control), яке отримує дані з властивості елементу керування TextInput:

<?xml version="1.0"?>
<!--binding/BasicBinding.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:TextInput id="myTI" text="Enter text here"/>
    <mx:Text id="myText" text="{myTI.text}"/>
</mx:Application>

Нижче приводиться SWF-файл для попереднього прикладу:

Назва властивості всередині фігурних дужок — властивість представлення джерела. Коли значення джерела змінюється, Flex копіює поточне значення його властивості, myTI.text, до властивості адресату, тобто до властивості Text control.

Можна включати код ActionScript і вирази E4X як частину представлення прив'язки даних, як показано в наступному прикладі:

<?xml version="1.0"?>
<!--binding/BasicBindingWithAS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:TextInput id="myTI"/>
    <mx:Text id="myText" text="{myTI.text.toUpperCase()}"/>
</mx:Application>

Нижче приводиться SWF-файл для попереднього прикладу:

В цьому прикладі використовується метод String.toUpperCase() ActionScript’у для перетворення тексту з властивості джерела до верхнього реєстру, коли Flex копіює дані у властивість адресату. Більш конкретну інформацію див. в розділах Using ActionScript in data binding expressions та Using an E4X expression in a data binding expression.

Можна використовувати тег як альтернативу синтаксису фігурних дужок. Коли використовується тег , у властивості джерела тегу забезпечується властивість джерела і вихідна властивість у властивості адресату. Наступний приклад використовує тег для задання прив'язки даних від поля TextInput до текстового поля (Text control):

<?xml version="1.0"?>
<!--binding/BasicBindingMXML.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:TextInput id="myTI"/>
    <mx:Text id="myText"/>  
    <mx:Binding source="myTI.text" destination="myText.text"/>
</mx:Application>

Нижче приводиться SWF-файл для попереднього прикладу:

На противагу синтаксису з фігурними дужками можна використовувати тег , щоб цілком відокремити інтерфейс користувача від моделі. Тег також дозволяє прив’язувати численні вихідні властивості до однієї і тієї ж властивості адресату, тому що можна задати багатьом тегам один і той же адресат. Наприклад, див. розділ Binding more than one source property to a destination property

І синтаксис з фігурними дужками, і тег описують прив’язку даних під час компіляції. Можна також використовувати код ActionScript, щоб описати прив’язку даних під час роботи, як показано в наступному прикладі:

<?xml version="1.0"?>
<!--binding/BasicBindingAS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
        <mx:Script>
      <![CDATA[
        import mx.binding.utils.*;
        // Define data binding.
        public function initBindingHandler():void {
            BindingUtils.bindProperty(myText, "text", myTI, "text");
        }
      ]]>    
    </mx:Script>
    <mx:TextInput id="myTI"/>
    <mx:Text id="myText" preinitialize="initBindingHandler();"/>
</mx:Application> 

Нижче приводиться SWF-файл для попереднього прикладу:

В цьому прикладі для визначення прив’язки використовується статичний метод BindingUtils.bindProperty(). Для визначення прив'язки до функції можна також застосувати метод BindingUtils.bindSetter(). Для отримання більш конкретної інформації див. Defining data bindings in ActionScript.

В цьому прикладі варто відмітити, що для визначення прив’язки даних використано заздалегідь ініціалізовану подію. Це необхідно, тому що Flex запускає всі прив'язки даних при запуску застосунку, коли джерело надсилає подію ініціалізації. Для отримання більш конкретної інформації див. When data binding occurs.

Коли відбувається прив’язка даних

Прив’язка відбувається за наступних обставин:

1. Джерело прив’язки відправляє подію, тому що джерело було змінено. Ця подія може трапитися у будь-який час протягом виконання застосунку. Подія запускає Flex для копіювання значення властивості джерела у властивість адресату.
2. При запуску застосунку, коли об'єкт джерела відправляє подію ініціалізації. Всі прив'язки даних запускаються одноразово при запуску за стосунку, щоб ініціалізувати властивості адресату.

Щоб контролювати прив'язку даних, можна призначити спостерігача прив’язки, який запускає обробник події, коли відбувається прив'язка даних. Для отримання більш конкретної інформації див. Defining binding watchers.

Метод ExecuteBindings() класу UIComponent виконує всі прив’язки, для яких об’єкт UIComponent є адресатом. Всі контейнери і елементи керування, так само як і компонент Repeater, наслідують клас UIComponent. Метод ExecuteChildBindings() класів Container і Repeater виконує всі прив’язки, для яких дочірні компоненти UIComponent класу Container або Repeater є адресатами. Всі контейнери наслідують клас Container.

Ці методи дають змогу виконувати прив’язки, які не відбуваються, як очікується. Додаючи один рядок коду, як наприклад виклик методу executeChildBindings(), можна відновити інтерфейс користувача після внесення зміни, яка не привела до виконання прив’язки. Проте, потрібно використовувати метод executeBindings(), лише коли є впевненість в неавтоматичному виконанні прив’язки.

Властивості, які підтримують прив’язку даних

Можна використовувати всі властивості об'єкту як адресат вираження прив’язки даних. Проте, щоб використовувати властивість як джерело вираження прив'язки даних, об’єкт джерела повинен бути реалізований для підтримки прив'язки даних, що означає, що об'єкт здійснює подію, коли значення властивості змінюється для запуску прив’язки. В цьому тематичному розділі властивість, яка може бути використана як вираження джерела прив’язки даних, називається властивістю прив’язки.

В Adobe Flex Language Reference, властивість, яка може бути використана як джерело вираження прив'язки даних, включає наступне твердження в його описі:

"Ця властивість може бути використана як джерело для прив'язки даних."

Для більш конкретної інформації про створення властивостей, які можуть бути використані як вираження джерела прив'язки даних, див. Creating properties to use as the source for data binding.

Використання доступних лише для читання властивостей (read-only properties) як джерела для прив’язки даних

Як джерело для вираження прив’язки даних можна використовувати властивість, доступну лише для читання, визначену методом отримання getter, але не методом установки значення setter (*). Flex виконує прив'язку даних одноразово, коли запускається застосунок.

(*) Метод getter — це метод, який отримує значення певної властивості. Метод setter — це метод, який встановлює значення певної властивості. Можна визначити отримувачі (getters) і встановлювачі (setters) на будь-який передвизначений (предопределённый) центральний об’єкт або визначений користувачем об’єкт, який підтримує додавання нових властивостей.

Використання статичних властивостей як джерела для прив’язки

Можна автоматично використовувати статичну константу як джерело для вираження прив’язки даних. Flex виконує прив’язку даних одноразово, коли запускається за стосунок.

Можна використовувати статичну змінну як джерело для вираження прив’язки даних. Flex виконує прив'язку даних одноразово, коли запускається застосунок.

Створення змінних для їх використання як джерела прив’язки

Створюючи змінну, щоб використати її як джерело прив'язки даних, Flex може автоматично копіювати значення властивості джерела до будь-якої властивості адресату. Це відбувається, коли властивість джерела змінюється. Для того, щоб Flex міг створити копію, потрібно використати тег метаданих [Bindable] для реєстрації властивості прив’язки з Flex.

Тег метаданих [Bindable] має наступний синтаксис:

[Bindable] [Bindable(event="eventname")]

Якщо не називати подію, Flex автоматично створює подію під назвою propertyChange, і Flex здійснює ту подію, коли властивість змінюється для запуску будь-яких прив’язок даних, які використовують властивість як джерело прив’язки даних. Якщо конкретизувати назву події, то відіслати подію, коли властивість джерела змінюється, — задача програміста. Для більш конкретної інформації і прикладів використання тегу метаданих [Bindable], див. Using the Bindable metadata tag.

Наступний приклад робить властивості maxFontSize і minFontSize, які визначено як змінні, придатними бути джерелом для прив’язки даних:

<?xml version="1.0"?> 
<!--binding/FontPropertyBinding.mxml --> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> 
        <mx:Script> 
        <![CDATA[
            // Define public vars for tracking font size.
            [Bindable]
            public var maxFontSize:Number = 15;
            [Bindable]
            public var minFontSize:Number = 5;
        ]]>     
    </mx:Script> 
        <mx:Text text="{maxFontSize}"/> 
    <mx:Text text="{minFontSize}"/> 
    <mx:Button click="maxFontSize=20; minFontSize=10;"/> 
</mx:Application> 

Нижче приводиться SWF-файл для попереднього прикладу до натиснення кнопки:

Та після натиснення кнопки:

При натисненні на кнопку відбувається оновлення значень властивостей maxFontSize і minFontSize, і запускається оновлення прив’язки даних в текстовому полі.

Примітка: Якщо опустити тег метаданих [Bindable], компілятор Flex показує попередження, що механізм прив'язки даних не може виявити змін до властивості.

Для чого використовується прив’язка даних

Загальне використання прив’язки даних включають наступне:

• Для прив'язки одних властивостей засобів керування інтерфейсу користувача до інших.
• Для прив’язки властивостей елементів керування інтерфейсу користувача до моделі даних середнього рівня, і для прив'язки межі області тієї моделі даних до запиту передачі даних (трьохрівнева система).
• Для прив’язки властивостей засобів керування інтерфейсу користувача до запитів передачі даних.
• Для прив'язки результатів передачі даних до властивостей елементів керування інтерфейсу користувача.
• Для прив'язки результатів передачі даних до моделі даних середнього рівня, і для прив’язки областей тієї моделі даних до елементів керування інтерфейсів користувача. Для отримання додаткової інформації про моделі даних, див Storing Data.
• Щоб прив'язати об’єкт ArrayCollection або XMLListCollection до властивості dataProvider спискового вікна (List control).
• Щоб зв'язати окремі частини складних властивостей з властивостями елементів керування користувальницького інтерфейсу. Прикладом може служити головний вузол постановки задачі (master-detail scenario), в якому натиснення на елемент у списковому вікні відображає дані в кількох інших елементах контролю.
• Для прив'язки XML даних до елементів керування інтерфейсу користувача, використовуючи ECMAScript для представлення XML (E4X) у представленні прив’язки.

Хоча прив’язка є потужним механізмом, вона не підходить для всіх ситуацій. Наприклад, для складного користувацького інтерфейсу, в якому окремі частини повинні оновлюватися строго в певний період часу, найкраще було б використати метод, який присвоює властивості по порядку. Крім того, прив’язка виконується щоразу, коли змінюється властивість, так що це не найкраще рішення, якщо бажано, щоб про зміни повідомлялося тільки в певний час.

Зверніть увагу на додаткові посилання

Якщо вас цікавить...

Flex

RIA

Flash

Головний розділ

Adobe Flex — технологія швидкої розробки RIA

загрузка...