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

Продукт IBM WebSphere Portal и решения IBM категории Exceptional Web Experience (расширенные веб-возможности) более десятилетия лидируют на рынке систем для взаимодействия пользователей с Интернетом. IBM Worklight это новая корпоративная платформа, предназначенная для создания нативных ("родных"), гибридных и веб-приложений для мобильных устройств. В этой статье объясняется, как при помощи интеграции WebSphere Portal и Worklight обеспечить поддержку приложений как для смартфонов на платформе Android, так и для смартфонов на платформе iOS. Включенное в статью упражнение дополняет пример, приведенный в части 1, и демонстрирует, как построить iOS-приложение и динамически добавлять соответствующие ресурсы Worklight версии 6.0.

Материал данной статьи применим к IBM Worklight версии 6.0 и выше. Для версии IBM Worklight V5.x имеется другой вариант статьи.

Джонатан Лидака, инженер по пользовательскому интерфейсу WebSphere Portal, IBM China

Джон Лидака (Jon Lidaka) работает инженером по пользовательскому интерфейсу в IBM Research Triangle Park Development Lab. Занимаясь разработкой Portal, он внес вклад в программирование тем с упором на доступность и глобализацию, а также других компонентов, включая портлеты администрирования и интегратор Web-приложений. В настоящее время руководит разработкой мобильной части Portal. Выступал на многочисленных конференциях IBM по проектированию пользовательского интерфейса и оптимизации тем Portal для мобильных устройств.



30.05.2014

Введение

Получить Worklight

Загрузите бесплатную версию IBM Worklight Developer Edition 6.0 с неограниченным сроком действия!

Платформа IBM Worklight позволяет создавать приложения для множества различных устройств, включая устройства на базе iOS, Android и Blackberry. Такие технологии, как Apache Cordova (которую использует и предоставляет Worklight), позволяют вызывать нативные функции с помощью JavaScript-кода, размещенного в веб-разметке.

Эта статья знакомит читателя с процессом создания гибридного iOS-приложения для смартфона iPhone, которое интегрируется с продуктом IBM WebSphere Portal. Рассматривается процесс определения устройства, которое обращается к порталу, и включения соответствующих ресурсов — для смартфона на базе iOS или на базе Android — с целью поддержки нативных возможностей в рамках приложения.

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

Эта статья дополняет информацию, представленную в части 1 настоящего цикла. Прежде чем выполнять описанные здесь шаги, выполните весь пример решения из части 1.

В дополнение к предварительным условиям, указанным в части 1, необходимо установить Apple Xcode для сборки описываемого примера гибридного приложения. Данная статья основывается на гибридном приложении Worklight с поддержкой Apple iPhone. Пример протестирован с Apple Xcode версии 4.4.1 и работает только в среде Apple OS X.


Включение Android-ресурсов в тему

В части 1 вы создали Android-приложение, которое интегрируется с IBM WebSphere Portal. В ходе этого процесса вы интегрировали JavaScript-ресурсы Worklight в рамках темы. Теперь вам нужно взять эти ресурсы и связать их с папкой, выделенной для Android-сред.

  1. Подключитесь к WebDAV-утилите и перейдите в папку fs-type1:themes/<customTheme>/worklight/.
  2. В этой папке находятся ресурсы, скопированные туда в части 1. Это папки с именами common, js и wlclient. Создайте там же новую папку с именем android.
  3. Переместите папки common, js и wlclient из их текущего местоположения в созданную папку android (рис. 1).
    Рисунок 1. Ресурсы Worklight для Android-устройств
    Worklight resources scoped for Android devices

    Кликните, чтобы увидеть увеличенное изображение

    Рисунок 1. Ресурсы Worklight для Android-устройств

    Worklight resources scoped for Android devices

Выполненная в части 1 настройка модуля для интеграции с Worklight теперь будет иметь некорректные маршруты для вкладов (contribution). JavaScript-ресурсы не будут доступны до тех пор, пока вы заново не зададите маршруты вкладов для Android и для iOS (эта тема будет рассмотрена позднее в данной статье).


Создание среды для iPhone в Worklight

  1. Чтобы создать новую среду для iPhone в Worklight, откройте Project Explorer и в папке apps нажмите правой кнопкой на WLPortalApp, затем выберите New > Worklight Environment (рис. 2).
    Рисунок 2. Создание новой среды Worklight
    Create a new Worklight environment
  2. 2. Появится панель New Worklight Environment (рис. 3). Для нашего конкретного примера выберите iPhone. Если вам нужно создать среды для других iOS-устройств, таких как iPad, на этой панели можно указать соответствующие дополнительные опции. Нажмите Finish.
    Рисунок 3. Среда Worklight в Eclipse
    Worklight environment displayed in Eclipse

    Кликните, чтобы увидеть увеличенное изображение

    Рисунок 3. Среда Worklight в Eclipse

    Worklight environment displayed in Eclipse
  3. Worklight Studio обновит проект, добавив нативное приложение для устройств iPhone (рис. 4).
    Рисунок 4. В проект добавлено нативное приложение для iPhone
    iPhone native app is added to the project
  4. Убедитесь в том, что в файле application-descriptor.xml внутри элемента mainFile настроен URL-адрес или IP-адрес для сервера WebSphere Portal (созданного в части 1), который вы хотите отображать в этом гибридном приложении (рис. 5).
    Рисунок 5. Файл application-descriptor.xml с URL-адресом сервера Portal
    The application-descriptor.xml with the Portal URL

    Кликните, чтобы увидеть увеличенное изображение

    Рисунок 5. Файл application-descriptor.xml с URL-адресом сервера Portal

    The application-descriptor.xml with the Portal URL
  5. Теперь, когда приложение настроено, проверьте возможность его сборки и развертывания. Как показано на рис. 6, команда Build All and Deploy означает повторное развертывание нативного приложения с учетом изменений в веб-приложении Команду Build All and Deploy можно выполнить, нажав правой кнопкой мыши на приложении и выбрав Run As > Build All and Deploy.
    Рисунок 6. Выбор опции Build All and Deploy
    Selecting build and deploy

    Кликните, чтобы увидеть увеличенное изображение

    Рисунок 6. Выбор опции Build All and Deploy

    Selecting build and deploy

    После начала процесса сборки его ход будет отображаться в правом нижнем углу панели состояния Eclipse. После завершения процесса на консоли Worklight должно появиться сообщение Application 'WLPortalApp' deployed successfully with all environments (Приложение YourApp успешно развернуто во всех средах). При этом обновляются оба приложения - и для iOS, и для Android. В приложении для iPhone будет автоматически отображаться портал в соответствии с URL, заданным в файле application-descriptor.xml, - точно так же, как в Android-приложении, созданном в части 1.

  6. Теперь нужно проверить это приложение в имитаторе iPhone. Для этого в среде Eclipse нажмите правой кнопкой мыши на строку iphone под именем своего проекта, а затем выберите Run as > Xcode project (рис. 7). Запустится Xcode, и приложение появится на консоли (рис. 8).
    Рисунок 7. Запуск приложения в качестве Xcode-проекта
    Running application as Xcode project

    Кликните, чтобы увидеть увеличенное изображение

    Рисунок 7. Запуск приложения в качестве Xcode-проекта

    Running application as Xcode project
    Рисунок 8. Приложение в Xcode
    Your application displayed in Xcode

    Кликните, чтобы увидеть увеличенное изображение

    Рисунок 8. Приложение в Xcode

    Your application displayed in Xcode
  7. Поскольку приложение создано для устройств iPhone, активируйте имитатор iPhone, для чего нажмите на направленную вниз стрелку , рядом со значком Run в верхней левой части консоли и выберите соответствующую версию имитатора iPhone (на рис. 9 выбрана версия iOS 7.0, однако более новые версии также будут работать).
    Рисунок 9. Активация имитатора iPhone
    Change the simulator to iPhone
  8. Нажмите значок Run в левом верхнем углу (рисунок 9), после чего имитатор запустит ваше приложение (рис. 11).
    Рисунок 10. Кнопка Run в Xcode
    The Run button in Xcode
    Рисунок 11. Ваше приложение работает в имитаторе iPhone
    Your application running in the iPhone simulator

    Кликните, чтобы увидеть увеличенное изображение

    Рисунок 11. Ваше приложение работает в имитаторе iPhone

    Your application running in the iPhone simulator

Обновление вкладов в модули Worklight для телефонов iOS и для телефонов Android

  1. Найдите в Eclipse файлы JavaScript-библиотек Worklight для iPhone, которые вы будете загружать в WebSphere Portal. Эти папки носят имена wlclient, js, common, как у аналогичных Android-ресурсов. Они находятся в следующем месте: \WLPortal\apps\WLPortalApp\iphone\native\www\default\.
  2. Подключитесь к WebDAV-утилите и перейдите в папку fs-type1:themes/<customTheme>/worklight/.
  3. Создайте в этом местоположении новую папку с именем iphone.
  4. В Eclipse скопируйте папки Worklight из среды iPhone в папку iphone, которую вы создали с помощью WebDAV (рис. 12). Для базовой интеграции Cordova и Worklight-клиента вам не потребуется весь JavaScript-код, включенный в эти три папки, однако при использовании более продвинутых функций, таких как аналитика или API-интерфейсы датчиков устройства, их также нужно будет определить в этом модуле.
    Рисунок 12. Папка iphone, созданная с помощью webDAV
    The iphone folder has been created on webDAV

    Кликните, чтобы увидеть увеличенное изображение

    Рисунок 12. Папка iphone, созданная с помощью webDAV

    The iphone folder has been created on webDAV
  5. Создайте файл специально для статических свойств iPhone (листинг 1).
    Листинг 1. Статические свойства для устройств iPhone
    var WL = WL ? WL : {};
    
    /**
     * Переменные конфигурации WLClient.
     * Значения вводит deployer, который упаковывает гаджет.
     */
    
     WL.StaticAppProps = {
    "APP_DISPLAY_NAME": "WLPortalApp",
    "APP_SERVICES_URL": "\/apps\/services\/",
    "APP_VERSION": "1.0",
    "ENVIRONMENT": "iphone",
    "LOGIN_DISPLAY_TYPE": "embedded",
    "WORKLIGHT_ROOT_URL": "\/apps\/services\/api\/WLPortalApp\/iphone\/"
    };
  6. 6. Возьмите JavaScript-код из листинга 1 и включите его в пригодном к использованию виде в новый JavaScript-файл с именем staticprops.js. Поместите этот новый файл в каталог fs-type1:themes/<customTheme>/worklight/iphone/js/.

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

