<
  • Главная
Статьи

Розробка мобільних додатків: Частина 1. PhoneGap і Dojo Mobile на Android

  1. Серія контенту:
  2. Цей контент є частиною серії: Розробка мобільних додатків
  3. попередні вимоги
  4. Налаштування середовища розробки
  5. Установка JDK і Eclipse або Rational Application Developer
  6. Лістинг 1. Вміст eclipse.ini для RAD на Windows
  7. Завантаження Android SDK
  8. Завантаження та встановлення модулів ADT
  9. Малюнок 1. Установка плагіна Android ADT
  10. Малюнок 2. Деталі установки
  11. Налаштування Eclipse для Android
  12. Малюнок 3. Вказівка ​​місця розташування SDK для Eclipse
  13. Малюнок 4. Подання LogCat
  14. Малюнок 5. Пункт меню для конфігурації Android
  15. Малюнок 6. Android SDK і AVD Manager
  16. Малюнок 7. Встановлені Android-пакети
  17. Створення віртуального Android-пристрої
  18. Малюнок 8. Створення нового AVD
  19. Завантаження PhoneGap SDK
  20. Завантаження Dojo
  21. Створення нового Android-проекту
  22. Малюнок 9. Новий Android-проект
  23. Додавання бібліотеки PhoneGap
  24. Малюнок 10. Android-проект з бібліотекою PhoneGap
  25. Малюнок 11. Додавання PhoneGap JAR
  26. Лістинг 2. App.java
  27. Лістинг 3. index.html
  28. Лістинг 4. AndroidManifest.xml
  29. Запуск програми в емуляторі Android
  30. Малюнок 12. Емулятор Android
  31. Запуск програми на Android-телефоні
  32. Малюнок 13. Вибір пристрою
  33. Малюнок 14. Виконання програми на пристрої
  34. Малюнок 15. Вікно DDMS в Eclipse
  35. Малюнок 16. Автономний відладчик
  36. Розширення проекту за допомогою Dojo
  37. установка Dojo
  38. Малюнок 17. Дерево Android-проекту з Dojo
  39. Лістинг 5. Додавання Dojo в index.html
  40. Лістинг 6. Зміна index.html для завантаження мобільного Dojo
  41. Лістинг 7. Зміна розділу body файлу index.html
  42. Лістинг 8. Обробник Onclick
  43. Малюнок 18. Виконання програми в емуляторі
  44. Лістинг 9. Визначення екрану і заголовка
  45. Лістинг 10. Приклад для завантаження нового екрана
  46. Малюнок 19. Екран інформації про драйвер
  47. Лістинг 11. Приклад для завантаження Google-карти
  48. Малюнок 20. Пошук найближчого поліцейського відділку
  49. Малюнок 21. Налаштування місцезнаходження в DDMS
  50. Малюнок 22. Виконання програми на пристрої
  51. Ресурси для скачування

Розробка мобільних додатків

Серія контенту:

Цей контент є частиною # з серії # статей: Розробка мобільних додатків

http://www.ibm.com/developerworks/web/library/?series_title_by=mobile+application+development

Слідкуйте за виходом нових статей цієї серії.

Цей контент є частиною серії: Розробка мобільних додатків

Слідкуйте за виходом нових статей цієї серії.

Куди б ви не відправилися, всюди люди використовують мобільні пристрої для зв'язку з рідними і близькими, фотографування і розміщення знімків в соціальних мережах, пошуку місця розташування ресторану або перегляду заголовків новин. Мобільні пристрої мають безліч форм і стилів. Мобільні телефони працюють на різних операційних системах, таких як 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
  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

Натисніть Apply і OK.

Додайте уявлення Android LogCat в Eclipse IDE для виконання налагодження:

  • Window> Show View> Other ....
  • Android> LogCat.
Малюнок 4. Подання LogCat

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

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

В Eclipse відкрийте Android SDK і AVD Manager, який управляє версіями Android SDK і емуляторами, використовуваними з вашими додатками.

Виберіть Window> Android SDK і AVD Manager, як показано на малюнку 5 :

Малюнок 5. Пункт меню для конфігурації 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

Прийміть умови ліцензійної угоди для кожного пакета і виберіть Install, як показано на малюнку 7 :

Малюнок 7. Встановлені Android-пакети

Менеджер завантажить і встановить обрані пакети.

Створення віртуального Android-пристрої

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

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

Малюнок 8. Створення нового 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-проект

Введіть ім'я проекту, виберіть призначення компонування (build target), а потім введіть назву програми, ім'я пакета і ім'я дії. Для створення проекту натисніть кнопку Finish.

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

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

  1. Розгорніть дерево проекту AndroidPhoneGap, як показано на малюнку 10 :
    Малюнок 10. 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

Останнім кроком підготовки прикладу 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. Коли вона спрацьовує, виводиться ОС пристрою і версія.

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

Лістинг 4. AndroidManifest.xml
<? Xml version = "1.0&quot; 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.Dro idGap "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

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 можна також запустити за допомогою командного рядка з каталогу установки 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

Для завантаження 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

Виконання на пристрої

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

Малюнок 22. Виконання програми на пристрої

Висновок

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

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

Ресурси для скачування

Схожі тими

Підпішіть мене на ПОВІДОМЛЕННЯ до коментарів

Com/developerworks/web/library/?
Quot; encoding = "utf-8"?
Location = 'geo: 0,0?
Location =' geo: 0,0?
Location = 'geo: 0,0?
Використовуючи URI-адреса виду geo: lat, lng?


Новости
  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью