IBM®
Перейти к тексту
    в России и странах СНГ [изменить]    Условия использования
 
 
   
    Главная страница    Продукты    Услуги и решения    Поддержка и загрузка    Мой профиль    
Перейти к тексту

developerWorks Россия  >  WebSphere | SOA и Web-сервисы  >

Объединение мощных возможностей WebSphere sMash и Adobe Flex

developerWorks
Опции документа

Опции документа, требующие включения JavaScript, не отображаются

Обсудить

Исходные тексты примера


Выскажите мнение об этой странице

Помогите нам улучшить содержание


Уровень сложности: средний

Гордж Расилло, инженер по программному обеспечению, IBM
Майк Барр, старший инженер по программному обеспечению, IBM

09.02.2009

Journal icon Сегодня множество информационных задач – от получения регионального прогноза погоды до обмена видеофайлами с пятью сотнями самых близких друзей – решается с помощью приложений Web 2.0. В связи с расширением масштабов применения технологий Web 2.0 корпорация IBM® выпустила продукт WebSphere® sMash – фреймворк для разработки и исполнения приложений, основанный на таких базовых концепциях, как динамичная разработка, простота и RESTful-интерфейсы. В большинстве приложений WebSphere sMash пользовательские интерфейсы реализованы с помощью Ajax, HTML или Dojo Toolkit. В данной статье на примере простого «тренировочного» приложения показано, как реализовать в приложении поддержку пользовательского интерфейса Web 2.0, написанные в среде Adobe Flex. Предоставлены серверные реализации на двух языках – Groovy и PHP. Данная статья ориентирована на разработчиков среднего уровня, имеющих опыт использования REST и Adobe Flex Development Kit.

Из журнала IBM WebSphere Developer Technical Journal.

Введение

Термин Web 2.0 часто используется в слишком широком смысле. Вероятно, этот термин лучше всего определить как архитектурный стиль, основанный на использовании «быстрых» интерфейсов прикладного программирования, таких как REST (REpresentational State Transfer) для создания потребительских приложений.

В качестве архитектурного стиля Web 2.0 не диктует необходимости применения определенных технологий ни на стороне клиента (браузера), ни на стороне сервера. В сущности, самой привлекательной характеристикой приложений Web 2.0 является четкое разделение клиентских и серверных технологий. Это разделение позволяет разработчику выбирать клиентские и серверные технологии на основе их соответствия решаемой задаче, без необходимости применения единого решения на все случаи жизни.

На стороне сервера фреймворк WebSphere sMash особенно хорошо подходит для специалистов с опытом разработки на Java™, ориентированных на быстрое получение результата (обычно ассоциируемое с языками динамических сценариев). Среда WebSphere sMash поддерживает языки PHP и Groovy (язык динамических сценариев с синтаксисом Java), благодаря чему является доступной для широкого круга разработчиков.

Хотя WebSphere sMash не диктует обязательность применения определенных клиентских технологий, приложения WebSphere sMash чаще всего комплектуются пользовательскими интерфейсами на основе HTML/Ajax, иногда расширенных с помощью Dojo Toolkit. Хоти указанные технологии отвечают требованиям многих пользовательских интерфейсов, некоторым приложениям необходима более высокая степень интерактивности и более развитой фреймворк. Именно таким фреймворком является продукт Adobe Flex v. 3, который широко применяется для создания т.н. RIA-приложений (Rich Internet Application).

В данной статье некоторые подходы к сочетанию возможностей WebSphere sMash и Adobe Flex рассматриваются на примере простого приложения WebSphere sMash, для которого с помощью продукта Adobe Flex создается визуально привлекательный пользовательский интерфейс. Указанное приложение намеренно сделано весьма простым, что позволяет более наглядно продемонстрировать технологии объединения возможностей WebSphere sMash к Adobe Flex. Согласно философии WebSphere sMash, все коммуникации между браузером и сервером основаны на RESTful-интерфейсах и используют стандартное кодирование данных. Для демонстрации гибких возможностей WebSphere sMash и Adobe Flex в статье показано несколько разновидностей тренировочного приложения:

  • Приложение WebSphere sMash с использованием языка Groovy или PHP.
  • Передача данных между кодом WebSphere sMash и кодом Adobe Flex с использованием формата XML или JSON.


В начало


Использование WebSphere sMash

