Использование pureXML в Flex-приложении микроблога: Часть 2. Создание интерфейса пользователя приложения с помощью Flex

Применение Flex и ActionScript для пользовательского интерфейса, обеспечивающего подключение к Web-сервисам на основе DB2

Возможности PureXML®, реализованные в IBM DB2®, позволяют хранить XML в базе данных нативным образом, без каких-либо изменений, что позволяет приложениям Adobe® Flex® aнепосредственно читать XML-данные и заполнять пользовательские интерфейсы Flex. В этом цикле статей из трех частей мы создадим приложение микроблога, которое использует pureXML, Web-сервисы, Adobe Flex и даже позволяет публиковать заметки микроблога в Twitter. В первой части говорится о Web-сервисах и о том, как включить их с помощью DB2 pureXML при создании базы данных микроблога и ее тестировании. В этой статье, которая составляет вторую часть цикла, мы воспользуемся Adobe Flex и ActionScript® для создания пользовательского интерфейса приложения.

Джо Леннон, разработчик ПО, Независимый разработчик

Джо Леннон - 24-летний разработчик ПО из города Корк, Ирландия. Джон является автором вскоре выходящей в издательстве Apress книги Beginning CouchDB, а также нескольких технических статей и руководств на IBM developerWorks. В свободное время Джо любит играть в футбол, возиться с гаджетами и ставить игровые рекорды на своей Xbox 360.



29.08.2011

Предварительные условия

В этом цикле для построения нашего учебного приложения применяется инструментарий с открытым исходным кодом Flex SDK. В разделе Ресурсы приведена ссылка на Web-страницу продукта Adobe Flex. Вам необходимо установить сервер баз данных DB2 в редакции DB2 Express-С. Ссылки на информацию по загрузке и установке DB2 Express-C приведены в разделе Ресурсы в конце этой статьи. Кроме того, для развертывания сервисов на Web-сервере вы будете использовать продукты IBM® Data Studio и WebSphere® Application Server Community Edition (далее - Community Edition). Информация о загрузке приведена в разделе Ресурсы.


Введение во Flex

Часто используемые сокращения

  • Ajax: Asynchronous JavaScript + XML
  • HTML: Hypertext Markup Language
  • HTTP: Hypertext Transfer Protocol
  • IDE: Integrated Development Environment(Интегрированная среда разработки)
  • MXML: Minimal XML
  • REST: REpresentational State Transfer
  • RSS: Really Simple Syndication
  • SDK: Software Development Kit(Инструментарий для разработки программного обеспечения)
  • UI: User interface(Интерфейс пользователя)
  • XML: Extensible Markup Language

Adobe Flex – это среда разработки с открытым кодом, обеспечивающая создание т.н. «RIA-приложений» (Rich Internet Applications), которые могут быть развернуты на любом компьютере, поддерживающем Adobe Flash®. Эти приложения могут относиться к категории Web-приложений, для которых требуется плагин Adobe Flash Player, установленный в Web-браузере пользователя, или представлять собой приложения для настольного ПК – в этом случае они обычно развертываются с использованием платформы Adobe AIR™.

Основное преимущество использования Flex для разработки RIA-приложений относительно разработки на базе Ajax состоит в том, что вам не требуется принимать дополнительные меры для того, чтобы ваше приложение работало единообразно со всеми Web-браузерами и операционными системами. Flex-приложение будет выглядеть одинаково вне зависимости от используемой среды — при наличии установленного приложения Adobe Flash.

Для разработки Flex-приложения у нас есть два основных варианта. Можно загрузить доступный бесплатно пакет с открытым исходным кодом Flex SDK, в состав которого входят инструменты, позволяющие компилировать и отлаживать Flex-приложения. В качестве альтернативного варианта можно приобрести продукт Adobe Flex Builder IDE, который предоставляет множество инструментов, облегчающих разработку Flex-приложений, в т.ч. пользовательский интерфейс типа «drag-and-drop». Эта IDE-среда, базирующаяся на платформе с открытым исходным кодом Eclipse, также существует в виде Eclipse-плагина.

