Разработка мобильных приложений: Часть 1. PhoneGap и Dojo Mobile на Android

Эту серию статей мы начнем с создания простого мобильного приложения и завершим созданием Web-сервиса, потребляемого вашим Android-устройством. Вы узнаете, как использовать Eclipse и PhoneGap для создания мобильного гибридного приложения, использующего только HTML и JavaScript. Для придания ему свойств встроенного приложения мы будем использовать Mobile Dojo. В данной статье рассказывается, как скомбинировать PhoneGap и Mobile Dojo для быстрого создания гибридного мобильного приложения на Android, которое выглядит и ведет себя как типичное Android-приложение.

Брюс Кертис, отдел мобильных и развивающихся технологий, IBM

Брюс Кертис (Bryce Curtis) – фотографияДоктор Брюс Кертис (Bryce Curtis) работает с развивающимися технологиями в Software Group Technology Center. Он является заслуженным изобретателем, имеет более 50 патентов, опубликовал множество статей. В настоящее время возглавляет в IBM работу над проектом с открытыми исходными кодами PhoneGap. За 27 лет работы в IBM Брюс занимался разными технологиями, включая мобильные технологии, совместную деятельность и видеоконференции, виджеты и машапы, телефонию, распознавание речи и автоматическое преобразование звука в текст, виртуальную реальность, 3D-аудио. Получил степень доктора наук по электротехнике и цифровой обработке сигналов в Технологическом институте Джорджии.



Джилл Вудкок, консультант по программным сервисам, IBM

Джилл Вудкок (Gill Woodcock) – фотографияДжил Вудкок (Gill Woodcock) работает консультантом по программным сервисам в группе Software Group Lab Services в Херсли, Великобритания. Занималась широким спектром работ, связанных с серверной инфраструктурой, настольными, мобильными и встраиваемыми решениями. Джилл имеет большой опыт разработки и реализации решений для клиентов IBM из разных стран мира. В настоящее время она работает в группе Mobile Leadership, занимающейся внедрением мобильных технологий IBM, включая WebSphere Feature Pack for Web 2.0 and Mobile.



Тодд Каплингер, старший инженер-программист, IBM

Тодд Каплингер (Todd Kaplinger) – фотографияТодд Каплингер (Todd Kaplinger), заслуженный изобретатель IBM, работает старшим инженером-программистом в WebSphere Technology Institute. Он разрабатывает релизы для Web 2.0 и Mobile Feature Pack V1.1. Является экспертом по Web-технологиям, таким как Dojo, JSP, Servlet и PHP, а в последнее время основное внимание уделяет развивающимися технологиями Web 2.0 и их влиянию на предприятия. Тодд является ведущим разработчиком других проектов WebSphere, а также принимает участие в разработке спецификации JSR 154 Servlet 2.5 Specification в качестве представителя IBM в группе Servlet Expert Group.



09.06.2012

Введение

Куда бы вы ни отправились, везде люди используют мобильные устройства для связи с родными и близкими, фотографирования и размещения снимков в социальных сетях, поиска местоположения ресторана или просмотра заголовков новостей. Мобильные устройства имеют множество форм и стилей. Мобильные телефоны работают на разных операционных системах, таких как Apple iOS, Google Android и Research In Motion Blackberry. Некоторые имеют большие экраны, физические клавиатуры и работают в сетях 3G, 4G или WiFi. Мобильные телефоны могут также иметь датчики ускорения, местоположения и даже платежей. Некоторые из этих устройств - даже не телефоны; это планшеты с более крупными экранами и сетевым подключением только для обмена данными.

Несмотря на различия, мобильные устройства похожи друг на друга тем, что все они исполняют мобильные приложения. Мобильные приложения можно разделить на два типа:

Встроенные приложения

Установленные на устройство встроенные приложения представляют собой бинарные исполняемые программы, созданные с использованием пакетов разработки ПО (software development kit – SDK) и распространяемые через хранилища приложений (app store). SDK существуют для каждой мобильной операционной системы и, к сожалению, различаются между собой.

