Entregue una experiencia web móvil excepcional utilizando el portal de WebSphere e IBM Worklight, parte 1.: Integración de una aplicación móvil híbrida con las páginas del WebSphere Portal

El portal IBM® WebSphere® y las soluciones Exceptional Web Experience de IBM han sido el líder del mercado en la experiencia web por más de una década. IBM Worklight es una nueva plataforma de aplicaciones empresariales móviles completa para la entrega de aplicaciones nativas, híbridas y de web. Este artículo explica cómo WebSphere Portal y Worklight juntos permiten a los usuarios de empresas brindar soporte para sitios multicanal para sus comunidades web. Está incluido un ejercicio con el uso de IBM Worklight Developer Edition 5.0 para desarrollar una aplicación Android híbrida para visualizar las páginas de WebSphere Portal.

Jaye Fitzgerald, Technical Lead for Mobile Portal Accelerator, IBM

Jaye Fitzgerald es el líder técnico principal para Mobile Portal Accelerator en el laboratorio de desarrollo IBM de Littleton. Él ha contribuido con los productos móviles del portal y ha brindado servicios de asesoría como miembro del equipo de servicios del laboratorio del portal WebSphere. Jaye ha presentado ofertas móviles del portal WebSphere a Lotusphere y en conferencias de experiencias web excepcionales de IBM.



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.



21-01-2013 (Primera publicación 21-01-2013)

Introducción

Obtenga Worklight ahora

Descargue ya mismo IBM Worklight Developer Edition 5.0 sin costos y sin fecha de vencimiento.

El canal móvil se ha convertido en un canal crítico y estratégico para ventas, marketing y más para muchas, sino la mayoría, de las industrias. Como los negocios gestionan la marca de su empresa a través de sitios web, el modo de llevar contenidos y aplicaciones a los dispositivos móviles se ha convertido en un desafío común.

Antes de mirar a la intersección de IBM WebSphere Portal e IBM Worklight, es importante entender la diferencia entre una website y una aplicación.

  • Un website agrega contenidos web y múltiples aplicaciones web a una sola experiencia de usuario y trabaja a través de canales múltiples, que incluyen exploradores de escritorio, kiosco, teléfonos inteligentes y pizarras digitales. Un ejemplo simple podría ser la website de su aerolínea favorita. Ellos probablemente tienen una website móvil también, la cual soporta teléfonos y pizarras digitales. WebSphere Portal es la plataforma adecuada para desarrollar un website.
  • Una aplicación web es desarrollada de un modo personalizado y generalmente está destinada a tareas específicas. Por ejemplo, la aplicación de su aerolínea favorita de una tienda de aplicaciones que le permite reservar un vuelo o un asiento es un ejemplo de una aplicación web. Usualmente contiene un subconjunto de las características de la website, que están destinadas a lo que prácticamente sea posible hacer en el dispositivo. IBM WebSphere Application Server es la opción correcta para entregar aplicaciones web autónomas. IBM Worklight brinda la habilidad de crear tanto aplicaciones nativas como híbridas, y es posible utilizar ya sea WebSphere Application Server como el programa de fondo (si está creando aplicaciones híbridas) o WebSphere Portal como programa de fondo (si está creando websites híbridas).

Las opciones, entonces, se reducen a desarrollar una aplicación nativa, una aplicación híbrida o una aplicación web. Pero hay dos preguntas que deben responderse las cuales influenciarán su decisión sobre tecnología de canal móvil:

  1. ¿Qué dispositivos son necesarios soportar?
  2. ¿Qué es lo que hará su aplicación?

