Iníciese con Dojo Mobile 1.6

Y eche un vistazo a los nuevos dispositivos que vienen en la versión 1.7

Aprenda sobre Dojo Mobile, la infraestructura de desarrollo web móvil que es una extensión de Dojo toolkit. Usando un ejemplo práctico, aprenda cómo incluir y usar widget y componentes de Dojo Mobile en sus aplicaciones. Verá cómo envolver su aplicación web en una aplicación nativa usando PhoneGap. Este artículo también ofrece una vista previa de algunos de los nuevos dispositivos en la siguiente versión de la infraestructura.

Joe Lennon, Lead Mobile Developer, Core International

Photo of Joe LennonJoe Lennon es desarrollador de software. Él tiene 24 años y es de Cork, Irlanda. Joe es el autor del libro Beginning CouchDB próximo a publicarse por Apress, y ha contribuido a varios artículos técnicos y tutoriales para IBM developerWorks. En su tiempo libre, a Joe le gusta jugar fútbol, juguetear con gadgets y trabajar en su puntaje de juego en su Xbox 360. Pueden contactarle mediante su sitio Web en www.joelennon.ie.


Nivel de autor contribuyente en developerWorks

15-08-2011

Introducción

El uso web móvil está creciendo exponencialmente. A medida que más personas se acostumbran a los teléfonos inteligentes u otros dispositivos móviles para navegar la web, surge una necesidad creciente de aplicaciones web y web sites optimizados para dispositivos móviles. Con el creciente número de plataformas (iOS, Android, Blackberry OS, webOS, Windows Phone, Symbian, Bada, etc.), es difícil desarrollar aplicaciones nativas dirigidas a más de un sistema operativo móvil.

Ha habido una oleada en la demanda de kits de herramientas para el desarrollo de aplicaciones web móviles. Algunas de las principales infraestructuras de JavaScript — Dojo, jQuery y Sencha — han sido rápidas para proporcionar infraestructuras conscientes del entorno. Al ser acopladas con kits de herramientas de compilación como PhoneGap, estas infraestructuras ofrecen una alternativa excelente para el desarrollo nativo. Los desarrolladores web pueden construir aplicaciones nativas usando los lenguajes e infraestructuras que ya conocen, y pueden implementar en numerosas plataformas con relativa facilidad.

En este artículo, aprenda sobre Dojo Mobile, que es una extensión de Dojo Toolkit. Después de explorar las diferencias entre la web móvil y las aplicaciones nativas, siga un ejemplo que le muestra cómo incluir y usar widgets de Dojo Mobile en sus aplicaciones. También aprenderá sobre la construcción de aplicaciones nativas con PhoneGap. Usted puede descargar el código de origen utilizado en este artículo.


La web móvil contra las aplicaciones nativas

El debate sobre desarrollar una aplicación web usando plataformas nativas o web seguramente continuará por un tiempo. Cada enfoque tiene ventajas y desventajas. En muchos casos, los requisitos de aplicaciones y las preferencias personales determinan el enfoque que debe elegir.

¿Cómo escribiría una aplicación nativa en lugar de usar la web móvil? La Tabla 1 señala algunas ventajas y desventajas de escribir aplicaciones nativas.

Tabla 1. Aplicaciones nativas
VentajasDesventajas
El código es más rápido y se ejecuta directamente en el sistema operativo del dispositivo sin la necesidad de una aplicación de navegador intermediaria.Apuntar a distintos dispositivos requiere versiones completamente separadas de la misma aplicación debido a las diferencias en los lenguajes de programación y APIs en los diversos SDKs de plataformas.
Pueden ser implementadas en una tienda de aplicaciones, ofreciendo un modelo de distribución simple y costeable.Implementar aplicaciones nativas mediante una tienda de aplicaciones normalmente requiere la aprobación de un tercero, lo que puede hacer considerablemente más lento el tiempo para llegar al mercado.
Los SDKs nativos tienen incontables dispositivos específicos para el dispositivo, normalmente completos con documentación detallada y ejemplos.Las actualizaciones, incluso las pequeñas incrementales, requieren pasar por un proceso de aprobación, haciendo más difícil entregar actualizaciones críticas a los usuarios.

Las ventajas y desventajas de las aplicaciones web móviles están señaladas en la Tabla 2.

Tabla 2. Aplicaciones web móviles
VentajasDesventajas
Escribir una aplicación para varias plataformas. No ser requieren aplicaciones separadas para distintos dispositivos.Las aplicaciones distribuidas en la web para ser consumidas por los navegadores no tienen acceso a muchas funciones de dispositivo que las aplicaciones nativas sí tienen (cámara, micrófono, etc.), aunque esto puede cambiar en el futuro.
Las aplicaciones pueden ser implementadas en la web sin una tienda de aplicaciones de terceros para su distribución.Necesita proporcionar la infraestructura para distribuir su aplicación, lo que puede ser más complicado y costoso que usar una tienda de aplicaciones.
Usted mantiene todos los ingresos generados por sus aplicaciones (si cobra por ellas).Las aplicaciones nunca se ejecutarán tan rápido como sus contrapartes nativas, ya que son representadas en un navegador en lugar de ser ejecutadas por el sistema operativo mismo.