Например, чтобы создать приложение для iOS, необходимо загрузить и установить iOS SDK и средства разработки, а написание кода выполнять на языке программирования Objective-C. Android-приложение разрабатывается при помощи Android SDK и пишется на Java. Таким образом, для создания мобильного приложения необходимо знать каждый SDK и использовать поддерживаемый язык программирования. На изучение SDK для каждой платформы нужно потратить немало времени, поэтому разработка мобильных приложений является довольно сложной задачей.

Web-приложения

Web-приложения, загружаемые в мобильный Web-браузер, отличаются от встроенных тем, что их код пишется с использованием Web-технологий (HTML, JavaScript и CSS), не зависящих от операционной системы устройства. Нет необходимости изучать различные языки программирования для каждого устройства. HTML и JavaScript знакомы Web-разработчикам по созданию Web-страниц для настольных браузеров. В большинстве случаев мобильные Web-браузеры могут визуализировать те же самые Web-страницы, но Web-сайты часто предоставляют мобильные версии с меньшим объемом информации и более быстрой загрузкой (из-за меньшего размера экрана и более медленной сети).

Для запуска Web-приложения пользователь вводит URL-адрес в мобильный Web-браузер. После этого загружается Web-страница, являющаяся точкой входа в Web-приложение. Web-приложения не распространяются через хранилище приложений; они являются обычными ссылками, которые можно включить в другие Web-страницы, электронные сообщения или даже записать на бумаге.

Встроенные и Web-приложения имеют свои преимущества и недостатки, являясь причиной многих дискуссий о том, какие приложения лучше. Разрешить этот спор могут гибридные приложения, которые пытаются объединить преимущества обоих типов мобильных приложений.

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

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

В данной статье описывается разработка гибридного мобильного Android-приложения при помощи наборов инструментальных средств PhoneGap и Dojo Mobile. Вы узнаете, как использовать эмулятор Android и средства тестирования приложений, и увидите, как запускать приложение на Android-устройстве или планшете.

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

Предполагается, что вы знакомы со средой разработки Eclipse, технологиями HTML, JavaScript и CSS. Для работы со статьей необходимо следующее программное обеспечение:

  • Операционная система Windows, OS X или Linux.
  • Java Development Kit (JDK) 5 или JDK 6 (JRE недостаточно).
  • Интегрированная среда разработки Eclipse (например, Eclipse Helios V3.6 или более новой версии) либо IBM Rational Application Developer V8.
  • Android SDK и платформы (r12 или более новой версии).
  • Плагин Android Development Toolkit (ADT) для Eclipse.
  • PhoneGap SDK (V1.0.0 или более новой версии).
  • Dojo Toolkit (V1.6 или более новой версии).

Ссылки для загрузки программного обеспечения приведены в разделе Ресурсы.


Настройка среды разработки

Для настройки среды разработки необходимо выполнить следующие действия:

  1. Установить JDK и Eclipse или Rational Application Developer.
  2. Загрузить Android SDK.
  3. Загрузить и установить плагин ADT для Eclipse.
  4. Настроить Eclipse для Android.
  5. Установить необходимые Android-платформы.
  6. Создать новое устройство Android Virtual Device (AVD).
  7. Загрузить PhoneGap SDK.
  8. Загрузить Dojo Toolkit.

Установка JDK и Eclipse или Rational Application Developer

Прежде всего, проверьте, установлен ли JDK 5 или более новая версия. Если нет, загрузите Java SE JDK (см. раздел Ресурсы).

Для работы с данной статьей можно использовать либо Eclipse, либо IBM Rational Application Developer (RAD). RAD поддерживает Windows и Linux. OSX-разработчики могут использовать Eclipse.

