Creación de una aplicación web móvil utilizando Rational Application Developer y Dojo Mobile Framework

El propósito de este artículo es mostrar una manera sencilla de crear una aplicación web optimizada para dispositivos móviles, utilizando Rational Application Developer (RAD) como entorno de desarrollo y los componentes pre construidos del Dojo Mobile Framework. Para nuestro ejemplo utilizaremos IBM Workload Deployer (IWD) que permite exponer sus servicios a través de su API REST para ser consumidos desde la aplicación que se ejecutará en el dispositivo móvil.

Oscar Escobar, Ingeniero en Informática, IBM

Óscar EscobarOscar Escobar es Ingeniero en Informática egresado del Instituto Politécnico Nacional (México). Cuenta con una amplia experiencia en el desarrollo de aplicaciones utilizando tecnologias web 2.0, así como en el desarrollo de aplicaciones empresariales en la plataforma Java. Actualmente se desempeña en la Unidad de Software Group de IBM México como IT Specialist en la brand de Soluciones de Industria.



20-04-2012

Creación del proyecto.

  1. Dentro de Rational Application Developer crear un nuevo proyecto del tipo Static Web Project
  2. Nombrar al proyecto como IWDMobileApp y presionar el botón Modify para incluir a Dojo Mobile Framework en nuestro proyecto.
  3. Dentro de la configuración del proyecto, en la opción Web 2.0 incluir Dojo Toolkit
  4. Cambiar la versión de Dojo Toolkit a utilizar en nuestro proyecto para tener acceso a los componentes más recientes para dispositivos móviles. (al momento de escribir este artículo la versión 1.7 se encontraba en Beta)
  5. Una vez creado el proyecto, se puede observar que fue incluida la carpeta dojo dentro de Web Content en la vista del proyecto.

Con este paso, finalizamos la creación del proyecto y tenemos incluidas las librerias necesarias para construir nuestra aplicación web móvil, utilizando Dojo Mobile Framework.


Creando nuestra aplicación

Una aplicación web Dojo Mobile es construida a partir de una pagina web estática, usualmente index.html. Este archivo puede contener una o varias vistas, sin embargo solamente una vista es visible a la vez. Las transiciones entre las diferentes vistas son manejadas por Dojo Mobile Framework y se pueden incluir diferentes efectos para cada una de ellas.

Crear la vista principal de nuestra aplicación

En la carpeta Web Content, click derecho -> New -> Web Page

Figura 1.

El nombre del archivo será index.html y debemos asegurarnos que el template utilizado sea Mobile HTML/XHTML

Figura 2.

Presionar el botón Options para configurar el Encoding y el Document Type, como se muestra en la siguiente figura.

Figura 3.

Una vez configurados los parámetros necesarios, cerramos la ventana y presionamos el botón Finish para que termine la creación de nuestra página principal. Al abrir el archivo con el editor Rich Page Editor, podemos ver distintas opciones, entre las cuales están:

  • Seleccionar el dispositivo para el cual vamos a desarrollar nuesrta aplicación
  • Vista vertical
  • Vista horizontal
  • Vista de diseño
  • Vista de código fuente
  • Ambas
Figura 4.

El código fuente que automáticamente genera Rational Application Developer, es el siguiente:

<!DOCTYPE HTML>
<html>
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-
scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<script type="text/javascript"
	djconfig="isDebug: false, parseOnLoad: true" src="dojo/dojo/dojo.js">
</script>
<script type="text/javascript">
dojo.require("dojox.mobile.parser");
dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");
dojo.require("dojox.mobile.deviceTheme");
dojo.require("dojox.mobile.View");
</script>
</head>
<body><div data-dojo-type="dojox.mobile.View" id="view0" 
data-dojo-props="selected:true"></div>

</body>
</html>

Algunas líneas de código importantes para revisar son las siguientes:

La primera línea le indica al browser del dispositivo que nuestra aplicación se debe de desplegar de manera completa y sin opción a modificar su tamaño.

<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-
scalable=no">

La siguiente línea de código le indica al browser del dispositivo esconder la barra de navegación (botón de atrás/adelante y cualquier botón de menú).

<meta name="apple-mobile-web-app-capable" content="yes">

Combinando las dos líneas de código anteriores, significa que nuestra aplicación se mostrará en toda la pantalla de nuestro dispositivo móvil. También se cargan las librerías de Dojo Mobile Framework que incluyen las clases necesarias para consutrir nuestra aplicación móvil.

