Интеграция XForms и Google Web Toolkit: Часть 1. Представляем JSNI - Java Script Native Interface

Опции документа Опции документа, требующие включения JavaScript, не отображаются Обсудить Выскажите мнение об этой странице Помогите нам улучшить содержание

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

Майкл Галпин, инженер по программному обеспечению, Vitria Technology

28.03.2008

Целью этой серии из четырех статей является демонстрация совместного использования Google Web Toolkit (GWT) и XForms при разработке динамических Web-приложений. В первой части серии проблема интеграции GWT и XForms будет рассмотрена "снизу-вверх", т.е., начиная с основ каждой из технологий. Далее будут выявлены сходные моменты, обеспечивающие возможность их органичной интеграции. На этой основе мы разработаем приложение с использованием GWT и XForms.

Введение

Инструментарий Google Web Toolkit (GWT) приобрел широкую популярность как средство разработки приложений Ajax. GWT позволяет Java разработчикам быстро создавать Ajax приложения на Java, не требуя от них никаких знаний JavaScript. XForms, в свою очередь, является дальнейшим развитием стандарта HTML и позволяет разрабатывать сложные динамические компоненты на основе простых конструкций. Поскольку обе технологии предоставляют мощные средства для решения многих задач, то почему бы не использовать их вместе? Это и стало главной темой нашей серии.

Читая статьи нашей серии, вы разработаете простое Web-приложение для обработки данных о звездах рока и их альбомах. Приложение будет использовать GWT и XForms, а под конец вы сможете комбинировать их произвольным образом. В первой части мы начнем с простых примеров, демонстрирующих использование технологий, например, c приложения KitchenSink, прилагаемого в качестве примера к GWT. Этот пример будет использован для демонстрации разнообразия компонентов пользовательского интерфейса, содержащихся в GWT.

В начало

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

В данной статье используется GWT версии 1.4 и подключаемый модуль Mozilla XForms версии 0.8 (см. Ресурсы). Модуль Mozilla XForms работает с любым браузером на основе Mozilla, например, Firefox или Seamonkey. Использование GWT предполагает определенные знания Java, а так же Web-технологий, таких как HTML и CSS. Кроме этого, в статье широко используется JavaScript. Наконец, технология XForms разработана в соответствии с парадигмой MVC (Model-View-Control), так что желательно знакомство с MVC. В то же время опыт использования GWT или XForms хотя и полезен, но необязателен.

В начало

XForms

Создавая Web-приложения в наши дни, скорее всего, вы создаете именно Ajax-приложения. Вы, вероятно, в курсе множества стандартных вариантов использования Ajax, таких как асинхронное добавление или изменение данных. Однако вы наверняка удивитесь, узнав, что многие подобные возможности были известны задолго до появления термина "Ajax". Многие стандартные вещи, реализуемые с помощью Ajax, могут быть выполнены с использованием XForms.

XForms - это основанная на стандартах технология, которая обещает стать центром спецификации HTML следующего поколения. Главной идеей XForms является отделение данных от их физического представления. Звучит знакомо, не правда ли? Отделив данные от представления, их можно просматривать любым способом, основанным на HTML. Данные также можно привязать к элементам форм для удобства их добавления и модификации.

Ajax используется для решения многих подобных задач. В Ajax данные тоже отделены от представления в HTML. При этом зачастую дело заканчивается созданием объектов JavaScript для хранения данных на странице HTML. XForms предлагает более стандартный подход к данной проблеме - хранение экземпляров данных в XML (см. пример ниже).

В начало

Хранение данных в XML