Теперь нужно обновить тему WebSphere Portal, чтобы идентифицировать операционную систему мобильного устройства – это обеспечит включение нужного набора модулей в ресурсы Worklight. Идентификацию операционной системы мобильного устройства осуществляет механизм классов устройств в WebSphere Portal. Готовые клиенты для смартфонов Android и для смартфонов iOS объединены в один класс устройств с именем smartphone. Необходимо дифференцировать эти клиенты, чтобы загружать ресурсы в зависимости от операционной системы и гарантировать, что эти ресурсы будут загружаться только при использовании приложения Worklight.

  1. Для создания двух новых классов устройств, которые при исполнении Worklight-приложения будут идентифицировать клиенты смартфонов iPhone и клиенты Android-смартфонов, запустите скрипт xmlaccess, показанный в листинге 2. Кроме того, эти классы устройств позволят загружать ресурсы раздельно в рамках модуля темы.
    Листинг 2. Скрипт XMLAccess, добавляющий классы устройств для iPhone и для Adroid в приложение Worklight
    <?xml version="1.0" encoding="UTF-8"?>
    <request type="update" create-oids="true"
    	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    	xsi:noNamespaceSchemaLocation="PortalConfig_7.0.0_2.xsd">
    	<portal action="locate">
    		<device-class action="update" name="android-worklight" 
    			uniquename="wps.deviceclass.android_wl" />
    		<device-class action="update" name="iphone-worklight" 
    			uniquename="wps.deviceclass.iphone_wl" />
    	</portal>	
    </request>
  2. После создания классов устройств необходимо назначить их клиенту. Будут созданы два новых клиента, чтобы WebSphere Portal идентифицировал среды смартфона Worklight iPhone и смартфона Worklight Android. Для создания этих новых клиентов с присвоенными им новыми классами устройств запустите скрипт xmlaccess, показанный в листинге 3.
    Листинг 3. Скрипт XMLAccess, осуществляющий добавление клиентов для iPhone и для Adroid в приложение Worklight
    <?xml version="1.0" encoding="UTF-8"?>
    <request type="update" 
    		 version="8.0.0.0" 
    		 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    		 xsi:noNamespaceSchemaLocation="PortalConfig_8.0.0.xsd">
     	<portal action="locate">
          <client action="update" domain="rel" manufacturer="Apple" markup="html" 
    uniquename="wps.client.iphoneworklight">
          <useragent-pattern>.*iPhone.*Worklight.*</useragent-pattern>
    	<client-capability update="set">com.ibm.portal.devicesupport.deviceclass=
    	iphone-worklight</client-capability>     	
          <client-capability update="set">HTML_4_0</client-capability>
          </client>
          <client action="update" domain="rel" manufacturer="Google" markup="html" 
    uniquename="wps.client.androidmobileworklight">
          <useragent-pattern>.*Android.*Mobile.*Worklight.*</useragent-pattern>
    	<client-capability update="set">com.ibm.portal.devicesupport.deviceclass=
    android-worklight</client-capability>     	
          <client-capability update="set">HTML_4_0</client-capability>
          </client>
        </portal>
        </request>
  3. Теперь у нас есть все необходимые ресурсы Worklight для темы, а также классы устройств для идентификации среды устройства. Эти ресурсы будут агрегированы на странице с помощью модуля темы. Модуль темы позволяет описать вклад JavaScript и определить надлежащую среду, для которой он должен быть агрегирован. Атрибут deviceClass будет использоваться для переключения ресурсов между iPhone и Android.
  4. Подключитесь к WebDAV-утилите и откройте папку contributions в своей пользовательской теме, а затем откройте файл с именем worklight.json. Этот файл был создан в Части 1. Он описывает модуль с именем wl_client.
  5. Скопируйте файл worklight.json на свою локальную машину и замените содержимое этого файла на содержимое из листинга 4.
    Листинг 4. Определение модуля для ресурсов Worklight
    {
       "modules":[{
          "id":"wl_client",
          "contributions":[{
             "type":"config",
                "sub-contributions":[
     		{  
    			"type":"js",
    			"uris":[
    			{
    				"value":"/worklight/android/js/staticprops.js",
    				"deviceClass":"android-worklight"
    			}, {
    				"value":"/worklight/iphone/js/staticprops.js",
    				"deviceClass":"iphone-worklight"
    			}]
               },
               {  
    			"type":"js",
    			"uris":[
    			{
    				"value":"/worklight/android/wlclient/js/cordova.js",
    				"deviceClass":"android-worklight"
    			}, {
    				"value":"/worklight/iphone/wlclient/js/cordova.js",
    				"deviceClass":"iphone-worklight"
    			}]
               },
               {  
    			"type":"js",
    			"uris":[
    			{
    				"value":"/worklight/android/common/js/wljq.js",
    				"deviceClass":"android-worklight"
    			}, {
    				"value":"/worklight/iphone/common/js/wljq.js",
    				"deviceClass":"iphone-worklight"
    			}]
               },
    		{
    			"type":"js",
    			"uris":[
    			{
    				"value":"/worklight/android/common/js/wl_.min.js",
    				"deviceClass":"android-worklight"
    			}, {
    				"value":"/worklight/iphone/common/js/wl_.min.js",
    				"deviceClass":"iphone-worklight"
    			}]
               },
               {  
            	      "type":"js",
    			"uris":[
    			{
    				"value":"/worklight/android/common/js/sjcl.min.js",
    				"deviceClass":"android-worklight"
    			}, {
    				"value":"/worklight/iphone/common/js/sjcl.min.js",
    				"deviceClass":"iphone-worklight"
    			}]
    			
               },
    	   {
               		"type":"js",
    			"uris":[
    			{
    				"value":"/worklight/android/common/js/stacktrace.min.js",
    				"deviceClass":"android-worklight"
    			}, {
    				"value":"/worklight/iphone/common/js/stacktrace.min.js",
    				"deviceClass":"iphone-worklight"
    			}]
               },
               {               
            	      "type":"js",
    			"uris":[
    			{
    				"value":"/worklight/android/common/js/base.js",
    				"deviceClass":"android-worklight"
    			}, {
    				"value":"/worklight/iphone/common/js/base.js",
    				"deviceClass":"iphone-worklight"
    			}]
               },
               {
    	       	       "type":"js",
    			"uris":[
    			{
    				"value":"/worklight/android/wlclient/js/messages.js",
    				"deviceClass":"android-worklight"
    			}, {
    				"value":"/worklight/iphone/wlclient/js/messages.js",
    				"deviceClass":"iphone-worklight"
    			}]
               },
               {
            	       "type":"js",
    			"uris":[
    			{
    				"value":"/worklight/android/common/js/wlcommon.js",
    				"deviceClass":"android-worklight"
    			}, {
    				"value":"/worklight/iphone/common/js/wlcommon.js",
    				"deviceClass":"iphone-worklight"
    			}]
               },				
               {
    	              "type":"js",
    			"uris":[
    			{
    				"value":"/worklight/android/wlclient/js/diagnosticDialog.js",
    				"deviceClass":"android-worklight"
    			}, {
    				"value":"/worklight/iphone/wlclient/js/diagnosticDialog.js",
    				"deviceClass":"iphone-worklight"
    			}]
               },
               {
            	        "type":"js",
    			"uris":[
    			{
    			    "value":"/worklight/android/wlclient/js/deviceAuthentication.js",
    			    "deviceClass":"android-worklight"
    			}, {
    			    "value":"/worklight/iphone/wlclient/js/deviceAuthentication.js",
    			    "deviceClass":"iphone-worklight"
    			}]
               },
               {
    	               "type":"js",
    			"uris":[
    			{
    				"value":"/worklight/android/wlclient/js/window.js",
    				"deviceClass":"android-worklight"
    			}, {
    				"value":"/worklight/iphone/wlclient/js/window.js",
    				"deviceClass":"iphone-worklight"
    			}]
               },
               {
    	               "type":"js",
    			"uris":[
    			{
    				"value":"/worklight/android/wlclient/js/worklight.js",
    				"deviceClass":"android-worklight"
    			}, {
    				"value":"/worklight/iphone/wlclient/js/worklight.js",
    				"deviceClass":"iphone-worklight"
    			}]
               },
               {
            	       "type":"js",
    			"uris":[
    			{
    				"value":"/worklight/android/wlclient/js/wlclient.js",
    				"deviceClass":"android-worklight"
    			}, {
    				"value":"/worklight/iphone/wlclient/js/wlclient.js",
    				"deviceClass":"iphone-worklight"
    			}]
               },
               {
    	               "type":"js",
    			"uris":[
    			{
    				"value":"/worklight/android/wlclient/js/wlfragments.js",
    				"deviceClass":"android-worklight"
    			}, {
    				"value":"/worklight/iphone/wlclient/js/wlfragments.js",
    				"deviceClass":"iphone-worklight"
    			}]
               },
               {
     	              "type":"js",
    			"uris":[
    			{
    				"value":"/worklight/android/wlclient/js/encryptedcache.js",
    				"deviceClass":"android-worklight"
    			}, {
    				"value":"/worklight/iphone/wlclient/js/encryptedcache.js",
    				"deviceClass":"iphone-worklight"
    			}]
               },
               {
            	       "type":"js",
    			"uris":[
    			{
    				"value":"/worklight/android/wlclient/js/checksum.js",
    				"deviceClass":"android-worklight"
    			}, {
    				"value":"/worklight/iphone/wlclient/js/checksum.js",
    				"deviceClass":"iphone-worklight"
    			}]
               },
      		{
            	       "type":"js",
    			"uris":[
    			{
    				"value":"/worklight/android/wlclient/js/features_stubs/
    					jsonstore_stub.js",
    				"deviceClass":"android-worklight"
    			}, {
    				"value":"/worklight/iphone/wlclient/js/features_stubs/
    					jsonstore_stub.js",
    				"deviceClass":"iphone-worklight"
    			}]
                },
                {
    	               "type":"js",
            	       "uris":[{"value":"/worklight/iphone/wlclient/js/json2.js",
                   			"deviceClass":"iphone-worklight"}]
                },
                {
    	       	        "type":"js",
    			"uris":[
    		{
    				"value":"/worklight/android/wlclient/js/wlgap.android.js",
    				"deviceClass":"android-worklight"
    		}, {
    				"value":"/worklight/iphone/wlclient/js/wlgap.ios.js",
    				"deviceClass":"iphone-worklight"
    			}]
                },
                {
    	               "type":"js",
    			"uris":[
    			{
    				"value":"/worklight/android/js/initOptions.js",
    				"deviceClass":"android-worklight"
    			}, {
    				"value":"/worklight/iphone/js/initOptions.js",
    				"deviceClass":"iphone-worklight"
    			}]
                },
                {
            	       "type":"js",
    			"uris":[
    			{
    				"value":"/worklight/android/js/messages.js",
    				"deviceClass":"android-worklight"
    			}, {
    				"value":"/worklight/iphone/js/messages.js",
    				"deviceClass":"iphone-worklight"
    			}]
                }]
            }]
       }]
    }
  6. Скопируйте файл worklight.json обратно в папку /themes/<customTheme>/contributions в WebDAV.
  7. 13. Перезапустите WebSphere Portal.

    Чтобы не перезапускать портал при внесении изменений в модуль или в профиль, можно включить режим разработки (development mode). Этот режим необходимо отключить перед переходом к производственному применению. Для включения режима разработки выполните следующие шаги.

    1. В консоли WebSphere Application Server перейдите Resources > Resource Environment > Resource Environment Providers.
    2. Выберите REP-поставщика (resource environment provider) с именем WP ConfigService. Измените значение свойства resourceaggregation.development.mode на true.
  8. Когда WebSphere Portal вновь запустится, модули будут доступны для использования в профиле. После выполнения примера из части 1 должен быть доступен созданный вами пользовательский профиль profile_worklight.json, расположенный в webDAV в папке /themes/<customTheme>/profiles/. Никакие изменения в этом профиле не требуются, поскольку идентификатор (ID) модуля не изменился.

