-
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