Розробка Web-додатків для мобільних пристроїв за допомогою WebSphere Portal і IBM Worklight: Частина 1. Інтеграція гібридного мобільного додатка зі сторінками WebSphere Portal

1. Серія контенту:
2. Цей контент є частиною серії: Розробка Web-додатків для мобільних пристроїв за допомогою WebSphere Portal і IBM Worklight
3. приклад рішення
4. компоненти
5. попередні умови
6. Малюнок 1. Налаштування Oracle JRE в Eclipse
7. Лістинг 1. eclipse.ini
8. Створення програми Worklight
9. Малюнок 11. Повідомлення про успішне завершення операції
10. Оновлення теми WebSphere Portal за допомогою Worklight JavaScript
11. Лістинг 3. Метод onCreate, який використовує URL WebSphere Portal
12. Малюнок 13. Емулятор виконує додаток, що відображає WebSphere Portal
13. Малюнок 14. Структура папок fs-type1 WebDAV
14. Малюнок 16. Нові файли init.js і staticprops.js
15. Лістинг 10. Зміст файлу init.js
16. Малюнок 17. Локалізований шаблон теми для додавання прикладу коду
17. Лістинг 14. Зміст файлу worklight.json
18. Малюнок 18. Меню профілів в діалоговому вікні властивостей сторінки
19. Малюнок 19. Додаток Worklight з відомостями про пристрій з WebSphere
20. Ресурси для скачування

Розробка Web-додатків для мобільних пристроїв за допомогою WebSphere Portal і IBM Worklight

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

Цей контент є частиною # з серії # статей: Розробка Web-додатків для мобільних пристроїв за допомогою WebSphere Portal і IBM Worklight

http://www.ibm.com/search/csass/search/?q=%D0%A0%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1% 82% D0% BA% D0% B0 + Web-% D0% BF% D1% 80% D0% B8% D0% BB% D0% BE% D0% B6% D0% B5% D0% BD% D0% B8% D0 % B9 +% D0% B4% D0% BB% D1% 8F +% D0% BC% D0% BE% D0% B1% D0% B8% D0% BB% D1% 8C% D0% BD% D1% 8B% D1% 85 +% D1% 83% D1% 81% D1% 82% D1% 80% D0% BE% D0% B9% D1% 81% D1% 82% D0% B2 +% D1% 81 +% D0% BF% D0% BE % D0% BC% D0% BE% D1% 89% D1% 8C% D1% 8E + WebSphere + Portal +% D0% B8 + IBM + Worklight & dws = rudw & ibm-search.x = 12 & ibm-search.y = 12 & sn = dw & lang = ru & cc = RU & ddr = & en = utf & lo = ru & hpp = 20

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

Цей контент є частиною серії: Розробка Web-додатків для мобільних пристроїв за допомогою WebSphere Portal і IBM Worklight

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

Перш ніж розглянути поєднання IBM WebSphere Portal з IBM Worklight, важливо зрозуміти різницю між Web-сайтом і додатком.

• Web-сайт агрегує Web-контент і ряд Web-додатків, надаючи користувачу єдиний інтерфейс і працюючи через різні канали, включаючи настільний браузер, кіоск, смартфони і планшети. Простим прикладом може служити Web-сайт вашої улюбленої авіакомпанії. Швидше за все, у неї є мобільний Web-сайт, який підтримує телефони та планшети. WebSphere Portal - підходяща платформа для створення такого Web-сайту.
• Web-додаток - це спеціалізована розробка, часто орієнтована на вирішення конкретних завдань. Наприклад, додаток тієї ж авіакомпанії, придбане через app store, дозволяє бронювати квитки або резервувати місця. Зазвичай воно містить підмножина функцій Web-сайту, пристосованих до виконання на пристрої. IBM WebSphere Application Server - правильний вибір платформи для доставки самостійних Web-додатків. IBM Worklight надає можливість створювати як "рідні", так і гібридні програми, а в якості серверної частини можна використовувати WebSphere Application Server (при створенні гібридних додатків) або WebSphere Portal (при створенні гібридних Web-сайтів).

Потім потрібно вирішити, яка програма розробляти - "рідне", гібридне або Web-додаток. На вибір технології мобільного каналу вплинуть відповіді на два питання.

1. Які пристрої необхідно підтримувати?
2. Що додаток повинен робити?