Тестирование приложения

Рассматриваемое упражнение является продолжением упражнения из части 1, поэтому пример для тестирования API-интерфейса Worklight уже существует. Этот пример отображает в верхней части страницы имя и версию устройства. Тест должен подтвердить, что эта информация отображается корректно и в эмуляторе Android, и в имитаторе iOS.

  1. Еще раз соберите и разверните приложение, нажав на нем правой кнопкой мыши и выбрав команду Build All and Deploy. Вы увидите ход процесса в нижнем правом углу панели состояния Eclipse.
  2. После завершения процесса нажмите правой кнопкой на WLPortalWLPortalAppAndroid и выберите Run As... > Android Application. Запустится эмулятор Android, и приложение отобразит ваш портал WebSphere Portal.
  3. После того как приложение отобразит портал WebSphere Portal, перейдите на страницу, к которой вы применили пользовательскую тему и профиль Worklight. Если эта страница не поддерживает анонимный доступ, войдите в портал и перейдите на эту страницу. Понадобится несколько секунд на загрузку настроек устройства, после чего они появятся в верхней части страницы(см. рис. 13).
    Рисунок 13. Эмулятор Android отображает среду Portal с примером API-интерфейса Worklight
    The Android emulator showing Portal with the Worklight API sample

    Кликните, чтобы увидеть увеличенное изображение

    Рисунок 13. Эмулятор Android отображает среду Portal с примером API-интерфейса Worklight

    The Android emulator showing Portal with the Worklight API sample

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

  4. Нажмите правой кнопкой на строке iphone под заголовком WLPortalApp и выберите Run As > Xcode project. Приложение запустится как Xcode-проект, и вам нужно будет выполнить это приложение в имитаторе iOS. После запуска приложение отобразит WebSphere Portal.
  5. После того как приложение отобразит портал WebSphere Portal, перейдите на страницу, к которой вы применили пользовательскую тему и профиль Worklight. В верхней части страницы вы увидите имя и версию устройства (см. рис. 14).
    Рисунок 14. WebSphere Portal с API-интерфейсом Worklight в имитаторе iOS
    iOS simulator showing WebSphere Portal with the Worklight API

    Кликните, чтобы увидеть увеличенное изображение

    Рисунок 14. WebSphere Portal с API-интерфейсом Worklight в имитаторе iOS

    iOS simulator showing WebSphere Portal with the Worklight API