Продукт WebSphere sMash, созданный в рамках открытого инкубаторного проекта Project Zero, основан на трех базовых принципах: простота, динамичность и скорость. Благодаря указанным атрибутам этот мощный фреймворк позволяет легко создавать приложения, поддерживающие многократное использование и не требующие значительных усилий для адаптации к изменениям. Среда WebSphere sMash ориентирована на динамичную разработку, поэтому многие компании, которым необходимо срочно создать новые приложения, применяют сегодня эту среду для быстрой и простой разработки стабильных приложений. Средства WebSphere sMash для управления зависимостями устраняют множество препятствий, возникающих при развертывании приложения. Это существенно упрощает развертывание приложений в различных средах, избавляя от необходимости разрешения classpath-зависимостей. В отличие от многих других сред для разработки приложений, в состав WebSphere sMash включены только действительно необходимые модули, что существенно сокращает итоговые размеры приложений и обеспечивает их быструю инициализацию. Таким образом, WebSphere sMash – это действительно превосходная среда для динамичной разработки.

Web 2.0 и программирование в REST-стиле

Под термином REST многие ошибочно подразумевают соответствующую архитектуру; в данном случае REST – это скорее интерфейс прикладного программирования, на котором основана архитектура Web 2.0. REST-интерфейсы представляют традиционные операции list/create/read/update/delete с помощью стандартных HTTP-методов GET, POST, PUT и DELETE. Примеры применения некоторых из перечисленных методов описываются в последующих разделах.

Технологии Web 2.0 обеспечивают реальные преимущества – они позволяют компаниям представлять в Интернете свои внутренние сервисы и источники данных в новых форматах, более простых для использования приложениями браузерного типа (например, с помощью интерфейсов АТОМ, JSON, RSS, RESTful). Такие компании, как Google и Amazon, занимают ведущее положение в области API-интерфейсов Web 2.0, которые позволяют разработчикам использовать существующие функциональные возможности и создавать приложения на их основе, т.е. с минимальными усилиями.

AppBuilder

AppBuilder – это инструмент для разработки приложений в среде WebSphere sMash (zip-файл, сопровождающий эту статью, был упакован с помощью AppBuilder). AppBuilder позволяет быстро конструировать приложения благодаря следующим функциям: встроенный редактор со средствами выделения синтаксических конструкций, возможность запуска/остановки сервера, доступ к журналу исполнения, возможность трассировки с использованием консоли. Инструмент AppBuilder доступен для загрузки на Web-сайте Project Zero (см. раздел Ресурсы).


Рисунок 1. Возможности AppBuilder для выделения синтаксиса в редакторе приложений
Рисунок 1. Возможности AppBuilder для выделения синтаксиса в редакторе приложений

Рисунок 2. Закладка Runtime log в редакторе файлов
Рисунок 2. Закладка Runtime log в редакторе файлов

Groovy и PHP

Основная задача этой статьи – расширение потребительских возможностей существующего приложения посредством построения его фронтальной части в среде Adobe Flex, поэтому в статье охвачены только определенные аспекты инфраструктуры WebSphere sMash.

Один из атрибутов среды WebSphere sMash – возможность очень быстрого создания приложения, основанная на использовании мощных языков сценариев Groovy и PHP.

Наличие соответствующих встроенных соглашений WebSphere sMash существенно упрощает и рационализирует создание ресурса в приложении. Любой сценарий Groovy или PHP, помещенный в каталог приложения WebSphere sMash с именем app/resources, автоматически представляется как RESTful-ресурс:


Таблица 1. Сценарии, представленные в виде RESTful-ресурсов
HTTP-методURIМетод сценария
GET/resources/<resource>onList()
POST/resources/<resource>onCreate()
GET/resources/<resource>/<id>onRetrieve()
PUT/resources/<resource>/<id>onUpdate()
DELETE/resources/<resource>/<id>onDelete()

Дополнительная информация: Project Zero: модель программирования и соглашения о ресурсах (REST) (EN).

Наша первая задача будет состоять в создании серверного компонента для приложения to-do list.

Создание сервиса to-do с помощью Groovy

Groovy – это язык сценариев, ориентированный на программистов, не способных обходиться без Java. Благодаря простой интеграции с существующим кодом Java и возможностям для написания сценариев, язык Groovy гарантирует скорость и простоту разработки.

Для хранения пользовательского списка to-do list используется область app zone в глобальном контексте. При этом используются следующие методы:

  • onList: создает список элементов to-do.
  • onCreate: создает новый элемент в списке to-do list посредством добавления указанного элемента.
  • onRetrieve: помещает элемент в список на основе идентификатора index ID.
  • onDelete: удаляет элемент из списка to-do list

