В этом цикле для построения нашего учебного приложения применяется инструментарий с открытым исходным кодом Flex SDK. В разделе Ресурсы приведена ссылка на Web-страницу продукта Adobe Flex. Вам необходимо установить сервер баз данных DB2 в редакции DB2 Express-С. Ссылки на информацию по загрузке и установке DB2 Express-C приведены в разделе Ресурсы в конце этой статьи. Кроме того, для развертывания сервисов на Web-сервере вы будете использовать продукты IBM® Data Studio и WebSphere® Application Server Community Edition (далее - Community Edition). Информация о загрузке приведена в разделе Ресурсы.
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-приложения обычно распадается на две составляющие:
- Задание пользовательского интерфейса приложения на языке 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-приложения микроблога
В этом цикле статей для построения учебного приложения используется среда разработки с открытым исходным кодом Flex SDK. Теперь загрузите и установите пакет Flex SDK. На странице продукта Adobe Flex (ссылка приведена в разделе Ресурсы), вы найдете ссылку Get the Free Flex 3.x SDK (Получить бесплатно Flex 3.x SDK) в правом столбце (см. выделенную красным ссылку на рис. 2). Пакет Flex SDK можно загрузить с целевой страницы, на которую ведет эта ссылка.
Рисунок 2. Web-страница продукта Adobe Flex
После успешной загрузки zip-архива (что может потребовать определенного времени – размер загруженного мной файла составил 120 МБ) извлеките его содержимое в папку C:\flex. Пакет не содержит никакого исполняемого инсталлятора или чего-либо подобного. Прежде чем двигаться дальше, добавьте каталог, который содержит Flex-компилятор, в «пути» (path) своей системы. Это позволит вам компилировать исходный Flex-текст без необходимости каждый раз указывать местоположение Flex-компилятора.
В Панели управления раскройте пункт System (Система) и нажмите на закладку Advanced (Дополнительно). Нажмите на кнопку Environment Variables (Переменные среды) в левой нижней части окна (см. рис. 3).
Рисунок 3. Переменные среды
В разделе System Variables (Системные переменные) в нижней половине диалогового окна Environment Variables (Переменные среды) передвигайте ползунок до появления переменной Path (см. рис. 4).
Рисунок 4. Переменная среды Path
Дважды нажмите мышью на переменной Path. Откроется диалоговое окно Edit System Variable (Изменение системной перемен…). В поле Variable value (Значение переменной) оставьте существующее значение и добавьте к нему в конце следующую информацию: ;c:\flex\bin. См. пример на рис. 5.
Рисунок 5. Диалоговое окно Edit System Variable
Последовательно нажимайте на кнопку 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. Компилирование вашего первого приложения
В результате в вашей папке hello создается новый файл с именем hello.swf. Чтобы открыть этот файл с помощью командной строки, просто введите с клавиатуры его имя или нажмите два раза на этом имени в обозревателе Windows® Explorer.
Совет. Если в системе не установлено автономного приложения Adobe Flash Player, вы можете открыть SWF-файл с помощью своего Web-браузера. В качестве альтернативного варианта вы можете загрузить сборки (версии) автономного Adobe Flash Player для отладки и выпуска (отладочная версия отлично подходит для отыскания ошибок во Flex-приложениях). Ссылка приведена в разделе Ресурсы.
Приложение должно выглядеть следующим образом (см. рис. 7).
Рисунок 7. Наше первое приложение
Для переключения текста, отображаемого на кнопке (см. рис. 7), нажимайте на кнопку: нажатие на кнопку Hello! изменит текст кнопки на "World!", а нажатие на кнопку World! вернет обратно текст "Hello!". В следующем разделе вы создадите интерфейс для своего основного учебного приложения.
Разработка учебного приложения
Итак, приступим к разработке приложения микроблога. Сначала необходимо создать новую папку для приложения: c:\flexapps\microblog. Теперь с помощью своего текстового редактора создайте новый файл и сохраните этот файл под именем microblog.mxml в папке, которую вы только что создали. В этот файл вы поместите код своего приложения. Теперь приступим к созданию пользовательского интерфейса!
Создание пользовательского интерфейса
Первый шаг в разработке вашего Flex-приложения состоит в создании пользовательского интерфейса. Существует несколько способов для работы с интерфейсом пользователя в среде Flex; для компоновки интерфейса своего приложения вы будете применять MXML-компоненты. К концу этого раздела ваше приложение, дополненное функций подсчета оставшихся символов, будет выглядеть как на рис. 8.
Рисунок 8. Пользовательский интерфейс приложения микроблога
Чтобы создать этот интерфейс, поместите код из листинга 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
В этом сообщении об ошибке говорится, что приложение Flash Player не загрузило локальный файл. Это результат действия функции безопасности, которая предотвращает злонамеренное использование приложений посредством локальной сети или Интернета. Поскольку вы загружаете файлы из файловой системы, необходимо сообщить Flex-компилятору, что вы не осуществляете развертывание приложения в сети: mxmlc -use-network=false microblog.mxml.
Теперь при исполнении результирующего файла microblog.swf вы должны увидеть более удовлетворительный результат (см. рис. 10).
Рисунок 10. Ваше приложение с поддержкой XML в действии
В следующем разделе вы свяжете свое 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. Ошибка безопасности
Можно потратить массу времени на попытки конфигурирования междоменных политик на своем сервере приложений 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
Теперь запустите свой экземпляр сервера WebSphere Application Server Community Edition (WASCE). После этого откройте свой Web-браузер и перейдите по адресу: http://localhost:8080/MicroblogStatusUpdates/microblog.swf. Проверьте приложение микроблога и убедитесь в том, что оно действительно извлекает обновления состояния из базы данных. Кроме того, попытайтесь отправить новое обновление и убедитесь в том, что оно сохранено в базе данных и добавлено к списку предыдущих обновлений. Чтобы проверить работу кнопки Refresh создайте с помощью редактора DB2 Command Editor новую строку в базе данных, а затем нажмите на Refresh и посмотрите, извлекается ли эта новая строка.
Конечный продукт будет выглядеть, как на следующем снимке экрана (см. рис. 13).
Рисунок 13. Конечный продукт
Из этой статье вы узнали, как использовать Adobe Flex для создания функционально насыщенного пользовательского интерфейса, обеспечивающего подключение к Web-сервисам на базе DB2, которые были созданы в первой части данного цикла.
В заключительной, третьей статье данного цикла вы будете брать данные из своих Web-сервисов pureXML и представлять их в различных форматах (в частности, в форматах RSS и HTML), а также интегрируете свое приложение с Twitter – весьма популярным Web-ресурсом для микроблогов.
| Описание | Имя | Размер | Метод загрузки |
|---|---|---|---|
| Исходный код к статье | xmlflexpt2.source.zip | 3 KБ | HTTP |
Научиться
- Оригинал статьи (EN).
- Реализация фотоальбома Facebook с использованием Flex SDK (Джо Леннон, developerWorks, ноябрь 2008 г.). Узнайте, как разработать приложение Facebook в Adobe Flex, которое демонстрирует слайд-шоу фотографий пользователя Facebook.(EN)
- Интеграция Flex-приложения с IBM Mashup Center (Ronald C. Leung, developerWorks, июнь 2009 г.). Узнайте, как можно использовать приложение Adobe Flex в IBM Mashup Center.(EN)
- Создание Flex-компонента (Sandeep Malik, developerWorks, июль 2009 г.): Вводная статья, подробно рассматривающая механизм Flex-рендеринга.(EN)
- Использование Flex SDK с Mate и PHP (Nathan A. Good, developerWorks, июль 2009 г.): Научитесь совместно использовать инструменты разработки Eclipse PHP (PDT) и Flex SDK для построения приложения с помощью инфраструктуры Mate.(EN)
- Насыщенные Интернет-приложения с Grails (Michael Galpin, developerWorks, февраль 2009 г.): Этая статья, первая в цикле из двух частей, учит создавать серверные компоненты Web-сервисов с помощью инфраструктуры Web-приложений Groovy Grails. Кроме того, вы познакомитесь с RIA-приложением, разработанным с помощью инфраструктуры Adobe Flex.(EN)
- Откройте для себя мощь Flex и CSS (Dan Orlando, developerWorks, июль 2009 г.): Использование мощных возможностей CSS, которые уже встроены в инфраструктуру Adobe Flex .(EN)
- Центр разработчиков Adobe Flex Developer Center:
Ознакомьтесь со всей новейшей информацией по Flex.(EN)
- DB2 9 pureXML: Обзор и быстрое начало работы: (Redbook): Познакомьтесь с введением в гибридные сервисы XML-данных в продукте DB2 9 for Linux™, UNIX®, and Windows.(EN)
- Доступ к DB2 посредством Web-сервисов: Создание Web-сервисов в среде Windows для доступа к DB2 (Quentin Presley, developerWorks, март 2003 г.): В статье показано, как легко сделать данные DB2 доступными с помощью Web-сервисов. В ней рассматривается использование конфигурации Application Developer WebSphere Studio V5 на платформе Windows для разработки и тестирования Web-сервисов для данных DB2. (EN)
- Сертификация IBM по XML: Узнайте, как получить сертификат IBM-Certified Developer in XML (сертифицированный корпорацией IBM разработчик по XML и связанным технологиям).(EN)
Получить продукты и технологии
- 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)
Джо Леннон - 24-летний разработчик ПО из города Корк, Ирландия. Джон является автором вскоре выходящей в издательстве Apress книги Beginning CouchDB, а также нескольких технических статей и руководств на IBM developerWorks. В свободное время Джо любит играть в футбол, возиться с гаджетами и ставить игровые рекорды на своей Xbox 360.