В XForms используется знакомый подход Model-View-Controller (модель-представление–контроллер, MVC), в соответствии с которым данные формы (XForm) хранятся в модели (XForm-model). Пример модели приведен в листинге 1.

                        <xf:model id="my-model" xmlns="http://www.w3.org/1999/xhtml" 
		xmlns:xf="http://www.w3.org/2002/xforms">
            <xf:instance id="my-data" src="my-data.xml" xmlns=""/>
            <xf:bind calculate="sum(../Item/Amount)" nodeset="/Data/Total"/>
            <xf:submission action="my-data.xml" id="update-from-local-file" 
			instance="my-data" method="get" replace="instance"/>
            <xf:submission action="my-data.xml" id="view-xml-instance" 
                 method="get"/>
            <xf:submission action="my-data.xml" id="saveToServer" 
                 method="put"/>
        </xf:model>

Здесь необходимо выделить несколько важных моментов. Во-первых, обратите внимание на элементы XForm-instance - именно в них хранятся данные модели. Существует возможность задания источника данных аналогично ссылкам на ресурсы в JavaScript и CSS. Если задан атрибут src, браузер загрузит соответствующий объект отдельным HTTP запросом. Объект данных также может быть представлен непосредственно внутри элемента XForm-instance. Также отметим, что и сама модель, и объекты имеют идентификаторы (ID). Это необходимо для доступа к ним с помощью других средств и технологий, как будет показано ниже.

Наконец, взгляните на различные объявления XForm-submission. Действия, описываемые с их помощью, похожи на действия (actions), присутствующие в обычных формах HTML, т.е. ссылки на обработчики данных форм. Обратите внимание на атрибут method: он выполняет ту же функцию, что и в формах HTML - а именно задает способ отправки HTTP-запроса. Все вышеперечисленное является частью модели. Теперь посмотрим на уровень представления в XForms.

В начало

Представления в XForms

Описав модель, вы легко можете создавать представления содержащихся в ней данных. XForms предоставляет множество стандартных элементов для манипуляции данными модели. Каждый элемент может обращаться к экземплярам данных, а благодаря тому, что описание модели задано в XML, мы можем свободно перемещаться по данным и ссылаться на них, используя выражения XPath. XForms полностью поддерживает спецификацию XPath 2.0. Рассмотрим на несколько примеров.

В простейшем случае модель может быть просто отображена в браузере с помощью элемента output, как показано в листинге 2.

                
<xhtml:div id="sum">
  <xf:output class="item-amount" ref="/Data/Total" 
  xmlns="http://www.w3.org/1999/xhtml">
  </xf:output>
</xhtml:div>

Атрибут ref – это ни что иное, как выражение XPath, вычисляемое применительно к данным модели. Обратите внимание, что вы можете смешивать выражения XHTML, такие как div или атрибут class в CSS, с элементами XForms. И это вовсе не хитрый маневр, а просто напоминание, что XForms является неотъемлемой частью будущего HTML.

XForms был разработан для использования в интерактивных приложениях, а не только для отображения данных. Поэтому, разумеется, существуют компоненты для редактирования данных (см. листинг 3).

                
<xf:input class="item-amount" ref="Amount" xmlns="http://www.w3.org/1999/xhtml">
    <xf:label>Amount</xf:label>
</xf:input>
<xf:submit submission="saveToServer" xmlns="http://www.w3.org/1999/xhtml">
    <xf:label>Save</xf:label>
</xf:submit>

В листинге 3 показан простой пример создания поля ввода с меткой и кнопкой отправки. Все компоненты в этом примере привязаны к модели, например, поле ввода привязано к экземпляру данных. С точки зрения элементов HTML, поле ввода будет заполнено соответствующим значением из модели при загрузке страницы.

Компонент submit, как и следовало ожидать, превращается в знакомую HTML-кнопку “submit”. Он тоже привязан к модели, а именно – к элементу “submission”. Этот элемент описывает действия формы, т.е., из компонента “submit” будет создана кнопка HTML типа “submit”, нажатие на которую вызовет HTTP-запрос типа “post” по адресу, указанному в элементе “submission” модели. Что же именно будет отправлено? Разумеется, данные формы в XML. Благодаря привязке данных к полю ввода пользователь может ввести новое значение в поле, и именно оно будет автоматически сохранено в модель перед отправкой HTTP-запроса на сервер.