Como podrán darse cuenta, hasta el momento RAD ha hecho todo el trabajo por nosotros, incluyendo de manera automática el código de nuestra vista principal y también las librerias necesarias para construir nuestra aplicación web móvil.


Creando la vista principal

Para crear la vista principal es necesario agregar los widgets que serán parte de nuestra aplicación web móvil, para lo cual tendremos que modificar el archivo index.html recién creado. Por default RAD nos agrega la vista principal con el id view0. Para tener un mejor control de los id's y dado que estaremos haciendo transiciones entre varias vistas, nombraremos este id home

<body><div data-dojo-type="dojox.mobile.View" id="home" data-dojo-
props="selected:true"></div>

En el panel de la derecha de nuestro editor, tenemos tres pestañas: Outline, Snippets y Palette. Hacer clic en la pestaña de Palette y dentro de las opciones seleccionar Dojo Mobile Widgets.

Figura 5.

Creando el encabezado de nuestra app móvil

Seleccionar el widget Heading y arrastrarlo hacia la columna superior izquierda en la vista de diseño. Un ícono nos indicará la colocación dentro de nuestra app. El objetivo es colocar éste widget dentro del div como lo muestra la siguiente figura.

Figura 6.

Para cambiar la etiqueta que RAD pone por default, podemos hacer doble clic en la vista de diseño en el texto Heading o bien, podemos ir directamente en código y cambiar la etiqueta en la propiedad label. Para nuestro ejemplo reemplazaremos la etiqueta por Workload Deployer Mobile.

Figura 7.

Creando la lista de acciones

El siguiente paso es diseñar botones en la vista de inicio de nuestra aplicación. La siguiente imagen muestra la consola de administración de IBM Workload Deployer y el objetivo es crear las opciones de éste menú en nuestra aplicación móvil.

Figura 8.

Para nuestro ejemplo, se utilizarán las opciones del menú Appliance

Figura 9.

Seleccionar el widget RoundRecList de la paleta Dojo Mobile Widgets, arrastarlo y soltarlo hasta nuestra vista de diseño, asegurándonos que lo insertamos despues de <h1>, como lo muestra la siguiente figura:

Figura 10.

Una vez agregado por default nos agrega la etiqueta item pero nosotros la vamos a reemplazar por la opción de nuestro menú Welcome

Figura 11.

Una a una se pueden ir creando las opciones del menú siguiendo el procedimiento anterior hasta tener la sigiuente imagen

Figura 12.

Crear la vista de la opción Appliance

Hasta el momento hemos creado las diferentes opciones de nuestro menú en la aplicación móvil. Ahora vamos a crear la vista de la opción Appliance

En la paleta Dojo Mobile Widgets elegir el widget View y arrastrarlo hasta nuestra aplicación, asegurándonos que se inserta despues del <div> de Appliance

Figura 13.

Nuevamente es necesario agregar las opciones del menú, siguiendo el procedimiento anteriormente descrito.

Y en la opción Users agregar el llamado a la función getUsers() en el evento onclick del botón

<div data-dojo-type="dojox.mobile.ListItem"
	 data-dojo-props="label:'Users',moveTo:'myUsers',transition:'slide'"
     onClick="getUsers()"></div>

El código de esta función y la vista myUsers, se verá más adelante. Por último guardar los cambios en el archivo index.html


Transiciones entre vistas

El siguiente paso es realizar la transición entre nuestras vistas, es decir conectar el botón Appliance de nuestra vista principal, con la vista que acabamos de crear.

En la vista de diseño, hacer clic en el botón Appliance y en las propiedades elegir la opcíon Mobile List y después List Items. En la columna Move to seleccionar la vista que acabamos de crear myAppliance y el efecto de transición en slide

Figura 14.

Una vez realizado este paso y después de guardar nuestro archivo, podemos observar que en la opción Appliance nos aparece una flecha, que nos indica que esa opción tiene una vista asociada.

Figura 15.

Probar la transición entre las vistas

Para probar lo que hemos estado agregando en RAD funcione de manera correcta (las transiciones de las vistas y los botones que agregamos) vamos a utilizar el simulador de dispositivos móviles.

En el archivo index.html presionar clic derecho, elegir la opción Run As y después en Run on Mobile Browser Simulator

Figura 16.

El simulador debe aparecer como lo muestra la siguiente figura:

Figura 17.
Figura 18.

Resumen