Entre las consideraciones fundamentales que le ayudarán a responder estas preguntas se incluyen las siguientes: ¿Cuáles son sus casos de utilización? ¿Su aplicación necesitará características de dispositivo específicas como GPS o cámara? ¿Su aplicación necesita vistas de pantalla de alta fidelidad o el explorador móvil es suficiente? Las respuestas a estas preguntas son esenciales para esta decisión, así como lo son las ventajas y desventajas de redes nativas, híbridas y puras:

  • Las aplicaciones nativas para aplicaciones móviles de empresas tienen un costo muy elevado y una línea de tiempo prolongada asociada con el desarrollo nativo puro. Recursos especializados capaces de desarrollar aplicaciones 100% nativas son difíciles de encontrar y pueden ser costosos. Aplicaciones nativas complejas podrían necesitar varios profesionales técnicos y problemas entre plataformas pueden incrementar los costos aún más. Más allá del desarrollo inicial, las continuas actualizaciones de los sistemas operativos requieren continuas actualizaciones de las aplicaciones, las cuales deben volver a someterse a una aprobación para regresarlas a las tiendas de aplicaciones.
  • En cambio, las aplicaciones web completas basadas en HTML5, CSS3 y JavaScript™, o que utilicen infraestructuras del lado del cliente como Dojo y jQuery, brindan una forma simple de hacer websites aptos para dispositivos móviles. Los costos de desarrollo son típicamente más bajos, porque las habilidades generales web UI son más fáciles de encontrar. Las actualizaciones de los sistemas operativos de dispositivos típicamente no afectan los websites móviles, que pueden desarrollarse para que trabajen entre dispositivos de proveedores. Las aplicaciones web que se desarrollan con estos estándares web comunes permiten la reutilización del código entre una variedad de dispositivos y reducen los costos de mantenimiento y los costos totales de propiedad. Además, usted no tiene que preocuparse por los procesos de revisión de las tiendas de aplicaciones o las limitaciones que pueden demorar o detener las actualizaciones.

    Las dos principales desventajas de este abordaje son las siguientes:

    • Usted solo tiene acceso a los dispositivos nativos que el explorador le brinda. Por ejemplo, en dispositivos iOS, usted tiene acceso al potenciómetro, al acelerómetro y al GPS pero no a la cámara.
    • Únicamente es posible hacer gráficamente lo que es posible en HTML/CSS/JavaScript. Como resultado, algunos dispositivos de fidelidad y UI que están disponibles para usted en el espacio nativo no están disponibles en el espacio del explorador.
  • Las aplicaciones híbridas le brindan lo mejor de ambos mundos. Usted obtiene la simplicidad de desarrollar con HTML/CSS/JavaScript, pero es posible aumentar eso con los servicios nativos y producir una aplicación para las tiendas de aplicaciones. Con tecnología como Apache Cordova (que Worklight utiliza y envía), es posible llamar a dispositivos nativos con JavaScript desde su marcación web. Por ejemplo, es posible llamar a la cámara utilizando una línea JavaScript simple, como: navigator.camera.takeSnapshot.

Solución de muestra

Este artículo esquematiza los pasos para desarrollar una solución de muestra que integra Worklight 5.0 y WebSphere Portal 8.0 a través de una aplicación híbrida. Esta sección observa los componentes involucrados en esta solución y los requisitos previos relacionados que necesitará para realizar estos pasos.

Componentes

  • Worklight

    La plataforma Worklight incluye un conjunto de componentes que le permiten gestionar el ciclo de vida de aplicaciones nativas, híbridas y web, entregadas a múltiples plataformas móviles, que incluyen iOS, Android, BlackBerry y Windows® Phone. IBM Worklight Developer Edition 5.0 es un entorno de desarrollo integrado móvil poderoso y flexible que usted puede descargar y utilizar sin ningún costo. Worklight Developer Edition se utiliza aquí para desarrollar la aplicación de muestra que accede al WebSphere Portal.

  • WebSphere Portal

    WebSphere Portal es el líder del mercado en la entrega de una infraestructura de website tanto para escritorio como dispositivos móviles. WebSphere Portal brinda navegación y creación de marcas de sitios para que sea posible personalizar su sitio para su negocio. La infraestructura entrega contenidos centralizados con análisis para medir la efectividad de su sitio. Acceso basado en rol y contenidos orientados al contexto son otros dispositivos claves. Las fortalezas de WebSphere Portal derivan de su base de WebSphere Application Server. WebSphere Portal tiene una vasta lista de dispositivos que incluyen seguridad, gestión de contenidos web integrada, centralización de contenidos, portales virtuales y más. El mejor valor de WebSphere Portal es la habilidad de agregar aplicaciones a su sitio con este fondo de dispositivos.

  • Diseño web sensible

    La creación de una experiencia web excepcional que se optimiza a través de múltiples dispositivos es esencial para los negocios actuales. Los usuarios ahora esperan ser capaces de explorar la web en sus teléfonos inteligentes tan fácilmente como exploran la web en su computadora de escritorio. Sin embargo, la centralización de los dispositivos móviles usualmente comienza con una conversación acerca de las aplicaciones nativas. Como se mencionó anteriormente, estas aplicaciones tienen un alto costo de propiedad y la reutilización de códigos es limitada. Otra solución ha sido la de crear una website alternativa específica para un dispositivo móvil, lo que no es una solución especialmente práctica porque uno podría terminar con muchos recursos de códigos que mantener.

    El diseño de web sensible (consulte los Recursos) es una solución práctica al paisaje cambiante de dispositivos y tamaños de pantallas al crear websites flexibles, fluidos y adaptados. Utilizar los conceptos del diseño web sensible brinda una manera para la interfaz de usuario de optimizar automáticamente la resolución de pantalla, la orientación o las capacidades para las vastas aplicaciones web y las aplicaciones híbridas. Esto asegurará que usted le saque provecho a su esfuerzo para diseñar una Web.

  • Elecciones de topología

    Usted encontrará opciones de topología de servidor cuando planee el despliegue de su Worklight y WebSphere Portal. Se requerirá un proxy para que IBM Worklight Server acceda a WebSphere Portal. Esta muestra fue probada con los servidores WebSphere Portal y Worklight coubicados en la misma máquina de desarrollo; el Listado 3 muestra que la dirección IP en el WebSphere Portal URL se utiliza para acceder a la página inicial. Es necesario un proxy para desplegar esta muestra cuando los servidores están en sistemas diferentes. El módulo 45 en la documentación Comenzar con IBM Worklight plantea cómo se utiliza una website remota, como una organizada en un servidor WebSphere Portal.