Flex и XML

Разработка Flex-приложения обычно распадается на две составляющие:

  • Задание пользовательского интерфейса приложения на языке MXML
  • Задание логики приложения на языке ActionScript

Flex поддерживает версию ActionScript 3.0, которая лучше всего известна благодаря своему использованию при разработке Flash. Этот язык написания сценариев поддерживает XML-данные посредством группы классов, соответствующих спецификации ECMAScript for XML (E4X). Использование этих классов существенно упрощает создание Flex-приложений для работы с XML-данными.

Вместо непосредственной коммуникации с сервером баз данных Flex-приложения обычно работают с данными через Web-сервисы, доступ к которым осуществляется с использованием интерфейса RESTful HTTP или интерфейса SOAP. Вы увидите действующий пример такой работы, когда создадите учебное приложение в соответствии с рекомендациями данной статьи.

Учебное приложение

Учебное приложение данной статьи представляет собой простой пользовательский интерфейс для приложения микроблога. Это приложение обеспечивает следующие возможности:

  • Создание нового обновления состояния
  • Просмотр предыдущих обновлений состояния

Первая стадия разработки приложения состоит в создании пользовательского интерфейса с помощью языка MXML и задании логики приложения с помощью языка ActionScript. Затем вы узнаете, как хранить данные для приложения в XML-файле. И, наконец, вы сконфигурируете это приложение для взаимодействия с Web-сервисом, который был создан в первой части данного цикла. Это позволяет хранить данные для этого приложения в базе данных DB2 pureXML (и соответственно извлекать их из этой базы данных).

Итоговое приложение будет иметь примерно следующий вид (см. снимок экрана на рис. 1).

Рисунок 1. Пользовательский интерфейс Flex-приложения микроблога
Screen capture of the Flex microblog application UI with status update and previous updates fields

Установка Flex SDK

В этом цикле статей для построения учебного приложения используется среда разработки с открытым исходным кодом Flex SDK. Теперь загрузите и установите пакет Flex SDK. На странице продукта Adobe Flex (ссылка приведена в разделе Ресурсы), вы найдете ссылку Get the Free Flex 3.x SDK (Получить бесплатно Flex 3.x SDK) в правом столбце (см. выделенную красным ссылку на рис. 2). Пакет Flex SDK можно загрузить с целевой страницы, на которую ведет эта ссылка.

Рисунок 2. Web-страница продукта Adobe Flex
Screen capture of Adobe Flex product page with highlighted 'Get the Free Flex 3.x SDK' link

После успешной загрузки zip-архива (что может потребовать определенного времени – размер загруженного мной файла составил 120 МБ) извлеките его содержимое в папку C:\flex. Пакет не содержит никакого исполняемого инсталлятора или чего-либо подобного. Прежде чем двигаться дальше, добавьте каталог, который содержит Flex-компилятор, в «пути» (path) своей системы. Это позволит вам компилировать исходный Flex-текст без необходимости каждый раз указывать местоположение Flex-компилятора.

В Панели управления раскройте пункт System (Система) и нажмите на закладку Advanced (Дополнительно). Нажмите на кнопку Environment Variables (Переменные среды) в левой нижней части окна (см. рис. 3).

Рисунок 3. Переменные среды
Screen capture of the Advanced tab on the System Properties dialog with highlighted 'Environment Variables' button

В разделе System Variables (Системные переменные) в нижней половине диалогового окна Environment Variables (Переменные среды) передвигайте ползунок до появления переменной Path (см. рис. 4).

Рисунок 4. Переменная среды Path
Screen capture of the highlighted Path environment variable on the Environment Variables dialog

Дважды нажмите мышью на переменной Path. Откроется диалоговое окно Edit System Variable (Изменение системной перемен…). В поле Variable value (Значение переменной) оставьте существующее значение и добавьте к нему в конце следующую информацию: ;c:\flex\bin. См. пример на рис. 5.