Возможно, вы ассоциируете отправку данных HTML-формы с навигацией по адресу, указанному в атрибуте action формы. Это было типично для “Web 1.0”, но, к счастью, не для XForms. С точки зрения приложения, использующего XForms, отправка формы – это просто отправка данных на сервер и ничего больше. Этот подход является логическим продолжением четкого разграничения между моделью, а именно, данными и операциями над данными, такими как отправка на сервер, и представлением.

Но вернемся к реальности. Все это выглядит весьма типично для приложений Ajax, не так ли? Однако в Ajax нам скорее всего потребовалось бы несчетное количество строк кода на JavaScript, который привязывал бы данные к форме, перехватывал нажатие на кнопку отправки, отправлял асинхронный запрос на сервер, и, наконец, отрисовывал фрагмент представления, отображающий необходимые данные. У нас все эти действия выполняются внутри XForms. Внутри XForms можно реализовать очень многое, но при этом XForms не является некой замкнутой технологией, потенциально ограничивающей свободу пользователя. Она предоставляет эффективные средства взаимодействия с такими фундаментальными клиентскими технологиями, как HTML DOM и JavaScript.

В начало

XForms и JavaScript

В XForms-приложении данные могут храниться в модели с привязкой к различным представлениям. Этот подход, повсеместно использующийся в серверных приложениях, становится все более популярен на клиентской стороне, во многом благодаря Ajax. А поскольку XForms – это технология построения клиентских приложений, то логично, что она поддерживает доступ к данным с помощью родного для браузеров языка JavaScript.

Все возможности XForms полностью открыты для вызовов через JavaScript, исполняющегося внутри той же страницы, т.к. все элементы XForms, относящиеся как к модели, так и к представлению, являются частями документа HTML DOM. Все это неотъемлемая часть следующего поколения HTML, так что вы можете легко обращаться к элементам XForms так же, как, например, к элементу div в стандартном HTML, т.е. используя знакомый метод getElementById(). Пример обращения к модели XForms с помощью JavaScript представлен в листинге 4.

                
var model = document.getElementById("my-model");
var instance = model.getInstanceDocument("my-data");
var dataElement = instance.getElementsByTagName("Data")[0];
var itemElements = dataElement.getElementsByTagName("Item");
var cnt = itemElements.length;
var descripElement = itemElements[0].getElementsByTagName("Description")[0];
descripElement.childNodes[0].nodeValue = "";
var amtElement = itemElements[0].getElementsByTagName("Amount")[0];
amtElement.childNodes[0].nodeValue = "0";
model.rebuild();
model.recalculate();
model.refresh();

Как видно из листинга 4, к модели XForms можно обращаться точно так же, как и к любой части DOM. Вначале вы получаете некий JavaScript-объект первого уровня. Обратите внимание, что он предоставляет специализированные методы, такие как getInstanceDocument(). Этот метод предоставляет доступ к XML-данным модели. Данные модели – это полноценный XML-документ, так что вы можете читать и модифицировать его содержимое стандартными методами, как и любой другой XML-документ.

В начало

GWT

Инструментарий GWT был впервые представлен на конференции JavaOne в 2006 г. и вскоре приобрел широкую популярность среди Java-разработчиков. Этот инструментарий позволяет разработчикам быстро создавать Web-приложения на основе Ajax, в основном используя только свой опыт в Java и лишь базовые знания HTML и CSS. Это удобно не только для быстрого создания прототипов, но и для промышленных разработок. К примеру, Mashup Editor – онлайн-среда от Google для разработки Web-приложений, использующих Web API, - была создана с использованием GWT.

Волшебство GWT в основном заключается в компиляции Java-кода в код браузера на JavaScript, что позволяет разработчикам использовать привычную событийную модель программирования с возможностью прямого доступа к серверным данным. Большинство Java-программистов приходят в восторг при мысли, что больше нет необходимости писать код на JavaScript. Теперь они могут в полной мере использовать все преимущества строго типизированного языка, а так же средств отладки (например, Eclipse) для отлаживания Web-приложений на основе Ajax.

