![Закрыть [x]](http://dw1.s81c.com/i/c.gif){kind=small}
Использование мобильных устройств является одним из самых популярных способов просмотра 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.
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/
Рассмотрим следующий 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-функции:
- Первая функция получает данные с сервера.
- Вторая функция извлекает свойства шаблонов виртуального приложения.
Первая функция, 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 – это ядро приложения. Он содержит HTML-код, Dojo-выражения и JavaScript-классы, необходимые для создания приложения IWDMobile. Окончательную версию IWDMobile.html можно получить здесь.
Откройте файл IWDMobile.html по его URL-адресу. Например, https://iwd.server.com/IWDMobile.html.
На рисунке 1 показано исходное представление шаблонов. В этом представлении перечислены имена шаблонов виртуального приложения. Нажатие кнопки мыши на любом элементе активизирует представление с подробной информацией о данном шаблоне.
Рисунок 1. Представление шаблонов
На рисунке 2 показана подробная информация о шаблоне "пустого" виртуального приложения.
Рисунок 2. Представление информации о шаблонах
В данной статье вы познакомились с использованием Dojo Toolkit для создания мобильного Web-приложения, имитирующего мобильные пользовательские интерфейсы. Вы узнали, как динамически обновлять содержимое приложения данными, запрашиваемыми с сервера. Эти возможности безграничны. Теперь поведение вашего приложения зависит от вас. Удачи!
Хочу поблагодарить Энди Дингсора (Andy Dingsor) и Йоширо Камияму (Yoshiroh Kamiyama) за их замечания к данной статье.
| Описание | Имя | Размер | Метод загрузки |
|---|---|---|---|
| Пример HTML-файла для данной статьи | IWDMobile.zip | 2 КБ | HTTP |
Научиться
- Оригинал статьи: Generate dynamic mobile web interfaces with the Dojo Toolkit (EN).
- Дополнительная информация приведена в статье Начало работы в Dojo Mobile 1.7 (EN) (developerWorks, август 2011 года).
- Дополнительная информация о Dojo и IBM Workload Deployer на сайте developerWorks.
- Информация о мобильных мета-тегах, специфичных для Apple.
- Следите за developerWorks в Твиттере.
Получить продукты и технологии
- Загрузите последнюю версию 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 Россия.
Хосе Луис Лопес (Jose Luis Lopez) работает инженером-программистом в IBM. В настоящее время занимается IBM Workload Deployer и помогает пользователям ускорить развертывание приложений в закрытых облаках и средах виртуализации. Ранее он работал над WebSphere Application Server Proxy, DMZ Proxy, DRS, Dynacache и Dependency Injection for Java (CDI). Имеет несколько патентов на системы, управляемые взглядом, и мобильные пользовательские интерфейсы.