Otros productos IBM también pueden adaptarse a sus necesidades para desarrollar aplicaciones web o híbridas. Por ejemplo, IBM Rational® Application Developer e IBM Web Experience Factory son otras opciones para el desarrollo de aplicaciones.

Prerrequisitos

Para desarrollar la aplicación híbrida móvil de muestra que se describe aquí, usted debe tener estos productos software y dispositivos instalados y operando.

  • WebSphere Portal 8.0

    Véase la documentación del WebSphere Portal para instrucciones de instalación.

  • Eclipse

    Descargar Eclipse. Esta muestra está basada en Eclipse 3.7.2 (Indigo) y fue probada con Eclipse IDE para Java™ EE Developers. (El Eclipse Classic y Eclipse IDE para Java Developers pueden funcionar también, aunque no han sido probados con esta muestra).

Tenga en cuenta que las aplicaciones que se describen aquí solo funcionarán con dispositivos Android. Las entregas subsecuentes en esta serie tratarán la integración de Worklight con los sistemas operativos Android y iOS.

  • Android SDK

    Con Eclipse una vez instalado, su próximo paso es añadir el Android SDK. Esta muestra fue probada con Android SDK 2.3.3 (API 10).

    Oracle Java JRE es un requisito previo para el Android SDK. Una vez instalado, es posible configurar su instancia Eclipse para utilizar el JRE dirigiéndose a Window > Preferences > Java > Installed JREs (Figura 1).

    Figura 1. Programe el Oracle JRE en Eclipse
    Figure 1. Set the Oracle JRE in Eclipse
  • Worklight

    Esta muestra requiere de IBM Worklight 5.0 o posterior y no funcionará con versiones anteriores. Es posible descargar IBM Worklight Developer Edition 5.0 para uso de desarrollo sin costo. Los detalles sobre cómo descargar Eclipse con el plug-in están disponibles con los módulos de configuración de la documentación Comenzar con IBM Worklight.

    Worklight instala el servidor como parte de Eclipse. Puede que usted necesite actualizar eclipse.ini para cambiar el puerto de 8080 a otro valor, como 8085. El servidor Worklight se inicia automáticamente cuando usted inicia Eclipse. El Listado 1 muestra un contenido de archivo eclipse.ini de ejemplo con un conjunto -Dworklight_port.

    Listado 1. eclipse.ini
    -startup
    plugins/org.eclipse.equinox.launcher_1.2.0.v20110502.jar
    --launcher.library
    plugins/org.eclipse.equinox.launcher.win32.win32.x86_64_1.1.100.v20110502
    -showsplash
    org.eclipse.platform
    --launcher.XXMaxPermSize
    256m
    --launcher.defaultAction
    openFile
    -vmargs 
    -Dworklight.port=8085
    -Xms40m
    -Xmx384m
  • Cliente WebDAV

    Para actualizar el tema de WebSphere Portal con Worklight JavaScript, es necesario un cliente WebDAV. Esta muestra fue desarrollada con la utilización de AnyClient. Es posible utilizar cualquier cliente WebDAV que el WebSphere Portal soporte. Vea Connecting to the Portal WebDAV with 8.0 para más detalles.

  • Tema personalizado

    Es necesario crear su propio tema personalizado antes de aplicar Worklight JavaScript a su tema. El copiar el tema de WebSphere Portal asegura que su tema contenga todos los elementos requeridos que necesita para funcionar y que sus cambios no estarán sobreescritos por un fixpack. No modifique el tema de WebSphere Portal directamente porque puede ser actualizado por fixpacks de servicio. En cambio, siga las instrucciones en este artículo para crear una copia del tema.