Щоб відповісти на ці питання, треба подумати, зокрема, про наступні речі. В яких випадках буде використовуватися цю програму? Будуть потрібні особливі функції пристрою, такі як GPS або камера? Будуть потрібні чи зображення високої чіткості, або буде достатньо мобільного браузера? Відповіді на ці запитання є важливими для цього рішення, як і плюси і мінуси розробки "рідного", гібридного або Web-додатки.

приклад рішення

У цій статті описано, як створення прикладу гібридного додатки, яке об'єднує Worklight 5.0 і WebSphere Portal 8.0. У наступному розділі розглядаються компоненти цього рішення і відповідні попередні умови, які потрібно виконати.

компоненти

• Worklight

  платформа Worklight містить набір компонентів, які дозволяють управляти повним життєвим циклом "рідних", гібридних і Web-додатків, що доставляються на ряд мобільних платформ, включаючи телефони iOS, Android, BlackBerry і Windows®. IBM Worklight Developer Edition 5.0 - потужна і гнучка мобільна інтегроване середовище розробки, яку можна завантажити і використовувати безкоштовно . Тут Worklight Developer Edition використовується для побудови прикладу додатки, яке звертається до WebSphere Portal.

• WebSphere Portal

  WebSphere Portal - лідер ринку засобів доставки середовища Web-сайтів на настільні і мобільні пристрої. WebSphere Portal забезпечує навігацію по сайту і брендинг, так що можна створити свій власний сайт, налаштований для свого підприємства. Framework забезпечує цільової контент з аналітичними інструментами для вимірювання ефективності сайту. Інші важливі характеристики - доступ на основі ролей і контекстно-залежні матеріали. Своїми перевагами WebSphere Portal зобов'язаний коріння, що йде в WebSphere Application Server. У WebSphere Portal багатий список функцій, включаючи функції безпеки, вбудовані засоби управління Web-контентом, таргетинг, віртуальні портали і багато іншого. Основною перевагою WebSphere Portal є здатність збирати на своєму сайті додатки з урахуванням цих особливостей.

• Адаптивний Web-дизайн

  Важливе значення для сучасного підприємства має створення виняткових Web-можливостей, оптимізованих для різних пристроїв. Користувачі хочуть переглядати Web-на своїх смартфонах так само легко, як на настільному комп'ютері. Однак орієнтація на мобільні пристрої зазвичай починається з розмови про "рідних" додатках. Як згадувалося вище, для таких додатків характерні висока вартість володіння і обмежені можливості для багаторазового використання коду. Інший підхід - створення альтернативного Web-сайту спеціально для мобільних пристроїв, але це не дуже практичне рішення, тому що в кінцевому підсумку доведеться підтримати велика кількість ресурсів.

  Адаптивний Web-дизайн (див. Розділ ресурси ) - це оптимальне рішення, яке вирішує проблему різноманітності пристроїв і розмірів екрану шляхом створення гнучких, рухливих і адаптивних Web-сайтів. Ідея адаптивного Web-дизайну відкриває можливості для автоматичної оптимізації користувальницького інтерфейсу з урахуванням фактичного дозволу екрану, його орієнтації або можливостей для використання багатофункціональних Web-додатків і гібридних додатків. Це гарантує максимальну віддачу від проекту Web-дизайну.

• вибір топології

  При плануванні розгортання Worklight і WebSphere Portal вам доведеться вибрати топологію сервера. Для доступу IBM Worklight Server до WebSphere Portal потрібно проксі-сервер. Цей приклад протестований на машині розробника, що містить обидва сервера WebSphere Portal і Worklight. В лістингу 3 показано, що для доступу до початкової сторінки використовується IP-адреса URL WebSphere Portal. Щоб розгорнути цей приклад в тому випадку, коли сервери знаходяться в різних системах, знадобиться проксі-сервер. Модуль 45 документації Початок роботи з IBM Worklight присвячений віддаленою Web-сайту, наприклад, розміщеного на сервері WebSphere Portal.

Для побудови Web- або гібридних додатків можуть виявитися корисними і інші продукти IBM. Наприклад, засобами розробки додатків можуть служити IBM Rational® Application Developer і IBM Web Experience Factory.

попередні умови

Щоб побудувати описаний тут приклад гібридного мобільного додатка, знадобляться наступні правильно встановлені і працюють програмні продукти і компоненти.

• WebSphere Portal 8.0

  Див. Інструкції по установці в документації WebSphere Portal .

