Entregue una experiencia web móvil excepcional con WebSphere Portal e IBM Worklight, Parte 2: Integración del soporte de dispositivos múltiples para páginas de WebSphere Portal

IBM® WebSphere® Portal y las soluciones de Exceptional Web Experience de IBM han sido el líder del mercado en la experiencia web durante más de una década. IBM Worklight™ es una plataforma nueva y completa de aplicación empresarial móvil para entregar aplicaciones nativas, híbridas y web. Este artículo explica cómo habilitar el soporte para aplicaciones de Android y de iOS durante la habilitación de la integración de WebSphere Portal y Worklight. Este ejercicio refuerza la muestra presentada en la Parte 1 y demuestra cómo desarrollar una aplicación de iOS e incluir dinámicamente los recursos de Worklight apropiados.

Jonathan Lidaka, WebSphere Portal Front-end Engineer, IBM

Jon Lidaka es un ingeniero front-end con base en el Research Triangle Park Development Lab de IBM. Durante su tiempo en el desarrollo del portal, él ha contribuido principalmente con el desarrollo del tema, enfocándose en la accesibilidad y la globalización, y varios componentes que incluyen portlets de administración e integrador de aplicaciones web. Actualmente él dirige la misión de desarrollo móvil para el portal. Jon ha hablado en múltiples conferencias de IBM sobre diseño de interfaces de usuario y optimización de temas de portal para dispositivos móviles.



28-01-2013

Introducción

Obtenga Worklight ahora

Descargue IBM Worklight Developer Edition 5.0 ahora sin costo y sin fecha de vencimiento!

La plataforma de IBM Worklight le permite crear aplicaciones para muchos entornos de dispositivos, incluidos iOS, Android y Blackberry. Mediante el uso de tecnología como Apache Cordova, que Worklight usa y distribuye, puede llamar a dispositivos nativos mediante JavaScript™ desde su marcación web.

Este artículo lo guía a través del proceso de creación de una aplicación de iOS híbrida que se integre con IBM WebSphere Portal. Discute el proceso para determinar el dispositivo que ha accedido al portal y para incluir los recursos apropiados —ya sea para iOS o Android— para habilitar el soporte de posibilidades nativas dentro de la aplicación.

Requisitos previos

Este refuerza la información que fue presentada en la Parte 1 de esta serie. Complete la solución de muestra de la Parte 1 antes de continuar con las etapas señaladas aquí.

Además de los requisitos previos definidos en la Parte 1, debe tener Apple Xcode instalado para desarrollar la aplicación híbrida de muestra aquí descrita. Este artículo se basa en la aplicación híbrida Worklight con soporte para el Apple iPhone. Esta muestra fue probada con Apple Xcode versión 4.4.1 y solo está disponible para Apple OS X.