Hasta el momento se ha construido un proyecto del tipo Static Web Project, agregando Dojo Mobile Framework a las librerías del mismo y se crearon la vistas de nuestra aplicación web móvil utilizando las herramientas drag & drop de Rational Application Developer. Se configuró la transición entre las vistas Home hacia la vista Appliance. A continuación vamos a integrar nuestra aplicación web móvil para que consuma servicios REST que son expuestos por IBM Workload Deployer con peticiones AJAX utilizando la librería de Dojo: dojo.io.script.get


Integracion con IBM Workload Deployer

Nuesta aplicación esta lista para consumir los servicios expuestos por IBM Workload Deployer (en lo sucesivo IWD), haciendo peticiones AJAX a la API REST y obtener información de los usuarios. En nuestro ejemplo en particular y dado que la intención es mostrar nuestra apliación con datos reales, no se tomarán en cuenta consideraciones de seguridad ni tampoco modificar la configuración de IWD.

Para poder realizar las peticiones AJAX desde nuestra aplicación web móvil vamos a utilizar la libreria de dojo dojo.io.script.get que tiene la capacidad de hacer peticiones evitando la limitante cross-domain. Esta librería puede hacer solamente peticiones GET, no soporta otro tipos de peticiones HTTP como POST, PUT, y DELETE.

Cuando creamos la vista Appliance, agregamos el llamado a la función getUsers() en el evento onclick del botón Users, es momento de implementar la función:

function getUsers(){			

			var jsonpArgs = {				
				url: "https://wcb.cb.ibm.com:443/resources/users",
		            callbackParamName: "jsonpCallback",
		            header: {
		            	"Accept": "application/json",
		            	"Accept-Language": "en",
		            	"Content-Type":"application/json",
		            	"X-CloudBurst-API-Version":"1.0",
		            	"Authorization":"Basic b2VzY29iYXI6cGFzc3cwcmQ="	
		            },
		            error: function(error) {		                
		                alert('Error:'+error);
		            }
		        };
		        dojo.io.script.get(jsonpArgs);
		       		       		
	}

Propiedades soportadas del objeto

  • url: La dirección URL para solicitar los datos
  • callbackParamName: El nombre de la función donde recibiremos la respuesta
  • header: Parámetros necesarios que viajan en el encabezado de la petición para la API REST de IWD
  • error: Función para manejo de errores

La petición al servidor IWD se hace en la sigiente línea, pasando como parametro el objeto jsonArgs

		        dojo.io.script.get(jsonpArgs);

Parseando la respuesta

Como lo indicamos en el header de la petición, la respuesta la recibiremos en formato JSON y es necesario parsearla para mostrarla en nuestra aplicación móvil.

Una vez realizada la petición a IWD con los parámetros descritos anteriormente, obtenemos la siguiente respuesta:

[ { "currentstatus_text": "Inactive", "patterns": [ "/resources/patterns/1",
 "/resources/patterns/2", "/resources/patterns/4", "/resources/patterns/5" ],
 "groups": [ "/resources/groups/1" ], "username": "cbadmin", "virtualsystems": [ ],
 "fullname": "Administrator", "currentstatus": "RM01062", "id": 1, "email": "",
 "currentmessage_text": "Inactive for more than five minutes", "currentmessage": 
"RM02012" }, { "currentstatus_text": "Logged in and active", "patterns": 
[ "/resources/patterns/26", "/resources/patterns/27", "/resources/patterns/120",
 "/resources/patterns/125", "/resources/patterns/148", "/resources/patterns/149", 
"/resources/patterns/172", "/resources/patterns/173", "/resources/patterns/177", 
"/resources/patterns/182", "/resources/patterns/183" ], "groups": [ 
"/resources/groups/1" ], "username": "aguillen", "virtualsystems": [ 
"/resources/virtualsystems/511" ], "fullname": "Alberto Guillen", "currentstatus":
 "RM01061", "id": 2, "email": "", "currentmessage_text": "Active in the last five 
minutes", "currentmessage": "RM02011" }, { "currentstatus_text": "Inactive", 
"patterns": [ "/resources/patterns/106" ], "groups": [ "/resources/groups/1" ],
 "username": "troncoso", "virtualsystems": [ ], "fullname": "Miguel Troncoso", 
"currentstatus": "RM01062", "id": 80, "email": "", "currentmessage_text": "Inactive
for more than five minutes", "currentmessage": "RM02012" }, { "currentstatus_text": 
"Inactive", "patterns": [ ], "groups": [ "/resources/groups/1" ], "username":
 "vperalta", "virtualsystems": [ ], "fullname": "Vanessa Peralta", "currentstatus":
 "RM01062", "id": 112, "email": "", "currentmessage_text": "Inactive 
for more than five minutes", "currentmessage": "RM02012" }, { "currentstatus_text": 
"Inactive", "patterns": [ "/resources/patterns/181" ], "groups": 
[ "/resources/groups/1" ], "username": "oescobar", "virtualsystems": [ ], 
"fullname": "Oscar Escobar Rico", 
"currentstatus": "RM01062", "id": 137, "email": "", "currentmessage_text": 
"Inactive for more than five minutes", "currentmessage": "RM02012" } ];