• Eclipse

  завантажте Eclipse . У цьому прикладі використовується Eclipse 3.7.2 (Indigo), а його тестування виконувалося за допомогою Eclipse IDE для Java ™ EE Developers. (Можна працювати і з Eclipse Classic і Eclipse IDE для Java Developers, хоча вони не були протестовані з цим прикладом.)

Майте на увазі, що описане тут додаток буде функціонувати тільки з Android-пристроями. У наступних статтях цього циклу ми розглянемо інтеграцію Worklight з операційними системами Android і iOS.

• Android SDK

  Після того як середовище Eclipse встановлена, потрібно додати Android SDK . Цей приклад тестувався з SDK Android 2.3.3 (API 10).

  Попередньою умовою для роботи Android SDK є наявність Oracle Java JRE. Встановивши її, налаштуйте свій екземпляр Eclipse на використання JRE. Для цього виберіть з меню Window> Preferences> Java> Installed JREs (рисунок 1).

  Малюнок 1. Налаштування Oracle JRE в Eclipse

  
• Worklight

  Для цього прикладу потрібно IBM Worklight 5.0 або більш пізня версія; з попередніми версіями він працювати не буде. Для цілей розробки IBM Worklight Developer Edition 5.0 можна завантажити безкоштовно. Подробиці про те, як додати в Eclipse плагін, містяться в модулях по налаштуванню (Setup) документації Початок роботи з IBM Worklight .

  Worklight розпочинається сервером в рамках середовища Eclipse. Може знадобитися відредагувати файл eclipse.ini, замінивши порт 8080 іншим значенням, наприклад, 8085. При запуску Eclipse сервер Worklight запускається автоматично. У лістингу 1 наведено приклад вмісту файлу eclipse.ini з налаштуванням -Dworklight_port.

  Лістинг 1. eclipse.ini

  -startup plugins / org.eclipse.equinox.launcher_1.2.0.v20110502.jar --launcher.library plugins / org.eclipse.equinox.launcher.win32.win32.x86_64_1.1.100.v20110502 -showsplash org.eclipse.platform - launcher.XXMaxPermSize 256m --launcher.defaultAction openFile -vmargs -Dworklight.port = 8085 -Xms40m -Xmx384m
• клієнт WebDAV

  Щоб змінити тему WebSphere Portal за допомогою Worklight JavaScript, потрібен клієнт WebDAV. Цей приклад розроблений за допомогою AnyClient. Ви можете використовувати будь-який клієнт WebDAV, який підтримує WebSphere Portal. Детальніше див. У документації З'єднання з Portal WebDAV в версії 8.0 .

• спеціальна тема

  Перш ніж застосовувати Worklight JavaScript зі своєю темою, потрібно створити спеціальну тему. Скопіюйте тему WebSphere Portal, щоб ваша тема містила всі необхідні елементи, і fixpack не відмінив внесення зміни. Не змінюйте тему WebSphere Portal безпосередньо, тому що служба fixpacks може відновити її. Замість цього дотримуйтесь інструкцій по створенню копії теми з з цієї статті .

Створення програми Worklight

1. Запустіть Eclipse. Консоль Worklight покаже, що сервер запущений (малюнок 2).

   Малюнок 2. Сервер Worklight запущений

   
2. Щоб приступити до створення додатка, необхідно завести новий проект Worklight. В Eclipse виберіть New> Other> Worklight Project і натисніть кнопку Next (рисунок 3).

   Малюнок 3. Створення нового проекту Worklight

   
3. Дайте проекту ім'я. На малюнку 4 проект називається WLPortal. Залиште обраний за замовчуванням режим Hybrid Application і натисніть кнопку Next.

   Малюнок 4. Проект Worklight

   
4. Назвіть гібридному додатком в проекті Worklight, в даному випадку WLPortalApp. У цьому прикладі немає пакета JavaScript, але його можна додати на цій панелі (рисунок 5).

   Малюнок 5. Ім'я гібридного додатки

   
5. Натисніть кнопку Finish. Створюються артефакти проекту і програми. Це може зайняти кілька хвилин. Потім вас можуть попросити перейти в перспективу Design і переглянути проект у вікні Project Explorer (рисунок 6).

   Малюнок 6. Проект, як він виглядає в Eclipse

   
6. Далі, потрібно створити середовище Worklight для написання гібридного додатки. Клацніть правою кнопкою на WLPortalApp в папці програми та виберіть New> Worklight Environment (малюнок 7).

   Малюнок 7. Створення нового середовища Worklight

   