Cree el entorno de iOS en Worklight

  1. Para crear un nuevo entorno para el iPhone en Worklight, abra Project Explorer y haga clic con el botón derecho en WLPortalApp en la carpeta de aplicaciones. Luego, seleccione New > Worklight Environment (Figura 1).
    Figura 1. Creación de un nuevo entorno de Worklight
    Figure 1. Create a new Worklight environment
  2. Se muestra el panel New Worklight Environment (Figura 2). Para esta muestra particular, seleccione iPhone. Si necesitara crear entornos para otros dispositivos de iOS, como iPad, este es el panel donde especifica esas opciones adicionales. Haga clic en Finish.
    Figura 2. Entorno de Worklight mostrado en Eclipse
    Figure 2. Worklight environment displayed in Eclipse
  3. Worklight Studio actualiza el proyecto con una aplicación nativa para dispositivos de iPhone (Figura 3).
    Figura 3. La aplicación nativa de iPhone se añade al proyecto
    Figure 3. The iPhone native app is added to the project
  4. A continuación, abra el archivo de clase principal para la aplicación nativa de iOS (Figura 4). Este archivo está ubicado en \WLPortal\apps\WLPortalApp\iPhone\native\classes\WLPortalApp.m. Este es el archivo que será modificado, en forma similar al archivo WLPortalApp.java en la Parte 1. Todas las aplicaciones de iOS están escritas en Objective-C (vea Resources).
    Figura 4. Archivo de clase principal para la aplicación nativa de iOS
    Figure 4. The main class file for the iOS native application
  5. Para mostrar el portal dentro de la aplicación de iOS, deberá modificarse el método del iniciador de modo que cargue el URL del portal. El método que se modificará se denomina didFinishLaunchingWithOptions (Listado 1), y básicamente lanza un archivo de HTML interno que se crea de forma predeterminada.
    Listado 1. Método didFinishLaunchingWithOptions en WLPortalApp.m
    /**
     * Este es un punto de partida principal después de que se inicia la aplicación. 
    Las vistas y los valores se configuran aquí.
     */
    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:
    (NSDictionary *)launchOptions 
    {
        BOOL ret = [super application:application didFinishLaunchingWithOptions:
    launchOptions];
       
        /*
         * Si necesita hacer cualquier inicialización extra específica de la aplicación, 
    puede hacerlo aquí.
         **/
        
        return ret;
    }
  6. Sustituya el bloque de código en el Listado 1 por el código en el Listado 2. El nuevo código iniciará la aplicación automáticamente en una vista web dirigida hacia el portal.
    Listado 2. Método didFinishLaunchingWithOptions dirigiendo la aplicación hacia el URL de Portal
    -(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:
    (NSDictionary *)launchOptions
    {
        BOOL superResult = [super application:application didFinishLaunchingWithOptions:
    launchOptions];
        NSURL* remoteURL = [NSURL URLWithString:@"http://9.99.999.999:10039/wps/portal”];
        NSURLRequest* request = [NSURLRequest requestWithURL:remoteURL];
        [self.viewController.webView loadRequest:request];
        return superResult;
    }

    La dirección IP en este ejemplo debe ser la dirección del servidor de WebSphere Portal que desea representar en la aplicación híbrida.
  7. Abra el archivo Cordova.plist ubicado en \WLPortal\apps\WLPortalApp\iphone\native.
  8. Encuentre el atributo clave denominado OpenAllWhitelistURLsInWebView y establézcalo como “true” (Listado 3).
    Listado 3. OpenAllWhitelistURLsInWebView establecido como true
    <key>OpenAllWhitelistURLsInWebView</key>
    <true/>
  9. Ahora que tiene la configuración de la aplicación, debe verificar que se desarrolle y se despliegue. Como puede ver en la Figura 5, el comando Build All and Deploy significa que las aplicaciones nativas volverán a ser desplegadas con base en los cambios de la aplicación web. Ejecute el comando Build All and Deploy haciendo clic con el botón derecho en la aplicación y seleccionando Run As > Build All and Deploy.
    Figura 5. Selección de build and deploy
    Figure 5. Selecting build and deploy
  10. A medida que el proceso de desarrollo comienza, puede ver el progreso en el mensaje de cabecera de estado en la parte inferior derecha en Eclipse. Cuando el proceso se completa, debe ver el mensaje Application 'YourApp' deployed successfully with all environments en la consola de Worklight. Las aplicaciones de iOS y Android se han actualizado.
  11. A continuación, desea ver la aplicación en el simulador de iOS. Para hacer esto, primero haga clic con el botón derecho en iphone en el proyecto en Eclipse, después seleccione Run as > Xcode project (Figura 6). Esto iniciará Xcode y se mostrará la aplicación en la consola (Figura 7).
    Figura 6. Ejecución de la aplicación como proyecto Xcode
    Figure 6. Running application as Xcode project
    Figura 7. Su aplicación visualizada en Xcode
    Figure 7. Your application displayed in Xcode
  12. Debido a que la aplicación fue creada para dispositivos de iPhone, cambie el simulador a iPhone haciendo clic en la flecha hacia abajo, junto al icono Run en la parte superior izquierda de la consola, y seleccione iPhone 5.1 Simulator (Figura 8).
    Figura 8. Cambio del simulador a iPhone
    Figure 8. Change the simulator to iPhone
  13. Seleccione el icono Run en la parte superior izquierda (Figura 9) y el simulador iniciará su aplicación (Figura 10).
    Figura 9. El botón Run en Xcode
    Figure 9. The Run button in Xcode
    Figura 10. Ejecución de la aplicación en el simulador de iPhone
    Figure 10. Your application running in the iPhone simulator

Actualice el tema de WebSphere Portal para iOS y Android

El tema de WebSphere Portal ahora requiere una actualización para identificar el sistema operativo del dispositivo móvil y para incluir el conjunto correcto de archivos a atraer en los recursos de Worklight. La identificación del sistema operativo del dispositivo móvil será determinada por el mecanismo de clase del dispositivo en WebSphere Portal. Los clientes de teléfonos inteligentes de Android e iOS listos para usar están combinados en una clase de dispositivo llamada smartphone. Es necesario separar los clientes para cargar los recursos en función del sistema operativo.

  1. Para actualizar el cliente de iPhone de forma que sea identificado en forma distinta a Android, ejecute el script xmlaccess en el Listado 4.
    Listado 4. Script XMLAccess para cambiar la clase del dispositivo para iPhone y Android Mobile
    <?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.iphone">
                <useragent-pattern>.*iPhone.*</useragent-pattern>
    	<client-capability update="remove">com.ibm.portal.devicesupport.deviceclass=
    smartphone</client-capability>
    	<client-capability update="set">com.ibm.portal.devicesupport.deviceclass=
    smartphone-ios</client-capability>     	
                <client-capability update="set">HTML_4_0</client-capability>
            </client>
        </portal>
    </request>

    Si anteriormente estaba utilizando la clase de dispositivo smartphone, tendrá que actualizar cualquier plantilla lógica o estática personalizada para utilizar la nueva clase smartphone-ios.
  2. En la Parte 1, creó un tema personalizado y parte de ese tema estaba creando un nuevo EAR de aplicación web que incluye recursos dinámicos personalizados. Abra el archivo head.jsp , ubicado en /<wp_profile>/installedApps/<node>/<custom_ear>/<custom_war>/themes/html/dynamicSpots/. Al final del archivo head.jsp, añada el código en el Listado 5, el cual recuperará la clase de dispositivo y la configurará en una variable de JSP.
    Listado 5. Recuperación de la clase de dispositivo
    <c:set var="deviceClass" scope="request" value="${wp.clientProfile['DeviceClass']}"
    />
  3. Después de la línea de código para recuperar la clase de dispositivo, use la información recuperada para verificar los dispositivos de teléfono inteligente de iOS o Android (Listado 6).
    Listado 6. Lógica para la verificación de teléfonos inteligentes de iOS o Android
    <c:if test="${deviceClass == 'smartphone'}">
    <!--android devices -->
    <c:if test="${deviceClass == 'smartphone-ios'}">
    <!--ios devices -->
    </c:if>
  4. Ahora que el tema está listo para determinar el dispositivo que está accediendo al portal, puede mover los archivos específicos de iOS de Worklight a WebSphere Portal. Muchos archivos utilizados en la Parte 1 serán los mismos entre dispositivos, pero los que no son compartidos incluirán el espacio de nombres ios. El archivo que define el JavaScript que debe incluirse en WebSphere Portal es WLPortalApp.html, ubicado en \WLPortal\apps\WLPortalApp\iphone\native\www\default\.
  5. El primer archivo que debe crearse específicamente para iPhone es el archivo de propiedades estáticas. Las propiedades estáticas están definidas en la parte superior del archivo HTML (Listado 7).
    Listado 7. Propiedades estáticas para dispositivos de iPhone
    	var WL = WL ? WL : {};
    
    	/**
    	 * Variables de configuración de WLClient.
    	 * Los valores son inyectados por el desplegador que empaqueta el gadget.
    	 */
    
    	 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. Tome el JavaScript de este archivo HTML (Listado 7) e inclúyalo de manera utilizable dentro de un nuevo archivo de JavaScript llamado staticprops.ios.js. Coloque este nuevo archivo en esta ubicación: fs-type1:themes/<customTheme>/worklight/common/js/ (Figura 11).
    Figura 11. Creación del nuevo archivo staticprops.ios.js
    Figure 11. New file staticprops.ios.js is created
  7. Otro archivo que necesita ser renombrado y copiado en la carpeta común de JavaScript es wlcommon.js, ubicado en: \WLPortal\apps\WLPortalApp\iphone\native\www\default\common\js\.
    Figura 12. wlcommon.js renombrado para que sea específico de iOS
    Figure 12. wlcommon.js renamed to be iOS specific
  8. El siguiente conjunto de archivos que deben copiarse de Worklight a Portal está ubicado en la carpeta wlclient. Estos archivos deben renombrarse con el espacio de nombres "ios":
    • checksum.js
    • cordova.js
    Estos archivos, ubicados en: \WLPortal\apps\WLPortalApp\iphone\native\www\default\wlclient\js\, pueden copiarse como están:
    • json2.js
    • wpgap.ios.js
    Después de terminar de renombrar, copie los cuatro archivos a WebSphere Portal en esta ubicación: fs-type1:themes/<customTheme>/worklight/wlclient/js/.
    Figura 13. Los nuevos archivos en la carpeta wlclient JavaScript
    Figure 13. The new files in the wlclient JavaScript folder
  9. Todos los archivos necesarios para la API de Worklight están ahora en su lugar y necesitan ser incluidos en la página en función del dispositivo que está accediendo a WebSphere Portal. El JavaScript que debe incluirse para Android puede tomarse directamente desde el módulo wl_client creado en la Parte 1. Añada los elementos include de script apropiados a head.jsp para dispositivos móviles de Android (Listado 8).
    Listado 8. JavaScript para dispositivos móviles de Android añadidos a head.jsp
    <c:if test="${deviceClass == 'smartphone'}">
    <!--android devices -->
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/staticprops.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/cordova.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/wljq.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/base.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/messages.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/wlcommon.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/diagnosticDialog.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/deviceAuthentication.js" 
    allowRelativeURL="true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/window.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/worklight.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/wlclient.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/wlfragments.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/encryptedcache.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/checksum.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/wlgap.android.js" allowRelativeURL="
    true" mode="download" lateBinding="false"/>'></script>
    </c:if>
  10. Después, añada el JavaScript apropiado para dispositivos de iOS en head.jsp. Esta es esencialmente la misma lista que para dispositivos móviles de Android, que puede verificar en función de los includes de script definidos en WLPortalApp.html, ubicados en \WLPortal\apps\WLPortalApp\iphone\native\www\default\. Sin embargo, los archivos con el espacio de nombres "ios" se sustituyen en lugar de los archivos correspondientes de Android, y se añadió json2.js (Listado 9).
    Listado 9. Javascript para dispositivos móviles de iOS añadido a head.jsp
    <c:if test="${deviceClass == 'smartphone-ios'}">
    <!-- ios devices -->
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/staticprops.ios.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/cordova.ios.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/wljq.js" allowRelativeURL="true" mode=
    "download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/base.js" allowRelativeURL="true" mode=
    "download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/messages.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/common/js/wlcommon.ios.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/diagnosticDialog.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/deviceAuthentication.js" 
    allowRelativeURL="true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/window.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/worklight.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/wlclient.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/wlfragments.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/encryptedcache.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/checksum.ios.js" allowRelativeURL=
    "true" mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/json2.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    	<script type="text/javascript" src='<r:url uri="dav:fs-
    type1/themes/customTheme/worklight/wlclient/js/wlgap.ios.js" allowRelativeURL="true" 
    mode="download" lateBinding="false"/>'></script>
    </c:if>

    Cuando se entra en la producción, es útil crear capas de JavaScript para cada conjunto de archivos del dispositivo específico. Esto reduciría las solicitudes en la representación de la página y ayudaría a mejorar el rendimiento.
  11. Ahora que los archivos de JavaScript de Android están incluidos mediante el archivo head.jsp, debe eliminar el módulo wl_client del archivo profile_worklight.json , ubicado en fs-type1:themes/<customTheme>/profiles/.
    Listado 10. Conjunto original de módulos profile_worklight.json
    	"moduleIDs": [
    		"wp_theme_portal_80",
    		"wp_portlet_css",
    		"wp_one_ui",
    		"wp_one_ui_dijit",
    		"wp_legacy_layouts",
    		"wp_client_ext",
    		"wp_status_bar",
    		"wp_theme_menus",
    		"wp_theme_skin_region",
    		"wp_theme_high_contrast",
    		"wp_layout_windowstates",
    		"wl_client",
    		"wl_init"
    	],
    Listado 11. Archivo profile_worklight.json después de eliminar wlclient
    	"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_init"
    	],
  12. Debido a que el módulo wl_client se eliminó del perfil, debe eliminar el requisito previo del módulo wl_init. Para hacer esto, abra el archivo de contribución worklight.json y elimine la definición de requisito previo, ubicada en fs-type1:themes/<customTheme>/contributions.
    Listado 12. Definición original del módulo wl_init
    {
    	"id":"wl_init",
    	"prereqs":[{
    		"id":"wl_client"
    	},{
    		"id":"wp_client_main"
    	},{
    		"id":"wp_client_ext"
    	}],
    	"contributions":[{
    		"type":"config",
    		"sub-contributions":[{
    			"type":"js",
    			"uris":[{
    				"value":"/worklight/common/js/init.js"
    			}]
    		}]
    	}]
    }
    Listado 13. Módulo wl_init con el requisito previo wl_client eliminado
    {
    		"id":"wl_init",
    		"prereqs":[
    		{
    			"id":"wp_client_main"
    		},{
    			"id":"wp_client_ext"
    		}],
    		"contributions":[{
    			"type":"config",
    			"sub-contributions":[{
    				"type":"js",
    				"uris":[{
    					"value":"/worklight/common/js/init.js"
    				}
    				]
    			}]
    		}]
    	}

Todo está en su lugar para que su portal detecte el dispositivo que está accediendo a WebSphere Portal e incluya el conjunto de archivos necesarios para integrarse correctamente con Worklight.


Pruebe la aplicación

Debido a que este ejercicio es la continuación de la Parte 1, ya hay una muestra para probar la API de Worklight. Esta mostrará el nombre y la versión del dispositivo en la parte superior de la página. La prueba será para confirmar que esta información se muestre correctamente para el emulador de Android y para el simulador de iOS.

  1. Una vez más, desarrolle y despliegue la aplicación haciendo clic con el botón derecho en la aplicación y seleccionando Build All and Deploy. Puede ver el progreso en el mensaje de cabecera de estado en la parte inferior derecha en Eclipse.
  2. Cuando el proceso se complete, haga clic con el botón derecho en WLPortalWLPortalAppAndroid y seleccione Run As... > Android Application. Esto lanzará Android Emulator y la aplicación mostrará su WebSphere Portal.
  3. Después de que la aplicación haya representado la aplicación de WebSphere Portal, navegue hacia la página en la cual aplicó el tema personalizado y el perfil de Worklight. Si esta página no tiene acceso anónimo, inicie sesión y navegue hacia ella. Tomará algunos segundos para que se carguen los valores del dispositivo, pero los verá aparecer en la parte superior de la página, como se muestra en la Figura 14.
    Figura 14. Emulador de Android mostrando Portal con la muestra de API de Worklight
    Figure 14. The Android emulator showing Portal with the Worklight API sample
  4. Haga clic con el botón derecho en iphone en WLPortalApp y seleccione Run As > Xcode project. Esto iniciará la aplicación Xcode, y deberá ejecutar la aplicación en el simulador de iOS. Una vez en ejecución, la aplicación mostrará su WebSphere Portal.
  5. Después de que la aplicación haya representado la aplicación de WebSphere Portal, navegue una vez más hacia la página donde aplicó el tema personalizado y el perfil de Worklight. Verá el nombre y versión del dispositivo en la parte superior de la página, como se muestra en la Figura 15.
    Figura 15. Simulador de iOS mostrando WebSphere Portal con la API de Worklight
    Figure 15. The iOS simulator showing WebSphere Portal with the Worklight API

Conclusión

IBM WebSphere Portal facilita el ajuste de las posibilidades nativas del dispositivo disponibles para sus aplicaciones web de multi-canal. El shell de Worklight creado para Android e iOS también puede empaquetarse en un entregable que pueda publicarse en la tienda de aplicaciones o desplegarse mediante MDM, si es necesario. El resultado es que obtiene todas las posibilidades de gestión del sitio web de multi-canal de WebSphere Portal extendidas para incluir servicios de dispositivos nativos hechos a la medida para múltiples dispositivos. Los siguientes artículos en esta serie discutirán la configuración para la autenticación de inicio de sesión único y la integración de Worklight y Web Experience Factory, respectivamente.


Descargar

DescripciónNombretamaño
Sample applicationPart2-sample_files.zip9 KB

Recursos

Aprender

Obtener los productos y tecnologías

Comentarios

developerWorks: Ingrese

Los campos obligatorios están marcados con un asterisco (*).


¿Necesita un IBM ID?
¿Olvidó su IBM ID?


¿Olvidó su Password?
Cambie su Password

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


La primera vez que inicie sesión en developerWorks, se creará un perfil para usted. La información en su propio perfil (nombre, país/región y nombre de la empresa) se muestra al público y acompañará a cualquier contenido que publique, a menos que opte por la opción de ocultar el nombre de su empresa. Puede actualizar su cuenta de IBM en cualquier momento.

Toda la información enviada es segura.

Elija su nombre para mostrar



La primera vez que inicia sesión en developerWorks se crea un perfil para usted, teniendo que elegir un nombre para mostrar en el mismo. Este nombre acompañará el contenido que usted publique en developerWorks.

Por favor elija un nombre de 3 - 31 caracteres. Su nombre de usuario debe ser único en la comunidad developerWorks y debe ser distinto a su dirección de email por motivos de privacidad.

Los campos obligatorios están marcados con un asterisco (*).

(Por favor elija un nombre de 3 - 31 caracteres.)

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


Toda la información enviada es segura.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=90
Zone=Desarrollo móvil, WebSphere, Lotus
ArticleID=856307
ArticleTitle=Entregue una experiencia web móvil excepcional con WebSphere Portal e IBM Worklight, Parte 2: Integración del soporte de dispositivos múltiples para páginas de WebSphere Portal
publish-date=01282013