В исходном варианте рассматриваемое приложение было создано в расчете на возвращение данных в формате XML. Показанный в этой статье код практически идентичен типовому REST-ресурсу из упомянутой выше статьи на Web-сайте Project Zero. Полный исходный текст WebSphere sMash для показанных ниже фрагментов: CombiningThePowerOfWSWithAdobeFlex/src/TodoService-1.0.0/TodoService/app/resources/todos_xml_grovy.groovy (см. раздел Загрузка ).


Листинг 1. Обработчик событий onList()
def onList() {
    logger.INFO {"onList(): called"}
 
    def todos = app.todosXML[]
 
    if (todos == null) {
        todos = []
    }
    else {
        todos = todos.values()
    }
 
    outputXML(todos)
    logger.INFO {"onList(): returning ${todos}"}
}


Листинг 2. Обработчик событий onCreate()
def onCreate() {
    logger.INFO {"onCreate(): called"}
 
    def item = request.params.item[]
    request.status = HttpURLConnection.HTTP_BAD_REQUEST
 
    if (item != null && item.length() > 0) {
        def todos = app.todosXML[]
        def index = app.index[]
 
        if (todos == null) {
            todos = [:]
            index = 0
        }
 
        index++
        todos.put(index, [id:index, value:item])
 
        app.todosXML = todos
        app.index = index
 
        request.status = HttpURLConnection.HTTP_CREATED
        request.headers.out.Location = request.uri[] + '/' + index
 
        logger.INFO {"onCreate(): created id ${index} -> ${item}"}
    }
}


Листинг 3. Обработчик событий onRetrieve()
def onRetrieve() {
    logger.INFO {"onRetrieve(): called"}
 
    def id = request.params.todos_xml_groovyId[]
 
    if (id != null) {
        def todos = app.todosXML[]
        def value = todos.get(id.toInteger())
 
        if (value != null) {
            outputXML(value)
            logger.INFO {"onRetrieve(): returning ${value}"}
            return
        }
    }
 
    send404()
}


Листинг 4. Обработчик событий onDelete()
def onDelete() {
    logger.INFO {"onDelete(): called"}
 
    def id = request.params.todos_xml_groovyId[]
 
    if (id != null) {
        def todos = app.todosXML[]
 
        if (todos.remove(id.toInteger())) {
            app.todosXML = todos
            logger.INFO {"onDelete(): deleted ${id}"}
            return
        }
    }
 
    send404()
}


Листинг 5. Рендеринг отклика в методе outputXML
def outputXML(data) {
    logger.INFO {"converting ${data} to XML"}
 
    request.headers.out.'Content-Type'='application/xml'
    request.view = 'XML'
    request.xml.output = data
    render()
}

Создание сервиса to-do с помощью PHP

PHP – это универсальный язык сценариев (см. раздел Ресурсы). Показанная в данном разделе PHP-реализация функционально эквивалентна Groovy-реализации, продемонстрированной выше. Между этими двумя реализациями существуют лишь некоторые синтаксические различия. В зависимости от сложности сериализуемых объектов непрямой рендеринг обрабатывается средствами WebSphere sMash.

Полный исходный текст WebSphere sMash для показанных ниже фрагментов: CombiningThePowerOfWSWithAdobeFlex/src/TodoService-1.0.0/TodoService/app/resources/todos_xml_php.php (см. раздел Загрузка).


Листинг 6. Метод onList())
function onList() {
 
    $todos = zget("/app/todos_xml_php");
 
    if ($todos == null) {
        $todos = array();
    }
 
    zput('/request/view', 'XML');
    zput('/request/xml/output', array_slice($todos, 0));
    zput('/request/xml/rootelement', 'arraylist');
    render_view();
}


Листинг 7. Метод onCreate()
function onCreate() {
 
    $item = zget("/request/params/item");
    zput("/request/status", 400);
 
    if ($item != null && strlen($item) > 0) {
        $todos = zget("/app/todos_xml_php");
        $index = zget("/app/index");
 
        if ($todos == null) {
            $todos = array();
            $index = 0;
        }
 
        $index++;
        $todos[$index] = array('id' => $index, 'value' => $item);
 
        zput("/app/todos_xml_php", $todos);
        zput("/app/index", $index);
 
        zput("/request/status", 201);
 
        $uri = zget("/request/uri");
        zput("/request/headers/out/Location", "$uri/$index");
    }
}


