Генерация динамических интерфейсов при помощи Dojo Toolkit

Создание мобильных Web-приложений и динамическое обновление их содержимого данными, запрашиваемыми с сервера

Использование мобильных устройств для просмотра Web-страниц становится правилом. По мере того как растет число пользователей мобильных устройств, растет и потребность в разработке мобильных приложений и Web-сайтов, удобных для просмотра на мобильных устройствах. Главная проблема, стоящая перед разработчиками, – как разработать приложение, которое может отображаться на большинстве устройств. В данной статье описывается использование Dojo Toolkit при создании виджетов для приложения, имитирующего интерфейсы наиболее популярных мобильных устройств. Dojo Toolkit предоставляет механизм для создания мобильных Web-приложений с использованием CSS, HTML и JavaScript.

Хосе Луис Лопес, инженер-программист, IBM

Хосе Луис Лопес (Jose Luis Lopez) – фотографияХосе Луис Лопес (Jose Luis Lopez) работает инженером-программистом в IBM. В настоящее время занимается IBM Workload Deployer и помогает пользователям ускорить развертывание приложений в закрытых облаках и средах виртуализации. Ранее он работал над WebSphere Application Server Proxy, DMZ Proxy, DRS, Dynacache и Dependency Injection for Java (CDI). Имеет несколько патентов на системы, управляемые взглядом, и мобильные пользовательские интерфейсы.



14.05.2012

Использование мобильных устройств является одним из самых популярных способов просмотра Web-страниц. По мере того как растет число пользователей мобильных устройств, растет и потребность в разработке мобильных приложений и Web-сайтов, удобных для просмотра на мобильных устройствах. Создание мобильных приложений, способных работать на различных платформах (например, iOS, Android и Blackberry OS), является трудной задачей: код, работающий на одних устройствах, может не работать на других, даже на устройствах с одной и той же реализацией операционной системы, но выпущенных разными производителями.

Используя Dojo Toolkit (dojox.mobile), можно создавать виджеты, имитирующие интерфейсы наиболее популярных мобильных устройств. В данной статье рассматривается использование Dojo Toolkit для создания мобильных Web-приложений и динамического обновления их содержимого данными, запрашиваемыми с сервера. Для извлечения свойств приложения используется REST API IBM® Workload Deployer (IWD), который тоже рассматривается в данной статье.

Начало работы

В данной статье я создам мобильное Web-приложение IWDMobile. Его задача проста: отображать информацию о данных, полученных с сервера.

Приложение состоит из одного HTML-файала, IWDMobile.html, являющегося ядром приложения. Файл использует:

  • Dojo для создания виджетов, имитирующих мобильные пользовательские интерфейсы.
  • HTTP-методы для запроса данных с сервера.

IBM Workload Deployer REST API

IBM Workload Deployer REST API предоставляет REST-вызовы для управления устройствами Workload Deployer. В данной статье используется REST-вызов GET /resources/applicationPatterns, который извлекает информацию о шаблонах виртуального приложения. Шаблон виртуального приложения содержит свойства, такие как имя, идентификатор и автор.

Структура проекта

Для данной статьи файл IWDMobile.html размещен в общедоступной папке сервера, связанного по сети с IBM Workload Deployer.

Dojo 1.7

WebSphere Application Server Feature Pack for Web 2.0 and Mobile V1.1.0

В пакет WebSphere Application Server Feature Pack for Web 2.0 and Mobile входят IBM Dojo 1.7 Toolkit, новые строительные блоки для мобильных и полнофункциональных интернет-приложений (RIA) и компонент построения диаграмм, основанный на Dojo. Пакет Feature Pack вместе с сопровождающим его инструментарием Rational, значительно облегчает создание мобильных полнофункциональных Web-приложений. Можно взять WebSphere-приложение, первоначально разработанное для настольных браузеров, и легко адаптировать и развернуть его для мобильных устройств.

HTML-файл обращается к Dojo одним из двух способов. Он может обращаться к Dojo в открытой сети доставки контента (content delivery network – CDN), такой как Google и AOL, либо с вашего собственного Web-сайта. Мы будем использовать функциональные возможности Dojo 1.7, но поскольку Dojo 1.7 еще не выпущен официально и не доступен в CDN, загрузите копию последней версии Dojo 1.7 с Web-страницы Dojo Toolkit и разархивируйте ее в каталог directory/public. Ссылка на Dojo Toolkit приведена в разделе Ресурсы.

Используйте следующую структуру каталогов:

  • /public/IWDMobile.html
  • /public/dojo1.7/

Разработка IWDMobile

Рассмотрим следующий HTML-шаблон для мобильного Web-приложения:

