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

Про представлення даних

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

Flex  RIA  Flash

Adobe® Flex® надає наступний набір можливостей для представлення даних в за стосунку: прив’язка даних, контроль даних, форматування. Ці можливості працюють у поєднанні з Adobe® LiveCycle™ Data Services ES і властивостями Vega для роботи з віддаленими даними. Разом вони дозволяють виконувати наступні завдання:

• Передача даних між об’єктами на стороні клієнта.
• Збереження даних в об’єктах на стороні клієнта.
• Перевірка даних перед їх передачею між об’єктами на стороні клієнта.
• Форматування даних перед їх виведенням.

Наступні кроки описують простий сценарій, в якому користувач забезпечує введення даних і робить запит інформації в застосунку Adobe Flex:

 1. Користувач вводить дані в поля вводу даних і підсумовує запит, натиснувши на кнопку (Button).

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

 3. (Додатково) Один або кілька об'єктів перевірки даних на коректність перевіряють дані запиту. Об'єкти перевірки перевіряють чи дані відповідають певним критеріям.

 4. Дані передаються до об'єкта на стороні сервера.

 5. Об’єкт на стороні сервера обробляє запит і повертає дані або об’єкт помилки, якщо дійсний результат не може бути повернутий.

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

 7. (Додатково) Один або кілька об'єктів форматування даних форматують дані результату для відображення в інтерфейсі користувача.

 8. Прив’язка даних передає дані для відображення до елементів керування користувача.

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

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

Наступний приклад показує елемент керування тексту, який отримує дані від властивості значення елементу керування HSlider. Назва властивості всередині фігурних дужок ({}) є представленням прив’язки, яке копіює значення властивості джерела, mySlider.value, у властивість текстового поля.

<mx:HSlider id="mySlider">
<mx:Text text="{mySlider.value}">

Для додаткової інформації, див. Binding Data.

Модель даних

Особливість моделі даних дозволяє зберігати дані в об’єктах на стороні клієнта. Модель даних — це об'єкт ActionScript, який містить властивості для зберігання даних, і який додатково містить методи для додаткової функціональності. Моделі даних корисні для розбиття на частини інтерфейсу користувача та даних у застосунку.

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

Просту модель даних можна визначити у тезі MXML. Якщо вимагається функціональність без зберігання нетипізованих даних, можна використовувати клас ActionScript як модель даних.

Наступний приклад показує модель даних на основі MXML з властивостями елементів керування TextInput з прив’язкою в своїх полях:

<?xml version="1.0"?>
<!-- datarep\DatarepModelTag.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
     <mx:Model id="reg">
       <registration>
          <name>{nme.text}</name>
          <email>{email.text}</email>
          <phone>{phone.text}</phone>
          <zip>{zip.text}</zip>
          <ssn>{ssn.text}</ssn>
      </registration> 
    </mx:Model>
    <mx:TextInput id="nme"/>
    <mx:TextInput id="email"/>
    <mx:TextInput id="phone"/>
    <mx:TextInput id="zip"/>
    <mx:TextInput id="ssn"/>    
</mx:Application>

Детальніше про моделі даних див. в розділі Storing Data.

Перевірка коректності даних (Data validation)

Перед використанням даних застосунком функція перевірки даних дозволяє впевнитися, що дані відповідають конкретним критеріям. Валідатори даних (Data validators) є об’єктами ActionScript, які перевіряють, чи дані в компоненті правильно сформатовані. Можна використовувати валідатор даних до властивості будь–якого компонента. Для моделей в об’явленні компоненту процедури віддаленого виклику (remote procedure call— RPC), властивості, до яких прикладається компонент валідації, перевіряються перед тим, як запит надсилається на адресат служби процедури віддаленого виклику. Надсилаються лише допустимі запити.

Наступний приклад показує MXML–код, який використовує стандартний компонент ZipCodeValidator, представлений тегом для перевірки формату ZIP–коду, який вводиться користувачем. Властивість джерела валідатора ZipCodeValidator визначає властивість, яку вона перевіряє на коректність.

<?xml version="1.0"?>
<!-- datarep\Validate.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:TextInput id="input" text="enter zip" width="80"/>

    <mx:Model id="zipModel">
        <root>
            <zip>{input.text}<zip>
        </root>    
    </mx:Model>

    <mx:ZipCodeValidator source="{zipModel}" property="zip"
        listener="{input}" trigger="{input}"/>
</mx:Application>

Для додаткової інформації про компоненти валідації, див. Validating Data.

Форматування даних (Data formatting)

Можливість форматування даних дозволяє змінити формат даних перед їх виводом у користувацькому інтерфейсі. Наприклад, коли служба даних повертає рядок, який користувач хоче вивести в форматі номеру телефону (xxx)xxx–xxxx, можна використати компонент форматування, щоб забезпечити пере форматування рядка перед виводом.

Компонент форматовщика даних (data formatter component) — це об’єкт, який форматує вихідні дані в спеціалізований рядок. Щоб переформатувати дані, які повертаються зі служби даних, можна використати компоненти форматовщика з прив’язкою даних.

Наступний приклад об’являє компонент DateFormatter з форматом даних у вигляді міс./день/рік (MM/DD/YYYY), і прив’язує відформатований варіант об’єкта даних (Date object), який повертається веб–сервісом до властивості поля вводу тексту.

<?xml version="1.0"?>
<!-- datarep\Format.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:WebService id="myService" destination="Shop"/>
    
    <!-- Declare a formatter and specify formatting properties. -->
    <mx:DateFormatter id="StandardDateFormat" formatString="MM/DD/YYYY"/>

    <!-- Trigger the formatter while populating a string with data. -->
    <mx:TextInput
        text="Your order shipped on {StandardDateFormat.format(myService.purchase.result.date)}"/> 
</mx:Application>

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

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

Flex

RIA

Flash

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

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