Однако если код на JavaScript вас не пугает, то GWT может предоставить вам еще более широкие возможности. Помните, что JavaScript – это ключ ко всем возможностям GWT. Таким образом, если перед вами стоит задача интеграции приложений, написанных с использованием GWT, с приложениями, не использующими GWT, то JavaScript – это именно то, что нужно.

К счастью, GWT легко интегрируется с другими технологиями. Разработчики могут добавлять свой код на JavaScript напрямую в код, сгенерированный GWT. Таким образом, существует возможность разработки классов одновременно на Java и JavaScript, используя JSNI (JavaScript Native Interface).

В начало

JSNI

Документация по GWT (см. Ресурсы) описывает несколько способов использования JSNI. Во-первых, вы можете реализовывать клиентские методы, используя только JSNI. Во-вторых, вы можете использовать JSNI для написания оболочек вокруг существующего кода на JavaScript, что очень полезно при переносе существующих приложений на GWT. В-третьих, вы можете с помощью JSNI получать доступ к клиентскому коду на Java, который в любом случае компилируется в JavaScript, и наоборот. В общем, все, что вы можете делать на JavaScript, вы сможете реализовать, используя связку GWT и JSNI, без промежуточного представления в Java. Ниже приведены примеры использования JSNI.

Пример использования JSNI

Для рассмотрения возможностей JSNI начнем с одного из примеров, поставляемых вместе с GWT, а именно – KitchenSink. Несмотря на то, что KitchenSink изначально создавался для демонстрации компонентов пользовательского интерфейса, он так же хорошо подходит и для опытов с JSNI, т.к. весь код исполняется на клиентской стороне, без взаимодействия с сервером.

Для начала определим Java-метод, который будет реализован на JavaScript. Простейший пример метода - код, выводящий окошко с надписью “Hello World” – приведен в листинге 5.

                
private native void blastName() /*-{
  alert("Hello world");
}-*/;

В качестве примера использования добавим вызов нашего метода в метод showInfo() класса KitchenSink, который вызывается при старте приложения. Код показан в листинге 6.

                
private void showInfo() {
  show(list.find("Intro"), false);
  blastName(); // added JSNI method
}

Заметим, что GWT позволяет вызывать JSNI метод точно так же, как если бы он был написан на Java. Просто, не правда ли? Теперь скомпилируйте и запустите приложение в режиме хоста и вы увидите результат, подобный показанному на рисунке 1.

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

JSNI и Java-переменные

Чтобы применение JSNI приносило реальную пользу, нужна возможность реализовать обмен данными между Java-кодом и «родным» JavaScript. Это позволит сочетать преимущества GWT c гибкостью JavaScript. Взгляните на модифицированный вариант “Hello World”, приведенный в листинге 7.

                
public class KitchenSink implements EntryPoint, HistoryListener {

  private static final Sink.Images images = (Sink.Images) GWT.create(Sink.Images.class);