Теперь, когда мы убедились, что ресурсы Worklight доступны, можно приступать к использованию нативных возможностей, однако вид и поведение приложения необходимо оптимизировать для среды iPhone.


Обновление стилей темы WebSphere Portal

Первый шаг оптимизации вида и поведения WebSphere Portal состоит в том, чтобы применить к странице стили для смартфона, отличающиеся малым временем реакции. Для этого вам необходимо определить вклады для модуля theme styles, который применяет новые классы устройств.

  1. Подключитесь к WebDAV и перейдите в папку: fs-type1:themes/<customTheme>/contributions/.
  2. Внутри этой папки откройте файл с именем theme.json.
  3. Этот файл содержит модуль, который определяет стили для темы под названием wp_theme_portal_80. Этот модуль добавляет в качестве вклада стили смартфона из листинга 5.
    Листинг 5. Вклад модуля тем для стилей смартфона
    {
    "value":"/css/master_smartphone.css",
    "deviceClass":"smartphone"
    }
  4. Скопируйте код из листинга 5 и используйте его для определения двух новых вкладов в рамках этого модуля для каждого нового класса устройств Worklight, который будет добавлять стили, показанные в листинге 6.
    Листинг 6. Вклады модуля темы, созданные с новыми классами устройств
    {
    "value":"/css/master_smartphone.css",
    "deviceClass":"smartphone"
    },
    {
    "value":"/css/master_smartphone.css",
    "deviceClass":"iphone-worklight"
    },
    {
    "value":"/css/master_smartphone.css",
    "deviceClass":"android-worklight"
    }
  5. Сохраните файл theme.json и скопируйте его обратно в WebDAV.
  6. Перезапустите WebSphere Portal, если ранее не активировали режим разработки.

