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

    image
    Сегодня множество информационных задач – от получения регионального прогноза погоды до обмена видеофайлами с пятью сотнями самых близких друзей – решается с помощью приложений Web 2.0. В связи с расширением масштабов применения технологий Web 2.0 корпорация IBM выпустила продукт WebSphere sMash – фреймворк для разработки и исполнения приложений, основанный на таких базовых концепциях, как динамичная разработка, простота и RESTful-интерфейсы. В большинстве приложений WebSphere sMash пользовательские интерфейсы реализованы с помощью Ajax, HTML или Dojo Toolkit.

    В данном посте на примере простого «тренировочного» приложения показано, как реализовать в приложении поддержку пользовательского интерфейса Web 2.0, написанные в среде Adobe Flex. Предоставлены серверные реализации на двух языках – Groovy и PHP. Также вы cможете скачать «тренировочный» файл и задать свои вопросы представителям IBM.

    Введение


    Термин 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 для выделения синтаксиса в редакторе приложений
    image

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

    Groovy и PHP

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

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

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

    Таблица 1. Сценарии, представленные в виде RESTful-ресурсов
    image
    Дополнительная информация: 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

    <mx:HTTPService id=«listTodosHS»
    url="/resources/{resource}" method=«GET»
    resultFormat=«e4x»/>


    <mx:HTTPService id=«retrieveTodoHS»
    url="/resources/{resource}/{idToRetrieve}" method=«GET»
    resultFormat=«e4x»
    result=«detailsBox.visible = true»/>


    <mx:HTTPService id=«createTodoHS»
    url="/resources/{resource}" method=«POST»
    result=«listTodosHS.send()»
    fault=«listTodosHS.send()»>
    <mx:request xmlns="">
    {itemToAdd.text}
    </mx:request>
    </mx:HTTPService>


    <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

    <mx:HTTPService id=«listTodosHS»
    url="/resources/{resource}" method=«GET»
    resultFormat=«text»
    result=«todoItems = JSON.decode(listTodosHS.lastResult as String);»/>


    <mx:HTTPService id=«retrieveTodoHS»
    url="/resources/{resource}/{idToRetrieve}" method=«GET»
    resultFormat=«text»
    result=«detailItem = JSON.decode(retrieveTodoHS.lastResult as String);
    detailsBox.visible = true;»/>


    <mx:HTTPService id=«createTodoHS»
    url="/resources/{resource}" method=«POST»
    result=«listTodosHS.send()»
    fault=«listTodosHS.send()»>
    <mx:request xmlns="">
    {itemToAdd.text}
    </mx:request>
    </mx:HTTPService>


    <mx:HTTPService id=«deleteTodoHS»
    0 url="/resources/{resource}/{idToDelete}" method=«POST»
    result=«listTodosHS.send()»
    fault=«listTodosHS.send()»/>


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

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

    Листинг 14. Обработка результатов HTTPService-запроса

    <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>


    <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 запущен, то к этим приложениям можно обратиться по следующим ссылкам: localhost:8080/todoXML.html или 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()
    image

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

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

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

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

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

    Заключение


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

    Загрузка

    Загружаемый файл доступен для скачивания: smash-flex-sample.zip

    Ресурсы

    Статья на сайте IBM

    IBM WebSphere sMash. Информация о продукте (EN)

    Сообщество разработчиков Project Zero (EN)

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

    Project Zero: поддержка JSON (EN)

    Project Zero: рендеринг отклика (EN)
    IBM
    129,00
    Компания
    Поделиться публикацией

    Комментарии 15

      +1
      Я бы не сказал, что всё понял, но технология кажется интересной. В любом случае, я, как начинающий Flex разработчик, обязательно протестирую.
        +1
        Простите меня пожалуйста, но я тупой.

        Что же такое, этот WebSphere sMash?
        Я честно пытался читать статью, но там маркетоидное описание, пять абзацев и одна вода.

        фреймворк для разработки и исполнения приложений, основанный на таких базовых концепциях, как динамичная разработка, простота и RESTful-интерфейсы.


        А на сайте www.ibm.com/websphere/smash написано:
        WebSphere sMash
        is a web application development and execution environment which enables agile development of dynamic web applications using SOA principals.


        Так SOA или REST?

        Джавоское сообщество всегда страдает этой болезнью — тысяча слов и мало сути. Расскажите пожалуйста для таких тупых рубистов как я, что такое из себя представляет ваш продукт? Это несколько веб-серверов с набором библиотек и веб-редактором?
          –1
          P.S. Не хочу никого оскорбить, просто действительно не понятно, зачем мне бросать к примеру, Ruby on Rails или Django и переходить на ваш sMash. Что мне даст он, какие у него изюминки? Какие области применения. Вот это вообще не понятно из статьи.
            +1
            REST здесь конкретная реализация SOA.
            +3
            murr

            Когда сам читал маркетинговое описание в первый раз, то ужасался. Ничего не понятно.
            Пока не попробуешь с ним поработать так и не поймёшь как эта штука устроена.

            По сути каждое приложение, написаное на smash, это приложение и сервер в одном флаконе. Когда запускается приложение(а так же и встроенный в каждое приложение микро-сервер), то оно становится доступным по заданному порту.

            В ближайшее время появится техническая презентация, из которой станет более понятно что это за продукт с технической стороны. Советую особенно обратить внимание на слайд номер 17.

            Кстати, приложение, которое изображдено на рисунке 1, это тоже sMash-приложение предназначенное для создания других sMash-приложений. sMash приложение это набор файлов, так что можно работать с ними и на прямую, при желании.

            Один из козырей sMash это максимально быстрая разработка визуальных приложений или приложений для визуализации скрытых от пользователей ресурсов, например, баз данных.

            Попробую вспомнить адрес сайта, полностью написанного на sMash.

            В sMash можно использовать имеющиеся PHP наработки. Можно, например, подключить PHPBB.

            На счёт SOA и REST. Вопрос интересный и не однозначный. Лично для меня не следует противоречие из того что продукт вписывается в архитектуру SOA при этом используя для вызова своих ресурсов REST интерфейс. Не смотря на то что это 2 архитектурных стиля, конфликта между ними нет.

            Области применения всё, кроме ядерных станций и секъюрных банковских транзакций. Ибо в первом нужна «тройная» надёжность, а во втором развитый и надёжный механизм обеспечения секретности информации.
              0
              Иван, спасибо за ответ. Еще раз хочу подчеркнуть, что не хотел оскорбить или обидить кого-либо, мне на самом деле интересны новые технологии, просто, зачастую, описание взрывает мозг при попытке выделить в нем знакомые образы. Так например про тот же Майвен любят писать портянки текста, из которого не понятно, что сама технология смесь ant и пакетного менеджера.

              Можно вам несколько вопросов задать? :)
              Что есть минимальное приложение sMash — что там внутри, имеется ввиду какие библиотеки, какой софт?
              Как sMash объединяет разные технологии, посредством CGI/FastCGI или там что-то свое? Как насчет масштабируемости? Какие требования к технологиям (скажем, для php — это требования к версии языка, библиотекам) и какие технологии поддерживаются?

              Почему я должен захотеть выбрать sMash к примеру для своих проектов, а не LAMP стандартный + RESTfull фреймворк для php? :)

              >> Один из козырей sMash это максимально быстрая разработка визуальных приложений или приложений для визуализации скрытых от пользователей ресурсов, например, баз данных.
              т.е. он позволяет scaffolding по структуре БД, так я понимаю?

              На счет SOA я погорячился, прочитал как SOAP, прошу прощения.

                0
                Почитал пдф от Parnassus, многие вопросы отпали :)
                  0
                  Что вы мы и не думали обижаться. Скажу вам по секрету, что часть ваших вопросов всё ещё актуальна и для меня ;)

                  >>т.е. он позволяет scaffolding по структуре БД, так я понимаю?

                  несколько не знаком с таким термином. Он отображает таблицу в одном из своих примитивов и позволяет работать с ней стандартными методами: select/insert/delete/update

                  Естественно всё это можно написать на любом языке программирования, например на Java. Пару лет назад я бы так и сделал. Отличие в том, что на sMash это можно сделать быстрее.

                  Хотя заявление конечно спорное, кому-то проще писать код, кому-то использовать сторонние приклады.
                    0
                    scaffolding по сути, процесс автоматического создания RESTfull GUI, основывающийся либо на информации, предоставляемой моделью в архитектуре MVC, либо на основе механизма отражений либо еще как-то. На практике это выглядит так (в Rails): guides.rubyonrails.org/getting_started.html#getting-up-and-running-quickly-with-scaffolding
                      0
                      Спасибо за ссылку. Это и имелось ввиду- построение gui на базе модели данных в таблице.
                +1
                Вау (*возглас восхищения граничащего с удивлением*)
                Знал, что такое есть, но особо не интересовался… наверно, это подходящий случай.
                Спасибо, человеку, потратившему время на эту статью.
                  +1
                    0
                    Вдохновлялись Rails, признайтесь?
                      0
                      Этот вопрос лучше адресовать разработчикам данного продукта, которые живут за океаном ;)

                      Имхо, есть ряд различий, взять, например, хотя бы application-centric architecture. Приложение-сервер само в себе.

                      На сколько я знаю Rails работает по другому принципу.
                    0
                    Спасибо за презентацию, жать только что она в pdf, слайд 17 в оригинале анимированный и показывает этапы работы приложения. Начиная от обращения по определённому порту и открытия сокета и дальше по жизненному циклу.

                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                    Самое читаемое