Рисунок 5. Диалоговое окно Edit System Variable
Screen capture of the updated Variable value field on the Edit Path Variable dialog

Последовательно нажимайте на кнопку OK для закрытия всех открытых диалоговых окон. Все, можно приступать к разработке Flex-приложений! Убедимся в том, что Flex-компилятор указан в вашей переменной Path, и посмотрим, как выглядит Flex-разработка на примере приложения под названием Hello World. Создайте на своем компьютере новую папку c:\flexapps, в которой будет храниться исходный текст приложения. Теперь создайте в ней подпапку с именем hello: c:\flexapps\hello. Откройте текстовый редактор («Блокнот» вполне подойдет) и введите с его помощью код Листинга 1, а затем сохраните файл под именем hello.mxml в своей папке hello.

Совет. Если вы используете Блокнот, то при сохранении этого файла возьмите его имя в двойные кавычки (например, "hello.mxml"). Это помешает Блокноту дать вашему файлу расширение .txt.

Листинг 1. Файл hello.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml"
  horizontalAlign="center" verticalAlign="center"
  width="400" height="300">
    <mx:Script>
      <![CDATA[
        import flash.events.MouseEvent;

        private function helloHandler(event:MouseEvent):void {
          if(btnHello.label == "Hello!") {
            btnHello.label = "World!";
          } else {
            btnHello.label = "Hello!";
          }
        }
      ]]>
      </mx:Script>
      <mx:Button id="btnHello" label="Hello!"
        click="helloHandler(event);" />
</mx:Application>

Рассмотрим вкратце этот исходный текст. Сначала XML-декларация говорит компилятору, что этот файл представляет собой XML-документ в кодировке UTF-8. Затем открывается основной тег MXML-приложения (mx:Application), передающий такие свойства, как ширина, высота и выравнивание, для задания размеров и компоновки нашего приложения. Следующий раздел в Листинге 1 – блок MXML-скрипта (mx:Script), который содержит код на языке ActionScript. В этом примере язык ActionScript применяется для задания функции, которая переключается при нажатии пользователя на кнопку. Эта функция проверяет, какой текст выводится на кнопке в данный момент времени, а затем изменяет этот текст.

После закрытия тега mx:Script создается MXML-тег «Button» (mx:Button) с атрибутами id и label. Атрибуту id присваивается значение, которое позволит ActionScript-коду легко находить его, атрибут label задает текст, который будет отображаться на кнопке. Кроме того, создается обработчик событий; в данном случае событие «click» должно вызывать функцию helloHandler.

Теперь скомпилируйте этот код с помощью Flex-компилятора. Откройте командную строку: Start>Programs>Accessories>Command Prompt (Пуск>Все программы>Стандартные>Командная строка).Для изменения папки проекта hello выполните команду: cd \flexapps\hello.

Для компилирования своего MXML-файла выполните следующую команду: mxmlc hello.mxml.

Вы должны увидеть результат, подобный показанному на рис. 6. (Текстовая версия информации, представленной в окне на рис. 6.)

Рисунок 6. Компилирование вашего первого приложения
Screen capture of results from compiling the Hello World Flex application

В результате в вашей папке hello создается новый файл с именем hello.swf. Чтобы открыть этот файл с помощью командной строки, просто введите с клавиатуры его имя или нажмите два раза на этом имени в обозревателе Windows® Explorer.

Совет. Если в системе не установлено автономного приложения Adobe Flash Player, вы можете открыть SWF-файл с помощью своего Web-браузера. В качестве альтернативного варианта вы можете загрузить сборки (версии) автономного Adobe Flash Player для отладки и выпуска (отладочная версия отлично подходит для отыскания ошибок во Flex-приложениях). Ссылка приведена в разделе Ресурсы.

Приложение должно выглядеть следующим образом (см. рис. 7).