Обновление динамического контента темы WebSphere Portal

Тема по умолчанию в версии WebSphere Portal 8.0.0.1 использует классы устройств с целью предоставления надлежащих ресурсов для конкретной среды. Для дальнейшей оптимизации вида и поведения портала для этих смартфонов вам необходимо обновить области WebSphere Portal, использующие классы устройств, добавив новые классы устройств с именами android-worklight и iphone-worklight.

В части 1 мы создали пользовательскую тему, а в рамках этой темы – новый EAR-файл веб-приложения, содержащий пользовательские динамические ресурсы. Далее вы обновите динамические элементы контента (dynamic content spot), расположенные в папке /<wp_profile>/installedApps/<node>/<custom_ear>/<custom_war>/themes/html/dynamicSpots/, а также boostrap-файл, расположенный в родительской папке.

  1. В файле boostrap.jspf (находится в папке <wp_profile>/installedApps/<node>/<custom_ear>/<custom_war>/themes/html/, являющейся родительской относительно папки dynamicSpots) найдите следующий программный код:
    <c:set var="isMobile" scope="request" value="${deviceClass ==
    'tablet' || deviceClass == 'smartphone'}”>

    и измените его следующим образом:

    <c:set var="isMobile" scope="request" value="${deviceClass == 'tablet' || 
    deviceClass == 'smartphone' || deviceClass == 'iphone-worklight' || 
    deviceClass == 'android-worklight'}" />

    Просмотрите файл Default.jsp после внесения этих изменений.

  2. В файле commonActions.jsp, выполните следующие действия:
    1. Найдите следующий программный код:
      <c:set var="isMobile" scope="request" value="${deviceClass ==
      'tablet' || deviceClass == 'smartphone'}>

      и измените его следующим образом:

      <c:set var="isMobile" scope="request" value="${(deviceClass == 'tablet') || 
      (deviceClass == 'smartphone') || (deviceClass == 'iphone-worklight') || 
      (deviceClass == 'android-worklight')}" />
    2. Найдите следующий программный код:
      <ul class="wpthemeCommonActions wpthemeRight">
      <portal-logic:if loggedIn="yes">
      <%-- Username is used as a link to 'Edit My Profile' --%>
      <c:if test="${deviceClass != 'smartphone'}">

      и измените его следующим образом:

      <ul class="wpthemeCommonActions wpthemeRight">
      <portal-logic:if loggedIn="yes">
      <%-- Username is used as a link to 'Edit My Profile' --%>
      <c:if test="${deviceClass != 'smartphone' && deviceClass != "iphone-worklight"
      &&
      deviceClass != "android-worklight"}">
    3. Найдите следующий программный код:
      <%-- Sign up Link --%>
      <c:if test="${deviceClass != 'smartphone'}">

      и измените его следующим образом:

      <%-- Sign up Link --%>
      <c:if test="${deviceClass != 'smartphone' && deviceClass != "iphone-worklight"
      &&
      deviceClass != "android-worklight"}">
  3. В файле crumbTrail.jsp, найдите следующий программный код:
    <%-- The following variables are defined in bootstrap.jspf for performance reasons and reused here.
    * selectionPath
    * deviceClass
    * isMobile --%>
    <c:if test="${deviceClass != 'smartphone'}">

    и измените логику класса устройств следующим образом:

    <c:if test="${deviceClass != 'smartphone' && deviceClass !=
    "iphone-worklight" && deviceClass != "android-worklight"}">
  4. В файле footer.jsp найдите следующий программный код:
    <c:if test="${deviceClass == 'smartphone'}">
    <script>window.scrollTo(0, 47);</script>
    </c:if>

    и измените логику класса устройств следующим образом:

    <c:if test="${deviceClass == 'smartphone' || deviceClass ==
    "iphone-worklight" || deviceClass == "android-worklight"}">
  5. В файле pageModeToggle.jsp найдите следующий программный код:
    <c:if test="${deviceClass != 'smartphone' && deviceClass
    != 'tablet'}">

    и измените его следующим образом:

    <c:if test="${deviceClass != 'smartphone' &&
    deviceClass != 'tablet' && deviceClass != 'iphone-worklight' && 
    deviceClass != 'android-worklight' }">
  6. На предыдущих шагах вы обновили динамические элементы контента темы, однако отображения на динамические элементы контента имеются также в готовых модулях WebSphere Portal. Следующий шаг состоит в том чтобы заменить динамические элементы контента собственным пользовательским JSP-кодом. Необходимо заменить следующие динамические элементы контента.
    • customTheme_search
    • customTheme_mobileSearch
    • customTheme_projectMenu
    В готовом модуле pagebuilder найдите следующий JSP-файл:

    <PortalServer>\theme\wp.theme.modules\webapp\installedApps\ThemeModules.ear\ThemeModules.war\modules\pagebuilder\jsp\projectMenu.jsp

    .
  7. Скопируйте файл projectMenu.jsp в WAR-файл вашей пользовательской темы и переименуйте его как customProjectMenu.jsp. Маршрут к WAR-файлу вашей пользовательской темы должен выглядеть следующим образом:

    /<wp_profile>/installedApps/<node>/<custom_ear>/<custom_war>/themes/html/dynamicSpots/

  8. В файле customProjectMenu.jsp найдите следующий программный код:
    <c:if test="${deviceClass != 'smartphone' && deviceClass !=
        'tablet'}">

    и измените этот код, добавив новые классы устройств:

    <c:if test="${deviceClass != 'smartphone' && deviceClass != 'tablet' &&
    deviceClass != 'iphone-worklight' && deviceClass != 'android-worklight' }">
  9. В файле customProjectMenu.jsp найдите строку:
    <%@ include file="../../../themes/html/includePortalTaglibs.jspf"%>

    Файл includePortalTaglibs.jspf должен был быть скопирован в WAR-файл вашей пользовательской темы в процессе создания темы в части 1. Теперь местоположение этого файла изменилось, поскольку он находится в вашей пользовательской теме. Измените эту строку кода следующим образом:

    <%@ include file="../includePortalTaglibs.jspf"%>
  10. В модуле search найдите следующий JSP-файл:

    <PortalServer>\theme\wp.theme.modules\webapp\installedApps\ThemeModules.ear\ThemeModules.war\themes\html\dynamicSpots\modules\search\search.jsp

    Скопируйте файл search.jsp в WAR-файл вашей пользовательской темы и переименуйте его в customSearch.jsp (в том же местоположении что у файла customProjectMenu.jsp).
  11. Непосредственно над началом HTML-разметки в файле, т.е. над строкой
    <div class="wpthemeSearch...

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

    <c:set var="isMobile" scope="request" value="${(deviceClass == 'tablet') ||
        (deviceClass == 'smartphone') || (deviceClass == 'iphone-worklight') || (deviceClass
        == 'android-worklight')}" />
  12. Как и в файле customProjectMenu.jsp, вам нужно изменить маршрут к файлу includePortalTaglibs.jspf. Найдите следующую строку кода:
    <%@ include file="../../../includePortalTaglibs.jspf" %>

    и измените ее следующим образом:

    <%@ include file="../includePortalTaglibs.jspf" %>

    Итак, мы создали файлы, которые будут использоваться вместо готовых JSP-файлов.

  13. Создайте новый файл с именем customDynamicSpots.json. Он будет определять модули, которые будут вносить ваши пользовательские JSP-файлы в качестве вклада для замены.
  14. Скопируйте код из листинга 7 в новый файл customDynamicSpots.json. Модули будут заменять следующие три отображения элементов контента:
    • customTheme_search
    • customTheme_mobileSearch
    • customTheme_projectMenu
    Имеется два динамических элемента типа search, поскольку в зависимости от устройства тема вводит наш JSP-код в разные места. Эти элементы выбираются в зависимости от класса устройства, определяемого посредством отображения в REP.
    Листинг 7. Определения модулей для JSP-кода, заменяющего элементы контента
    { 
    "modules":[{ 
      "id" : "custom_search", 
      "contributions": [{ 
      	"type":"dyn-cs", 
      	"sub-contributions": [{ 
      		"type":"markup", 
          	"ref-id":"customTheme_search", 
          	"uris": [{ 
            	"value":"res:/customTheme/themes/html/dynamicSpots/customSearch.jsp" 
            }] 
          }] 
        }] 
      },
      { 
      "id" : "custom_mobileSearch", 
      "contributions": [{ 
        "type":"dyn-cs", 
        "sub-contributions": [{ 
          	"type":"markup", 
          	"ref-id":"customTheme_mobileSearch", 
          	"uris": [{ 
            	"value":"res:/customTheme/themes/html/dynamicSpots/customSearch.jsp" 
            }] 
          }] 
        }] 
     },
     { 
      "id" : "custom_projectMenu", 
      "contributions": [{ 
        "type":"dyn-cs", 
        "sub-contributions": [{ 
          	"type":"markup", 
          	"ref-id":"customTheme_projectMenu", 
          	"uris": [{ 
            	"value":"res:/customTheme/themes/html/dynamicSpots/customProjectMenu.jsp" 
            }] 
          }] 
        }] 
     }]
    }

    Обратите внимание, что суффикс customTheme может отличаться от пространства имен, которое вы использовали для своей темы; если вы продолжаете использовать готовые отображения, то пространство имен имеет вид 80theme. Убедитесь в том, что пространство имен, которое вы используете для отображений, представлено в атрибуте ref-id определения модуля в листинге 7. Кроме того, в WAR-файле пользовательской темы проверьте корректность корня контекста в маршруте к JSP.

  15. Скопируйте файл customDynamicSpots.json в webDAV в следующее место: fs-type1:themes/<customTheme>/contributions/.
  16. Откройте профиль, связанный с данной страницей. В части 1 этот профиль с именем profile_worklight.json, был расположен в следующем месте: fs-type1:themes/<customTheme>/profiles/.
  17. Добавьте модули custom_search, custom_mobileSearch и custom_projectMenu (листинг 8).
    Листинг 8. Модули для замены динамических элементов контента, добавленные к профилю
    {	"moduleIDs": [
    		"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",
    		"wp_theme_edit",
    		"wl_client",
    		"custom_search",
    		"custom_searchMobile",
    		"custom_projectMenu"
    	],
  18. Перезапустите WebSphere Portal, если ранее не был активирован режим разработки. Дополнительная информация о замене динамического элемента контента содержится в этой статье.
  19. Мы обновили логику классов устройств в JSP-коде динамического контента для среды Worklight, однако необходимо обновить и отображения динамических элементов контента. Измените отображения динамических элементов контента в своей пользовательской теме в соответствии с ключами темы по умолчанию, расположенными в REP (WP DynamicContentSpotMappings). Дополнительная информация о работе с отображениями динамических элементов контента содержится в этой статье.

    Сначала изменим два отображения для динамических элементов контента типа search. Хотя JSP-код будет заменен, отображение по-прежнему будет определять классы устройств, переключающие выводимую информацию.

    Таблица 1. JSP-отображения
    КлючИзменить значение на:
    customTheme_search mvc:res:/wps/themeModules/themes/html/dynamicSpots/modules/search/search.jsp,smartphone@,tablet@,iphone-worklight@,android-worklight@
    customTheme_mobileSearchmvc:smartphone/tablet/iphone-worklight/android-worklight@res:/wps/themeModules/themes/html/dynamicSpots/modules/search/search.jsp
    customTheme_primaryNavmvc:res:/<customThemeContext>/themes/html/dynamicSpots/navigation.jsp?rootClass=wpthemePrimaryNav%2520wpthemeLeft&startLevel=1,smartphone@,tablet@,iphone-worklight@,android-worklight@
    customTheme_secondaryNavmvc:res:/<customThemeContext>/themes/html/dynamicSpots/navigation.jsp?rootClass=wpthemeSecondaryNav&startLevel=2&levelsDisplayed=2,smartphone@,tablet@,iphone-worklight@,android-worklight@
    customTheme_sideNavmvc:res:/<customThemeContext>/themes/html/dynamicSpots/sideNavigation.jsp?startLevel=2,smartphone@,tablet@,iphone-worklight@,android-worklight@
    customTheme_mobileNavmvc:smartphone/tablet/iphone-worklight/android-worklight@res:/<customThemeContext>/themes/html/dynamicSpots/mobileNavigation.jsp
  20. Сохраните сделанные изменения в REP (рис. 15).
    Рисунок 15. Ссылка Save (Сохранить) в консоли
    The save link in the console

    Кликните, чтобы увидеть увеличенное изображение

    Рисунок 15. Ссылка Save (Сохранить) в консоли

    The save link in the console
  21. Перезапустите WebSphere Portal. Ваш портал имеет все необходимое для обнаружения устройства, обращающегося к серверу WebSphere Portal, в том числе набор файлов, необходимых для корректной интеграции с Worklight и для оптимизации темы для смартфонов.
  22. Теперь при работающем портале вы сможете запускать приложения и для iPhone, и для Android. При этом будут включаться ресурсы Worklight для соответствующей среды, а тема будет оптимизирована для соответствующего мобильного устройства (см. рис. 16 и 17).
    Рисунок 16. Эмулятор Android, отображающий пустую страницу портала с оптимизированной темой и с примером Worklight
    Android emulator showing blank Portal page with optimized theme and worklight sample

    Кликните, чтобы увидеть увеличенное изображение

    Рисунок 16. Эмулятор Android, отображающий пустую страницу портала с оптимизированной темой и с примером Worklight

    Android emulator showing blank Portal page with optimized theme and worklight sample
    Рисунок 17. Имитатор iOS, отображающий пустую страницу портала с оптимизированной темой и с примером Worklight
    iOS simulator showing blank Portal page with optimized theme and worklight sample

    Кликните, чтобы увидеть увеличенное изображение

    Рисунок 17. Имитатор iOS, отображающий пустую страницу портала с оптимизированной темой и с примером Worklight

    iOS simulator showing blank Portal page with optimized theme and worklight sample

Заключение

Продукт IBM WebSphere Portal позволяет с легкостью адаптировать нативные возможности устройств для многоканальных веб-приложений. При необходимости оболочку Worklight, созданную для Android и iOS, можно упаковать для публикации в магазине приложений или для развертывания через MDM. В результате вы получаете все возможности WebSphere Portal в части управления многоканальным веб-сайтом, дополненные нативными сервисами для различных устройств. Следующая статья этого цикла будет посвящена конфигурированию единого входа и интеграции продуктов Worklight и Web Experience Factory.


Загрузка

ОписаниеИмяРазмер
Пример приложенияPart2-sample_files.zip9 KB

Ресурсы

Научиться

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

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


  • Bluemix

    Узнайте больше информации о платформе IBM Bluemix, создавайте приложения, используя готовые решения!

  • Библиотека документов

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

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