Cree la aplicación Worklight

  1. Abra Eclipse. Nótese en la consola Worklight que el servidor se inició (Figura 2).
    Figura 2. El servidor Worklight se inició
    Figure 2. Worklight server started
  2. Para comenzar a desarrollar la aplicación, es necesario crear un nuevo proyecto Worklight. Desde Eclipse, diríjase a New > Other > Worklight Project, luego haga clic en Next (Figura 3).
    Figura 3. Cree un nuevo proyecto Worklight
    Figure 3. Create a new Worklight project
  3. Póngale un nombre a su proyecto. En la Figura 4, el proyecto se llama WLPortal. Mantenga Hybrid Application seleccionada como predeterminada y luego haga clic en Next.
    Figura 4. Póngale un nombre a su proyecto Worklight.
    Figure 4. Name your Worklight project
  4. Póngale un nombre a la aplicación híbrida en el proyecto Worklight, en este caso WLPortalApp. No hay un paquete JavaScript en esta muestra, pero usted tiene la opción de añadir uno en este panel (Figura 5).
    Figura 5. Póngale un nombre a la aplicación híbrida.
    Figure 5. Name the hybrid application
  5. Haga clic en Finish. El proyecto y los artefactos de la aplicación están creados. Esto puede tomar unos minutos. Una vez completado, puede que se le pida que cambie a la perspectiva Design y vea el proyecto en el Proyect Explorer (Figura 6).
    Figura 6. Proyecto mostrado en Eclipse.
    Figure 6. Project displayed in Eclipse
  6. Luego, usted deberá crear un entorno Worklight para desarrollar la aplicación híbrida. Haga clic derecho en el WLPortalApp en la carpeta de aplicaciones y luego seleccione New > Worklight Environment (Figura 7).
    Figura 7. Cree un nuevo entorno Worklight
    Figure 7. Create a new Worklight environment
  7. Los monitores de panel del New Worklight Environment (Figura 8). Debido a que esta muestra en particular es únicamente para una aplicación híbrida de Android, seleccione Android phones and tablets. Si es necesario crear entornos para otros sistemas operativos de dispositivos, este es el panel donde usted podría especificar esas opciones adicionales. Haga clic en Finish.
    Figura 8. Entorno Worklight mostrado en Eclipse.
    Figure 8. Worklight environment displayed in Eclipse
  8. Worklight Studio desarrolla y actualiza el proyecto con una aplicación nativa (Figura 9). El proyecto nativo se llama Worklight Project/WorklightApplication/Platform. Worklight Studio gestiona el ciclo de vida de esta aplicación y usted no debe realizarle ningún cambio. Cuando la aplicación web que usted inicialmente creó en el proyecto es desarrollada y desplegada, la aplicación nativa será sobreescrita con cualquier cambio de aplicación.
    Figura 9. La aplicación nativa es desarrollada
    Figure 9. The native app is built
  9. Ahora que ya tiene la aplicación configurada, verifique que podrá desarrollar y desplegar. Como es posible observar en la Figura 10, los comando de Build All y Deploy significan que la aplicación nativa será redesplegada en base a los cambios de la aplicación web. Es posible ejecutar los comandos Build All y Deploy al hacer clic derecho en la aplicación y seleccionar Run As > Build All and Deploy.
    Figura 10. Seleccionar desarrollar y desplegar
    Figure 10. Selecting build and deploy

    A medida que el proceso de desarrollo comienza, es posible ver el progreso en el mensaje de cabecera de estado inferior derecho en Eclipse. Una vez que el proceso se ha completado, usted debería ver el mensaje Application 'YourApp' deployed successfully with all environments en la consola de Worklight (Figura 11).

    Figura 11. Mensaje de éxito desplegado en el registro
    Figure 11. Success message displayed in log

Cree un Android Virtual Device antes de intentar ejecutar su nueva aplicación Android. Véase este artículo sobre el uso de dispositivos de hardware para detalles acerca de los AVD.

  1. Para ejecutar la aplicación Android, haga clic derecho en el proyecto WLPortalWLPortalAppAndroid en el Project Explorer y seleccione Run As > Android Application. Esto lanza el Android Emulator (si no está ejecutándose) y carga una nueva instancia de aplicación. Puede que usted tenga que abrir la pantalla inicial del emulador para ver la aplicación. La Figura 12 muestra una vista de la aplicación que usted ha desarrollado.
    Figura 12. Aplicación representada en emulador
    Figure 12. Application rendered in emulator

A continuación, usted añadirá el código a su aplicación para llamar a la página de WebSphere Portal.


Actualice el tema de WebSphere Portal con Worklight JavaScript.

  1. El primer paso para integrar WebSphere Portal y Worklight es desplegar el portal dentro de la aplicación Android. Para hacer esto, cree una aplicación híbrida que se conecte a WebSphere Portal dentro del derivador nativo. En Eclipse, abra la clase Java que inicia la aplicación (Listado 2), ubicada en \WLPortal\apps\WLPortalApp\android\native\src\com\WLPortalApp\WLPortalApp.java.
    Listado 2. WLPortalApp.java
    package com.WLPortalApp;
    
    import android.os.Bundle;
    
    import com.worklight.androidgap.WLDroidGap;
    
    public class WLPortalApp extends WLDroidGap {
    	@Override
    	public void onCreate(Bundle savedInstanceState) {
    	   super.onCreate(savedInstanceState);
    	   //DeviceAuthManager.getInstance().setProvisioningDelegate(
    	   <Use default ProvisioningDelegateImpl class or replace 
    	   with your IProvisioningDelegate implementation>);
    	   super.loadUrl(getWebMainFilePath());
    	}		
    }

