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

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

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

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

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

https://www.ibm.com/developerworks/ru/views/global/libraryview.jsp?series_title_by=Разработка+веб-приложений+для+мобильных+устройств+с+помощью+websphere+portal+и+ibm+worklight+ v6.0

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

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

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

отримати Worklight

Завантажте безкоштовну версію IBM Worklight Developer Edition 6.0 з необмеженим терміном дії!

Для багатьох - якщо не для більшості - галузей мобільні пристрої стали критично важливим і стратегічним каналом продажів, маркетингу і т. Д. Однак при управлінні брендом за допомогою веб-сайтів часто виникає проблема доставки контенту додатків на мобільні пристрої.

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

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

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

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

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

  • Повністю нативная реалізація корпоративного мобільного додатка обходиться дуже дорого і забирає багато часу. Кваліфіковані фахівці, здатні створити повністю нативное додаток, дефіцитні і дороги. Для складного нативного додатки можуть знадобитися кілька технічних фахівців, а необхідність підтримки різних платформ призводить до подальшого збільшення витрат. Після початкової розробки безперервні оновлення операційної системи зумовлюють необхідність випуску нових версій програми, які необхідно заново верифікувати перед розміщенням в магазинах додатків.
  • Навпаки, веб-додатки, засновані на HTML5, CSS3 і JavaScript- або використовують такі клієнтські середовища, як Dojo і jQuery, надають простий спосіб зробити веб-сайти дружніми до мобільних пристроїв. Витрати на їх розробку зазвичай набагато нижче, оскільки програмістів, знайомих з веб-інтерфейсами загального призначення, знайти легше. Як правило, відновлення операційних систем не впливають на мобільні веб-сайти, які можна спроектувати таким чином, щоб вони працювали з пристроями від різних виробників.

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

    Цей підхід має два основних недоліки:

    • Ви будете мати доступ тільки до тих функцій пристроїв, які надає браузер. Наприклад, на iOS-пристроях буде доступ до потенціометра, до акселерометру і до GPS, але не буде доступу до фотокамери.
    • У сфері графіки можна робити тільки те, що дозволяють технології HTML / CSS / JavaScript. Відповідно деякі функції точного управління зображенням і призначеним для користувача інтерфейсом, доступні в нативної середовищі, недоступні в середовищі браузера.
  • Гібридні програми дозволяють поєднати кращі сторони обох підходів. Ви отримуєте простоту розробки із застосуванням CSS / HTML / JavaScript, але можете додати нативні сервіси і створити додаток для магазину додатків. Такі технології, як Apache Cordova (яку використовує і надає Worklight), дозволяють викликати нативні функції операційної системи за допомогою JavaScript-коду, розміщеного в веб-розмітці. Наприклад, виклик фотокамери здійснює наступна проста рядок JavaScript: navigator.camera.takeSnapshot.

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

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