  protected SinkList list = new SinkList(images);
  private SinkInfo curInfo;
  private Sink curSink;
  private HTML description = new HTML();
  private VerticalPanel panel = new VerticalPanel();
  // new variable to be accessed in JSNI
  private String myVar = "Hello variables"; 

Вы можете получить доступ к переменной myVar, объявленной в Java, внутри метода, вызываемого через JSNI, как показано в листинге 8.

                
private native void blastName() /*-{
  var str = 
   this.@com.google.gwt.sample.kitchensink.client.KitchenSink::myVar;
  alert(str);
}-*/;

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

Теперь вы видите, насколько легко пересылать данные между Java- и JavaScript-кодом. Теперь у вас есть все необходимое для органичной интеграции GWT с любой другой технологией, доступной через JavaScript. Например, XForms.

В начало

Заключение

XForms и GWT предоставляют мощные высокоуровневые средства для разработки современных приложений на основе Ajax. В то же время обе технологии предоставляют доступ к низкоуровневому коду на JavaScript. Эта возможность важна не только для повышения функциональности, которая и так на высоте в случае обеих технологий, но также и для интеграции - как с другими технологиями, так и между собой. Теперь вы примерно представляете план совместного использования XForms и GWT. Подробно это будет продемонстрировано в следующей статье серии, где вы будете сочетать возможности XForms и GWT при разработке приложения.

Ресурсы

• Оригинал статьи: Integrate XForms with the Google Web Toolkit, Part 1: Introducing GWT's JavaScript Native Interface (EN).
  
  
• Прекрасное введение в XForms приведено в серии из трех статей Введение в XForms (Chris Herbroth, developerWorks, сентябрь 2006 г.).
  
  
• Совместное использование JavaScript и XForms освещено в статье Советы по использованию XForms: Как обращаться к JavaScript из XForm-формы (Nicholas Chase, developerWorks, январь 2007 г.).
  
  
• Статья Использование JavaScript для повышения эффективности XForms-приложений (EN) (Michael Galpin, developerWorks, июль 2007 г.) рассказывает об использовании JavaScript для улучшения функциональности приложений XForms.
  
  
• Прочитайте про использование XForms и Ajax в статье Использование XForms и Ajax для создания поля формы с автозаполнением (Michael Galpin, developerWorks, июль 2007 г.).
  
  
• Прочитайте одно из первых подробных введений в использование GWT в статье Ajax для Java-разработчиков: изучаем инструментарий Google Web Toolkit (Philip McCarthy, developerWorks, июнь 2006 г.).
  
  
• Разработке Web-приложений с использованием GWT посвящены четыре статьи серии Построение Ajax-приложений с использованием Google Web Toolkit, Apache Derby и Eclipse (Noel Rappin, developerWorks, декабрь 2006 г.).
  
  
• Ознакомьтесь с возможностями GWT по использованию Ajax, прочитав две части серии Построение Ajax-приложений используя Google Web Toolkit и Apache Geronimo (EN) (Michael Galpin, developerWorks, май 2007 г.).
  
  
• Посетите Центр ресурсов по Ajax на сайте IBM developerWorks.
  
  
• Посетите раздел раздел Технология Java на сайте IBM developerWorks.
  
  
• Зайдите на главную страницу XForms на сайте IBM developerWorks.(EN)
  
  
• Посетите главную страницу XForms на сайте W3C.(EN)
  
  
• Техническая библиотека по XML: Познакомьтесь с библиотекой по XML сайта developerWorks, где вы можете найти множество технических статей и советов, рекомендаций, стандартов и руководств IBM.
  
  
• Технические мероприятия и Web-трансляции developerWorks: В этих разделах можно получить самую актуальную информацию о современных технологиях. (EN)
  
  
• Прочитайте о возможностях XForms в разделе XMLна сайте IBM developerWorks.(EN)
  
  
• Подкасты: настройтесь и получайте новости напрямую от экспертов IBM. (EN)

• Лучший способ получить информацию о GWT – это посетить официальный сайт Google Web Toolkit.(EN)
  
  
• Скачайте подключаемый модуль XForms для Mozilla, Firefox и Seamonkey.(EN)
  
  

• Примите участие в обсуждении материала на форуме.

Об авторе

		Майкл Галпин (Michael Galpin) имеет учёную степень по математике в Калифорнийском Технологическом институте. Он является Java-разработчиком с конца 90-х гг. и работает инженером по программному обеспечению в Vitria Technology, в Саннивейл, Калифорния.

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

Пожалуйста, найдите минутку и заполните форму, чтобы повысить уровень сервиса. Помогла ли данная информация достичь Вашей цели? Да Нет Не знаю   Пожалуйста, напишите комментарий, чтобы мы могли улучшить данную страницу:   Насколько полезна эта информация? (1 = Бесполезна, 5 = Очень полезна) 1 2 3 4 5

Поделиться этой статьей: забобрить сохранить в memori

В начало