Рисунок 7. Наше первое приложение
Screen capture of Hello World application in Adobe Flash Player window

Для переключения текста, отображаемого на кнопке (см. рис. 7), нажимайте на кнопку: нажатие на кнопку Hello! изменит текст кнопки на "World!", а нажатие на кнопку World! вернет обратно текст "Hello!". В следующем разделе вы создадите интерфейс для своего основного учебного приложения.


Разработка учебного приложения

Итак, приступим к разработке приложения микроблога. Сначала необходимо создать новую папку для приложения: c:\flexapps\microblog. Теперь с помощью своего текстового редактора создайте новый файл и сохраните этот файл под именем microblog.mxml в папке, которую вы только что создали. В этот файл вы поместите код своего приложения. Теперь приступим к созданию пользовательского интерфейса!

Создание пользовательского интерфейса

Первый шаг в разработке вашего Flex-приложения состоит в создании пользовательского интерфейса. Существует несколько способов для работы с интерфейсом пользователя в среде Flex; для компоновки интерфейса своего приложения вы будете применять MXML-компоненты. К концу этого раздела ваше приложение, дополненное функций подсчета оставшихся символов, будет выглядеть как на рис. 8.

Рисунок 8. Пользовательский интерфейс приложения микроблога
Screen capture of the microblog application with text in the status update field and remaining character count

Чтобы создать этот интерфейс, поместите код из листинга 2 в свой файл microblog.mxml.

Листинг 2. Файл microblog.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  layout="absolute" width="600" height="400">
    <mx:Script>
    <![CDATA[
      import flash.events.Event;

      private function statusChangeHandler(event:Event):void {
        remaining.text = String(140 - status.length);
      }
    ]]>
    </mx:Script>
    <mx:Panel layout="absolute" left="10" right="10"
      top="10" bottom="10" title="Microblog">
        <mx:Label x="10" y="10" text="Update your status:"/>
        <mx:Label x="525" y="10" text="140" id="remaining"/>
        <mx:TextArea x="10" y="30" width="540" id="status"
            maxChars="140" change="statusChangeHandler(event);"/>
        <mx:Button x="499" y="80" label="Post" id="post"/>
        <mx:Label x="10" y="105" text="Previous updates:"/>
        <mx:VBox x="10" y="125" width="540" height="180"
          borderStyle="solid">

        </mx:VBox>
        <mx:Button x="480" y="312" label="Refresh" id="refresh"/>
    </mx:Panel>
</mx:Application>

Теперь откройте командную строку и перейдите к папке microblog с помощью следующей команды: cd \flexapps\microblog.

Для компилирования исходного текста приложения выполните следующую команду: mxmlc microblog.mxml.

В случае успешной компиляции в папке вашего проекта должен появиться файл microblog.swf. Откройте этот файл с помощью автономного приложения Flash Player (или с помощью Web-браузера с установленным в нем плагином Flash Player). Вы должны увидеть экран, который был показан на рис. 8.

Этот файл ненамного сложнее, чем приложение Hello World, которое вы создали ранее в этой статье. При размещении элементов управления пользовательского интерфейса мы использовали абсолютное позиционирование по координатам x и y. Кроме того, были введены и некоторые другие элементы управления Flex: mx:Panel, mx:Label, mx:TextArea и mx:VBox. mx:Panel – это контейнерный элемент управления, применяемый для компоновки интерфейса. В данном случае для приложения используется контейнер в оконном стиле. mx:Label – это не более чем описательная текстовая метка. Идентификатор (id) одной из используемых здесь меток имеет значение remaining. Он используется для указания того, сколько еще символов разрешается ввести в элемент управления status mx:TextArea. У этого элемента управления есть атрибут change, указывающий, какую функцию следует вызывать, если произошло событие change.

И, наконец, последний из представленных здесь новых элементов управления – элемент mx:VBox. Как и mx:Panel, это контейнерный элемент управления, используемый для управления компоновкой. Он будет использоваться в следующем разделе для размещения предыдущих обновлений состояния.