Afortunadamente, existe un punto medio si desea tomar lo mejor de ambos enfoques: el de la web móvil y el de las aplicaciones nativas. Al usar una plataforma como PhoneGap, tomará su aplicación web móvil y la rodeará con un derivador nativo, proporcionando APIs JavaScript que le permiten acceder a las APIs de dispositivos nativos. También puede implementar su aplicación web como una aplicación nativa en las diversas tiendas de aplicaciones. Más detalles pueden ser encontrados en Implementación nativa con PhoneGap.


Dojo Mobile de un vistazo

Dojo Mobile, una extensión de Dojo Toolkit, proporciona una serie de widgets, o componentes, optimizados para su uso en un dispositivo móvil, como un teléfono inteligente o una pizarra digital. Los componentes son modelados en sus contrapartes nativas, y tendrán una apariencia nativa para aquellos que estén familiarizados con aplicaciones de teléfonos inteligentes. Los componentes son completamente personalizables utilizando temas que, por ejemplo, permiten obtener un conjunto de estilos para los usuarios de iOS y otro distinto para los usuarios de Android.

Dojo Mobile funciona de forma similar a la biblioteca de componentes Dijit. Para usar un tipo de widget particular en su aplicación, primero cargue la clase relevante utilizando dojo.require en el bloque JavaScript principal de su aplicación. Usted podrá entonces añadir el widget a su aplicación, ya sea en forma declarativa usando etiquetas HTML regulares con el atributo dojoType o en forma programática utilizando código JavaScript.

Como se podría esperar, Dojo Mobile funciona perfectamente en dispositivos de iOS y Android, principalmente debido a los navegadores WebKit disponibles en estas plataformas. Esta ventaja también se extiende a otras plataformas que ofrecen un navegador WebKit decente, como BlackBerry OS 6, HP webOS y otras. Las aplicaciones Dojo Mobile se degradan correctamente en navegadores que no sean de WebKit, e incluso pueden ejecutarse en navegadores de escritorio más antiguos (incluyendo Microsoft Internet Explorer). En forma predeterminada, sólo se incluye el estilo CSS3, pero puede añadirse un módulo de compatibilidad para navegadores que no sean de WebKit usando una sola línea de código:

dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");

Algunos de los dispositivos clave de Dojo Mobile son:

  • Carga ligera de widgets debido al analizador de Dojo Mobile.
  • Animaciones CSS3 y transiciones para una experiencia de aplicaciones similar a las nativas en dispositivos de iOS y Android de gama alta.
  • Temas incluidos para apariencias de iOS y Android.
  • Compatibilidad con dispositivos y navegadores que no son compatibles con CSS3.
  • La sintaxis declarativa completa permite una fácil curva de aprendizaje.
  • Una gran suite de widgets, que serán aún más en el próximo Dojo Mobile 1.7.

La siguiente sección explica cómo iniciarse con Dojo Mobile al construir una aplicación "Hello, World".


Iniciándose con Dojo Mobile

Levantarse y correr con el desarrollo de Dojo Mobile es muy sencillo. Ni siquiera necesita descargar nada; puede cargar todo lo que necesita de manera remota usando Content Delivery Network (CDN) de Google. La estructura básica de una aplicación de Dojo es descrita en el Listado 1.

Listado 1. Estructura básica de un documento HTML de Dojo Mobile
<!doctype html>
<html>
    <head>
        <meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,
user-scalable=no">
        <meta name="apple-mobie-web-app-capable" content="yes">
        <title>My Dojo Mobile App</title>
        <link rel="stylesheet"  
href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/themes
/iphone/iphone.css">
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" 
djConfig="parseOnLoad: true"></script>
        <script>
            dojo.require("dojox.mobile.parser");
            dojo.require("dojox.mobile");
            dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");
        </script>
    </head>
    <body>
        <!-- Dojo Widgets Go Here -->
    </body>
</html>

Si salva el código del Listado 1 en un archivo y abre ese archivo en su navegador web, deberá ver un fondo gris sin contenido. Esto difícilmente es útil, así que sigamos avanzando y vamos añadir algo de contenido a la aplicación. El ejemplo en este artículo usa clases de Dojo Mobile no estándar, por lo que necesita cargarlas manualmente usando dojo.require. Después de la línea dojo.require("dojox.mobile");, añada las líneas mostradas en el Listado 2.

Listado 2. Cargando las clases de Dojo Mobile manualmente
dojo.require("dojox.mobile.ScrollableView");
dojo.require("dojox.mobile.FlippableView");
dojo.require("dojox.mobile.IconContainer");

Ahora puede añadir el código principal para la aplicación "Hello, World". Los ejemplos en este artículo usan la sintaxis declarativa para Dojo Mobile, lo que significa usar etiquetas HTML regulares con atributos de Dojo Mobile especiales que serán analizados en el tiempo de ejecución. En la sección <body> de su código, añada el código del Listado 3.