RAD содержит IBM-версию Eclipse с дополнительными программами IBM для поддержки Java EE, в том числе Web 2.0 Feature Pack. Для использования RAD понадобится версия 8 или старше. В RAD включен IBM JDK, используемый по умолчанию. Однако в этот JDK не входят Java-пакеты, необходимые для создания и подписания Android-приложений. Чтобы использовать вместо него Java SE JDK, необходимо заменить содержимое C:/Program Files/IBM/SDP/eclipse.ini (или местоположение вашей установки RAD) информацией, приведенной в листинге 1.

Листинг 1. Содержимое eclipse.ini для RAD на Windows
-startup
plugins/org.eclipse.equinox.launcher_1.1.1.R36x_v20101122_1400.jar
--launcher.library
plugins/org.eclipse.equinox.launcher.win32.win32.x86_1.1.2.R36x_v20101222
--launcher.defaultAction
openFile
--launcher.XXMaxPermSize
256M
-showsplash
org.eclipse.platform
--launcher.XXMaxPermSize
256m
--launcher.defaultAction
openFile
-install
C:/Program Files/IBM/SDP
-vmargs
-Dosgi.requiredJavaVersion=1.5
-Xms40m
-Xmx512m

Если вы хотите использовать Eclipse, понадобится версия 3.6 или старше. Поскольку в данной серии статей мы будем создавать Web-сервисы, загрузите Eclipse IDE for Java EE Developers (см. раздел Ресурсы). Но если вы хотите просто создать Android-приложение, можно использовать Eclipse IDE for Java Developers.

Eclipse и RAD очень похожи. В данной статье при упоминании Eclipse подразумеваются и Eclipse, и RAD. Однако приводимые снимки экранов взяты из среды RAD на Windows.

Загрузка Android SDK

Для создания Android-приложений нужно использовать Android SDK (см. раздел Ресурсы). Это набор программ командной строки, используемых для компиляции, компоновки, эмуляции и отладки Android-приложений.

Если SDK устанавливается на Windows, проще всего загрузить zip-пакет и разархивировать его в корневой каталог диска C:\. К инсталлятору r12 есть несколько замечаний, связанных с тем, что он не может обнаружить Java и выполнить установку в каталог, название которого содержит пробелы.

Загрузка и установка плагина ADT

Android предоставляет Eclipse-плагин, который значительно упрощает разработку приложений. Он интегрируется в Eclipse и обеспечивает среду быстрой разработки. Для установки плагина Android Development Toolkit (ADT) (см. раздел Ресурсы) выполните следующие действия:

  1. В Eclipse выберите пункт меню Help > Install New Software... > Add....
  2. Введите название и URL-адрес программного обеспечения (см. рисунок 1). Название: Android ADT Eclipse plugin; адрес: https://dl-ssl.google.com/android/eclipse/.
    Рисунок 1. Установка плагина Android ADT
    Установка плагина Android ADT
  3. Выберите Developer Tools, убедитесь, что отмечены все флажки (см. рисунок 1), и нажмите кнопку Next.
  4. Нажмите кнопку Next, чтобы принять лицензионные соглашения и установить выбранные элементы (см. рисунок 2).
    Рисунок 2. Детали установки
    Детали установки

После завершения установки перезапустите Eclipse.

Настройка Eclipse для Android

Чтобы настроить Eclipse для Android, перейдите в диалоговое окно Preferences.

  • В Windows выберите Window > Preferences > Android.
  • В OSX выберите Eclipse > Preferences > Android.

Для указания местоположения SDK нажмите кнопку Browse... и выберите каталог, в котором расположен Android SDK (см. рисунок 3):

Рисунок 3. Указание местоположения SDK для Eclipse
Указание местоположения SDK для Eclipse

Нажмите Apply и OK.

Добавьте представление Android LogCat в Eclipse IDE для выполнения отладки:

  • Window > Show View > Other....
  • Android > LogCat.
Рисунок 4. Представление LogCat
Представление LogCat

Установка платформы Android

Чтобы выполнить компиляцию Android-приложения для конкретной версии, необходимо загрузить и установить одну или несколько платформ Android. Платформы содержат библиотечные файлы и эмуляторы.