компоненти

  • Worklight

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

  • WebSphere Portal

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

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

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

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

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

    При плануванні розгортання Worklight і WebSphere Portal необхідно вибрати топологію серверів. Для доступу сервера IBM Worklight до сервера WebSphere Portal потрібно проксі-сервер. При тестуванні даного прикладу обидва сервера - і WebSphere Portal, і Worklight - були розгорнуті на одній і тій же машині розробника. Щоб розгорнути цей приклад в ситуації, коли вищевказані сервери знаходяться на різних системах, вам знадобиться проксі-сервер. У модулі 45 документації Getting started with IBM Worklight (Початок роботи з IBM Worklight) показано, як використовувати віддалений веб-сайт, наприклад, розміщений на сервері WebSphere Portal.

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

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

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

  • WebSphere Portal 8.0

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

  • Eclipse

    завантажте Eclipse . Даний приклад базується на Eclipse версії 4.2 (Juno), а його тестування виконувалося за допомогою середовища Eclipse IDE для Java ™ EE Developers (можливе використання Eclipse Classic і Eclipse IDE для Java Developers, однак ці продукти не були протестовані з даним прикладом).

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

  • Android SDK

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

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

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

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

    Worklight розпочинається сервером як частина середовища Eclipse. За замовчуванням порт сервера має номер 10080.

  • WebDAV client

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

  • Призначена для користувача тема

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

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

  1. Запустіть Eclipse.
  2. 2. Щоб приступити до побудови додатка, необхідно створити новий проект Worklight. В Eclipse виберіть New> Other> Worklight Project, а потім натисніть на Next (рис. 2).
    Малюнок 2. Створення нового проекту Worklight
  3. Дайте проекту ім'я. На малюнку 3 проект носить ім'я WLPortal. Залиште обраний за замовчуванням режим Hybrid Application і натисніть Next.
    Малюнок 3. Проект Worklight
  4. Назвіть гібридному додатком в проекті Worklight, в даному випадку - ім'я WLPortalApp. У цьому прикладі немає ніякого JavaScript-пакета, проте його можна додати на цій панелі (рис. 4).
    Малюнок 4. Ім'я гібридного додатки
  5. Натисніть Finish. Розпочнеться створення артефактів проекту і програми. Цей процес може зайняти кілька хвилин. Після його закінчення вам буде запропоновано перейти в перспективу Design і переглянути проект у вікні Project Explorer (рис. 5).
    Малюнок 5. Представлення проекту в середовищі Eclipse
  6. Далі вам потрібно створити середовище Worklight для побудови гібридного додатки. Натисніть правою кнопкою на WLPortalApp в папці apps і виберіть New> Worklight Environment (рис. 6).
    Малюнок 6. Створення нової середовища Worklight
  7. З'явиться панель New Worklight Environment (рис. 7). Так як цей конкретний приклад призначений тільки для гібридного Android-додатки, виберіть Android phones and tablets. Якщо вам необхідно створити середовища для інших операційних систем, то ця панель дозволяє вказати відповідні додаткові опції. Натисніть Finish.
    Малюнок 7. Подання середовища Worklight в Eclipse
  8. Worklight Studio створює і оновлює проект з нативним додатком (рис. 8). Цей нативний проект має ім'я Worklight Project / WorklightApplication / Platform. Worklight Studio управляє життєвим циклом цієї програми, і вам не потрібно вносити в нього ніяких змін. Коли веб-додаток, спочатку створене в проекті, буде зібрано і розгорнуто, нативное додаток буде переписано з внесенням всіх змін.
    Малюнок 8. Оригінальне додаток зібрано
  9. Тепер, коли додаток налаштоване, перевірте можливість його збірки і розгортання. Як показано на рис. 9, команда Build All and Deploy означає повторне розгортання нативного додатки з урахуванням змін в веб-додатку. Команду Build All and Deploy можна виконати, натиснувши правою кнопкою миші на додатку і вибравши Run As> Build All and Deploy.
    Малюнок 9. Вибір опції Build All and Deploy

    Після початку процесу складання в правому нижньому кутку панелі стану Eclipse з'явиться індикатор виконання процесу. Після завершення процесу на консолі Worklight має з'явитися повідомлення Application 'YourApp' deployed successfully with environment 'android' (Додаток YourApp успішно розгорнуто в середовищі android), див. Рис. 10.

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

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

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

  1. Перший крок в процесі інтеграції WebSphere Portal і Worklight полягає у відображенні порталу в Android-додатку. Для цього створимо гібридне додаток, яке підключається до WebSphere Portal зсередини нативной обгортки. В Eclipse відкрийте файл application-descriptor.xml, розташований в наступному місці \ WLPortal \ apps \ WLPortalApp \ application-descriptor.xml (рис. 12).
    Малюнок 12. Файл application-descriptor.xml після вставки URL-адреси продукту Portal

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

  1. Тепер знову натисніть правою кнопкою на додатку і виберіть Build All and Deploy. Ви побачите хід процесу в нижньому правому куті панелі стану Eclipse. Після завершення процесу натисніть правою кнопкою на WLPortalWLPortalAppAndroid і виберіть Run As ...> Android Application. Запуститься емулятор Android, а додаток відобразить WebSphere Portal (див. Рис. 13).
    Малюнок 13. Емулятор виконує додаток, що відображає WebSphere Portal
  2. 3. Тепер вам знадобиться для користувача тема, яку ви раніше створили на основі теми WebSphere Portal 8.0. За допомогою WebDAV-утиліти виконайте наступні дії.
    • Оновлення шаблон теми (theme.html).
    • Скопіюйте в тему файли JavaScript-коду Worklight.
    • Створіть модулі, які будуть визначені в профілі нової теми.

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

    Малюнок 14. Структура папок WebDAV для fs-type1
  3. Перейдіть в свою призначення для користувача тему, например, fs-type1: themes / <customTheme>. Створіть Всередині своєї тими папку з ім'ям worklight (рис. 15).
    Малюнок 15. Створена папка worklight
  4. 5. Знайдіть в Eclipse JavaScript-файли бібліотек Worklight, Які ви будете завантажуваті в WebSphere Portal. Ці папки з іменами wlclient, js, і common розташовані в наступному місці: \ WLPortal \ apps \ WLPortalApp \ android \ native \ assets \ www \ default \. Скопіюйте ці папки в папку worklight, створену за допомогою WebDAV-утиліти. Для базової інтеграції Cordova і Worklight-клієнта вам не доведеться використовувати весь JavaScript-код, який входить в ці три папки, однак при використанні більш просунутих функцій, таких як аналітика або API-інтерфейси датчиків пристрою, їх також потрібно буде визначити в цьому модулі.
  5. Відкрийте основний HTML-файл \ WLPortal \ apps \ WLPortalApp \ android \ native \ assets \ www \ default \ WLPortalApp.html, який додаток завантажила перед вставкою URL-адреси WebSphere Portal. Статичний JavaScript-код, який входить в елемент <head> (лістинг 1), потрібно інтегрувати в WebSphere Portal, оскільки додаток більше не використовує цей файл.
    Лістинг 1. Статичний JavaScript-код, який входить в елемент head файлу WLPortalApp.html
    <Script type = "text / javascript"> // Визначити простір імен WL. var WL = WL? WL: {}; / ** * Змінні конфігурації WLClient. * Значення вводить процедура розгортання, яка упаковує гаджет. * / 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>

    Цей розділ необхідно включити в тему як артефакт модуля. Тепер візьміть JavaScript-код з цього HTML-файлу і включіть його у вигляді окремого JavaScript-файлу. Створіть новий файл з ім'ям staticprops.js в папці: fs-type1: themes / <customTheme> / worklight / js /.

  6. Скопіюйте щойно створений файл staticprops.js на свою локальну машину і відкрийте його (лістинг 2). Скопіюйте в цей файл статичний JavaScript-код з HTML-сторінки.
    Лістинг 2. Вміст файлу 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 назад в папку / themes / <customTheme> / worklight / js в WebDAV-утиліту.

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

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

    Малюнок 16. Локалізований шаблон теми для додавання прикладу коду
  8. Відкрийте шаблон теми і знайдіть елемент динамічного контенту <a rel="dynamic-content" href="co:config"> </a>, розташований в нижній частині шаблону. Помістіть приклад deviceready з Cordova API після цього елемента динамічного контенту (див. Лістинг 3).
    Лістинг 3. Приклад для тестування 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 Model:' + device.model + '<br/>' + 'Device Version:' + device.version; } </ Script> </ div>
  9. Коли JavaScript-код для тестування Cordova буде готовий, потрібно вставити в шаблон теми елемент, що відображає інформацію про пристрій. Безпосередньо під елементом <body> помістіть в шаблон теми елемент з ідентифікатором deviceProperties. Відповідний приклад показаний в лістингу 4.
    Лістинг 4. Елемент властивостей пристрою в шаблоні теми
    <P id = "deviceProperties"> Loading device info </ p>
  10. Не закриваючи шаблону теми, додайте в елемент <body> код id зі значенням content (лістинг 5). Це потрібно для методу init продукту Worklight.
    Лістинг 5. Додавання нового ідентифікатора в елемент body
    <Body id = "content" class = "lotusui30dojo tundra locale_en">
  11. 12. Тепер, коли елементи з HTML-сторінки і приклад для тестування JavaScript-коду Worklight включені в тему як окремих файлів, їх можна визначити як артефакти нових модулів. Для цього зареєструйте нові вклади (contribution) теми як конфігураційні JSON-файли в папці contributions користувальницької теми в WebDAV. Система автоматично просканує файли в цій папці, і ці вклади будуть зареєстровані в тій темі, де вони визначені. Додаткові відомості про створення вкладів для теми викладені в статті Registering theme specific contributions (Реєстрація вкладів в теми).
    1. Відкрийте папку contributions користувальницької теми і створіть файл з ім'ям worklight.json. Цей файл повинен визначити новий модуль для JavaScript-файлів бібліотеки Worklight. Цей новий модуль буде визначено як wl_client.
    2. Скопіюйте файл worklight.json на свою локальну машину і помістіть в цей файл вміст лістингу 6.
      Лістинг 6. Вміст файлу worklight.json
      { "Modules": [{ "id": "wl_client", "contributions": [{ "type": "config", "sub-contributions": [{ "type": "js", "uris": [ { "value": "/ worklight / 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 / wl_.min.js "}]}, {" type ":" js "," uris ": [{" value ":" / worklight / common /js/sjcl.min.js "}]}, {" type ":" js "," uris ": [{" value ":" / worklight / common / js / stacktrace.min.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 / features_stubs / jsonstore_stub.js "}]}, {" type " : "js", "uris": [{ "value": "/ worklight / wlclient / js / wlgap.android.js"}]}, { "type": "js", "uris": [{ "value ":" / worklight / js / initOptions.js "}]}, {" type ":" js "," uris ": [{" value ":" / worklight / js / messages.js "}]}]} ]}]}
    3. Скопіюйте файл worklight.json назад в папку / themes / <customTheme> / contributions в WebDAV. Тепер JavaScript-бібліотеки Worklight визначені в модулях теми. Приклад для тестування JavaScript-коду розміщений безпосередньо в шаблон теми, щоб після тестування його можна було легко видалити, а в профілі коду прикладу ніякого модуля не потрібно. На останньому кроці потрібно визначити модулі в профілі теми. Створіть новий профіль, відкривши профіль lightweight, розташований в каталозі спеціальної теми fs-type1: themes / <customTheme> /profiles/profile_lightweight.json. Розмістіть цей файл на локальний комп'ютер і надайте йому ім'я profile_worklight.json.
  12. Відкрийте файл profile_worklight.json і додайте модулі wl_client і wl_init, які ви визначили як вклади (лістинг 7). Вам лише потрібно визначити модуль wl_init, оскільки він є необхідною умовою для модуля wl_client, щоб гарантувати агрегацію їх обох на сторінці.
    Лістинг 7. Приклад масиву ідентифікаторів модулів, визначених у профілі
    "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 "],
  13. Перейменуйте профіль таким чином, щоб його можна було легко знайти в діалоговому вікні властивостей сторінки. Для цього знайдіть заголовок англійською мовою (або на мові, на якому ви плануєте працювати) і змініть його з Lightweight на Worklight (листинги 8 і 9).
    Лістинг 8. Тема профілю до зміни
    { "Value": "Lightweight", "lang": "en"},
    Лістинг 9. Тема профілю після зміни
    { "Value": "Worklight", "lang": "en"},
  14. Скопіюйте файл profile_worklight.json в каталог / themes / <customTheme> / profiles / в WebDAV. Очистіть кеш браузера і перезапустіть WebSphere Portal, щоб задіяти новий профіль.

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

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

    • Налаштуйте профіль як тему за замовчуванням.
    • Задайте профіль спеціально для певної сторінки.

    Будь-який з цих способів буде працювати і дозволить побачити зміни, однак простіше поставити профіль для певної сторінки. Для цього відкрийте діалогове вікно Page Properties в розділі настройки і знайдіть спадаюче меню доступних профілів тим на вкладці Advanced (рис. 17). Додаткова інформація наведена в розділі Changing the theme profile (Зміна теми профілю).

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

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

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

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

Висновок

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

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

переходьте до другий статті або ознайомтеся з jsp?sort_by=&show_abstract=true&show_all=&search_flag=&contentarea_by=Mobile+development&search_by=Deliver+an+exceptional+mobile+web+experience+using+WebSphere+Portal+and+Worklight+&topic_by=All+Mobile+development+Topics&industry_by=All+Mobile+development+Industries&type_by=All+Mobile+development+Types&ibm-search=Search> всіма статтями цього циклу .

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

Схожі тими

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

Jsp?
Які пристрої необхідно підтримувати?
2. Що додаток повинен робити?
В яких випадках буде використовуватися цю програму?
Будуть потрібні особливі функції пристрою, такі як GPS або камера?
Чи буде для відображення контенту високоякісний екран або буде достатньо мобільного браузера?
Var WL = WL?