Listado 3. Usando widgets de Dojo Mobile
<div dojoType="dojox.mobile.ScrollableView" selected="true">
    <h1 dojoType="dojox.mobile.Heading" fixed="top">Hello, World!</h1>
    <h2 dojoType="dojox.mobile.RoundRectCategory">First Section</h2>
    <div dojoType="dojox.mobile.RoundRect">
        This is a nice standard rounded rectangular label.
    </div>
    <h2 dojoType="dojox.mobile.RoundRectCategory">Second Section</h2>
    <ul dojoType="dojox.mobile.RoundRectList">
        <li dojoType="dojox.mobile.ListItem">List Item 1</li>
        <li dojoType="dojox.mobile.ListItem">List Item 2</li>
        <li dojoType="dojox.mobile.ListItem">List Item 3</li>
        <li dojoType="dojox.mobile.ListItem">List Item 4</li>
        <li dojoType="dojox.mobile.ListItem">List Item 5</li>
    </ul>
</div>

El Listado 2 definió una ScrollableView que comprenderá la interfaz de aplicación principal. La diferencia entre una clase View estándar y la clase ScrollableView es que la View estándar usará cromo de navegador estándar para desplazarse en la página. La clase ScrollableView tiene su propio mecanismo de desplazamiento, lo que le permite incluir una cabecera y un pie de página en su aplicación, y desplazarse en el contenido entre ellos, tal como lo esperaría en una aplicación nativa.

Dentro de ScrollableView existe Heading, que es la barra de título que contiene el texto "Hello, World". Al establecer el atributo fixed="top" en este objeto, Dojo Mobile mantendrá la cabecera en su lugar en la parte superior de la pantalla y desplazará el resto del contenido debajo de ella. El objeto RoundRectCategory define una cabecera de grupo para una lista de rotación o un elemento único. La primera de estas categorías es seguida de un solo recuadro RoundRect con algo de texto estático en él. Esto es seguido por otra cabecera de categoría y un objeto RoundRectList, que a su vez contiene una serie de objetos ListItem. El resultado final debe verse como en la Figura 1.

Figura 1. Aplicación Hello, World
Aplicación Hello, World

La siguiente sección explora los diversos widgets y componentes disponibles en Dojo Mobile.


Widgets

Dojo Mobile viene con una amplia variedad de widgets que están específicamente diseñados y optimizados par dispositivos móviles, tales como teléfonos inteligentes y pizarras digitales. Los widgets van desde componentes de diseño (vistas) a listas, barras de navegación, barras de pestañas, botones y widgets de formulario. Esta sección muestra muchos de los widgets en acción, e incluye ejemplos de código básico. Las figuras de pantallas en esta sección fueron tomadas en un dispositivo de iOS usando el tema iPhone; serán distintas si está usando el tema Android.

View

View es un widget contenedor que toma todo el espacio disponible en la pantalla del dispositivo. Las páginas de su aplicación pueden contener más de un objeto View, pero sólo uno de estos estará activo en cualquier momento dado. El usuario puede navegar normalmente entre distintas vistas usando los botones de la barra de herramientas y los botones de la barra de pestañas, con distintas transiciones disponibles para moverse entre cada vista. La Figura 2 muestra un ejemplo de un objeto vacío View.

Figura 2. Un objeto View vacío
Un objeto View vacío

Para crear un objeto View, use la clase dojox.mobile.View que está incluida en el SDK básico de Dojo. No necesita ser explícitamente cargado usando dojo.require. Cuando se usa un objeto View usted usa el atributo seleccionado para definir si la vista debe mostrarse cuando la aplicación es lanzada (la vista de inicio). El siguiente código es necesario para crear el View anterior de forma declarativa.

<div dojoType="dojox.mobile.View" selected="true"></div>

Alternativamente, puede crear el View en forma programática usando JavaScript. El Listado 4 muestra el código para crear el View en la Figura 2 usando este método.

Listado 4. Creando el View
var myView = new dojox.mobile.View({
    selected: true
}, "myView");
myView.startup();

El Listado 4 asume que tiene un elemento de bloqueo en algún lugar de su HTML con el valor de atributo de id de myView. Entonces enlaza un objeto View a este elemento en el DOM.

El resto de las descripciones de widget incluyen cómo usarlas sólo de forma declarativa. Consulte la API de Dojo para obtener más información sobre cómo usar widgets de Dojo Mobile con la sintaxis programática.

ScrollableView

El widget ScrollableView funciona de manera similar al widget View: actúa como un contenedor en el que puede colocar otros widgets. La principal diferencia es que con ScrollableView, si su contenido desborda la altura de la pantalla, el usuario puede desplazar el contenido al tocar la pantalla y mover su dedo hacia arriba o abajo (o izquierda o derecha si está usando desplazamiento horizontal), mientras se mantiene cualquier objeto de cabecera o pie de página en su lugar. Si estuviera usando un objeto View estándar, toda la pantalla se desplazaría, por lo que la cabecera y el pie de página no se quedarían en una posición fija. La Figura 3 muestra un ejemplo.