В Eclipse откройте Android SDK и AVD Manager, который управляет версиями Android SDK и эмуляторами, используемыми с вашими приложениями.

Выберите Window > Android SDK и AVD Manager, как показано на рисунке 5:

Рисунок 5. Пункт меню для конфигурации Android
Пункт меню для конфигурации Android

Установите SDK-платформы для версий Android, на которых вы хотите запускать свои приложения.

Пример приложения будет использовать сервисы GPS-координат, поэтому следует выбрать и установить платформу, основанную на Google API. Например, выберите Google APIs by Google Inc., Android API 8, revision 2, как показано на рисунке 6. Если GPS не используется, можно установить платформы, перечисленные в категории Android Repository.

В Windows выберите пакет Google USB Driver, чтобы обеспечить поддержку подключения вашего Android-телефона.

Выберите Install Selected.

Рисунок 6. Android SDK и AVD Manager
Android SDK и AVD Manager

Примите условия лицензионного соглашения для каждого пакета и выберите Install, как показано на рисунке 7:

Рисунок 7. Устанавливаемые Android-пакеты
Устанавливаемые Android-пакеты

Менеджер загрузит и установит выбранные пакеты.

Создание виртуального Android-устройства

Android SDK и AVD Manager используются также для создания и управления экземплярами эмулятора для ваших приложений.

На странице Virtual Devices выберите New... для создания нового AVD. Введите имя, назначение, размер SD-карты памяти и HVGA в Skin, как показано на рисунке 8:

Рисунок 8. Создание нового AVD
Создание нового AVD

Выберите Create AVD.

Загрузка PhoneGap SDK

PhoneGap – это интегрированная среда разработки с открытыми исходными кодами для создания гибридных мобильных приложений, поддерживающая несколько платформ, включая Android, iOS, Blackberry, Palm, Symbian и Windows Phone. При помощи PhoneGap можно легко создать кросс-платформенное мобильное приложение, использующее стандартные Web-технологии (HTML, JavaScript и CSS), и обратиться из JavaScript к функциональным возможностям устройства, таким как акселерометр или камера. Ссылки на информацию о поддерживаемых функциональных возможностях и самых последних подробностях о PhoneGap приведены в разделе Ресурсы.

PhoneGap предоставляет набор JavaScript-интерфейсов для доступа ко многим функциям устройств, недоступным из мобильных Web-браузеров для типичных Web-приложений. Это достигается путем использования Web-приложения внутри встроенной программы-оболочки. PhoneGap объединяет код Web-приложения с визуализатором браузера устройства для создания "родного" приложения, которое можно развернуть в хранилище приложений и установить на устройстве.

Функциональные возможности интерфейса PhoneGap позволяют обращаться к акселерометру устройства, системе аудио и видеозахвата, камере, компасу, контактам, файлам, системе геолокации, сети, уведомлениям и системе хранения. Более подробная информация и примеры приведены в документации по интерфейсу PhoneGap (см. раздел Ресурсы).

После загрузки PhoneGap (см. раздел Ресурсы) мы скопируем код в Android-проект в разделе Создание нового Android-проекта.

Загрузка Dojo

Dojo Toolkit – это пакет инструментальных JavaScript-программ с открытыми исходными кодами, предназначенных для быстрой разработки Web-сайтов и приложений, загружаемых и выполняемых в Web-браузере.

Поскольку мобильные Web-браузеры не столь функциональны, как настольные, Dojo имеет мобильную версию, называемую Dojo Mobile. Она оптимизирована для мобильных Web-браузеров и предоставляет множество UI-виджетов и тем, которые можно использовать для оформления мобильного приложения, имитируя встроенное.

Ключевые функциональные возможности Dojo Mobile:

  • Облегченная загрузка виджетов с использованием анализатора Dojo Mobile.
  • CSS3-анимации и переходы для имитации работы встроенных приложений на мощных iOS- и Android-устройствах.
  • Темы для имитации внешнего вида и поведения iOS- и Android-приложений.
  • Совместимость с устройствами и браузерами, которые не поддерживают CSS3.
  • Простой в изучении полностью декларативный синтаксис.
  • Большой набор виджетов, число которых возрастет в готовящейся к выходу версии Dojo Mobile 1.7.

Для работы с данной статьей необходимо загрузить Dojo 1.6 (см. раздел Ресурсы).


Создание нового Android-проекта

После настройки среды разработки приступим к созданию простого Android-приложения.

В Eclipse выберите File > New > Other..., а затем Android > Android project. Должно появиться диалоговое окно, показанное на рисунке 9.

Рисунок 9. Новый Android-проект
Новый Android-проект

Введите имя проекта, выберите назначение компоновки (build target), а затем введите имя приложения, имя пакета и имя действия. Для создания проекта нажмите кнопку Finish.

Добавление библиотеки PhoneGap

Итак, у нас есть простое Android-приложение. До создания PhoneGap-приложения необходимо добавить библиотеку PhoneGap. Существуют два файла: JavaScript-файл, содержащий интерфейс PhoneGap, который вызывается нашим приложением, и встроенный JAR-файл, содержащий "родную" реализацию интерфейса PhoneGap API.

  1. Разверните дерево проекта AndroidPhoneGap, как показано на рисунке 10:
    Рисунок 10. Android-проект с библиотекой PhoneGap
    Android-проект с библиотекой PhoneGap
  2. Создайте каталог \assets\www. Создайте также каталог \libs, если его еще нет.
  3. Разархивируйте загруженный PhoneGap и найдите подкаталог Android.
  4. Скопируйте три файла библиотеки PhoneGap для Android в следующие папки проекта Eclipse:
    • Скопируйте phonegap-1.0.0.jar в \libs\phonegap-1.0.0.jar.
    • Скопируйте phonegap-1.0.0.js в \assets\www\phonegap-1.0.0.js.
    • Скопируйте xml/plugins.xml в \res\xml\plugins.xml.

Несмотря на то, что JAR-файл PhoneGap скопирован в проект, необходимо добавить его в путь компоновки (build path) проекта.

  1. Выберите Project > Properties > Java Build Path > Libraries > Add JARs....
  2. Добавьте phonegap-1.0.0.jar, как показано на рисунке 11:
Рисунок 11. Добавление PhoneGap JAR
Добавление PhoneGap JAR

Последним шагом подготовки примера Android-приложения к использованию PhoneGap является изменение App.java. Поскольку PhoneGap-приложение пишется на HTML и JavaScript, необходимо изменить App.java для загрузки нашего HTML-файла при помощи вызова loadUrl(), как показано в листинге 2. Можно отредактировать App.java, дважды щелкнув левой кнопки мыши на элементе App.java в древовидном списке, как показано на рисунке 10.

Листинг 2. App.java
Package com.ibm.swgs;
import android.os.Bundle;
import com.phonegap.*;
public class App extends DroidGap //Действие
{
    /** Вызывается при первой активности. */
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        //setContentView(R.layout.main);
        super.loadUrl("file:///android_asset/www/index.html");
    }
}

Создание PhoneGap-приложения

Теперь можно приступить к созданию PhoneGap-приложения. В Android обращение к файлам каталога asset имеет вид file:///android_asset. Необходимо создать файл index.html в каталоге assets/www, как указано в loadUrl() в листинге 2.

После создания index.hml введите содержимое листинга 3.