Листинг 8. Метод onRetrieve()
function onRetrieve() {
 
    $id = zget("/request/params/todos_xml_phpId");
 
    if ($id != null) {
        $todos = zget("/app/todos_xml_php");
        $value = $todos[$id];
 
        if ($value != null) {
            zput('/request/view', 'XML');
            zput('/request/xml/output', $value);
            render_view();
            return;
        }
    }
 
    // Error handling
    zput("/request/status", 404);
    echo "An error occurred while processing your request";
}


Листинг 9. Метод onDelete()
function onDelete() {
 
    $id = zget("/request/params/todos_xml_phpId");
 
    if ($id != null) {
        $todos = zget("/app/todos_xml_php");
        unset($todos[$id]);
 
        zput("/app/todos_xml_php", $todos);
        return;
    }
 
    // Error handling
    zput("/request/status", 404);
    echo "An error occurred while processing your request";
}

Формат JSON

В соответствии со своей природой Web 2.0 среда WebSphere sMash помимо формата XML поддерживает формат JSON (JavaScript™ Object Notation) (дополнительная информация о формате JSON приведена в разделе Ресурсы). Одно из существенных преимуществ языка Groovy – простота парсинга при использовании форматов XML и JSON, что избавляет разработчика от значительных затрат времени на написание соответствующего кода.

Среда WebSphere sMash способна осуществлять рендеринг HTTP-отклика с использованием прямого рендеринга через API или непрямого рендеринга. Для создания выходной информации в форматах XML и JSON в этой статье используется только непрямой рендеринг. В общем случае, вызов рендерера осуществляется следующим образом:

  1. Задайте значение /request/view в глобальном контексте Global Context соответствующего рендерера.
  2. Укажите дополнительные значения для этого рендерера в глобальном контексте GlobalContext, где это необходимо.
  3. Вызовите рендерер zero.core.views.ViewEngine.render().

В приведенном выше примере используются только XML-данные. В следующем разделе описывается, как реализовать вывод данных в формате JSON посредством минимальной модификации программного кода на языках Groovy и PHP.

Полные исходные тексты WebSphere sMash для вывода в формате JSON: CombiningThePowerOfWSWithAdobeFlex/src/TodoService-1.0.0/TodoService/app/resources/todos_json_groovy.groovy и CombiningThePowerOfWSWithAdobeFlex/src/TodoService-1.0.0/TodoService/app/resources/todos_json_php.php (см. раздел Загрузка).


Листинг 10. Вывод в формате JSON при использовании Groovy
def outputJson(data) {
    logger.INFO {"converting ${data} to JSON"}
 
    request.headers.out.'Content-Type'='application/json'
    request.view = 'JSON'
    request.json.output = data
    render()
}


Листинг 11. Вывод в формате JSON при использовании PHP
zput('/request/view', 'JSON');
zput('/request/json/output', $todos);
render_view();



В начало


Использование Adobe Flex

До настоящего момента в статье описывалось построение серверной части приложения. Теперь мы рассмотрим построение браузерной части приложения, которая должна взаимодействовать с серверной частью, созданной ранее с помощью WebSphere sMash.

Среда Adobe Flex обеспечивает создание платформо-независимых RIA-приложений (Rich Internet Application), которые могут быть единообразно развернуты во всех основных браузерах, десктопных средах и операционных системах (см. раздел Ресурсы). Эти RIA-приложения могут исполняться в браузерах с помощью плеера Adobe Flash или в десктопных среде с помощью инструмента Adobe Integrated Runtime (AIR).

Полные исходные тексты Adobe Flex для фрагментов кода: CombiningThePowerOfWSWithAdobeFlex/src/todoJSON.mxml и CombiningThePowerOfWSWithAdobeFlex/src/todoXML.mxml (см. раздел Загрузка).