Figura 3. Un objeto ScrollableView vacío
Un objeto ScrollableView vacío

Crear el objeto ScrollableView vacío anterior es muy similar a como creó el objeto View vacío en la Figura 2. El código para el ScrollableView vacío es:

<div dojoType="dojox.mobile.ScrollableView" selected="true"></div>

Se recomienda que use ScrollableView sólo si pretende añadir una cabecera o pie de página fijos en su vista. De otra manera, debería usar la clase View regular.

A diferencia de la clase View regular, ScrollableView no está incluido en las clases básicas, por lo que necesita ser cargado explícitamente usando dojo.require.

FlippableView

El widget FlippableView, que será cambiado a SwapView en la versión 1.7, le permite crear un objeto contenedor que puede ser intercambiado con otros objetos FlippableView al deslizar la pantalla a la izquierda o derecha. El orden de las vistas dependerá del orden en que hayan sido colocadas en el código. La Figura 4 muestra un widget FlippableView.

Figura 4. Widget FlippableView
Widget FlippableView

Si desea crear un FlippableView de muestra con dos vistas, puede usar el código en el Listado 5. Si está utilizando Dojo 1.7, cambie las referencias de FlippableView a SwapView.

Listado 5. Creando un FlippablView con dos vistas
<div dojoType="dojox.mobile.FlippableView" selected="true">View 1</div>
<div dojoType="dojox.mobile.FlippableView">View 2</div>

FlippableView no está incluido en las clases básicas, por lo que necesita ser cargado manualmente usando dojo.require.

Heading

El widget Heading le permite crear una barra de navegación que aparecerá en la parte más alta de su aplicación. Heading normalmente tiene un título. También puede añadir elementos de navegación a ellos, tales como botones de retroceso o botones de barra de herramientas, para proporcionar medios sencillos de navegación alrededor de su aplicación.

Si usa un Heading junto con un contenedor ScrollableView, el widget Heading permanecerá fijo en la parte superior de la aplicación mientras el resto de la aplicación se desplazará. Puede mantener su navegación disponible para los usuarios en todo momento. La Figura 5 muestra un ejemplo de un objeto Heading completo con un título, un botón Back y un botón de barra de navegación.

Figura 5. Widget Heading de muestra
Widget Heading de muestra

El código para crear el widget Heading en la Figura 5 es mostrado en el Listado 6.

Listado 6. Creando el widget Heading
<h1 dojoType="dojox.mobile.Heading" label="My App" back="Back"   
  moveTo="back">
    <div dojoType="dojox.mobile.ToolBarButton" label="Edit"
      class="mblColorBlue" style="width:25px;float:right">
    </div>
</h1>

Tal vez ya notó que el botón Back de hecho está definido en el elemento Heading mismo. El atributo back define el texto que debe ser mostrado en el botón. El atributo moveTo debe contener el ID del objeto View que debe volverse activo cuando el usuario pulsa el botón Back. Usted también podría usar un atributo de transición para definir el efecto de transición que debe ser usado al navegar hacia otra vista en esta manera. El determinado es deslizar, pero otras opciones incluyen desvanecer, voltear y ninguna.

Usted puede definir botones de navegación adicionales usando widgets ToolBarButton. Si quisiera un botón que no tiene estilo como un botón Back a la izquierda, o si quisiera mostrar un botón a la derecha, simplemente añada un objeto ToolBarButton dentro del elemento Heading.

RoundRect

La clase RoundRect le permite crear un contenedor de esquinas redondeadas simple en el que puede colocar HTML estático u otros widgets de Dojo Mobile. Un ejemplo del widget RoundRect es mostrado en la Figura 6.

Figura 6. Usando el contenedor RoundRect
Usando el contenedor RoundRect

Para crear el objeto RoundRect en la Figura 6, puede usar la sintaxis mostrada en el Listado 7.

Listado 7. Creando el objeto RoundRect
<div dojoType="dojox.mobile.RoundRect" shadow="true">
    Este es un objeto RoundRect simple con algún contenido en él.
</div>

La clase RoundRect es muy sencilla. Acepta una sola propiedad, shadow, que está definida como false de forma predeterminada. Esta propiedad simplemente define si el contenedor debe tener una sombra.

RoundRectCategory y RoundRectList

Cuando se presentan datos en un dispositivo móvil, las listas son muy importantes. Las estructuras tabulares verticales le permiten presentar una serie de elementos de lista distintos. Los elementos pueden ser usados para mostrar información, para propósitos de navegación o para muchos otros usos. Dojo Mobile le permite crear dos tipos de listas, y ambas tienen un widget de categoría asociado. El objeto RoundRectList crea una lista que tiene un espacio en cualquiera de sus lados, con esquinas redondeadas en el primer y último elemento de lista. La Figura 7 muestra un RoundRectCategory y un RoundRectList como se ven en un iPhone.