La dirección IP en este ejemplo debería ser la dirección del servidor de WebSphere Portal que usted quiere representar en la aplicación híbrida. Véase la sección de Componentes de solución de muestra para más información sobre la instalación de Worklight y WebSphere Portal.

  1. La aplicación utiliza la clase que se muestra en el Listado 2 para reenviar el control a la página HTML ubicada en \WLPortal\apps\WLPortalApp\common\WLPortalApp.html. Es necesario cambiar este archivo para que se reenvíe a la dirección IP y al puerto WebSphere Portal. Para hacer esto, es posible cambiar el método onCreate para cargar la WebSphere Portal URL y utilizar el gestor de cookie (Listado 3).
    Listado 3. El método onCreate utiliza el WebSphere Portal URL
    public void onCreate(Bundle savedInstanceState) {
    	   super.onCreate(savedInstanceState);
    	   CookieSyncManager.createInstance(appView.getContext());
    	   CookieManager.getInstance().removeSessionCookie();
    	   super.loadUrl("http://9.99.999.999:10039/wps/portal",false);
    	   }
  2. Asegúrese de añadir las dependencias de importación para el CookieSyncManager y Cookie Manager que se muestran en el Listado 4.
    Listado 4. Dependencias de CookieSyncManager y CookieManager
    import android.webkit.CookieSyncManager;
    import android.webkit.CookieManager;
  3. Debido a las redirecciones, es necesario definir otro método para obtener páginas autenticadas para trabajar, como se muestra en el Listado 5. El resultado de estas actualizaciones se muestra en el Listado 6.
    Listado 5. Añada este método loadUrl
    public void loadUrl(String url) {
    	loadUrl(url,false);
    	}
    Listado 6. Los contenidos finales de WLPortalApp.java
    package com.WLPortalApp;
    
    import android.os.Bundle;
    import android.webkit.CookieSyncManager;
    import android.webkit.CookieManager;
    
    import com.worklight.androidgap.WLDroidGap;
    
    public class WLPortalApp extends WLDroidGap {
    	@Override
    	public void onCreate(Bundle savedInstanceState) {
    		   super.onCreate(savedInstanceState);
    		   CookieSyncManager.createInstance(appView.getContext());
    		   CookieManager.getInstance().removeSessionCookie();
    		   super.loadUrl("http://9.99.999.999:10039/wps/portal",false);
    	}	
    	
    	public void loadUrl(String url) {
    		loadUrl(url,false);
    	}
    }
  4. Para asegurar que todos los enlaces están abiertos con la vista web del contenedor híbrido, configure la preferencia stay-in-webview en cordova.xml, ubicado en \WLPortal\apps\WLPortalApp\android\native\res\xml\cordova.xml, par esto:

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

    Si está usando un servidor portal que no es local, entonces puede modificar la política de seguridad en esta ubicación también. La política de seguridad predeterminada es para bloquear todo el acceso a la red. Puede declarar entonces el acceso a dominios y subdominios de red específicos dentro de cordova.xml. Este artículo proporciona más información.

  5. Es posible ahora hacer clic derecho de nuevo en la aplicación y seleccionar Build All and Deploy. Usted observará el progreso en el mensaje de cabecera de estado inferior derecho de Eclipse. Cuando el proceso se complete, haga clic derecho en WLPortalWLPortalAppAndroid y seleccione Run As... > Android Application. Esto lanza el Android Emulator, y la aplicación despliega su WebSphere Portal, como se muestra en la Figura 13.
    Figura 13. Aplicación que se ejecuta con un emulador mostrando WebSphere Portal.
    Figure 13. Emulator running application displaying WebSphere Portal
  6. En este punto, es necesario su tema personalizado, con base en el tema WebSphere Portal 8.0 que usted creó anteriormente. Será necesario utilizar una utilidad WebDAV para lo siguiente:
    • Actualizar la plantilla de tema (theme.html).
    • Copiar los archivos Worklight JavaScript al tema.
    • Crear módulos que estarán definidos en un nuevo perfil de temas.

    Inicie su utilidad WebDAV (nosotros utilizamos AnyClient para esta muestra) y conéctese al punto de entrada fs-type1. Cuando se carga, exhibe la estructura de carpetas que se muestra en la Figura 14.

    Figura 14. Estructura de carpetas WebDAV para fs-type1
    Figure 14. WebDAV folder structure for fs-type1
  7. Diríjase a su tema personalizado; por ejemplo, fs-type1:themes/<customTheme>. Cree una carpeta llamada worklight dentro de su tema personalizado (Figura 15).
    Figura 15. La carpeta Worklight ha sido creada.
    Figure 15. The worklight folder has been created
  8. Localice los archivos JavaScript en Eclipse para las bibliotecas Worklight que usted cargará en WebSphere Portal. Estas carpetas se llaman wlclient y common, y es posible encontrarlas en: \WLPortal\apps\WLPortalApp\android\native\assets\www\default\. Copie ambas carpetas wlclient y common en la carpeta worklight que usted creó en WebDAV.
  9. Abra el archivo HTML principal que la aplicación cargó antes de que usted insertara el WebSphere Portal URL, en \WLPortal\apps\WLPortalApp\android\native\assets\www\default\WLPortalApp.html. Hay dos partes en este archivo que es necesario integrar en WebSphere Portal, debido a que la aplicación ya no utiliza este archivo.
    • El primero es el archivo JavaScript estático incluido en el elemento <head> (Listado 7).
      Listado 7. JavaScript estático incluido en el elemento principal de WLPortalApp.html
      <script type="text/javascript">
          // Defina espacio de nombre WL.
          var WL = WL ? WL : {};
      
          /**
      
           * Variables de configuración WLClient.
      
           * Los valores están introducidos por el implementador que empaqueta el gadget.
      
           */
      
          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>
    • El segundo es el conjunto de carga en el elemento <body>, que inicia el cliente de Worklight (Listado 8).
      Listado 8. El conjunto de métodos de carga en el cuerpo para iniciar el Worlight JavaScript
      <body id="content" onload="WL.Client.init({})" style="display: none">

    Ambas secciones deben incluirse en el tema como artefactos de un módulo. Tome el JavaScript de este archivo HTML e inclúyalo de una manera utilizable dentro de los archivos JavaScript individuales. Cree dos nuevos archivos en la carpeta <customTheme>/worklight/common/js de la biblioteca de Worklight, llamados init.js y staticprops.js (Figura 16) en: fs-type1:themes/<customTheme>/worklight/common/js/.

    Figura 16. Nuevos archivos init.js y staticprops.js son creados
    Figure 16. New files init.js and staticprops.js are created
  10. Copie el archivo staticprops.js que acaba de crear en su máquina local y abra el archivo (Listado 9). Copie el JavaScript estático de la página HTML en este archivo.
    Listado 9. Contenidos del archivo 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\/"
    };

    Copie el archivo staticprops.js actualizado en la carpeta <customTheme>/worklight/common/js en WebDAV.

  11. Copie el archivo init.js que acaba de crear en su máquina local y abra el archivo (Listado 10). El i$ API, que está incluido en el tema de WebSphere Portal, se utiliza aquí para crear una función de carga que reemplaza el conjunto de carga incorporado en la página HTML.
    Listado 10. Contenidos del archivo init.js
    i$.addOnLoad(function(){	
    	WL.Client.init({});
    });

    Copie el archivo init.js en la carpeta <customTheme>/worklight/common/js en WebDAV.

    Véase el WebSphere Portal 8.0 Javadocs para más sobre el i$ API, y la wiki de WebSphere Portal wiki para más sobre cómo crear módulos utilizando la infraestructura de optimización de temas.

  12. El último artefacto que es necesario para crear antes de definir los nuevos módulos de temas es la muestra que prueba el Worklight JavaScript. Esta muestra sirve para asegurarse de que el Cordova API está disponible dentro del tema de WebSphere Portal y está basado en el conjunto de ejemplos del Cordova API.

    Debido a que esta muestra está destinada a únicamente probar la utilización de API en WebSphere Portal, y el valor de reutilización es por lo tanto limitado, no hay necesidad de crear un módulo para el código de muestra. Coloque el fragmento del código directamente en la plantilla del tema, luego copie la plantilla de temas localizada en su máquina. La plantilla de temas está en WebDAV localizada en el tema personalizado fs-type1:themes/<customTheme>/nls/theme_en.html (Figura 17).

    Figura 17. La plantilla de temas localizada para añadir el código de muestra
    Figure 17. The localized theme template to add sample code
  13. Abra la plantilla de temas y encuentre el <a rel="dynamic-content" href="co:config"></a> elemento de contenidos dinámico, ubicado cerca del botón de la plantilla. Ubique el ejemplo deviceready del Cordova API después de este área de contenidos dinámicos, como se muestra en el Listado 11.
    Listado 11. Muestra para probar Cordova API en WebSphere Portal
    <div class="wpthemeComplementaryContent" 
            id="wpthemeComplementaryContent" 
    		role="region" 
    		aria-labelledby="wpthemeComplementaryContentText">
      <span class="wpthemeAltText" id="wpthemeComplementaryContentText">
    	Complementary Content
      </span>
      <a rel="dynamic-content" href="co:config"></a>
      <script type="text/javascript">
      document.addEventListener("deviceready", onDeviceReady, false);
      function onDeviceReady() {	
            var element = document.getElementById('deviceProperties');
            element.innerHTML = 'Device Name: '     + device.name + '<br/>' + 
                                'Device Version: '  + device.version;
      }
      <script>
    </div>
  14. Luego de que JavaScript está ubicado para probar Cordova, es necesario insertar un elemento dentro de la plantilla de temas que le mostrará la información del dispositivo. Directamente debajo del elemento <body>, ubique un elemento con un id de "deviceProperties" en la plantilla de temas. El Listado 12 muestra un ejemplo.
    Listado 12. Elemento de propiedades del dispositivo en plantilla de temas
    <p id="deviceProperties">Loading device info</p>
  15. Mientras tiene abierta la plantilla de temas, añada un id al elemento <body> con el valor "content" (Listado 13). Esto se requiere por el método init de Worklight.
    Listado 13. Añada un nuevo ID al elemento cuerpo.
    <body id="content" class="lotusui30dojo tundra locale_en">
  16. Ahora que los artículos de la página HTML y una muestra para probar Worklight JavaScript están incluidos como archivos individuales en el tema, usted puede definirlos como artefactos en módulos nuevos. Para hacer esto, registre nuevas contribuciones de temas como un archivo de configuración JSON en la carpeta de contribuciones bajo el tema personalizado en WebDAV. El sistema escanea automáticamente los archivos en esta carpeta y las contribuciones definidas son registradas para el tema que las define. (Para aprender más acerca de la creación de contribuciones específicas de temas, véase Registrar contribuciones específicas a temas).
    1. Abra la carpeta contributions bajo su tema personalizado y cree un archivo con nombre worklight.json. Este archivo debería definir dos nuevos módulos para cada uno de los siguientes:
      • Archivos de biblioteca Worklight JavaScript
      • Carga de inicialización Worklight

      Estos dos módulos serán identificados como wl_client y wl_init, respectivamente.

    2. Copie el archivo worklight.json en su máquina local y ubique los contenidos del Listado 14 en este archivo.
      Listado 14. Contenidos del archivo worklight.json
      {
         "modules":[{
            "id":"wl_client",
            "contributions":[{
               "type":"config",
                  "sub-contributions":[
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/common/js/staticprops.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/wlclient/js/cordova.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/common/js/wljq.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/common/js/base.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/wlclient/js/messages.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/common/js/wlcommon.js"}]
                  },				
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/wlclient/js/diagnosticDialog.js"}]
                  },
                  {
                     "type":"js",
                     "uris":
                        [{"value":"/worklight/wlclient/js/deviceAuthentication.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/wlclient/js/window.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/wlclient/js/worklight.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/wlclient/js/wlclient.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/wlclient/js/wlfragments.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/wlclient/js/encryptedcache.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/wlclient/js/checksum.js"}]
                  },
                  {
                     "type":"js",
                     "uris":[{"value":"/worklight/wlclient/js/wlgap.android.js"}]
                  }]
              }]
         },
         {
            "id":"wl_init",
            "prereqs":[{
               "id":"wl_client"
            },{
               "id":"wp_client_main"
            },{
               "id":"wp_client_ext"
            }],
            "contributions":[{
               "type":"config",
               "sub-contributions":[{
                  "type":"js",
                  "uris":[{
                     "value":"/worklight/common/js/init.js"
                  }]
               }]
            }]
         }
         ]
      }
    3. Copie el archivo worklight.json en la carpeta <customTheme>/contributions en WebDAV.
  17. Las bibliotecas Worklight JavaScript ahora están definidas en los módulos de temas. La muestra para probar el JavaScript estaba directamente ubicada en la plantilla de temas para que pudiese eliminarse fácilmente luego de probarse, pero no se necesita ningún módulo en el perfil para el código de muestra. El último paso es tomar los módulos y definirlos en un perfil de temas. Cree un nuevo perfil abriendo el perfil ligero ubicado en el tema personalizado en fs-type1:themes/<customTheme>/profiles/profile_lightweight.json. Copie este archivo a su máquina local y cambie el nombre a profile_worklight.json.
  18. Abra el archivo profile_worklight.json y añada los módulos wl_client y wl_init que usted definió como contribuciones (Listado 15).
    Listado 15. Ejemplo de la matriz del ID del módulo en el perfil.
    "moduleIDs": [
    		"wp_theme_portal_80",
    		"wp_portlet_css",
    		"wp_one_ui",
    		"wp_one_ui_dijit",
    		"wp_legacy_layouts",
    		"wp_client_ext",
    		"wp_status_bar",
    		"wp_theme_menus",
    		"wp_theme_skin_region",
    		"wp_theme_high_contrast",
    		"wp_layout_windowstates",
    		“wl_client”,
    		“wl_init”
    	],
  19. Cambie el nombre del perfil para que sea posible identificarlo fácilmente cuando lo seleccione en el diálogo de propiedades de la página. Para hacer esto, encuentre el título en inglés (o el entorno local con el que planea trabajar) y cambie el título de "Lightweight" a "Worklight" (Listados 16 y 17).
    Listado 16. Título del perfil antes del cambio
    {
    	"value":"Lightweight",
    	"lang":"en"
    },
    Listado 17. Título del perfil luego del cambio
    {
    	"value":"Worklight",
    	"lang":"en"
    },
  20. Copie el archivo worklight.json en el directorio <customTheme>/profiles/ directory en WebDAV. Borre la memoria caché del explorador y reinicie WebSphere Portal para asegurarse de que el nuevo perfil esté activado.

    Todos los artefactos del tema que se requieren para aplicar el IBM Worklight JavaScript en WebSphere Portal están ubicados correctamente. Ahora es posible tomar el perfil que ha definido los módulos para incluir los artefactos Worklight y aplicarlo a una página. Cree una página con su tema personalizado aplicado si no lo ha hecho todavía. (Vea Creación y navegación de páginas para saber más acerca de la creación de páginas).

    Hay dos formas en que es posible aplicar el perfil a la página y ver sus cambios para Worklight. Es posible elegir cualquiera de estas opciones:

    • Establecer el perfil como el tema predeterminado.
    • Establecerlo específicamente para una página particular.

    Cualquiera de las dos formas funcionará para que sea posible ver sus cambios pero el establecer el perfil en una página particular es la forma más fácil. Para hacer esto, abra el diálogo de Page Properties que está disponible en la tabla de personalización y encuentre el menú desplegable para perfiles de temas disponibles en la etiqueta Advanced (Figura 18). (Véase Cambiar el perfil del tema para más información).

    Figura 18. El menú de perfiles en el diálogo de propiedades de página
    Figure 18. The profile menu in the page properties dialog