Построение приложения в среде Adobe Flex осуществляется следующим образом:

  1. Получение данных из среды WebSphere sMash

    Adobe Flex обеспечивает простую загрузку внешних данных с помощью компонента HTTPService (см. раздел Ресурсы). В статье показаны два способа выполнения HTTP-запросов – для XML и для JSON, соответственно. Adobe Flex обладает встроенной поддержкой XML (т.е. использует для парсинга данных технологию ECMAScript for XML (e4x)), поэтому в данном случае разработчику приходится писать меньше программного кода. Для поддержки сериализации JSON-данных в среде Adobe Flex необходимо загрузить библиотеку corelib (см. раздел Ресурсы). На показанном на Листинге 12 примере кода создается HTTPService-компонент и обеспечивается его доступность для приложения. Это позволяет удалять, извлекать и создавать элементы в списке to-do list с использованием XML-данных, предоставляемых приложением WebSphere sMash.

    Показанный на Листинге 12 MXML-код Adobe Flex широко использует механизмы связывания Adobe Flex (имена переменных в фигурных скобках) для динамической замены имен и идентификаторов ресурсов при отсылке запросов в реальном времени. Среда WebSphere sMash отображает URL-адреса, специфицированные в элементах <mx:HTTPService>, в созданные ранее сценарии Groovy или PHP. Выбор метода (функции) из этих сценариев, подлежащего вызову для обработки соответствующего запроса, осуществляется на основе атрибутов и URL-адресов методов (функций).

    Атрибуты результата и ошибки предоставляют код, подлежащий исполнению в случае наступления условия "успешное завершение" или "ошибка", соответственно. Автоматическая обработка данных, возвращаемых вызовами list и retrieve, обеспечивается посредством связывания данных в любом участке MXML-кода. Обновление отображаемых данных после завершения вызовов create и delete обеспечивается посредством инициирования следующего вызова list.



    Листинг 12. Создание HTTPService-компонента с использованием XML
    <!-- REST call to retrieve list of todo items -->
    <mx:HTTPService id="listTodosHS"
       url="/resources/{resource}" method="GET"
       resultFormat="e4x"/>
    
    <!-- REST call to fetch details on an item -->
    <mx:HTTPService id="retrieveTodoHS"
       url="/resources/{resource}/{idToRetrieve}" method="GET"
       resultFormat="e4x"
       result="detailsBox.visible = true"/>
    
    <!-- REST call to add a new todo item -->
    <mx:HTTPService id="createTodoHS"
       url="/resources/{resource}" method="POST"
       result="listTodosHS.send()"
       fault="listTodosHS.send()">
          <mx:request xmlns="">
             <item>{itemToAdd.text}</item>
          </mx:request>
    </mx:HTTPService>
    
    <!-- REST call to delete a todo item -->
    <mx:HTTPService id="deleteTodoHS"
       url="/resources/{resource}/{idToDelete}" method="POST"
       result="listTodosHS.send()"
       fault="listTodosHS.send()"/>

    Библиотека JSON позволяет обеспечить аналогичную функциональность для парсинга JSON-данных, предоставляемых приложением WebSphere sMash (Листинг 13). Основное различие между JSON-кодом и XML-кодом на Листинге 12 – наличие в обработчиках результатов list и retrieve явных вызовов для декодирования JSON-данных.



    Листинг 13. Создание HTTPService-компонента с использованием JSON
    <!-- REST call to retrieve list of todo items -->
    <mx:HTTPService id="listTodosHS"
      url="/resources/{resource}" method="GET"
      resultFormat="text"
      result="todoItems = JSON.decode(listTodosHS.lastResult as String);"/>
    
    <!-- REST call to fetch details on an item -->
    <mx:HTTPService id="retrieveTodoHS"
      url="/resources/{resource}/{idToRetrieve}" method="GET"
      resultFormat="text"
     result="detailItem = JSON.decode(retrieveTodoHS.lastResult as String);
      detailsBox.visible = true;"/>
    
    <!-- REST call to add a new todo item -->
    <mx:HTTPService id="createTodoHS"
      url="/resources/{resource}" method="POST"
      result="listTodosHS.send()"
      fault="listTodosHS.send()">
          <mx:request xmlns="">
              <item>{itemToAdd.text}</item>
          </mx:request>
    </mx:HTTPService>
    
    <!-- REST call to delete a todo item -->
    <mx:HTTPService id="deleteTodoHS"
    0  url="/resources/{resource}/{idToDelete}" method="POST"
      result="listTodosHS.send()"
      fault="listTodosHS.send()"/>

  2. Парсинг и отображение данных

    Как показано на Листинге 14, компоненты Adobe Flex упрощают обработку результатов HTTPService-запроса.



    Листинг 14. Обработка результатов HTTPService-запроса
    <!-- todo items list -->
    <mx:HBox left="10" horizontalGap="15">
    <mx:VBox backgroundColor="white"
       paddingBottom="5" paddingLeft="5"
       paddingRight="5" paddingTop="5"
       cornerRadius="5" borderThickness="1"
       borderStyle="solid" borderColor="black"
       dropShadowEnabled="true" shadowDistance="3"
       shadowDirection="right">
         <mx:Text text="Your todo items:" fontWeight="bold" fontSize="14"/>
            <mx:Repeater id="todoItemsRp"
               dataProvider="{listTodosHS.lastResult.item}">
               <mx:HBox width="100%" verticalAlign="middle"
                  paddingBottom="3" paddingLeft="3"
                  paddingRight="3" paddingTop="3"
                  rollOver="event.currentTarget.setStyle
                                         ('backgroundColor', 0xffff88)"
                  rollOut="event.currentTarget.clearStyle
                                        ('backgroundColor')">
                  <mx:CheckBox click="deleteItem(event)"
                     toolTip="Click to delete item"/>
                  <mx:Text text="{todoItemsRp.currentItem.value}"/>
                  <mx:LinkButton label="details"
                     fontSize="8" textDecoration="underline"
                     click="getItemDetails(event)"/>
               </mx:HBox>
            </mx:Repeater>
    
            <mx:Spacer height="10"/>
    
    <mx:HBox width="100%" verticalAlign="middle">
       <mx:Text text="Add:"/>
       <mx:TextInput id="itemToAdd"
          toolTip="Press Enter to add the new item."
          enter="createTodoHS.send(); event.currentTarget.text = ''"/>
    </mx:HBox>
    </mx:VBox>
    
    <!-- details for an individual item -->
    <mx:VBox id="detailsBox" visible="false" showEffect="{fade}"
       backgroundColor="white"
       paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"
       cornerRadius="5" borderThickness="1"
       borderStyle="solid" borderColor="black"
       dropShadowEnabled="true" shadowDistance="3"
       shadowDirection="right">
       <mx:Text text="Item details:" fontWeight="bold" fontSize="14"/>
       <mx:Text text="ID: {retrieveTodoHS.lastResult.id}"/>
       <mx:Text text="Value:"/>
       <mx:TextArea text="{retrieveTodoHS.lastResult.value}"/>
    </mx:VBox>
    </mx:HBox>

