Obtenga Worklight ahoraDescargue IBM Worklight DeveloperEdition 5.0 ahora sin costo y sin fecha devencimiento!

IBM WebSphere Portal y las soluciones de Exceptional Web Experience de IBM han sido el lder del mercado en laexperiencia web durante ms de una dcada. IBM Worklight es una plataforma nueva y completa de aplicacinempresarial mvil para entregar aplicaciones nativas, hbridas y web. Este artculo explica cmo habilitar el soportepara aplicaciones de Android y de iOS durante la habilitacin de la integracin de WebSphere Portal y Worklight. Esteejercicio refuerza la muestra presentada en la Parte 1 y demuestra cmo desarrollar una aplicacin de iOS e incluirdinmicamente los recursos de Worklight apropiados.

Jon Lidaka es un ingeniero front-end con base en el Research Triangle Park Development Lab de IBM. Durante su tiempo en el desarrollodel portal, l ha contribuido principalmente con el desarrollo del tema, enfocndose en la accesibilidad y la globalizacin, y varioscomponentes que incluyen portlets de administracin e integrador de aplicaciones web. Actualmente l dirige la misin de desarrollo mvilpara el portal. Jon ha hablado en mltiples conferencias de IBM sobre diseo de interfaces de usuario y optimizacin de temas de portalpara dispositivos mviles.

28-01-2013

IntroduccinLa plataforma de IBM Worklight le permite crear aplicaciones paramuchos entornos de dispositivos, incluidos iOS, Android yBlackberry. Mediante el uso de tecnologa como Apache Cordova,que Worklight usa y distribuye, puede llamar a dispositivos nativosmediante JavaScript desde su marcacin web.

Este artculo lo gua a travs del proceso de creacin de una aplicacin de iOS hbrida que se integrecon IBM WebSphere Portal. Discute el proceso para determinar el dispositivo que ha accedido al portal ypara incluir los recursos apropiados ya sea para iOS o Android para habilitar el soporte deposibilidades nativas dentro de la aplicacin.

Requisitos previosEste refuerza la informacin que fue presentada en la Parte 1 de esta serie. Complete la solucin demuestra de la Parte 1 antes de continuar con las etapas sealadas aqu.

Adems de los requisitos previos definidos en la Parte 1, debe tener Apple Xcode instalado paradesarrollar la aplicacin hbrida de muestra aqu descrita. Este artculo se basa en la aplicacin hbridaWorklight con soporte para el Apple iPhone. Esta muestra fue probada con Apple Xcode versin 4.4.1 ysolo est disponible para Apple OS X.

Cree el entorno de iOS en WorklightPara crear un nuevo entorno para el iPhone en Worklight, abra Project Explorer y haga clic con elbotn derecho en WLPortalApp en la carpeta de aplicaciones. Luego, seleccione New > WorklightEnvironment (Figura 1).Figura 1. Creacin de un nuevo entorno de Worklight

1.

developerWorks en espaoldeveloperWorks en espaol Temas TcnicosTemas Tcnicos Desarrollo mvilDesarrollo mvil Biblioteca tcnicaBiblioteca tcnica

Entregue una experiencia web mvil excepcional conEntregue una experiencia web mvil excepcional conWebSphere Portal e IBM Worklight, Parte 2:WebSphere Portal e IBM Worklight, Parte 2:Integracin del soporte de dispositivos mltiplesIntegracin del soporte de dispositivos mltiplespara pginas de WebSphere Portalpara pginas de WebSphere Portal

1 of 12

Se muestra el panel New Worklight Environment (Figura 2). Para esta muestra particular, seleccioneiPhone. Si necesitara crear entornos para otros dispositivos de iOS, como iPad, este es el paneldonde especifica esas opciones adicionales. Haga clic en Finish.Figura 2. Entorno de Worklight mostrado en Eclipse

2.

Worklight Studio actualiza el proyecto con una aplicacin nativa para dispositivos de iPhone (Figura 3).Figura 3. La aplicacin nativa de iPhone se aade al proyecto

3.

2 of 12

A continuacin, abra el archivo de clase principal para la aplicacin nativa de iOS (Figura 4). Estearchivo est ubicado en \WLPortal\apps\WLPortalApp\iPhone\native\classes\WLPortalApp.m. Este esel archivo que ser modificado, en forma similar al archivo WLPortalApp.java en la Parte 1. Todas lasaplicaciones de iOS estn escritas en Objective-C (vea Resources).Figura 4. Archivo de clase principal para la aplicacin nativa de iOS