Pruebe la aplicación híbrida con el Android Emulator

Ahora que usted ha aplicado el perfil a una página WebSphere Portal, es posible probar la muestra utilizando el Android Emulator:

  1. Una vez más, desarrolle y despliegue la aplicación haciendo clic derecho en la aplicación y seleccionando Build All and Deploy. Es posible ver el progreso en el mensaje de cabecera de estado inferior derecho de Eclipse.
  2. Cuando el proceso se complete, haga clic derecho en WLPortalWLPortalAppAndroid y seleccione Run As... > Android Application. Esto lanzará el Android Emulator y la aplicación desplegará su WebSphere Portal.
  3. Luego de que la aplicación haya reproducido la aplicación WebSphere Portal, si la nueva página a la que usted aplicó el perfil Worklight no tiene un acceso anónimo, entonces inicie sesión y navegue a la página. Tomará algunos segundos para que las configuraciones del dispositivo de carguen pero usted los observará aparecer en la parte superior de la página, como se muestra en la Figura 19.
    Figura 19. Aplicación Worklight despliega información del dispositivo en WebSphere
    Figure 19. Worklight application displaying device information in WebSphere

Conclusión

IBM Worklight facilita la habilitación de aplicaciones web multicanal para interactuar con el dispositivo y los canales de entrega del dispositivo. El shell de Worklight es una capa delgada de código de cliente nativo en el dispositivo que maneja cosas como autenticación, seguridad, lanzamiento de aplicaciones y notificaciones, y puede hacerse a medida de las necesidades específicas de una organización o negocio. El servidor shell sirve para lanzar el contenido web (la sustancia real de la aplicación). IBM WebSphere Portal puede añadir portlets que incluyen marcaciones que aprovechan los servicios nativos de Worklight junto con otros portlets. Para hacer esto, el shell de Worklight se entrega en su manera estándar y apunta a los websites gestionados por WebSphere Portal. El shell de Worklight también puede empaquetarse en un entregable que puede publicarse en una tienda de aplicaciones o desplegarse a través de MDM, de ser necesario. El resultado es que usted obtiene las capacidades completas de gestión de websites multicanal WebSphere Portal extendidas para incluir servicios de dispositivos nativos.

Artículos subsecuentes en esta serie estarán orientadas a aprovechar las capacidades nativas dentro de su tema WebSphere Portal, configurar la autenticación entre Worklight y WebSphere Portal, brindar integración nativa a sus servicios sociales de dispositivo a través de Worklight y gestión de contenidos web y aumentar su IBM Rational Application Developer y portlets de IBM Web Experience Factory que utilizan Worklight.


Descargas

DescripciónNombretamaño
Sample portal theme filesWLPortalApp-theme_files.zip8 KB
Sample applicationWLPortalApp.zip1 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 se registra en developerWorks, se crea un perfil para usted. Información sobre su perfil (nombre, país/región y compañia) estará disponible al público y acompañará cualquiera de sus publicaciones. Puede actualizar su cuenta 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=855619
ArticleTitle=Entregue una experiencia web móvil excepcional utilizando el portal de WebSphere e IBM Worklight, parte 1.: Integración de una aplicación móvil híbrida con las páginas del WebSphere Portal
publish-date=01212013