Обработка событий в Adobe Flex

Adobe Flex использует ActionScript, объектно-ориентированный язык сценариев на базе технологии ECMAScript (см. раздел Ресурсы), который позволяет создавать динамические пользовательские интерфейсы для обеспечения интерактивности, например, для управления событиями (см. Листинг 15). Обратите внимание, что в функции creationComplete() необходимы дополнительные шаги для согласования способа генерации вызовов HTTP REST в среде Adobe Flex с результатами, которые рассчитывает получить среда WebSphere sMash.


Листинг 15. Пример кода Adobe Flex
/**
 * Logic to run after the mx:Application has been created.
 */
 internal function creationComplete():void {
    // initial population of the list
    listTodosHS.send();

    // Flex doesn't know how to generate an HTTP DELETE.
    // Fortunately, sMash/Zero will interpret an HTTP POST with
    // an X-Method-Override: DELETE header as a DELETE.
    deleteTodoHS.headers['X-Method-Override'] = 'DELETE';

    // set a dummy body for the POST so Flex won't change it to
    // a GET
   deleteTodoHS.request['foo'] = 'I really do want a POST';
  }


 /**
  * Called when the user requests details for an item.
  */
  internal function getItemDetails(event:MouseEvent):void {
     // find id of item to be deleted
     var lb:LinkButton = event.currentTarget as LinkButton;
     var i:int = lb.parent.parent.getChildIndex(lb.parent);
     idToRetrieve = listTodosHS.lastResult.item[i-1].id;

     // hide details box while we're getting details
     detailsBox.visible = false;

     // ask server for details
     retrieveTodoHS.send();
  }


  /**
   * Called when the user checks on a box to delete an item
   */
  internal function deleteItem(event:MouseEvent):void {
     // find id of item to be deleted
     var cb:CheckBox = event.currentTarget as CheckBox;
     var i:int = cb.parent.parent.getChildIndex(cb.parent);
     idToDelete = listTodosHS.lastResult.item[i-1].id;

     // hide details if deleting same item
     if (retrieveTodoHS.lastResult != null &&
     idToDelete == retrieveTodoHS.lastResult.id)
     detailsBox.visible = false;

     // tell server to delete item, list will be updated when
     // delete finishes
     deleteTodoHS.send();
  }