7. З'явиться панель New Worklight Environment (рисунок 8). Так як цей конкретний приклад призначений тільки для гібридного Android-додатки, виберіть Android phones and tablets. Якщо необхідно створити середовище для інших операційних систем, тут можна вказати ці додаткові можливості. Натисніть кнопку Finish.

   Малюнок 8. середу Worklight в Eclipse

   
8. Worklight Studio створює і оновлює проект з "рідним" додатком (рисунок 9). Ім'я "рідного" проекту: Worklight Project / WorklightApplication / Platform. Worklight Studio управляє життєвим циклом цієї програми, і вам не потрібно вносити в нього ніяких змін. Коли Web-додаток, спочатку створене в проекті, готове і розгорнуто, "рідне" додаток буде переписано з внесенням всіх змін.

   Малюнок 9. "Рідне" додаток готове

   
9. Тепер, коли програма створена, його потрібно скомпонувати і розгорнути. Як видно на малюнку 10, команда Build All and Deploy означає, що "рідне" додаток буде переустановлені з урахуванням змін в Web-додатку. Команду Build All and Deploy можна виконати, клацнувши правою кнопкою миші на додатку і вибравши Run As> Build All and Deploy.

   Малюнок 10. Вибір Build All and Deploy

   

   Коли почнеться процес складання, за його ходом можна стежити за індикатором на нижній правій панелі стану Eclipse. Після завершення процесу на консолі Worklight має з'явитися повідомлення Application 'YourApp' deployed successfully with all environments (Додаток YourApp успішно розгорнуто в усіх середовищах - малюнок 11).

   Малюнок 11. Повідомлення про успішне завершення операції

   

1. Щоб запустити Android-додаток, клацніть правою кнопкою миші на проекті WLPortalWLPortalAppAndroid в браузері проектів і виберіть Run As> Android Application. Це призведе до запуску емулятора Android (якщо він ще не запущений) і завантаженні примірника нового додатка. Можливо, щоб побачити додаток, вам доведеться відкрити початковий екран емулятора. На малюнку 12 показано виставу побудованого додатки.

   Малюнок 12. Додаток в емуляторі

   

Далі, в додаток потрібно додати код для виклику сторінки WebSphere Portal.

Оновлення теми WebSphere Portal за допомогою Worklight JavaScript

1. Першим кроком до інтеграції WebSphere Portal і Worklight є відображення порталу в Android-додатку. Для цього створимо гібридне додаток, яке підключається до WebSphere Portal всередині "рідний" оболонки. В Eclipse відкрийте Java-клас, який ініціалізує додаток (лістинг 2), розташований у файлі \ WLPortal \ apps \ WLPortalApp \ android \ native \ src \ com \ WLPortalApp \ WLPortalApp.java.

   Лістинг 2. WLPortalApp.java

   package com.WLPortalApp; import android.os.Bundle; import com.worklight.androidgap.WLDroidGap; public class WLPortalApp extends WLDroidGap {@Override public void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); //DeviceAuthManager.getInstance (). SetProvisioningDelegate (<Use default ProvisioningDelegateImpl class or replace with your IProvisioningDelegate implementation>); super.loadUrl (getWebMainFilePath ()); }}

IP-адреса в цьому прикладі має бути адресою сервера WebSphere Portal, який потрібно відобразити в гібридному додатку. Детальніше про встановлення Worklight і WebSphere Portal см. В розділі Компоненти прикладу рішення .

1. Клас, показаний в лістингу 2, використовується для того, щоб передати управління HTML-сторінці \ WLPortal \ apps \ WLPortalApp \ common \ WLPortalApp.html. Цей файл потрібно змінити таким чином, щоб він перенаправляв IP-адреса і порт в WebSphere Portal. Для цього можна змінити метод onCreate, щоб завантажити WebSphere Portal URL і використовувати cookie-менеджер (лістинг 3).

   Лістинг 3. Метод onCreate, який використовує URL WebSphere Portal

   public void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); CookieSyncManager.createInstance (appView.getContext ()); CookieManager.getInstance (). RemoveSessionCookie (); super.loadUrl ( "http://9.99.999.999:10039/wps/portal", false); }
2. Не забудьте додати import-залежності для CookieSyncManager і CookieManager, як показано в лістингу 4.

   Лістинг 4. Залежності CookieSyncManager і CookieManager

   import android.webkit.CookieSyncManager; import android.webkit.CookieManager;