После создания оболочки своего приложения вы можете переходить к наполнению элемента управления VBox обновлениями состояния из XML-файла.

Хранение обновлений в XML-файле

Сначала создайте XML-файл, который ваше приложение будет использовать для извлечения списка обновлений состояния и для заполнения раздела вашего приложения Previous updates (Предыдущие обновления). В том же каталоге, где находятся файлы microblog.mxml и microblog.swf, создайте новый файл с именем updates.xml и добавьте в него код из листинга 3.

Листинг 3. Файл updates.xml
<?xml version="1.0"?>
<updates>
    <update>
        <text>Flex and XML are an awesome combination!</text>
        <date_created>2009-09-02 23:45:01</date_created>
    </update>
    <update>
        <text>Finished a hard day of work, phew...</text>
        <date_created>2009-09-01 19:02:57</date_created>
    </update>
    <update>
        <text>I think I need some strong coffee right now.</text>
        <date_created>2009-09-01 11:14:51</date_created>
    </update>
    <update>
        <text>Less than an hour till lunch time! Mmmm food...</text>
        <date_created>2009-08-31 12:04:43</date_created>
    </update>
    <update>
        <text>Playing some Xbox 360!</text>
        <date_created>2009-08-22 09:44:27</date_created>
    </update>
    <update>
        <text>Creating a DB2 database</text>
        <date_created>2009-08-15 23:30:36</date_created>
    </update>
    <update>
        <text>Half-day today woohoo</text>
        <date_created>2009-08-06 01:28:19</date_created>
    </update>
    <update>
        <text>Looking forward to Snow Leopard being released</text>
        <date_created>2009-08-03 14:19:08</date_created>
    </update>
    <update>
        <text>Time to go home! Yipeeeee!</text>
        <date_created>2009-07-30 18:00:50</date_created>
    </update>
</updates>

Итак, вы можете активно использовать свое воображение и менять текст этих обновлений! Теперь внесем в наше Flex-приложение небольшие модификации для загрузки этих XML-данных и представления их пользователю. Кроме того, мы добавим программный код, обеспечивающий функционирование кнопки Refresh.

В листинге 4 показан модифицированный файл microblog.mxml.

Листинг 4. Файл microblog.mxml (модифицированный)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml"
  layout="absolute" width="600" height="400"
  creationComplete="updateData.send()">
      <mx:HTTPService url="updates.xml" id="updateData"
  resultFormat="e4x"/>

      <mx:Script>
      <![CDATA[
        import flash.events.Event;
        import flash.events.MouseEvent;

        private function statusChangeHandler(event:Event):void {
            remaining.text = String(140 - status.length);
        }

        private function refreshClickHandler(event:MouseEvent):void {
            updateData.send();
        }
      ]]>
      </mx:Script>

      <mx:XMLListCollection id="xmlUpdates"
  source="{updateData.lastResult.update}"/>

    <mx:Panel layout="absolute" left="10"
      right="10" top="10" bottom="10"
      title="Microblog">
        <mx:Label x="10" y="10" text="Update your status:"/>
        <mx:Label x="525" y="10" text="140" id="remaining"/>
        <mx:TextArea x="10" y="30" width="540" id="status"
          maxChars="140" change="statusChangeHandler(event);"/>
        <mx:Button x="499" y="80" label="Post" id="post"/>
        <mx:Label x="10" y="105" text="Previous updates:"/>
        <mx:VBox x="10" y="125" width="540" height="180"
          borderStyle="solid">
            <mx:Repeater id="r" dataProvider="{xmlUpdates}">
                <mx:Text text="{r.currentItem.text} (Posted: 
{r.currentItem.date_created})"/>
            </mx:Repeater>
        </mx:VBox>
        <mx:Button x="480" y="312" label="Refresh" id="refresh"
            click="refreshClickHandler(event);"/>
    </mx:Panel>    