Figura 7. RoundRectList
RoundRectList

El ejemplo definió un objeto RoundRectCategory con la etiqueta "List Heading", y un objeto RoundRectList con tres objetos ListItem dentro de él. El Listado 8 muestra el código necesario para crear este conjunto de widgets.

Listado 8. Crear los widgets RoundRectCategory y RoundRectList
<h2 dojoType="dojox.mobile.RoundRectCategory">List Heading</h2>
<ul dojoType="dojox.mobile.RoundRectList">
    <li dojoType="dojox.mobile.ListItem">List Item 1</li>
    <li dojoType="dojox.mobile.ListItem">List Item 2</li>
    <li dojoType="dojox.mobile.ListItem">List Item 3</li>
</ul>

EdgeToEdgeCategory y EdgeToEdgeList

EdgeToEdgeList es un hermano cercano de RoundRectList. EdgeToEdgeList Puede ser utilizado virtualmente de la misma manera, pero en su lugar crea listas que ejecutan toda la anchura de la vista. La Figura 8 muestra un ejemplo.

Figura 8. EdgeToEdgeList
EdgeToEdgeList

El código para EdgeToEdgeList es casi idéntico al ejemplo previo, excepto que las referencias a RoundRect son reemplazadas con EdgeToEdge, como se muestra en el Listado 9.

Listado 9. Creando el widget EdgeToEdge
<h2 dojoType="dojox.mobile.EdgeToEdgeCategory">List Heading</h2>
<ul dojoType="dojox.mobile.EdgeToEdgeList">
    <li dojoType="dojox.mobile.ListItem">List Item 1</li>
    <li dojoType="dojox.mobile.ListItem">List Item 2</li>
    <li dojoType="dojox.mobile.ListItem">List Item 3</li>
</ul>

Las listas anteriores son normalmente usadas cuando se muestran listas de personas, y las personas generalmente serán agrupadas por la primera letra de su apellido.

IconContainer

El widget IconContainer le permite definir una serie de iconos, cada uno de los cuales abre un contenedor separado cuando son pulsados. IconItem puede deslizar hacia afuera un contenedor que está anidado dentro del objeto IconItem mismo (en la misma vista), o puede mover el View activo al que tiene un ID dado. La Figura 9 muestra un IconContainer con tres iconos.

Figura 9. Muestra de IconContainer
Muestra de IconContainer

Para crear el IconContainer anterior, use el código mostrado en el Listado 10.

Listado 10. Creando el widget IconContainer
<ul dojoType="dojox.mobile.IconContainer">
    <li dojoType="dojox.mobile.IconItem" label="Icon 1" 
      icon="appicon.png" moveTo="view1"></li>
    <li dojoType="dojox.mobile.IconItem" label="Icon 2" 
      icon="appicon.png" moveTo="view2"></li>
    <li dojoType="dojox.mobile.IconItem" label="Icon 3"     
      icon="appicon.png" moveTo="view3"></li>
</ul>

La clase IconContainer misma no está incluida en _base.js, por lo que debe cargarla explícitamente con dojo.require. Esto mismo no aplica para IconItem, así que no intente cargarlo manualmente u obtendrá errores cuando intente ejecutar su aplicación.

Hay muchos más detalles para estos widgets particulares, pero están fuera del ámbito de este artículo. Vea Recursos para obtener enlaces a una cobertura más extensa en Dojo Mobile Showcase y API.

Button

La clase Button le permite crear un objeto button simple. Usted puede entonces crear código para manejar eventos cates como "click" en este widget usando dojo.connect. La Figura 10 muestra un ejemplo de un Button.

Figura 10. Widget Button
Widget Button

El código para crear este botón es tan sencillo como el botón mismo, como se muestra en el Listado 11.

Listado 11. Creando el widget Button
<button dojoType="dojox.mobile.Button" btnClass="mblBlueButton" 
style="width: 100px">Click me!</button>

Puede hacer nuevos estilos de botón de su propia creación usando CSS y asignando un nombre de clase al botón usando el atributo btnClass.

Switch

El objeto Switch es un control conmutador que le permite conmutar el valor del objeto entre dos propiedades. De forma predeterminada, estos valores son ON u OFF. Para cambiar el valor del conmutador, pulse el valor que desea conmutar o deslice el conmutador hacia el valor objetivo. La Figura 11 muestra un ejemplo un widget Switch con dos conmutadores: uno en la posición OFF y otro en la posición ON.

Figura 11. Ejemplo de Switch
Ejemplo de Switch

El código siguiente crea un objeto Switch.

<div dojoType="dojox.mobile.Switch" value="off"></div>

El widget Switch acepta dos propiedades adicionales, leftLabel y rightLabel, que le permiten definir los valores que deben mostrarse en los estados ON y OFF, respectivamente. Las etiquetas son ON y OFF de forma predeterminada. Cuando el valor de Switch ha sido cambiado, el evento onStateChanged será iniciado. Puede enlazarse a este evento usando dojo.connect.

