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.

Volver arriba

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.

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

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.

Volver arriba

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

Volver arriba

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.

<!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.

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.

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

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

Volver arriba

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.

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.

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.

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.

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.

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

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

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

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

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

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.

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

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.

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

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

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

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

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

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.

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.

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

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

Volver arriba

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

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.

<!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.

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

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.

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

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.

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.

Volver arriba

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
  
  
  
• 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
  
  
  
• 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.

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.

Volver arriba

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í.

Volver arriba

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.

Volver arriba

Descargar

Información sobre métodos de descarga

Recursos

Aprender

• Aprenda más sobre Dojo Toolkit.
  
  
• Lea sobre los dispositivos de Dojo Mobile.
  
  
• Acceda a la documentación oficial de dojox.mobile.
  
  
• Eche un vistazo a algunas Demostraciones de Dojo Toolkit.
  
  
• Visite el Dojo Mobile Showcase para encontrar una gran cantidad de widgets de muestra.
  
  
• Vea una serie de videos sobre Dojo Mobile de TNW: Desarrolladores: construyan aplicaciones móviles y web más rápido con Dojo Mobile.
  
  
• "Líneas de comentario: Volviéndose móviles con Dojo Toolkit" (developerWorks, marzo de 2011): Aprenda sobre el uso de Dojo Toolkit para apuntar a plataformas móviles.
  
  
• Lea la publicación en el blog de developerWorks Construyendo aplicaciones móviles con la infraestructura de Dojo.
  
  
• "Líneas de comentario: Aplicaciones móviles y la web" (developerWorks, marzo de 2011) discute el espacio de rápido crecimiento de la computación móvil y cómo puede aprovechar los estándares web emergentes para atender sus necesidades móviles empresariales.
  
  
• Introduciendo Dojo Toolkit es una introducción excelente a Dojo Toolkit.
  
  
• Introducción a Dojo toolkit, parte 1: Configuración, bases y widgets es otra buena introducción a Dojo toolkit.
  
  
• Dojo 1.5: Listo para potenciar sus aplicaciones web explora algunos de los nuevos dispositivos en Dojo 1.5.
  
  
• Introducción a Dojo Toolkit: Tutorial es un tutorial introductorio de Ajax Matters.
  
  
• "Internacionalizando aplicaciones Web usando Dojo" (developerWorks, agosto de 2008) discute una forma de realizar el soporte de lenguaje nativo en el contexto de web sites y aplicaciones web usando el dispositivo i18n de Dojo Toolkit.
  
  
• "Consumiendo servicios web con Dojo Toolkit" (developerWorks, septiembre de 2010) le muestra cómo consumir servicios usando Dojo Toolkit para habilitar Ajax en una página web.
  
  
• Dojo: Usando la Biblioteca JavaScript de Dojo para Construir Aplicaciones de Ajax, por James E. Harmon, es una guía completa y rica en ejemplos de desarrolladores para Dojo y su creciente biblioteca de widgets empaquetados previamente.
  
  
• Iniciándose con Dojo, por Kyle Hayes y Peter Higgins, le inicia con JavaScript y después con Dojo y su conjunto de herramientas para construir interfaces Web, efectos, Widgets y más.
  
  
• "Escribiendo una aplicación Dojo personalizada" (developerWorks, diciembre de 2008) proporciona mucha más información sobre Dojo.
  
  
• "Desarrollar widgets HTML con Dojo" (developerWorks, octubre de 2006) explora la extensibilidad de Dojo.
  
  
• "Usando Dojo Toolkit con WebSphere Portal" (developerWorks, noviembre de 2007) cubre cómo instalar, configurar, usar y aprovechar Dojo Toolkit en aplicaciones de WebSphere Portal.
  
  
• Use PhoneGap Guía de Iniciación.
  
  
• La zona de Desarrollo Web de developerWorks se especializa en artículos que cubren diversas soluciones basadas en web.
  
  

Obtener los productos y tecnologías

• Descargue Dojo Toolkit. La versión 1.6.1 fue utilizada en este artículo.
  
  
• Descargue WebSphere Application Server Feature Pack for Web 2.0 and Mobile V1.1.0.
  
  
• Descargue la versión más reciente de PhoneGap.
  
  
• Eche un vistazo a las Pruebas de Desarrollador para Dojo Mobile.
  
  
• Acceda a la Documentación de la API de Dojo Toolkit.
  
  
• IBM - muestra de Dojo Extension: El Conjunto de Dispositivos de Dojo Extension puede ser utilizado para habilitar un modelo de IBM WebSphere Portlet Factory para aprovechar la funcionalidad proporcionada por Dojo JavaScript Toolkit.
  
  
• Descargue las versiones de evaluación de productos IBM, y ponga sus manos en herramientas de desarrollo de aplicaciones y productos de middleware de DB2, Lotus, Rational, Tivoli y WebSphere.
  
  

Comentar

• Cree su perfil developerWorks hoy y configure una lista de observación en Dojo y el desarrollo de aplicaciones móviles. Conéctese y permanezca en contacto con la comunidad developerWorks.
  
  
• Encuentre a otros miembros developerWorks interesados en el desarrollo Web.
  
  
• Comparta lo que usted sabe: Únase a alguno de nuestros grupos developerWorks enfocados en temas Web.
  
  
• Roland Barcia habla en su blog sobre Web 2.0 y middleware.
  
  
• Follow developerWorks' members' shared bookmarks on web topics.
  
  
• Obtenga respuestas rápidamente: Visite el foro Web 2.0 Apps.
  
  
• Obtenga respuestas rápidamente: Visite el foro Ajax.
  
  

Sobre el autor

Joe 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.

Califique este artículo

Comentario

Volver arriba

Tabla de contenidos

• Introducción
• La web móvil contra las aplicaciones nativas
• Dojo Mobile de un vistazo
• Iniciándose con Dojo Mobile
• Widgets
• Implementación nativa con PhoneGap
• Nuevos dispositivos en Dojo Mobile 1.7
• Conclusión
• Agradecimientos
• Descargar
• Recursos
• Sobre el autor
• Comentarios