3. Через переадресації, щоб пройшли перевірку сторінки працювали, потрібно визначити ще один метод, як показано в лістингу 5. Результат цих змін показаний в лістингу 6.

   Лістинг 5. Додавання методу loadUrl

   public void loadUrl (String url) {loadUrl (url, false); }

   Лістинг 6. Остаточне зміст WLPortalApp.java

   package com.WLPortalApp; import android.os.Bundle; import android.webkit.CookieSyncManager; import android.webkit.CookieManager; import com.worklight.androidgap.WLDroidGap; public class WLPortalApp extends WLDroidGap {@Override public void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); CookieSyncManager.createInstance (appView.getContext ()); CookieManager.getInstance (). RemoveSessionCookie (); super.loadUrl ( "http://9.99.999.999:10039/wps/portal", false); } Public void loadUrl (String url) {loadUrl (url, false); }}
4. Щоб в Web-поданні гібридного контейнера відкривалися все посилання, встановіть параметр stay-in-webview в файлі cordova.xml, розташованому в \ WLPortal \ apps \ WLPortalApp \ android \ native \ res \ xml \ cordova.xml:

   <Preference name = "stay-in-webview" value = "true" />

   Якщо використовується нелокальний сервер порталу, то в цьому ж місці можна змінити політику безпеки. Політика безпеки за замовчуванням блокує весь доступ по мережі. Можна вказати доступ до конкретних мережевим доменів і піддоменів в межах cordova.xml. Детальніше див. У цієї статті .

5. Тепер можна знову натиснути правою кнопкою на додатку і вибрати Build All and Deploy. Ви побачите хід процесу в нижньому правому куті панелі стану Eclipse. Після завершення процесу клацніть правою кнопкою на WLPortalWLPortalAppAndroid і виберіть Run As ...> Android Application. Запуститься емулятор Android, і додаток відобразить WebSphere Portal, як показано на малюнку 13.

   Малюнок 13. Емулятор виконує додаток, що відображає WebSphere Portal

   
6. Тепер знадобиться спеціальна тема, яку ви раніше створили на основі теми WebSphere Portal 8.0. Використовуючи утиліту WebDAV:
   • поновіть шаблон теми (theme.html);
   • скопіюйте файли теми Worklight JavaScript;
   • створіть модулі, які будуть визначені в профілі нової теми.

   Запустіть утиліту WebDAV (для цього прикладу ми використовували AnyClient) і підключіться до точки входу fs-type1. Після завантаження з'явиться структура папок, показана на малюнку 14.

   Малюнок 14. Структура папок fs-type1 WebDAV

   
7. Перейдіть в свою спеціальну тему; наприклад, fs-type1: themes / <customTheme>. Створіть папку з ім'ям worklight всередині своєї теми (рисунок 15).

   Малюнок 15. Папка worklight

   
8. Знайдіть в Eclipse файли JavaScript бібліотек Worklight, які будуть завантажуватися в WebSphere Portal. Ці папки з іменами wlclient і common розташовані тут: \ WLPortal \ apps \ WLPortalApp \ android \ native \ assets \ www \ default \. Скопіюйте обидві папки wlclient і common в папку worklight, створену в WebDAV.
9. Відкрийте основний HTML-файл \ WLPortal \ apps \ WLPortalApp \ android \ native \ assets \ www \ default \ WLPortalApp.html, який додаток завантажила перед вставкою URL WebSphere Portal. Додаток більше не використовує цей файл, тому дві його частини потрібно інтегрувати в WebSphere Portal.
   • По-перше, це статичний файл JavaScript, включений в елемент <head> (лістинг 7).

     Лістинг 7. Статичний файл JavaScript, включений в елемент head файлу WLPortalApp.html

     <Script type = "text / javascript"> // Визначення простору імен WL. var WL = WL? WL: {}; / ** * Змінні конфігурації WLClient. * Значення вводить deployer, який упаковує гаджет. * / WL.StaticAppProps = { "APP_DISPLAY_NAME": "WLPortalApp", "APP_LOGIN_TYPE": "never", "APP_SERVICES_URL": "\ / apps \ / services \ /", "APP_VERSION": "1.0", "ENVIRONMENT": "android", "LOGIN_DISPLAY_TYPE": "embedded", "LOGIN_REALM": null, "WORKLIGHT_ROOT_URL": "\ / apps \ / services \ / api \ / WLPortalApp \ / android \ /"}; </ script>
   • Друга частина - це група onload елемента <body> який ініціалізує клієнт Worklight (лістинг 8).

     Лістинг 8. Група методу onload елемента body для ініціалізації Worlight JavaScript

     <Body id = "content" onload = "WL.Client.init ({})" style = "display: none">

   Обидва ці частини потрібно включити в тему як артефакти модуля. Візьміть JavaScript з цього HTML-файлу і включіть його у вигляді окремих файлів JavaScript. Створіть два нових файлу з іменами init.js і staticprops.js в папці fs-type1: themes / <customTheme> / worklight / common / js бібліотеки Worklight (рисунок 16).

   Малюнок 16. Нові файли init.js і staticprops.js

   