4.

Para mostrar el portal dentro de la aplicacin de iOS, deber modificarse el mtodo del iniciador demodo que cargue el URL del portal. El mtodo que se modificar se denominadidFinishLaunchingWithOptions (Listado 1), y bsicamente lanza un archivo de HTML interno quese crea de forma predeterminada.Listado 1. Mtodo didFinishLaunchingWithOptions en WLPortalApp.m/** * Este es un punto de partida principal despus de que se inicia la aplicacin. 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 inicializacin extra especfica de la aplicacin, puede hacerlo aqu. **/ return ret;}

5.

Sustituya el bloque de cdigo en el Listado 1 por el cdigo en el Listado 2. El nuevo cdigo iniciar laaplicacin automticamente en una vista web dirigida hacia el portal.Listado 2. Mtodo didFinishLaunchingWithOptions dirigiendo la aplicacin hacia el URL dePortal-(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;}

6.

3 of 12

La direccin IP en este ejemplo debe ser la direccin del servidor de WebSphere Portal que desearepresentar en la aplicacin hbrida.Abra el archivo Cordova.plist ubicado en \WLPortal\apps\WLPortalApp\iphone\native.7.Encuentre el atributo clave denominado OpenAllWhitelistURLsInWebView y establzcalo comotrue (Listado 3).Listado 3. OpenAllWhitelistURLsInWebView establecido como trueOpenAllWhitelistURLsInWebView

8.

Ahora que tiene la configuracin de la aplicacin, 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 nativasvolvern a ser desplegadas con base en los cambios de la aplicacin web. Ejecute el comando BuildAll and Deploy haciendo clic con el botn derecho en la aplicacin y seleccionando Run As > BuildAll and Deploy.Figura 5. Seleccin de build and deploy

9.

A medida que el proceso de desarrollo comienza, puede ver el progreso en el mensaje de cabecera deestado en la parte inferior derecha en Eclipse. Cuando el proceso se completa, debe ver el mensajeApplication 'YourApp' deployed successfully with all environments en la consola de Worklight. Lasaplicaciones de iOS y Android se han actualizado.

10.

A continuacin, desea ver la aplicacin en el simulador de iOS. Para hacer esto, primero haga clic conel botn derecho en iphone en el proyecto en Eclipse, despus seleccione Run as > Xcode project(Figura 6). Esto iniciar Xcode y se mostrar la aplicacin en la consola (Figura 7).Figura 6. Ejecucin de la aplicacin como proyecto Xcode

11.

4 of 12

Figura 7. Su aplicacin visualizada en Xcode

Debido a que la aplicacin fue creada para dispositivos de iPhone, cambie el simulador a iPhonehaciendo clic en la flecha hacia abajo, junto al icono Run en la parte superior izquierda de la consola, yseleccione iPhone 5.1 Simulator (Figura 8).Figura 8. Cambio del simulador a iPhone

12.

Seleccione el icono Run en la parte superior izquierda (Figura 9) y el simulador iniciar su aplicacin(Figura 10).Figura 9. El botn Run en Xcode

Figura 10. Ejecucin de la aplicacin en el simulador de iPhone

13.

5 of 12

Actualice el tema de WebSphere Portal para iOS y AndroidEl tema de WebSphere Portal ahora requiere una actualizacin para identificar el sistema operativo deldispositivo mvil y para incluir el conjunto correcto de archivos a atraer en los recursos de Worklight. Laidentificacin del sistema operativo del dispositivo mvil ser determinada por el mecanismo de clase deldispositivo en WebSphere Portal. Los clientes de telfonos inteligentes de Android e iOS listos para usarestn combinados en una clase de dispositivo llamada smartphone. Es necesario separar los clientespara cargar los recursos en funcin del sistema operativo.

Para actualizar el cliente de iPhone de forma que sea identificado en forma distinta a Android, ejecuteel script xmlaccess en el Listado 4.Listado 4. Script XMLAccess para cambiar la clase del dispositivo para iPhone y AndroidMobile

.*iPhone.*

com.ibm.portal.devicesupport.deviceclass=smartphone

com.ibm.portal.devicesupport.deviceclass=smartphone-ios HTML_4_0