TabBar

El widget TabBar es utilizado para intercambiar objetos View dentro y fuera en su aplicación al hacer las vistas activas o inactivas cuando un TabBarButton es pulsado. Un widget TabBar puede usar un atributo iconBase para definir un sprite de imagen, permitiendo que distintos iconos sean mostrados en cada TabBarButton. Esto funciona bien cuando se usa un TabBar como un componente de navegación al fondo de su aplicación, como se muestra en la Figura 12.

Figura 12. TabBar con iconos
TabBar con iconos

O puede usar el componente TabBar y un atributo barType de segmentedControl. Crea una barra de pestañas que normalmente funciona mejor cuando es colocada cerca de la parte superior de la aplicación, debajo del widget Heading principal. La Figura 13 muestra un ejemplo de este tipo de TabBar en acción.

Figura 13. TabBar con barType de segmentedControl
TabBar con barType de segmentedControl

El código para crear el TabBar en la Figura 13 es mostrado en el Listado 12.

Listado 12. Creando el widget TabBar
<ul dojoType="dojox.mobile.TabBar" barType="segmentedControl">
    <li dojoType="dojox.mobile.TabBarButton" moveTo="view1" 
      selected="true">Albums</li>
    <li dojoType="dojox.mobile.TabBarButton" 
      moveTo="view2">Events</li>
</ul>

La clase TabBarButton tiene una variedad de opciones de configuración que le permiten personalizar la apariencia de sus botones. Usted puede especificar la posición de los iconos, qué iconos deben ser utilizados, las transiciones a usar cuando se cambian las vistas, las funciones de devolución de llamada a ser iniciadas cuando la transición se ha completado, y mucho más. Vea Dojo API para obtener más información.


Implementación nativa con PhoneGap

Implementar aplicaciones en la web móvil es cada vez más popular. A medida que los navegadores móviles mejoran y HTML5 evoluciona, la web móvil se está volviendo una opción de distribución más fuerte para aplicaciones móviles. Sin embargo, existen muchos casos donde usted deseará implementar su aplicación de forma nativa para las tiendas de aplicaciones de plataformas relevantes. Más que desarrollar muchas aplicaciones distintas usando el SDK nativo de cada plataforma, puede envolver su aplicación web móvil en un paquete nativo usando PhoneGap.

PhoneGap es un proyecto de código abierto que es gratuito para usarse en cualquier aplicación, ya sea distribuida con una licencia gratuita, comercial, de código abierto o híbrida. PhoneGap mismo es distribuido es distribuido bajo las licencias de código abierto de MIT y BSD. Usted puede elegir aquello que se ajuste mejor a su situación.

PhoneGap incluye SDKs para construir aplicaciones nativas para seis plataformas: iOS, Android, Blackberry, webOS, Windows Mobile y Symbian. Las instrucciones para iniciarse con PhoneGap varían de plataforma en plataforma. Esta sección muestra lo fácil que es implementar en iOS. Vea Recursos para saber cómo usar otra plataforma.

Vamos a crear una aplicación realmente básica de Dojo que se ejecute de forma nativa en un dispositivo de iOS usando PhoneGap. Par construir aplicaciones nativas de iOS necesita una Mac con OS X 10.6 Snow Leopard y Xcode. Puede descargar Xcode desde el Developer Center de Apple o desde Mac App Store. Asegúrese de descargar el SDK de iOS o no podrá construir aplicaciones de iOS.

Asumiendo que tiene Xcode y el SDK de iOS instalados:

  1. Descargue la versión más reciente de PhoneGap, que es distribuida como un archivo zip.
  2. Extraiga y abra el directorio de iOS dentro del archivo. Deberá ver un solo paquete nombrado PhoneGapLibInstaller.pkg.
  3. Ejecute PhoneGapLibInstaller.pkg para instalar PhoneGap en Xcode.
  4. Cuando el instalador ha finalizado, inicie Xcode y cree un nuevo proyecto.
  5. Desde los grupos de tipo de proyecto a la izquierda, seleccione PhoneGap en el grupo User Templates, como se muestra en la Figura 14, después seleccione PhoneGap-based Application a la derecha.
  6. Haga clic en Choose, y dé un nombre a su proyecto (el ejemplo es llamado "HelloNative").
Figura 14. Creando un proyecto de PhoneGap en Xcode
Creando un proyecto de PhoneGap en Xcode

En la sección Groups & Files de Xcode, normalmente al lado izquierdo de la ventana, expanda la carpeta "www" y abra el archivo index.html. El código en este archivo debe verse más o menos como el código en el Listado 13.

Listado 13. Archivo index.html predeterminado de PhoneGap iOS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <!-- Change this if you want to allow scaling -->
    <meta name="viewport" content="width=default-width; user-scalable=no" />

    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

    <title>HelloNative</title>
    
    <!-- iPad/iPhone specific css below, add after your main css >
    <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" 