</mx:Application>

Самый важный из новых элементов – элемент управления mx:HTTPService, который используется для загрузки XML-файла. Обратите внимание, что в теге mx:Application был создан новый атрибут с именем creationComplete, который вызывает метод send в вашем объекте mx:HTTPService. Он дает указание приложению загружать XML-файл, как только будет загружено само приложение.

Как это часто бывает при разработке в Flex, можно использовать множество различных методов для извлечения данных из XML-файла и подготовки их к использованию во Flex-приложении. В этом примере мы применяем элемент mx:XMLListCollection, который затем является поставщиком данных для элемента mx:Repeater. Элемент mx:Repeater воспроизводит содержащиеся в нем элементы управления для каждой итерации в используемом источнике данных. В нашем XML-файле имеется 9 записей, поэтому элемент mx:Repeater будет выводить по 9 элементов mx:Text внутри элемента mx:VBox.

И, наконец, мы добавили к кнопке Refresh обработчика событий (event handler), который перезагружает данные из XML-файла при каждом нажатии кнопки.

Откройте окно Command Prompt (Командная строка) и перейдите к папке проекта, как вы уже делали ранее. Теперь скомпилируйте приложение с помощью команды: mxmlc microblog.mxml.

Откройте файл microblog.swf. Результат вам не понравился, не так ли? Вы получили сообщение об ошибке, которое должно выглядеть, как показано на рис. 9. (Текстовая версия информации, представленной в окне на рис. 9.)

Рисунок 9. Ошибка ActionScript
Screen capture of ActionScript local file error in Adobe Flash Player window

В этом сообщении об ошибке говорится, что приложение Flash Player не загрузило локальный файл. Это результат действия функции безопасности, которая предотвращает злонамеренное использование приложений посредством локальной сети или Интернета. Поскольку вы загружаете файлы из файловой системы, необходимо сообщить Flex-компилятору, что вы не осуществляете развертывание приложения в сети: mxmlc -use-network=false microblog.mxml.

Теперь при исполнении результирующего файла microblog.swf вы должны увидеть более удовлетворительный результат (см. рис. 10).

Рисунок 10. Ваше приложение с поддержкой XML в действии
Screen capture of the XML-enabled application in action with items in 'Previous updaes' field

В следующем разделе вы свяжете свое Flex-приложение с Web-сервисом, который вы создали при изучении первой части этого цикла.


Интеграция с Web-сервисами pureXML

Вплоть до настоящего момента вы всегда запускали свой SWF-файл микроблога локально, из файловой системы. Для соблюдения политики безопасности, регламентирующей получение доступа к внешним Web-сервисам, в этом примере вы развернете свой SWF-файл на том же сервере приложений WebSphere Application Server, на котором развертываются ваши Web-сервисы.

Сначала необходимо модифицировать ваше приложение и указать ему, какие Web-сервисы следует использовать для отправки новых обновлений и для извлечения существующих обновлений. Откройте файл microblog.mxml и измените таким образом, чтобы он соответствовал коду в листинге 5.

Листинг 5. Файл microblog.mxml (окончательная версия)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml"
  layout="absolute" width="600" height="400"
  creationComplete="updateData.send()">
      <mx:HTTPService url="http://localhost:8080/MicroblogStatusUpdates
/rest/StatusUpdates/getAllUpdates" id="updateData"
  resultFormat="e4x"/>
    <mx:HTTPService url="http://localhost:8080/MicroblogStatusUpdates/
rest/StatusUpdates/insertUpdate" id="newUpdate"
  resultFormat="e4x"/>

      <mx:Script>
      <![CDATA[
        import flash.events.Event;
        import flash.events.MouseEvent;
       
        private function statusChangeHandler(event:Event):void {
            remaining.text = String(140 - status.length);
        }

      private function postClickHandler(event:MouseEvent):void {
        var params:Object = new Object();
        params.C_TEXT = status.text;
        params.C_DISPLAY = true;
        newUpdate.send(params);
        updateData.send();
  }

        private function refreshClickHandler(event:MouseEvent):void {
            updateData.send();
        }
      ]]>
      </mx:Script>

      <mx:XMLListCollection id="xmlUpdates"
  source="{updateData.lastResult.row}"/>

    <mx:Panel layout="absolute" left="10"
      right="10" top="10" bottom="10"
      title="Microblog">
        <mx:Label x="10" y="10" text="Update your status:"/>
        <mx:Label x="525" y="10" text="140" id="remaining"/>
        <mx:TextArea x="10" y="30" width="540" id="status"
          maxChars="140" change="statusChangeHandler(event);"/>
        <mx:Button x="499" y="80" label="Post" id="post"
  click="postClickHandler(event);"/>
        <mx:Label x="10" y="105" text="Previous updates:"/>
        <mx:VBox x="10" y="125" width="540" height="180"
          borderStyle="solid">
            <mx:Repeater id="r" dataProvider="{xmlUpdates}">
                <mx:Text text="{r.currentItem.DATA.update.text} (Posted:
 {r.currentItem.DATA.update.date_created})"/>
            </mx:Repeater>
        </mx:VBox>
        <mx:Button x="480" y="312" label="Refresh" id="refresh"
            click="refreshClickHandler(event);"/>
    </mx:Panel>    
</mx:Application>

Одно из основных изменений в этой версии исходного текста вашего приложения – удаление локального XML-элемента управления mx:HTTPService и замена его двумя элементами управления mx:HTTPService, которые используются для извлечения существующих обновлений состояния из Web-сервиса и отсылки в этот сервис новых обновлений состояния. При запуске приложения будет вызываться только элемент mx:HTTPService, который извлекает данные, поскольку для создания любых новых данных вам необходимо принимать данные от пользователя.

Следующее крупное изменение – введение функции postClickHandler в ActionScript-блоке mx:Script. В этой функции мы задаем новый объект и присваиваем значения его полям C_TEXT и C_DISPLAY. Важно, что эти параметры передавались в надлежащем регистре, поскольку в противном случае любые запросы к Web-сервису потерпят неудачу. Затем этот объект передается в качестве аргумента send-методу newUpdate элемента mx:HTTPService. И, наконец, для обновления представления данных осуществляется обращение к компоненту, который извлекает данные из Web-сервиса. Еще ниже расположен код, благодаря которому кнопка Post классифицирует эту функцию, если произошло событие click.

Способ, посредством которого наш Web-сервис отображает XML-данные, хранящиеся в базе данных pureXML, обуславливает необходимость внесения некоторых небольших изменений в источник компонента mx:XMLListCollection. Каждое обновление содержится на верхнем уровне внутри тега <row>, поэтому источник задается как updateData.lastResult.row.

Заключительный момент, на который необходимо обратить внимание. Мы также изменили поля, используемые в текстовом атрибуте повторяющегося компонента mx:Text. Это было сделано для обеспечения их соответствия формату XML, в котором представляет выходную информацию наш Web-сервис. Каждый строка в формате XML должна выглядеть, как показано в листинге 6.

Листинг 6. XML-представление каждой строки
<row>
    <DATA>
        <update>
            <text>Update text</text>
            <date_created>Date/time value</text>
        </update>
    </DATA>
</row>

Таким образом, вам нужно сообщить компоненту mx:Text, что ему следует посмотреть на тег r.currentItem.DATA.update.text и на тег r.currentItem.DATA.update.date_created, чтобы получить корректные значения для каждого из этих тегов.

Теперь откройте командную строку, перейдите к папке проекта и скомпилируйте исходный MXML-файл еще раз. Поскольку SWF-файл развертывается на сервере приложений и поскольку приложение использует данные из сети, а не локальные данные, то аргумент -use-network=false не применяется. Другими словами, команда для компиляции исходного текста снова выглядит следующим образом: mxmlc microblog.mxml.