Básicamente es un arreglo de objetos que tenemos que iterar para obtener las propiedades que queremos mostrar en nuestra aplicación. Para nuestro ejemplo vamos a implementar la función jsonpCallback para que muestre el nombre completo, por lo que la propiedad a utilizar será fullname.

function jsonpCallback(data){
	//Creacion de objetos temporales para manejo de usuarios		
	var usersTmp = {items: []};
	var myObject = {};
	//Iterando el arreglo para obtener la propiedad fullname
	for (var i=0; i< data.length; i++) {			
		myObject = {label:data[i].fullname, moveTo: "myUserDetail"};
		usersTmp.items.push(myObject);
}		
//Refrescando el contenido en el grid				
store = new dojo.data.ItemFileWriteStore({data: dojo.clone(usersTmp)});			
window.store = store;	
dijit.byId("listUsersIWD").setStore(store);
}

Construir la vista de usuarios

Lo último que falta en nuestra aplicación es construir la vista donde se mostrará la información obtenida de IWD. Siguiendo el mismo procedimiento que se utilizó para crear las vistas Home y Appliance, vamos a crear una nueva vista llamada Users y vamos a utilizar el widget RoundRectDataList (Dojo Mobile Widgets) que es el grid donde se mostrarán los usuarios. Es muy importante que el id de este widget sea listUsersIWD.

Figura 19.

Guardamos los cambios y ¡listo!


Probar la aplicación web móvil

Nuevamente vamos a iniciar nuestro servidor, en la pestaña de Servers, seleccionamos nuestro servidor Ajax Test Server y despues la opción Start

Figura 20.

Una vez iniciado nuestro servidor Ajax Test Server podemos verificar las tres vistas creadas de nuestra aplicación web móvil. Cuando presionemos el botón Users en la vista Appliance se hará una petición AJAX a IWD y se obtendrán los datos de los usuarios, mostrando los resultados en la vista Users.

Figura 21.

Conclusión

En este tutorial aprendimos a utilizar las capacidades de Rational Application Developer para construir una aplicación web móvil independiente de la plataforma del dispositivo móvil. Utilizando el Dojo Mobile Framework observamos que puede ayudar a acelerar el desarrollo y hacer la aplicación más amigable, utilizando widgets pre construidos en el framework. También ha visto como utilizar el Simulador de Navegación Móvil para obtener una imagen visual de como se vería su aplicación en un dispositivo físico real. Por último, realizando peticiones AJAX y consumiento servicios que son expuestos a través de una REST API mostramos datos reales de usuarios en nuestra aplicación móvil.


Referencias

Librería Dojo (dojo.io.script) en inglés
http://dojotoolkit.org/reference-guide/dojo/io/script.html

Librería Dojo (dojox.grid.DataGrid) en inglés
http://dojotoolkit.org/reference-guide/dojox/grid/DataGrid.html

Dojo Mobile Framework en inglés
http://dojotoolkit.org/features/mobile

Política 'Same origin' para JavaScript en inglés
https://developer.mozilla.org/En/Same_origin_policy_for_JavaScript

Manual de seguridad del Navegador en inglés
http://code.google.com/p/browsersec/wiki/Part2#Same-origin_policy

IBM Workload Deployer REST API Reference en inglés
http://publib.boulder.ibm.com/infocenter/worlodep/v3r0m0/topic/com.ibm.worlodep.doc/ra/rat_overview.html

IBM Workload Deployer REST API Users Reference en inglés
http://publib.boulder.ibm.com/infocenter/worlodep/v3r0m0/topic/com.ibm.worlodep.doc/ra/rar_users.html

Get started with Dojo Mobile 1.7 en inglés
http://www.ibm.com/developerworks/web/library/wa-getstarteddojo/

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=Rational
ArticleID=810952
ArticleTitle=Creación de una aplicación web móvil utilizando Rational Application Developer y Dojo Mobile Framework
publish-date=04202012