10. Скопіюйте щойно створений файл staticprops.js на свою локальну машину і відкрийте його (лістинг 9). Скопіюйте в цей файл статичний JavaScript з HTML-сторінки.

    Лістинг 9. Вміст файлу staticprops.js

    var WL = WL? WL: {}; WL.StaticAppProps = { "APP_DISPLAY_NAME": "WLPortalApp", "APP_LOGIN_TYPE": "never", "APP_SERVICES_URL": "\ / apps \ / services \ /", "APP_VERSION": "1.0", "ENVIRONMENT": "android "," LOGIN_DISPLAY_TYPE ":" embedded "," LOGIN_REALM ": null," WORKLIGHT_ROOT_URL ":" \ / apps \ / services \ / api \ / WLPortalApp \ / android \ / "};

    Скопіюйте оновлений файл staticprops.js назад в папку <customTheme> / worklight / common / js WebDAV.

11. Скопіюйте щойно створений файл init.js в свою локальну машину і відкрийте його (лістинг 10). Тут для створення функції onload, яка замінює групу з рядка onload на HTML-сторінці, використовується API i $, включений в тему WebSphere Portal.

    Лістинг 10. Зміст файлу init.js

    i $ .addOnLoad (function () {WL.Client.init ({});});

    Скопіюйте файл init.js назад в папку <customTheme> / worklight / common / js WebDAV.

    Детальніше про API i $ см. В WebSphere Portal 8.0 Javadocs $ , А про створення модулів з використанням середовища ортімізаціі теми - в вікі WebSphere Portal.

12. Останній артефакт, який необхідно створити перед визначенням нових модулів теми, це приклад, який перевіряє Worklight JavaScript. Цей приклад перевіряє, що API Cordova доступний в рамках теми WebSphere Portal, і заснований на наборі прикладів API Cordova .

    Так як цей приклад призначений тільки для перевірки застосування API в WebSphere Portal, і таким чином можливості його багаторазового використання обмежені, немає необхідності створювати для нього спеціальний модуль. Додайте фрагмент коду безпосередньо в шаблоні теми, а потім скопіюйте локалізований шаблон теми в свій комп'ютер. Шаблон теми знаходиться на WebDAV і розташований в спеціальній темі fs-type1: themes / <customTheme> /nls/theme_en.html (рисунок 17).

    Малюнок 17. Локалізований шаблон теми для додавання прикладу коду

    
13. Відкрийте шаблон теми і знайдіть динамічний елемент <a rel="dynamic-content" href="co:config"> </a>, розташований в нижній частині шаблону. Помістіть приклад deviceready з API Cordova після цього динамічного елемента, як показано в лістингу 11.

    Лістинг 11. Приклад для тестування API Cordova в WebSphere Portal

    <Div class = "wpthemeComplementaryContent" id = "wpthemeComplementaryContent" role = "region" aria-labelledby = "wpthemeComplementaryContentText"> <span class = "wpthemeAltText" id = "wpthemeComplementaryContentText"> Complementary Content </ span> <a rel = "dynamic -content "href =" co: config "> </a> <script type =" text / javascript "> document.addEventListener (" deviceready ", onDeviceReady, false); function onDeviceReady () {var element = document.getElementById ( 'deviceProperties'); element.innerHTML = 'Device Name:' + device.name + '<br/>' + 'Device Version:' + device.version; } <Script> </ div>
14. Коли сценарій JavaScript для тестування Cordova буде готовий, потрібно вставити в шаблон теми елемент, що відображає інформацію про пристрій. Безпосередньо під елементом <body> помістіть в шаблон теми елемент з ідентифікатором deviceProperties. Приклад приведений в лістингу 12.

    Лістинг 12. Елемент властивостей пристрою в шаблоні теми

    <P id = "deviceProperties"> Loading device info </ p>