В загружаемом файле (см. раздел Загрузка), содержится полный исходный код для данной тренировочной программы.



В начало


Обобщение предшествующих рассуждений

Adobe Flex не располагает готовой поддержкой для сериализации JSON-данных. Для реализации этой поддержки необходимо загрузить библиотеку corelib с Web-сайте Adobe и разместить ее в каталоге libs приложения WebSphere sMash (см. раздел Ресурсы). Для развертывания приложения Adobe Flex в каталоге public приложения WebSphere sMash должно присутствовать приложение (.swf). Исходный код, включенный в данную статью, содержит два варианта приложения Adobe Flex, в первом из которых используется формат XML, а во втором – формат JSON. Если сервер WebSphere sMash запущен, то к этим приложениям можно обратиться по следующим ссылкам: http://localhost:8080/todoXML.html или http://localhost:8080/todoJSON.html, соответственно.

Пояснения по следующим рисункам.

  • Вид загруженного приложения после вызова метода onList() (рис. 3).
  • Браузерная часть Adobe Flex посылает запрос HTTP POST для добавления нового элемента в список to-do list (рис. 4).
  • Интерфейс Adobe Flex контролирует наличие события onclick (которое возникает при установке флажка в контрольном окошке) для удаления элемента из списка to-do list (рис. 5).
  • При нажатии пользователем на элемент списка to-do list осуществляется вызов метода onRetrieve() (рис. 6 и рис. 7).
  • Данное приложение поддерживает переключение между реализациями на Groovy и PHP (рис. 8).

Рисунок 3. Вид приложения после вызова метода onList()
Рисунок 3. Вид приложения после вызова метода onList()

Рисунок 4. Добавление пункта в список to-do list
Рисунок 4. Добавление пункта в список to-do list

Рисунок 5. Удаление пункта из списка to-do list
Рисунок 5. Удаление пункта из списка to-do list

Рисунок 6. Пользователь выбрал пункт в списке to-do list
Рисунок 6. Пользователь выбрал пункт в списке to-do list

Рисунок 7. Вид приложения после вызова метода onRetrieve()
Рисунок 7. Вид приложения после вызова метода onRetrieve()

Рисунок 8. Приложение может переключаться между Groovy и PHP
Рисунок 8. Приложение может переключаться между Groovy и PHP


В начало


Заключение

WebSphere sMash – это простой, но тем не менее мощный фреймворк для быстрого создания Web-приложений. Благодаря поддержке двух динамических языков сценариев (Groovy и PHP) среда WebSphere sMash позволяет быстро приступить к разработке приложений Web 2.0. В статье продемонстрированы стандартизированные RESTful-методики, которые вы сможете использовать для объединения серверной логики WebSphere sMash с функционально-насыщенными, обладающими высокой степеньюю интерактивности пользовательскими интерфейсами, написанными в среде Adobe Flex. Для получения более подробной информации о затронутых в этой статье темах обратитесь к разделу Ресурсы.




В начало


Загрузка

ОписаниеИмяРазмерМетод загрузки
Code samplesmash-flex-sample.zip427 KBHTTP
Информация о методах загрузки


Ресурсы



Об авторах

Гордж Расилло (Jorge Rasillo), инженер по программному обеспечению в отделении IBM Austin. В настоящее время он является членом группы AIX Scale Out and Solutions и работает над решением Blue Cloud. В свободное от работы и семейных обязанностей время Г. Расилло занимается триатлоном.


Майк Барр (Mike Burr), инженер по программному обеспечению в отделении IBM Raleigh. В настоящее время М. Барр является сотрудником подразделения WebSphere Technology Institute и занимается исследованием возможных направления развития линейки продуктов IBM WebSphere.




Выскажите мнение об этой странице


Пожалуйста, найдите минутку и заполните форму, чтобы повысить уровень сервиса.



 


 


 


Поделиться этой статьей:

забобрить забобрить memori сохранить в memori




В начало


IBM обладает всеми авторскими правами касательно информации, расположенной на developerWorks. Использование информации приведенной на этом ресурсе без явного письменного разрешения от IBM или первоначального автора запрещены. Если Вы желаете использовать информацию с developerWorks, пожалуйста воспользуйтесь регистрационной формой для того, чтобы связаться с нами запрос на использование материалов developerWorks Россия.
    IBM в России Конфиденциальность Контакты