На этот раз при попытке исполнить файл microblog.swf непосредственно на своем компьютере вы получите сообщение об ошибке, показанное на рис. 11. (Текстовая версия информации, представленной в окне на рис. 11.)

Рисунок 11. Ошибка безопасности
Screen capture of ActionScript security error in Adobe Flash Player window

Можно потратить массу времени на попытки конфигурирования междоменных политик на своем сервере приложений WebSphere Application Server, однако гораздо проще развертывать на сервере приложений сами SWF-файлы. Определите местонахождение файла microblog.swf в обозревателе Windows Explorer, нажмите на имени этого файла правой кнопкой, а затем выберите опцию Copy. Теперь откройте IBM Data Studio и установите соединение с базой данных MBLOG. Откройте представление Navigator (Window>Show View>Navigator). Вы должны увидеть три папки, третья из которых имеет имя MicroblogStatusUpdatesWeb. Раскройте эту папку, нажмите правой кнопкой на папке WebContent, а затем нажмите на опцию Paste (Вставить). Если вы сделали все это правильно, то файл microblog.swf будет сохранен на сервере, как показано на рис. 12.

Рисунок 12. Развертывание файла microblog.swf на сервере Application Server
Screen capture of navigator view of Data Studio with microblog.swf deployed to Application Server

Теперь запустите свой экземпляр сервера WebSphere Application Server Community Edition (WASCE). После этого откройте свой Web-браузер и перейдите по адресу: http://localhost:8080/MicroblogStatusUpdates/microblog.swf. Проверьте приложение микроблога и убедитесь в том, что оно действительно извлекает обновления состояния из базы данных. Кроме того, попытайтесь отправить новое обновление и убедитесь в том, что оно сохранено в базе данных и добавлено к списку предыдущих обновлений. Чтобы проверить работу кнопки Refresh создайте с помощью редактора DB2 Command Editor новую строку в базе данных, а затем нажмите на Refresh и посмотрите, извлекается ли эта новая строка.

Конечный продукт будет выглядеть, как на следующем снимке экрана (см. рис. 13).

Рисунок 13. Конечный продукт
Screen capture of the final microblog product with status and previous updates fields

Заключение

Из этой статье вы узнали, как использовать Adobe Flex для создания функционально насыщенного пользовательского интерфейса, обеспечивающего подключение к Web-сервисам на базе DB2, которые были созданы в первой части данного цикла.

В заключительной, третьей статье данного цикла вы будете брать данные из своих Web-сервисов pureXML и представлять их в различных форматах (в частности, в форматах RSS и HTML), а также интегрируете свое приложение с Twitter – весьма популярным Web-ресурсом для микроблогов.


Загрузка

ОписаниеИмяРазмер
Исходный код к статьеxmlflexpt2.source.zip3 KБ

Ресурсы

Научиться

Получить продукты и технологии

  • Web-страница продукта Adobe Flex: Загрузите среду разработки с открытым исходным кодом Flex SDK, которая использовалась в этой статье, или бесплатную пробную версия Adobe Flex Builder.(EN)
  • Автономная версия Adobe Flash Player: Загрузите сборки для отладки и выпуска (версия для отладки отлично подходит для отыскания ошибок во Flex-приложениях). (EN)
  • Adobe Open Source: Flex SDK:Получите среду разработки с открытым исходным кодом Flex SDK, которая использовалась в этой статье.(EN)
  • Adobe Labs: технологии Flex Framework Technologies: На этой странице представлена сводная информация от Adobe Labs по предварительным версиям Flex-продуктов, по экспериментальным технологиям, по утилитам для разработчиков и по проектам с открытым исходным кодом.(EN)

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=XML, Information Management, Open source
ArticleID=754515
ArticleTitle=Использование pureXML в Flex-приложении микроблога: Часть 2. Создание интерфейса пользователя приложения с помощью Flex
publish-date=08292011