Листинг 3. index.html
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
</head>
<body onload='document.addEventListener("deviceready", deviceInfo, false);'>
<script>
function deviceInfo() {
    document.write("<h1>This is Phonegap 1.0.0 running on "+device.platform+" 
    "+device.version+"!</h1>");
}
</script>
</body>
</html>

Кратко опишем index.html. Перед вызовом любого интерфейса PhoneGap необходимо дождаться события deviceready, указывающего, что "родная" для устройства часть PhoneGap проинициализирована и готова к работе. В листинге 3 событие deviceready регистрируется функцией обратного вызова onload. Когда она срабатывает, выводится OС устройства и версия.

Поскольку PhoneGap использует встроенные функции, защищенные правами доступа, необходимо изменить AndroidManifest.xml и включить в него теги uses-permission. Необходимо также указать тег support-screens, свойство android:configChanges и тег activity com.phonegap.DroidGap, как показано в листинге 4:

Листинг 4. AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.ibm.swgs"
   android:versionCode="1"
   android:versionName="1.0">
<supports-screens
     android:largeScreens="true"
     android:normalScreens="true"
     android:smallScreens="true"
     android:resizeable="true"
     android:anyDensity="true"
 />
 <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
 <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
 <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
 <uses-permission android:name="android.permission.INTERNET" />
 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<application android:icon="@drawable/icon" android:label="@string/app_name">
   <activity android:name=".App"
       android:label="@string/app_name"
       android:configChanges="orientation|keyboardHidden">
     <intent-filter>
       <action android:name="android.intent.action.MAIN" />
       <category android:name="android.intent.category.LAUNCHER" />
     </intent-filter>
   </activity>
   <activity android:name="com.phonegap.DroidGap" android:label="@string/app_name" 
        android:configChanges="orientation|keyboardHidden">
     <intent-filter>
     </intent-filter>
   </activity>
</application>
</manifest>

Запуск приложения в эмуляторе Android

Теперь можно запустить приложение PhoneGap. Выберите Run > Run As > Android Application; вы должны увидеть нечто похожее на рисунок 12.

Рисунок 12. Эмулятор Android
Эмулятор Android

Eclipse автоматически выполняет компоновку приложения, запускает эмулятор, устанавливает и запускает это приложение в эмуляторе.

Для запуска эмулятора может потребоваться несколько минут. Чтобы ускорить разработку, не закрывайте эмулятор до завершения сеанса разработки. Eclipse будет автоматически использовать работающий эмулятор, не запуская новый.


Запуск приложения на Android-телефоне

Если у вас есть Android-телефон, можно запустить приложение PhoneGap на вашем устройстве. Однако перед использованием телефона для разработки необходимо переключить его в режим USB-отладки:

  1. Перейдите на экран Home и выберите Menu.
  2. Выберите Settings > Applications > Development.
  3. Включите USB-отладку.
  4. Необходимо также в Android Manifest объявить приложение как debuggable. Измените файл AndroidManifest.xml и добавьте android:debuggable="true" в элемент <application>.
  5. Подключите Android-телефон к компьютеру, используемому для разработки, при помощи USB-кабеля.
  6. Для запуска приложения выберите Run As > Android Application.

    Появится запрос выбора назначения: эмулятор или реальное устройство. Выберите Android-телефон, как показано на рисунке 13:

    Рисунок 13. Выбор устройства
    Выбор устройства

После загрузки и установки на телефоне приложение запустится (см. рисунок 14):

Рисунок 14. Выполнение приложения на устройстве
Выполнение приложения на устройстве

Использование Dalvik Debug Monitor Server (DDMS)

Плагин ADT содержит средство отладки приложений Dalvik Debug Monitor Server (DDMS). DDMS можно использовать для отслеживания и отладки хода выполнения приложения в эмуляторе или на реальном устройстве.

DDMS можно запустить из Eclipse в меню Window > Open Perspective > Other... > DDMS. На рисунке 15 показан пример.

Рисунок 15. Окно DDMS в Eclipse
Окно DDMS в Eclipse

DDMS можно также запустить при помощи командной строки из каталога установки Android SDK.

  • В Windows: C:\android-sdk-windows\tools\ddms.bat.
  • В OSX: .../android-sdk-mac-86/tools/ddms.
Рисунок 16. Автономный отладчик
Автономный отладчик

В DDMS вы можете:

  • Просмотреть консоль регистрации событий.
  • Отобразить состояние процессов, выполняющихся на устройстве.
  • Исследовать информацию о потоках.
  • Просмотреть использование кучи процесса.
  • Выполнить сборку мусора.
  • Следить за распределением памяти объектов.
  • Выполнить профилирование метода.
  • Работать с файловой системой устройства.
  • Сохранить снимок экрана устройства.
  • Эмулировать операции телефона.

Подробная информация приведена в документации по DDMS (см. раздел Ресурсы).


Расширение проекта при помощи Dojo

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

Установка Dojo

Чтобы использовать Dojo, необходимо скопировать его в пример проекта.

Создайте каталоги, показанные на рисунке 17.

  • \assets\www\libs
  • \assets\www\libs\dojo
  • \assets\www\libs\dojo\dojo
  • \assets\www\libs\dojo\dojox

Скопируйте следующие файлы Dojo:

  • Файл dojox\mobile.js в каталог \assets\www\libs\dojo\dojox.
  • Каталог dojox\mobile в каталог \assets\www\libs\dojo\dojox.
  • Файл dojo\dojo.js в каталог \assets\www\libs\dojo\dojo.
Рисунок 17. Дерево Android-проекта с Dojo
Дерево Android-проекта с Dojo

Для загрузки Dojo необходимо изменить файл index.html и включить строки, приведенные в листинге 5, в раздел <head> перед тегом script phonegap-1.0.0.js.

Листинг 5. Добавление Dojo в index.html
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,
minimum-scale=1,user-scalable=no"/>
<link rel="stylesheet" href="libs/dojo/dojox/mobile/themes/android/android.css" 
type="text/css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript" src="libs/dojo/dojo/dojo.js" djConfig="parseOnLoad:true">
</script>

После тега script phonegap-1.0.0.js включите операторы require для мобильного анализатора Dojo (см. листинг 6).

Листинг 6. Изменение index.html для загрузки мобильного Dojo
<script type="text/javascript">
  dojo.require("dojox.mobile.parser");
  dojo.require("dojox.mobile");
</script>

Модификация приложения

Замените существующий тег <body> в файле index.html на новый тег <body>, содержащий два простых раздела <div>, как показано в листинге 7:

Листинг 7. Изменение раздела body файла index.html
<body>
<!-- ACCIDENT TOOLKIT PAGE -->
<div dojoType="dojox.mobile.View" id="accHelp" selected="true">
    <h1 dojoType="dojox.mobile.Heading">Accident</h1>
    <div class="text">If you are in an accident, you should first move to a safe 
    location. Below are some additional actions you can take:</div>
    <ul dojoType="dojox.mobile.RoundRectList">
        <li dojoType="dojox.mobile.ListItem" 
            onclick="window.location='geo:0,0?q=police';">Call the Police</li>
        <li dojoType="dojox.mobile.ListItem"
            onclick="window.location='geo:0,0?q=towing';">Call for a Tow Truck</li>
        <li dojoType="dojox.mobile.ListItem" moveTo="accInfo" transition="slide"
            onClick="itemClicked();">Exchange Driver Info</li>
        <li dojoType="dojox.mobile.ListItem" moveTo="accInfo" transition="slide"
            onClick="itemClicked();">Record Accident Location</li>
        <li dojoType="dojox.mobile.ListItem" moveTo="accInfo" transition="slide"
            onClick="itemClicked();">Take Photos of Accident</li>
    </ul>
</div>
<!-- EXCHANGE DRIVER INFO PAGE -->
<div dojoType="dojox.mobile.View" id="accInfo">
    <h1 dojoType="dojox.mobile.Heading" back="Accident" moveTo="accHelp"
        onClick="console.log('Going back');">Driver</h1>
    <h2 dojoType="dojox.mobile.RoundRectCategory">Other Driver Info</h2>
</div>
</body>

Добавьте простую JavaScript-функцию itemClicked() после последнего тега <div> для регистрации событий в консоли, как показано в листинге 8.

Листинг 8. Обработчик Onclick
<script>
function itemClicked() {
  console.log("itemClicked()");
}
</script>

Выполнение приложения в эмуляторе

Запустите приложение, щелкнув правой кнопкой мыши на проекте и выбрав Run as > Android Application.

Рисунок 18. Выполнение приложения в эмуляторе
Выполнение приложения в эмуляторе

Каждый экран в Dojo-приложении определяется элементом div с dojoType='dojox.mobile.View', как показано в листинге 9. Начальный экран идентифицируется при помощи атрибута selected='true'.

Заголовок экрана определяется тегом <h1 dojoType='dojox.mobile.Heading'>

Листинг 9. Определение экрана и заголовка
<div dojoType="dojox.mobile.View" id="accHelp" selected="true">
    <h1 dojoType="dojox.mobile.Heading">Accident</h1>
</div>

Обратите внимание на знак > в трех последних элементах списка. Это индикатор загрузки другого экрана Dojo.

Тег элемента списка с атрибутом dojoType='dojox.mobile.ListItem' используется для отображения списка элементов, которые могут быть выбраны (см. листинг 10). Он визуализируется как встроенный список выбора. Атрибут moveTo указывает, какой div отображать, а атрибут transition указывает, как его поместить в представление.

Листинг 10. Элемент списка для загрузки нового экрана
<li dojoType="dojox.mobile.ListItem" moveTo="accInfo" transition="slide"
    onClick="itemClicked();">Exchange Driver Info</li>

Выберите Exchange Driver Info, который скроет текущий div и отобразит div с id='accInfo'. В поле зрения должен плавно переместиться экран Driver, как показано на рисунке 19.

Рисунок 19. Экран информации о драйвере
Экран информации о драйвере

Элементы списка могут использоваться не только для загрузки других экранов. Например, обработчик onclick может использоваться для отображения Google-карты с полем поиска ближайшего полицейского участка. В листинге 11 приведен соответствующий код.

Чтобы вернуться к предыдущему экрану, выберите кнопку Accident в заголовке.

Листинг 11. Элемент списка для загрузки Google-карты
<li dojoType="dojox.mobile.ListItem" 
    onclick="window.location='geo:0,0?q=police';">Call the Police</li>

Многие мобильные устройства поддерживают протокол geo:. Используя URI-адрес вида geo:lat,lng?q=query, можно отобразить сервис карт Google.

Выберите Call the Police в эмуляторе, чтобы отобразить карту с ближайшим полицейским участком, как показано на рисунке 20:

Рисунок 20. Поиск ближайшего полицейского участка
Поиск ближайшего полицейского участка

Ваше местоположение может быть другим в зависимости от широты и долготы, введенной в Emulator Control в DDMS. На рисунке 21 показаны настройки местоположения.

Рисунок 21. Настройки местоположения в DDMS
Настройки местоположения в DDMS

Выполнение на устройстве

Если у вас есть подключенный к компьютеру Android-телефон, запустите приложение на нем, как описано в разделе Выполнение приложения на Android-телефоне. Как показано на рисунке 22, экраны будут выглядеть так же, как экраны в эмуляторе. Поиск должен возвратить ближайший к вам полицейский участок.

Рисунок 22. Выполнение приложения на устройстве
Выполнение приложения на устройстве

Заключение

В данной статье вы узнали о том, как использовать сочетание PhoneGap и Mobile Dojo для быстрого создания гибридного мобильного Android-приложения, выглядящего и ведущего себя как типичное Android-приложение. Мы написали его быстро, потому что использовали HTML и JavaScript вместо Java. Учитывая, что Web-код остается неизменным для разных мобильных операционных систем, это гибридное приложение можно легко адаптировать для iOS и Blackberry.

Не пропустите вторую часть данной серии, в которой будет рассматриваться создание мобильного приложения для страховой отрасли с использованием Dojo и PhoneGap.

Ресурсы

Научиться

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

Комментарии

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=Web-архитектура, SOA и web-сервисы
ArticleID=820517
ArticleTitle=Разработка мобильных приложений: Часть 1. PhoneGap и Dojo Mobile на Android
publish-date=06092012