Листинг 1. Пример HTML-шаблона для приложения
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1,
                   maximum-scale=1,
                   minimum-scale=1,
                   user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>IWDMobile</title>
    <link
         href="dojo1.7/dojox/mobile/themes/iphone/iphone.css"
         rel="stylesheet" />
    <script type="text/javascript"
            src="dojo1.7/dojo/dojo.js"
            djConfig="isDebug:true, parseOnLoad:true">
    </script>
    <script language="JavaScript" type="text/javascript">
      dojo.require("dojox.mobile.parser");
	dojo.require("dojox.mobile");
	dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");
    </script>
  </head>
<body>
</body>
</html>

Dojo-выражения являются частью заголовка HTML-файла. Эти выражения загружают библиотеку Dojo и подключают необходимые Dojo-классы для анализа информации. Здесь же определяются CSS-темы и специфичные для мобильных приложений теги META. Ссылки на дополнительную информацию по специфичным для мобильных приложений тегам META приведены в разделе Ресурсы.

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

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

  • Первое будет содержать имена шаблонов виртуального приложения.
  • Второе будет содержать свойства шаблонов виртуального приложения.

Свойства шаблона виртуального приложения должны отображаться при выборе его имени.

Dojo предоставляет виджеты и методы, соответствующие требованиям IWDMobile. Приложению IWDMobile нужны следующие виджеты:

  • Dojox.mobile.ScrollableView – контейнер, представляющий экран мобильного устройства.
  • Dojox.mobile.Heading – представляет область навигации.
  • Dojox.mobile.RoundRectList – контейнер для элементов.
  • Dojox.mobile.ListItem – представляет список элементов.

Эти виджеты размещаются в разделе body.

Листинг 2. Раздел body примера HTML-шаблона
<body>
    <!-- Представление шаблона приложения -->
    <div id="appPatterns" dojotype="dojox.mobile.ScrollableView">
      <h1 dojotype="dojox.mobile.Heading" label="Patterns"></h1>
    </div>

    <!-- Представление информации о шаблоне приложения -->
    <div id="appPatternsInfo" dojotype="dojox.mobile.ScrollableView">
      <h1 dojotype="dojox.mobile.Heading"
          label="Pattern Information"
          back="Patterns"
          moveto="appPatterns"></h1>
      <ul id="patternInfoList" dojotype="dojox.mobile.RoundRectList">
	</ul>
    </div>
</body>

JavaScript-функции

Нам потребуются две JavaScript-функции:

  • Первая функция получает данные с сервера.
  • Вторая функция извлекает свойства шаблонов виртуального приложения.

Первая функция, getApplicationPatterns(), отправляет запрос GET на сервер, анализирует ответ, создает контейнер списка, заполняет его названиями шаблонов виртуального приложения, а также добавляет события on-click к каждому элементу списка и контейнер списка в представление appPatterns.

Вторая функция, getPatternInfo(virtAppPatternObject), принимает в качестве аргумента объект шаблона виртуального приложения. Эта функция извлекает свойства объекта шаблона виртуального приложения, создает элементы списка, хранящие значения этих свойств и добавляет элементы списка в контейнер списка patternInfoList.

getApplicationPatterns()

Следующие фрагменты кода демонстрируют идею данной функции.

  • Шаг 1. Запрос GET /resources/applicationPatterns
Листинг 3. Получение данных с сервера
dojo.xhrGet({
	url :"https://iwd.server.com/resources/applicationPatterns",
	handleAs : "json",
	
	headers : {
			'X-Deployer-API-Version': '3.0',
			'Content-Type': 'application/json',
			'Accept': 'application/json' 				
			},

	load : function(response) { },
	error : function(e) { }
});
  • Шаг 2. Сохранение полученных с сервера данных в новой переменной
Листинг 4. Сохранение данных с сервера
var sdata = response;
  • Шаг 3. Создание контейнера списка для имен приложений

dojo.mobile.RoundRectList создает новый контейнер списка applicationPatternsList.

Листинг 5. Создание контейнера списка
var appPatternListContainer = new 
dojox.mobile.RoundRectList({id:"applicationPatternsList"});
  • Шаг 4. Добавление элементов в контейнер списка, созданный на шаге 3 для каждого элемента ответа

dojox.mobile.ListItem создает элементы списка. Каждому элементу назначается метка и свойство moveTo. Метка – это текст, отображаемый элементом списка; в нашем случае это название шаблона виртуального приложения. Свойство moveTo указывает приложению, какое представление следует открыть при выборе данного элемента. В нашем примере будет открываться представление appPatternsInfo.

addChild добавляет каждый элемент списка в контейнер списка appPatternsListItem.

