Содержание


Разработка веб-приложений для мобильных устройств с помощью WebSphere Portal и IBM Worklight V6.0

Часть 1. Интеграция гибридного мобильного приложения со страницами WebSphere Portal

Comments

Серия контента:

Этот контент является частью # из серии # статей: Разработка веб-приложений для мобильных устройств с помощью WebSphere Portal и IBM Worklight V6.0

Следите за выходом новых статей этой серии.

Этот контент является частью серии:Разработка веб-приложений для мобильных устройств с помощью WebSphere Portal и IBM Worklight V6.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 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
    Figure 1. Set the Oracle JRE in Eclipse
    Figure 1. Set the Oracle JRE in 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
    Figure 2. Create a new Worklight project
    Figure 2. Create a new Worklight project
  3. Присвойте проекту имя. На рисунке 3 проект носит имя WLPortal. Оставьте выбранный по умолчанию режим Hybrid Application и нажмите Next.
    Рисунок 3. Проект Worklight
    Figure 3. Name your Worklight project
    Figure 3. Name your Worklight project
  4. Присвойте имя гибридному приложению в проекте Worklight, в данном случае — имя WLPortalApp. В этом примере нет никакого JavaScript-пакета, однако его можно добавить на этой панели (рис. 4).
    Рисунок 4. Имя гибридного приложения
    Figure 4. Name the hybrid application
    Figure 4. Name the hybrid application
  5. Нажмите Finish. Начнется создание артефактов проекта и приложения. Этот процесс может занять несколько минут. После его окончания вам будет предложено перейти в перспективу Design и просмотреть проект в окне Project Explorer (рис. 5).
    Рисунок 5. Представление проекта в среде Eclipse
    Figure 5. Project displayed in Eclipse
    Figure 5. Project displayed in Eclipse
  6. Далее вам нужно создать среду Worklight для построения гибридного приложения. Нажмите правой кнопкой на WLPortalApp в папке apps и выберите New > Worklight Environment (рис. 6).
    Рисунок 6. Создание новой среды Worklight
    Figure 6. Create a new Worklight environment
    Figure 6. Create a new Worklight environment
  7. Появится панель New Worklight Environment (рис. 7). Так как этот конкретный пример предназначен только для гибридного Android-приложения, выберите Android phones and tablets. Если вам необходимо создать среды для других операционных систем, то эта панель позволяет указать соответствующие дополнительные опции. Нажмите Finish.
    Рисунок 7. Представление среды Worklight в Eclipse
    Figure 7. Worklight environment displayed in Eclipse
    Figure 7. Worklight environment displayed in Eclipse
  8. Worklight Studio создает и обновляет проект с нативным приложением (рис. 8). Этот нативный проект имеет имя Worklight Project/WorklightApplication/Platform. Worklight Studio управляет жизненным циклом этого приложения, и вам не нужно вносить в него никаких изменений. Когда веб-приложение, первоначально созданное в проекте, будет собрано и развернуто, нативное приложение будет переписано с внесением всех изменений.
    Рисунок 8. Нативное приложение собрано
    Figure 8. The native app is built
    Figure 8. The native app is built
  9. Теперь, когда приложение настроено, проверьте возможность его сборки и развертывания. Как показано на рис. 9, команда Build All and Deploy означает повторное развертывание нативного приложения с учетом изменений в веб-приложении. Команду Build All and Deploy можно выполнить, нажав правой кнопкой мыши на приложении и выбрав Run As > Build All and Deploy.
    Рисунок 9. Выбор опции Build All and Deploy
    Figure 9. Selecting build and deploy
    Figure 9. Selecting build and deploy

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

    Рисунок 10. Сообщение об успешном завершении процесса
    Figure 10. Success message displayed in log
    Figure 10. Success message displayed in log
  1. Чтобы запустить Android-приложение, нажмите правой кнопкой мыши на проекте WLPortalWLPortalAppAndroid в Project Explorer и выберите Run As > Android Application. Это приведет к запуску эмулятора Android (если он еще не запущен) и к загрузке экземпляра нового приложения. Возможно, чтобы увидеть это приложение, вам придется открыть начальный экран эмулятора. На рис.12 показано представление созданного приложения.
    Рисунок 11. Приложение в эмуляторе
    Figure 11. Application rendered in emulator
    Figure 11. Application rendered in emulator

Теперь в приложение нужно добавить код для вызова страницы 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
    The application-descriptor.xml after inserting Portal URL
    The application-descriptor.xml after inserting Portal URL
  1. Теперь снова нажмите правой кнопкой на приложении и выберитеBuild All and Deploy. Вы увидите ход процесса в нижнем правом углу панели состояния Eclipse. После завершения процесса нажмите правой кнопкой на WLPortalWLPortalAppAndroid и выберите Run As... > Android Application. Запустится эмулятор Android, а приложение отобразит WebSphere Portal (см. рис. 13).
    Рисунок 13. Эмулятор исполняет приложение, отображающее WebSphere Portal
    Figure 13. Emulator running application displaying WebSphere                         Portal
    Figure 13. Emulator running application displaying WebSphere Portal
  2. 3. Теперь вам понадобится пользовательская тема, которую вы ранее создали на основе темы WebSphere Portal 8.0. С помощью WebDAV-утилиты выполните следующие действия.
    • Обновите шаблон темы (theme.html).
    • Скопируйте в тему файлы JavaScript-кода Worklight.
    • Создайте модули, которые будут определены в профиле новой темы.

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

    Рисунок 14. Структура папок WebDAV для fs-type1
    Figure 14. WebDAV folder structure for fs-type1
    Figure 14. WebDAV folder structure for fs-type1
  3. Перейдите в свою пользовательскую тему, например, fs-type1:themes/<customTheme>. Создайте внутри своей темы папку с именем worklight (рис. 15).
    Рисунок 15. Созданная папка worklight
    Figure 15. The worklight folder has been created
    Figure 15. The worklight folder has been created
  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. Локализованный шаблон темы для добавления примера кода
    Figure 16. The localized theme template to add sample code
    Figure 16. The localized theme template to add sample code
  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. Меню профилей в диалоговом окне свойств страницы
    Figure 17. The profile menu in the page properties dialog
    Figure 17. The profile menu in the page properties dialog

Тестирование гибридного приложения с эмулятором 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
    Figure 18. Worklight application displaying device information                       in WebSphere
    Figure 18. Worklight application displaying device information in 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.

Переходите ко второй статье или ознакомьтесь со всеми статьями этого цикла.


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


Похожие темы


Комментарии

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии или подписаться на них.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Мобильные приложения, WebSphere, Lotus
ArticleID=972877
ArticleTitle=Разработка веб-приложений для мобильных устройств с помощью WebSphere Portal и IBM Worklight V6.0: Часть 1. Интеграция гибридного мобильного приложения со страницами WebSphere Portal
publish-date=01292014