href="ipad.css" type="text/css" />        
    <link rel="stylesheet" media="only screen and (max-device-width: 480px)" 
href="iphone.css" type="text/css" />        
    -->
    <!-- If you application is targeting iOS BEFORE 4.0 you MUST put json2.js 
from http://www.JSON.org/json2.js into your www directory and include it here -->
    <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
    <script type="text/javascript" charset="utf-8">


    // If you want to prevent dragging, uncomment this section
    /*
    function preventBehavior(e) 
    { 
      e.preventDefault(); 
    };
    document.addEventListener("touchmove", preventBehavior, false);
    */
    
    function onBodyLoad()
    {
        document.addEventListener("deviceready",onDeviceReady,false);
    }
    
  /* When this function is called, PhoneGap has been initialized and is ready to roll */
    function onDeviceReady()
    {
        // do your thing!
    }
    
    </script>
  </head>
  <body onload="onBodyLoad()">
      
  </body>
</html>

En este punto, en esta aplicación nativa va a construir las mismas funciones que proporcionó la aplicación "Hello, World". El primer paso es incluir de hecho a Dojo mismo. Encuentre la siguiente línea en index.html:

<script type="text/javascript" charset="utf-8"  src="phonegap.js"></script>

Debajo de esta línea, añada las líneas del Listado 14.

Listado 14. Incluyendo Dojo
<link rel="stylesheet"
 href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/themes
 /iphone/iphone.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" 
djConfig="parseOnLoad: true"></script>

El código en el Listado 14 carga los archivos de CSS y JavaScript de Dojo desde el CDN de Google. Por supuesto, en la aplicación real usted debería incluir una copia local de Dojo si está implementando aplicaciones web móviles de forma nativa usando PhoneGap. De otra manera, si el usuario está offline, no podrá usar su aplicación. Su aplicación también se ejecutará mucho más rápido si Dojo está disponible localmente en el dispositivo.

Encuentre la función JavaScript onDeviceReady, y debajo del comentario "do your thing!" añada el código en el Listado 15.

Listado 15. Cargando el analizador de Dojo Mobile
dojo.require("dojox.mobile.parser");
dojo.require("dojox.mobile");
dojo.require("dojox.mobile.ScrollableView");

El código en el Listado 15 carga el analizador de Dojo Mobile y la clase básica, así como el widget ScrollableView contenedor. No necesita la capa de compatibilidad en este caso, ya que el dispositivo objetivo es de iOS, que definitivamente usa WebKit. La última parte de código que necesita añadir son los widgets mismos. Añada el código en el Listado 16 entre los elementos <body> de apertura y cierre en index.html.

Listado 16. Añadiendo los widgets
<div dojoType="dojox.mobile.ScrollableView" selected="true">
    <h1 dojoType="dojox.mobile.Heading" fixed="top">Hello, World!</h1>
    <h2 dojoType="dojox.mobile.RoundRectCategory">First Section</h2>
    <div dojoType="dojox.mobile.RoundRect">
        This is a nice standard rounded rectangular label.
    </div>
    <h2 dojoType="dojox.mobile.RoundRectCategory">Second Section</h2>
    <ul dojoType="dojox.mobile.RoundRectList">
        <li dojoType="dojox.mobile.ListItem">List Item 1</li>
        <li dojoType="dojox.mobile.ListItem">List Item 2</li>
        <li dojoType="dojox.mobile.ListItem">List Item 3</li>
        <li dojoType="dojox.mobile.ListItem">List Item 4</li>
        <li dojoType="dojox.mobile.ListItem">List Item 5</li>
    </ul>
</div>

Salve el archivo index.html (File -> Save), y asegúrese de que la opción de barra de herramientas Overview en la parte superior izquierda de Xcode esté establecida para un objetivo Simulator. Usted puede ahora lanzar la aplicación usando Build y Run (Build -> Build and Run). Xcode hará lo suyo por un momento antes de lanzar la aplicación iOS Simulator. Después de unos momentos, su primera aplicación nativa de Dojo debe iniciarse. Tal vez note la falta de una barra de herramienta de Safari al fondo de la pantalla, y que su aplicación está tomando toda la pantalla del dispositivo, como se muestra en la Figura 15.

Figura 15. Aplicación nativa de Dojo Hello World
Aplicación nativa de Dojo Hello World

Si sale de la aplicación seleccionando Home en el iPhone simulado, su aplicación está sobre la pantalla de inicio del dispositivo, con el icono de aplicación de PhoneGap predeterminado y el nombre HelloNative, como se muestra en la Figura 16.

Figura 16. Icono de aplicación nativa en la pantalla de inicio de iPhone
Icono de aplicación nativa en la pantalla de inicio de iPhone

Si abre otra aplicación (como Safari o Contacts) en el simulador, y hace doble clic en el botón Home , se abrirá el menú de multi-tareas de iOS. Una vez más, verá el icono de su aplicación mostrado, permitiéndole saltar rápida y fácilmente entre otras aplicaciones y la suya.