Si anteriormente estaba utilizando la clase de dispositivo smartphone, tendr que actualizar cualquierplantilla lgica o esttica personalizada para utilizar la nueva clase smartphone-ios.

1.

En la Parte 1, cre un tema personalizado y parte de ese tema estaba creando un nuevo EAR deaplicacin web que incluye recursos dinmicos personalizados. Abra el archivo head.jsp , ubicado en//installedApps////themes/html/dynamicSpots/. Al final

2.

6 of 12

del archivo head.jsp, aada el cdigo en el Listado 5, el cual recuperar la clase de dispositivo y laconfigurar en una variable de JSP.Listado 5. Recuperacin de la clase de dispositivo

Despus de la lnea de cdigo para recuperar la clase de dispositivo, use la informacin recuperadapara verificar los dispositivos de telfono inteligente de iOS o Android (Listado 6).Listado 6. Lgica para la verificacin de telfonos inteligentes de iOS o Android

3.

Ahora que el tema est listo para determinar el dispositivo que est accediendo al portal, puede moverlos archivos especficos de iOS de Worklight a WebSphere Portal. Muchos archivos utilizados en laParte 1 sern los mismos entre dispositivos, pero los que no son compartidos incluirn el espacio denombres ios. El archivo que define el JavaScript que debe incluirse en WebSphere Portal esWLPortalApp.html, ubicado en \WLPortal\apps\WLPortalApp\iphone\native\www\default\.

4.

El primer archivo que debe crearse especficamente para iPhone es el archivo de propiedadesestticas. Las propiedades estticas estn definidas en la parte superior del archivo HTML (Listado 7).Listado 7. Propiedades estticas para dispositivos de iPhone

var WL = WL ? WL : {};