Цикл for обеспечивает добавление каждого элемента списка в контейнер списка.

Листинг 6. Добавление элементов в контейнер списка
for(var i in sdata){
	
  var name = sdata[i].app_name
  var appPatternListItem = new dojox.mobile.ListItem({
					 label: name,
					 moveTo: "appPatternsInfo"
				    });

  appPatternListContainer.addChild(appPatternListItem);

}
  • Шаг 5. Добавление события on-click в каждый элемент списка; при нажатии элемента списка информация о нем будет отображаться в представлении appPatternsInfo

dojo.connect соединяет событие on-click с элементами списка.

dojo.hitch выполняет функцию getPatternInfo с аргументом sdata[i].

Цикл for гарантирует назначение события on-click каждому элементу списка.

Листинг 7. Добавление событий on-click
for(var i in sdata){

  dojo.connect(appPatternListItem,
               "onclick",
               dojo.hitch(null,
               getPatternInfo, sdata[i]));

}
  • Шаг 6. Добавление контейнера списка в представление appPatterns

dijit.byId ищет виджет представления appPatterns.

addChild добавляет виджет appPatterListContainer в представление appPatterns.

Листинг 8. Добавление контейнера списка в представление
dijit.byId("appPatterns").addChild(appPatternListContainer);

Окончательная версия кода JavaScript-функции getApplicationPatterns выглядит следующим образом:

Листинг 9. Окончательная версия кода для получения данных с сервера
function getApplicationPatterns(){
  // Отправить запрос на сервер
  dojo.xhrGet({
      url : "https://iwd.server.com/resources/applicationPatterns",
	handleAs : "json",
	headers : {
			'X-Deployer-API-Version': '3.0',
			'Content-Type': 'application/json',
			'Accept': 'application/json'
								
			},

	load : function(response) {
	    // Сервер возвращает информацию в формате json
          var sdata = response;

	    // Создать контейнер списка, который будет содержать имена приложений
	    var appPatternListContainer = new  
          dojox.mobile.RoundRectList({id:"applicationPatternsList"});
						
          // Добавить новый элемент в контейнер списка для каждого элемента
	    for (var i in sdata){
					
		  // Создать и заполнить контейнер списка (имена приложений)
		  var name = sdata[i].app_name
		  var appPatternListItem = new dojox.mobile.ListItem({
							label: name,
							moveTo: "appPatternsInfo"});

		  // Добавить созданный элемент в контейнер списка
		  appPatternListContainer.addChild(appPatternListItem);

              // Подключить событие onclick для каждого элемента в списке.   
              // При нажатии элемента информация о нем будет отображаться в новом 
              // представлении (в данном случае это appPatternsInfo)
		  dojo.connect(appPatternListItem,
                           "onclick",
                           dojo.hitch(null,  
                           getPatternInfo, sdata[i]));
						
		}
            
            // Добавить контейнер списка в представление appPatterns
		dijit.byId("appPatterns").addChild(appPatternListContainer);

	},
	error : function(e) {}
  });
}

getPatternInfo(virtAppPatternObject)

Следующие фрагменты кода демонстрируют идею данной функции.

  • Шаг 1. Очистка контейнера списка

destroyDescendants удаляет всех потомков указанного виджета. Процедура очистки и удаления всех сохраненных в этом DOM-элементе данных обязательна.

Листинг 10. Очистка контейнера списка
dijit.byId("patternInfoList").destroyDescendants();
  • Шаг 2. Создание списка свойств шаблона виртуального приложения
Листинг 11. Создание списка свойств шаблона виртуального приложения
var listItemLabels= ["Application name",
                     "Application id",
                     "Application type",
                     "Content MD5",
                     "Content type",
                     "Creation time",
                     "Creator",
                     "Last modified",
                     "Last modifier",
                     "Collection"];
  • Шаг 3. Получение значений свойств из объекта шаблона виртуального приложения
Листинг 12. Получение значений свойств из объекта шаблона виртуального приложения
var listItemInfo = [virtAppPatternObject.app_name,
			  virtAppPatternObject.app_id,
			  virtAppPatternObject.app_type,
			  virtAppPatternObject.content_md5,
			  virtAppPatternObject.content_type,
			  virtAppPatternObject.create_time,
			  virtAppPatternObject.creator,
 			  virtAppPatternObject.last_modified,
			  virtAppPatternObject.last_modifier,
			  virtAppPatternObject.Collection];
  • Шаг 4. Создание элементов списка и добавление их в контейнер patternInfoList

dijit.byId ищет виджет представления patternInfoList.