El propósito de implementar en otras plataformas es normalmente tan simple como se señala aquí, aunque pueden existir algunos ajustes necesarios para que su aplicación funcione en Android. Toda la información que necesita está disponible en el web site de PhoneGap.


Nuevos dispositivos en Dojo Mobile 1.7

Existe una serie de mejoras planificadas para Dojo Mobile versión 1.7, que deberán estar disponibles en un futuro cercano. Las mejoras incluyen:

  • Un nuevo módulo, dojox.mobile.deviceTheme, que automáticamente detecta el dispositivo móvil que se está utilizando y carga el tema de Dojo Mobile apropiado como corresponde.
  • Un nuevo tema específicamente diseñado para dispositivos Blackberry.
  • Un nuevo widget, Carousel, que le permite mostrar una serie de imágenes desplazables. Los controles de navegación en la cabecera proporcionan un medio alternativo para recorrer los grupos de imágenes. La Figura 17 muestra un ejemplo de un carrusel.
    Figura 17. Widget Carousel
    Widget Carousel
  • Un nuevo widget, SpinWheel, que imita el componente de IU giratorio emergente normalmente encontrado en una aplicación nativa de iPhone. Un ejemplo es mostrado en la Figura 18.
    Figura 18. Widget SpinWheel/DatePicker en acción
    Widget SpinWheel/DatePicker en acción
  • Distintos sabores del componente SpinWheel , incluyendo un SpinWheelDatePicker, SpinWheelTimePicker y uno que puede configurar usted mismo usando objetos SpinWheelSlot.
  • Versiones impulsadas por datos de los widgets RoundRectList y EdgeToEdgeList, nombrados RoundRectDataList y EdgeToEdgeDataList.
  • Soporte mejorado para transiciones y animaciones CSS3.
  • La clase Button ha sido eliminada de la infraestructura móvil básica y necesitará ser cargada explícitamente usando dojo.require("dojox.mobile.Button");
  • El widget FlippableView ha sido renombrado como SwapView.

WebSphere Application Server Feature Pack for Web 2.0 and Mobile V1.1.0

El WebSphere Application Server Feature Pack for Web 2.0 and Mobile V1.1.0 incluye IBM Dojo 1.7 Toolkit, que tiene todos los dispositivos de Dojo 1.6 mencionados en este artículo, así como muchos más dispositivos disponibles sólo en IBM Dojo 1.7 Toolkit. El Paquete de Dispositivos también proporciona nuevos bloques de construcción móviles y de aplicaciones de Internet enriquecidas (RIA) y un componente de diagrama basado en Dojo. Junto con herramientas de Rational, este Paquete de Dispositivos facilitará en gran medida la creación de aplicaciones web y móviles enriquecidas. Será sencillo para aplicaciones de WebSphere desarrolladas originalmente para navegadores de escritorio para que sea fácilmente adaptado e implementado en dispositivos móviles.

También existen algunos proyectos separados y relacionados con Dojo que pueden usarse en aplicaciones dojox.mobile en la versión más reciente:

  • Formularios de datos enlazados, completos con generación automática de formulario utilizando modelos de JSON.
  • Un widget OpenLayers Map para complementar el widget Google Maps de la versión anterior.
  • Una serie de gráficas e indicadores compatibles con dispositivos móviles que no requieren plug-ins de navegador.
  • Una capa de eventos táctiles mejorada, permitiendo una capacidad de respuesta más precisa al tacto del usuario.

Más cercano al release de Dojo Mobile 1.7, seguramente habrá un anuncio oficial con detalles sobre todos los nuevos dispositivos y cambios que puede esperar.


Conclusión

Las aplicaciones se están convirtiendo rápidamente en una alternativa razonable y poderosa para el desarrollo de aplicaciones móviles. En este artículo, aprendió cómo las infraestructuras móviles HTML5 tales como Dojo Mobile pueden añadir valor al proceso, abstrayendo la tediosa labor de diseñar componentes y widgets de IU específicamente para dispositivos móviles. Dojo Mobile incluso proporciona distintos temas para distintos tipos de dispositivos.

Después de que haya construido su aplicación web móvil, puede entonces aprovechar los fantásticos SDKs de PhoneGap para implementar su aplicación de forma nativa en varias plataformas objetivo. Puede incluso aprovechar las funciones nativas del dispositivo, tales como la cámara y el micrófono. El futuro de la web móvil no sólo es brillante — ya está aquí.


Agradecimientos

Gracias a Christopher Mitchell, Lizet Ernand, Todd Kaplinger y Yoshiroh Kamiyama del equipo de IBM WebSphere Application Server Feature Pack for Web 2.0 and Mobile V1.1.0 por su revisión y contribuciones a este artículo.


Descargar

DescripciónNombretamaño
Article source codedojomobile.source.zip3KB

Recursos

Aprender

Obtener los productos y tecnologías

Comentar

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=WebSphere
ArticleID=751595
ArticleTitle=Iníciese con Dojo Mobile 1.6
publish-date=08152011