15. Поки шаблон теми відкрито, додайте в елемент <body> id зі значенням content (лістинг 13). Це потрібно для методу init Worklight.

    Лістинг 13. Додавання нового ідентифікатора в елемент body

    <Body id = "content" class = "lotusui30dojo tundra locale_en">
16. Тепер, коли елементи з HTML-сторінки і приклад для тестування коду JavaScript Worklight включені в тему як окремих файлів, їх можна визначити як артефакти нових модулів. Для цього зареєструйте нові вклади теми як файли конфігурації JSON в папці contributions спеціальної теми в WebDAV. Система автоматично перегляне файли в цій папці, і вклади будуть зареєстровані в тій темі, де вони визначені. (Детальніше про створення вкладів теми см. В статті Реєстрація вкладів в теми ).
    1. Відкрийте папку contributions спеціальної теми і створіть файл з ім'ям worklight.json. Цей файл повинен визначити два нових модуля:
       • для файлів бібліотеки Worklight JavaScript і
       • ініціалізації onload Worklight.

       Ці два модуля будуть визначені як wl_client і wl_init відповідно.

    2. Скопіюйте файл worklight.json в свою локальну машину і помістіть в цей файл вміст лістингу 14.

       Лістинг 14. Зміст файлу worklight.json

       { "Modules": [{ "id": "wl_client", "contributions": [{ "type": "config", "sub-contributions": [{ "type": "js", "uris": [ { "value": "/ worklight / common / js / staticprops.js"}]}, { "type": "js", "uris": [{ "value": "/ worklight / wlclient / js / cordova. js "}]}, {" type ":" js "," uris ": [{" value ":" / worklight / common / js / wljq.js "}]}, {" type ":" js ", "uris": [{ "value": "/ worklight / common / js / base.js"}]}, { "type": "js", "uris": [{ "value": "/ worklight / wlclient /js/messages.js "}]}, {" type ":" js "," uris ": [{" value ":" / worklight / common / js / wlcommon.js "}]}, {" type " : "js", "uris": [{ "value": "/ worklight / wlclient / js / diagnosticDialog.js"}]}, { "type": "js", "uris": [{ "value": "/worklight/wlclient/js/deviceAuthentication.js"}]}, { "type": "js", "uris": [{ "value": "/ worklight / wlclient / js / window.js"}]} , { "type": "js", "uris": [{ "value": "/ worklight / wlclient / js / worklight.js"}]}, { "type": "js", "uris": [ { "value": "/ worklight / wlclient / js / wlclient.js"}]}, { "type": "js", "uris": [{ "value": "/ worklight / wlclient / js / wlfragments. js "}]}, {" type ":" js "," Uris ": [{" value ":" / worklight / wlclient / js / encryptedcache.js "}]}, {" type ":" js "," uris ": [{" value ":" / worklight /wlclient/js/checksum.js "}]}, {" type ":" js "," uris ": [{" value ":" / worklight / wlclient / js / wlgap.android.js "}]}] }]}, { "id": "wl_init", "prereqs": [{ "id": "wl_client"}, { "id": "wp_client_main"}, { "id": "wp_client_ext"}], " contributions ": [{" type ":" config "," sub-contributions ": [{" type ":" js "," uris ": [{" value ":" / worklight / common / js / init.js "}]}]}]}]}
    3. Скопіюйте файл worklight.json назад в папку <customTheme> / contributions WebDAV.
17. Тепер бібліотеки Worklight JavaScript визначені в модулях теми. Приклад для тестування JavaScript поміщений безпосередньо в шаблон теми, щоб після тестування його можна було легко видалити, а в профілі коду прикладу ніякого модуля не потрібно. На останньому кроці потрібно визначити модулі в профілі теми. Створіть новий профіль, відкривши профіль lightweight, розташований в каталозі спеціальної теми fs-type1: themes / <customTheme> /profiles/profile_lightweight.json. Розмістіть цей файл на локальний комп'ютер і перейменуйте його в profile_worklight.json.
18. Відкрийте файл profile_worklight.json і додайте модулі wl_client і wl_init, які ви визначили як вклади (лістинг 15).

    Лістинг 15. Приклад масиву ідентифікаторів модулів, визначених у профілі

    "ModuleIDs": [ "wp_theme_portal_80", "wp_portlet_css", "wp_one_ui", "wp_one_ui_dijit", "wp_legacy_layouts", "wp_client_ext", "wp_status_bar", "wp_theme_menus", "wp_theme_skin_region", "wp_theme_high_contrast", "wp_layout_windowstates", “wl_client” , “wl_init”],