dojox.mobile.ListItem создает элементы списка. Каждому элементу назначается метка и свойство rightText. Метка – это текст, отображаемый слева от каждого элемента списка; в нашем случае это имя свойства. Свойство rightText – это текст, отображаемый справа от элемента списка; в нашем случае это значение свойства.

addChild добавляет элементы списка в представление patternInfoList.

Листинг 13. Добавление элементов списка в контейнер
for(var j in listItemLabels){

  // Заполнить контейнер списка свойствами приложения и значениями
  var list = dijit.byId("patternInfoList");
  var appPatternInfo = new dojox.mobile.ListItem({
      				label: listItemLabels[j] ,
	      			rightText: listItemInfo[j]
				});
  list.addChild(appPatternInfo);
}

Окончательная версия кода JavaScript-функции getPatternInfo(virtAppPatternObject) выглядит следующим образом:

Листинг 14. Окончательная версия кода извлечения свойств шаблонов виртуального приложения
function getPatternInfo(virtAppPatternObject){

  // Очистить контейнер списка перед добавлением в него информации.
  dijit.byId("patternInfoList").destroyDescendants();  

  // Список информации о приложении
  var listItemLabels= ["Application name",
                       "Application id",
                       "Application type",
                       "Content MD5",
                       "Content type",
                       "Creation time",
                       "Creator",
                       "Last modified",
                       "Last modifier",
                       "Collection"];
		
  // Список значений приложения
  var listItemInfo = [virtAppPatternObject.app_name,
			    virtAppPatternObject.app_id,
			    virtAppPatternObject.app_type,
			    virtAppPatternObject.content_md5,
		          virtAppPatternObject.content_type,
			    virtAppPatternObject.create_time,
			    virtAppPatternObject.creator,
			    virtAppPatternObject.last_modified,
	     		    virtAppPatternObject.last_modifier,
	                virtAppPatternObject.Collection];
				
  // Создать и заполнить информацию о приложении
  for(var j in listItemLabels){

    // Заполнить контейнер списка свойствами приложения и значениями
    var list = dijit.byId("patternInfoList");
    var appPatternInfo = new dojox.mobile.ListItem({
					label: listItemLabels[j] ,
					rightText: listItemInfo[j]
				});
    list.addChild(appPatternInfo);
  }
}

IWDMobile.html

Как уже упоминалось, файл IWDMobile.html – это ядро приложения. Он содержит HTML-код, Dojo-выражения и JavaScript-классы, необходимые для создания приложения IWDMobile. Окончательную версию IWDMobile.html можно получить здесь.


Демонстрация

Откройте файл IWDMobile.html по его URL-адресу. Например, https://iwd.server.com/IWDMobile.html.

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

Рисунок 1. Представление шаблонов
Рисунок 1. Представление шаблонов

На рисунке 2 показана подробная информация о шаблоне "пустого" виртуального приложения.

Рисунок 2. Представление информации о шаблонах
Рисунок 2. Представление информации о шаблонах

Заключение

В данной статье вы познакомились с использованием Dojo Toolkit для создания мобильного Web-приложения, имитирующего мобильные пользовательские интерфейсы. Вы узнали, как динамически обновлять содержимое приложения данными, запрашиваемыми с сервера. Эти возможности безграничны. Теперь поведение вашего приложения зависит от вас. Удачи!

Благодарности

Хочу поблагодарить Энди Дингсора (Andy Dingsor) и Йоширо Камияму (Yoshiroh Kamiyama) за их замечания к данной статье.


Загрузка

ОписаниеИмяРазмер
Пример HTML-файла для данной статьиIWDMobile.zip2 КБ

Ресурсы

Научиться

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

  • Загрузите последнюю версию Dojo 1.7 с Web-страницы Dojo Toolkit.
  • IBM Workload Deployer позволяет перенести интеллектуальные сервисы и программное обеспечение SOA промежуточного уровня в закрытое облако.
  • В пакет WebSphere Application Server Feature Pack for Web 2. and Mobile входят IBM Dojo 1.7 Toolkit, новые строительные блоки для мобильных и полнофункциональных интернет-приложений (rich Internet application – RIA) и компонент построения диаграмм, основанный на Dojo. При использовании соответствующего инструментария Rational Feature Pack помогает разрабатывать оригинальные приложения WebSphere для настольных браузеров, а также адаптировать и развертывать их на мобильных устройствах. Дополнительная информация.

Обсудить

Комментарии

developerWorks: Войти

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


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


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

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

 


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

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

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



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

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

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

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

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

 


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


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Мобильные приложения, WebSphere
ArticleID=815544
ArticleTitle=Генерация динамических интерфейсов при помощи Dojo Toolkit
publish-date=05142012