/** * Variables de configuracin 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\/"

};

5.

Tome el JavaScript de este archivo HTML (Listado 7) e inclyalo de manera utilizable dentro de unnuevo archivo de JavaScript llamado staticprops.ios.js. Coloque este nuevo archivo en estaubicacin: fs-type1:themes//worklight/common/js/ (Figura 11).Figura 11. Creacin del nuevo archivo staticprops.ios.js

6.

Otro archivo que necesita ser renombrado y copiado en la carpeta comn de JavaScript eswlcommon.js, ubicado en: \WLPortal\apps\WLPortalApp\iphone\native\www\default\common\js\.Figura 12. wlcommon.js renombrado para que sea especfico de iOS

7.

El siguiente conjunto de archivos que deben copiarse de Worklight a Portal est ubicado en la carpetawlclient. Estos archivos deben renombrarse con el espacio de nombres "ios":

checksum.js

8.

7 of 12

cordova.js

Estos archivos, ubicados en: \WLPortal\apps\WLPortalApp\iphone\native\www\default\wlclient\js\,pueden copiarse como estn:

json2.js

wpgap.ios.js

Despus de terminar de renombrar, copie los cuatro archivos a WebSphere Portal en esta ubicacin:fs-type1:themes//worklight/wlclient/js/.Figura 13. Los nuevos archivos en la carpeta wlclient JavaScript

Todos los archivos necesarios para la API de Worklight estn ahora en su lugar y necesitan serincluidos en la pgina en funcin del dispositivo que est accediendo a WebSphere Portal. ElJavaScript que debe incluirse para Android puede tomarse directamente desde el mdulo wl_clientcreado en la Parte 1. Aada los elementos include de script apropiados a head.jsp para dispositivosmviles de Android (Listado 8).Listado 8. JavaScript para dispositivos mviles de Android aadidos a head.jsp

9.

8 of 12

Despus, aada el JavaScript apropiado para dispositivos de iOS en head.jsp. Esta es esencialmentela misma lista que para dispositivos mviles de Android, que puede verificar en funcin de los includesde 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 losarchivos correspondientes de Android, y se aadi json2.js (Listado 9).Listado 9. Javascript para dispositivos mviles de iOS aadido a head.jsp

Cuando se entra en la produccin, es til crear capas de JavaScript para cada conjunto de archivosdel dispositivo especfico. Esto reducira las solicitudes en la representacin de la pgina y ayudara amejorar el rendimiento.

10.

Ahora que los archivos de JavaScript de Android estn incluidos mediante el archivo head.jsp, debeeliminar el mdulo wl_client del archivo profile_worklight.json , ubicado enfs-type1:themes//profiles/.Listado 10. Conjunto original de mdulos 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 despus de eliminar wlclient"moduleIDs": [

"wp_theme_portal_80","wp_portlet_css","wp_one_ui","wp_one_ui_dijit",

11.

9 of 12

"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"

],

Debido a que el mdulo wl_client se elimin del perfil, debe eliminar el requisito previo del mdulowl_init. Para hacer esto, abra el archivo de contribucin worklight.json y elimine la definicin derequisito previo, ubicada en fs-type1:themes//contributions.Listado 12. Definicin original del mdulo 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. Mdulo 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"}]

}]}]

}

12.

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

Pruebe la aplicacinDebido a que este ejercicio es la continuacin de la Parte 1, ya hay una muestra para probar la API deWorklight. Esta mostrar el nombre y la versin del dispositivo en la parte superior de la pgina. Laprueba ser para confirmar que esta informacin se muestre correctamente para el emulador de Androidy para el simulador de iOS.

Una vez ms, desarrolle y despliegue la aplicacin haciendo clic con el botn derecho en la aplicaciny seleccionando Build All and Deploy. Puede ver el progreso en el mensaje de cabecera de estadoen la parte inferior derecha en Eclipse.

1.

Cuando el proceso se complete, haga clic con el botn derecho en WLPortalWLPortalAppAndroid yseleccione Run As... > Android Application. Esto lanzar Android Emulator y la aplicacin mostrarsu WebSphere Portal.

2.

Despus de que la aplicacin haya representado la aplicacin de WebSphere Portal, navegue hacia lapgina en la cual aplic el tema personalizado y el perfil de Worklight. Si esta pgina no tiene accesoannimo, inicie sesin y navegue hacia ella. Tomar algunos segundos para que se carguen losvalores del dispositivo, pero los ver aparecer en la parte superior de la pgina, como se muestra en laFigura 14.Figura 14. Emulador de Android mostrando Portal con la muestra de API de Worklight

3.

10 of 12

Haga clic con el botn derecho en iphone en WLPortalApp y seleccione Run As > Xcode project.Esto iniciar la aplicacin Xcode, y deber ejecutar la aplicacin en el simulador de iOS. Una vez enejecucin, la aplicacin mostrar su WebSphere Portal.

4.

Despus de que la aplicacin haya representado la aplicacin de WebSphere Portal, navegue una vezms hacia la pgina donde aplic el tema personalizado y el perfil de Worklight. Ver el nombre yversin del dispositivo en la parte superior de la pgina, como se muestra en la Figura 15.Figura 15. Simulador de iOS mostrando WebSphere Portal con la API de Worklight

5.

ConclusinIBM WebSphere Portal facilita el ajuste de las posibilidades nativas del dispositivo disponibles para sus

11 of 12

RecursosAprender

Todos los artculos en esta serie

IBM Mobile Foundation

Informacin de producto de IBM Workligh

Documentacin del usuario de IBM Worklight

Comenzar con IBM Worklight

Informacin de producto de WebSphere Portal

Documentacin de Producto de IBM WebSphere Portal 8

Desarrollar una Experiencia Web Excepcional

Introduccin a Objective-C

Zona de desarrollo de IBM developerWorks Mobile

Zona de IBM developerWorks WebSphere Portal

IBM developerWorks WebSphere

Obtener los productos y tecnologasIBM Worklight Developer Edition 5.0

Eclipse

IBM PureSystemsLa nueva familia de sistemasexpertos integrados de IBM estaqu.

La carrera ha comenzado!Obtenga WAS paradesarrolladores sin costo.

Descarga gratuita:Rational Team Concert for PowerSystems Software StandardEdition

aplicaciones web de multi-canal. El shell de Worklight creado para Android e iOS tambin puedeempaquetarse en un entregable que pueda publicarse en la tienda de aplicaciones o desplegarsemediante MDM, si es necesario. El resultado es que obtiene todas las posibilidades de gestin del sitioweb de multi-canal de WebSphere Portal extendidas para incluir servicios de dispositivos nativos hechosa la medida para mltiples dispositivos. Los siguientes artculos en esta serie discutirn la configuracinpara la autenticacin de inicio de sesin nico y la integracin de Worklight y Web Experience Factory,respectivamente.

DescargarDescripcin Nombre tamao

Sample application Part2-sample_files.zip 9 KB

12 of 12