19. Перейменуйте профіль так, щоб його можна було легко знайти в діалоговому вікні властивостей сторінки. Для цього знайдіть заголовок англійською мовою (або на мові, на якому ви плануєте працювати) і змініть Lightweight на Worklight (листинги 16 і 17).

    Лістинг 16. Тема профілю до зміни

    { "Value": "Lightweight", "lang": "en"},

    Лістинг 17. Тема профілю після зміни

    { "Value": "Worklight", "lang": "en"},
20. Скопіюйте файл profile_worklight.json в каталог <customTheme> / profiles / WebDAV. Очистіть кеш браузера і перезапустіть WebSphere Portal, щоб включити новий профіль.

    Всі артефакти теми, необхідні для застосування IBM Worklight JavaScript в WebSphere Portal, готові. Тепер можна скористатися профілем, що визначає модулі, включені в артефакти Worklight, застосувавши його до сторінки. Додати сторінку зі своєю спеціальною темою, якщо ви ще не зробили цього. (Детальніше про створення сторінок см. В розділі Створення сторінок і навігація .)

    Існує два способи застосування профілю на сторінку і перегляду змін до Worklight. Можна, можливо:

    • або встановити профіль як тему за замовчуванням;
    • або встановити його для певної сторінки.

    Будь-який спосіб буде працювати, так що ви побачите зміни, але встановити профіль для певної сторінки простіше. Для цього відкрийте діалогове вікно Page Properties в розділі настройки і знайдіть розгортається меню доступних профілів тим на вкладці Advanced (рисунок 18). (Детальніше див. У розділі Зміна теми профілю вики WebSphere Portal Family.)

    Малюнок 18. Меню профілів в діалоговому вікні властивостей сторінки

    

Тестування гібридного додатки з емулятором Android

Тепер, коли на сторінку WebSphere Portal застосований ваш профіль, можна перевірити приклад з емулятором Android.

1. Ще раз побудуйте і розгорніть додаток, клацнувши на ньому правою кнопкою миші і вибравши команду Build All and Deploy. Ви побачите хід процесу на панелі стану Eclipse внизу праворуч.
2. Після завершення процесу клацніть правою кнопкою на WLPortalWLPortalAppAndroid і виберіть Run As ...> Android Application. Запуститься емулятор Android, і додаток відобразить ваш WebSphere Portal.
3. Після того як додаток візуалізувати WebSphere Portal, увійдіть і перейдіть на нову сторінку, до якої ви застосували профіль Worklight, якщо до неї немає анонімного доступу. Знадобиться кілька секунд на завантаження налаштувань в пристрій, і вони з'являться в верхній частині сторінки, як показано на малюнку 19.

   Малюнок 19. Додаток Worklight з відомостями про пристрій з WebSphere

   

Висновок

IBM Worklight полегшує взаємодію багатоканальних Web-додатків з пристроєм і створення каналів доставки для мобільних пристроїв. Оболонка Worklight - це тонкий шар коду "рідного" клієнта в пристрої, який управляє такими речами, як перевірка справжності, захист, запуск додатків і повідомлення, і його можна налаштувати для конкретних потреб організації. Ця оболонка служить для запуску Web-контенту (реального змісту додатка). IBM WebSphere Portal може збирати портлет, що включають розмітку з використанням власних служб Worklight поряд з іншими портлетами. Для цього оболонка Worklight передається стандартним чином і вказує на Web-сайти, керовані WebSphere Portal. Оболонку Worklight можна також упакувати для публікації в app store або для розгортання через MDM. В результаті ви отримуєте всі можливості по управлінню багатоканальним Web-сайтом WebSphere Portal, доповнені "рідними" службами пристроїв.

У наступних статтях цього циклу ми розглянемо питання, пов'язані з використанням власних можливостей теми WebSphere Portal, налаштуванням перевірки автентичності між Worklight і WebSphere Portal, забезпеченням інтеграції з пристроєм соціальних служб і засобів управління Web-контентом через Worklight і розширенням за допомогою Worklight портлетів IBM Rational Application Developer і IBM Web Experience Factory.

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

Схожі тими

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