Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Mobile Web Apps

Usar jQuery Mobile para una aplicación nativa Android de Noticias

by
Difficulty:AdvancedLength:LongLanguages:
This post is part of a series called Use jQuery Mobile to Build a Native Android News Reader App.
Use jQuery Mobile to Build a Native Android News Reader App: Part 2

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

En esta serie de tutoriales de tres partes, nuestro objetivo principal es describir cómo jQuery Mobile se puede utilizar para desarrollar una aplicación nativa de Android. Primero, desarrollaremos una aplicación web de muestra independiente que buscará artículos de Yahoo! Noticias usando jQuery Mobile. Luego, convertiremos esa aplicación web en una aplicación nativa de Android con un mínimo esfuerzo.

El proyecto jQuery Mobile es un marco web móvil con su versión alpha 2 lanzada en noviembre de 2010. El marco se puede usar para desarrollar aplicaciones web móviles multiplataforma para SO Android, iOS, Blackberry OS y plataformas similares (para una cruz completa -marco de compatibilidad, ver http://jquerymobile.com/gbs/). A pesar de que el marco fue diseñado para crear aplicaciones web móviles, también es posible usar jQuery Mobile para desarrollar aplicaciones nativas de Android. En consecuencia, el objetivo de esta serie de tutoriales es doble:

Primero, ilustraremos la construcción dinámica de elementos básicos de UI en jQuery Mobile. Para este propósito, implementaremos una aplicación web de muestra, llamada aplicación Noticias, para buscar artículos de noticias de Yahoo! Noticias. La aplicación enviará solicitudes HTTP basadas en AJAX a un servidor y analizará la respuesta XML para construir la interfaz de usuario. Utilizaremos el plugin jquery-dotimeout para ilustrar una técnica de animación donde los titulares de noticias se muestran uno tras otro a intervalos periódicos con un efecto de entrada / salida de fundido. Esto le dará al lector una idea del formato del contenido para las listas de jQuery Mobile, particularmente la 'lista dividida'. También usaremos el complemento DST.js para almacenar las selecciones de categorías de noticias actuales del usuario con almacenamiento local HTML5. La aplicación web consiste en un archivo HTML que tiene el código UI, las bibliotecas jQuery Mobile y los complementos jQuery. El archivo HTML también usa un archivo PHP simple que envía solicitudes HTTP a Yahoo! Noticias URL y envía la respuesta de vuelta al archivo HTML. Este es un método para evitar la restricción del mismo origen de las solicitudes AJAX en los navegadores web. El archivo PHP no realiza ninguna manipulación de la solicitud o respuesta, ya que el objetivo principal es utilizar las API jQuery / jQuery Mobile para crear la solicitud, analizar la respuesta y construir la interfaz de usuario. Proporcionaremos imágenes de la pantalla de la aplicación web en el sistema operativo Android y dispositivos iOS para ilustrar el hecho de que la interfaz de usuario tiene una apariencia consistente en múltiples plataformas.

En segundo lugar, demostraremos cómo desarrollar una aplicación nativa de Android donde la interfaz de usuario se codifica a través del marco jQuery Mobile. Para este propósito, utilizaremos la aplicación web desarrollada previamente. La idea principal es usar el objeto android.webkit.WebView como contenedor para ejecutar el archivo HTML en la aplicación web. El único cambio necesario en el archivo HTML es dirigir las solicitudes AJAX a Yahoo! URL de noticias en lugar del archivo PHP. Mostraremos cómo integrar el archivo HTML que contiene el código de UI con android.app.Activity y android.webkit.WebViewClient. También mostraremos cómo crear los íconos de lanzamiento para nuestra aplicación de Android según las Pautas de íconos de Android.

Los archivos necesarios para ejecutar la web y las aplicaciones nativas de Android están disponibles para descargar como parte de esta serie de tutoriales. Para la aplicación Android, describiremos cómo importar los archivos del proyecto en el Eclipse IDE.

Organización de esta serie

Este tutorial, el primero de nuestra serie, está organizado de la siguiente manera: en la sección "Flujo de página", comenzamos a presentar la aplicación dando imágenes en pantalla y describiendo el flujo de la página. Luego discutiremos algunos detalles técnicos de la aplicación web en la sección "Solicitud / modelo de respuesta". La sección "Estructura de la página" es donde presentamos los elementos de jQuery Mobile para construir nuestras páginas.

En el segundo tutorial de esta serie, completamos el desarrollo de la aplicación web. Continuamos presentando el código de jQuery Mobile, construimos dinámicamente una lista dividida, discutimos una técnica de animación para el texto en un elemento de la lista dividida y proporcionamos transiciones entre las páginas en nuestra aplicación. Una sección especial del segundo tutorial está dedicada a explicar cómo trabajamos con la misma restricción de origen de las solicitudes AJAX en la aplicación web. Las imágenes en pantalla de la aplicación web final en dispositivos iOS y Android se proporcionan para la comparación de lado a lado.

El tercer y último tutorial de esta serie está dedicado a migrar la aplicación web a una aplicación nativa de Android. Este tutorial incluirá una descripción de alto nivel de los cambios necesarios para convertir nuestra aplicación web en una aplicación de Android, prestando especial atención a las clases personalizadas android.app.Activity y android.webkit.WebViewClient y un examen de los archivos de configuración. AndroidManifest.xml y strings.xml. También se analizará el proceso de configuración del icono de inicio de una aplicación y la estructura general de archivos de nuestro proyecto Android.


Flujo de página

Echemos un vistazo a las páginas individuales del producto final para tener una idea de cómo funcionará la aplicación. El flujo de páginas que se trata aquí se aplica tanto a la web como a las aplicaciones nativas de Android:

La primera página es la página de Categorías donde el usuario puede echar un rápido vistazo a todos los titulares de las noticias en varias categorías de interés:

Categories

Como se muestra arriba, cada categoría de noticias se muestra en un elemento de la lista dividida jQuery Mobile que consta de una sección a la izquierda con texto y otra sección a la derecha con un botón. En la sección de texto, el título de la categoría se muestra arriba de los titulares de noticias para esa categoría. Los titulares de las noticias de una categoría se muestran uno tras otro en un bucle cada 2 segundos con un efecto de animación de fundido de entrada / salida. En esa página, el usuario puede:

  • Eliminar una categoría presionando el botón Eliminar.
  • Vaya a la lista de todas las noticias bajo una categoría presionando en la sección de texto del elemento de la lista para esa categoría.
  • Agregue una nueva categoría presionando el botón Agregar.

En la página Categorías, si el usuario presiona el botón Agregar, se muestra la página de Selección de Categoría (Figura 2):

Category Selection

En esta página, el usuario selecciona una categoría de noticias de una lista y presiona el botón Obtener categoría para agregar la categoría a la página Categorías.

En la página de Categorías, presionar en la sección de texto del elemento de la lista para una categoría lleva al usuario a la página de Noticias donde se muestran todas las noticias bajo esa categoría (Figura 3):

News

En la página Noticias, una noticia puede tener una imagen asociada a ella, que sirve como enlace para obtener más detalles sobre la noticia en particular. Al presionar sobre la imagen, el usuario accede a la página Detalle de noticias (Figura 4):

News Detail

Tenga en cuenta que, en la aplicación web, la página Detalle de noticias se muestra en el navegador fuera de la página HTML que ejecuta el código de la aplicación. Para volver, el usuario debe presionar el botón Atrás en el navegador. Esa acción lleva al usuario a la página de Categorías. En la aplicación nativa de Android, la página Detalle de noticias se muestra en la misma instancia de android.webkit.WebView donde se inicia la aplicación, fuera de la página HTML que ejecuta el código de la aplicación. Al presionar el botón Atrás del dispositivo, el usuario regresa a la página de Categorías.

El diagrama en la Figura 5 resume el modelo de flujo entre las páginas en nuestra aplicación de Noticias:

News Detail

Observe el ícono giratorio durante ciertas transiciones. Esto indica que se muestra una página de progreso al usuario durante la transición. La página de progreso es útil para dar al usuario la opinión de que la solicitud se está procesando. Tenga en cuenta que una página de progreso durante la transición de Noticias a Detalle de noticias se muestra solo en la aplicación nativa de Android, no en la aplicación web. (Más discusión sobre esto se dará en la Parte 3, "Cambios en index.html").


Modelo de solicitud/respuesta

Hablemos sobre cómo se manejan las solicitudes y las respuestas en la aplicación web. Hay una sola página HTML que contiene la UI y el código de manejo de eventos para la aplicación de Noticias, que se llama index.html. Ese archivo se descarga en el navegador móvil del usuario desde un servidor web (para nuestras pruebas, utilizamos un servidor web Apache 2.2). Las acciones de la página "Obtener categoría" y "Elegir categoría" implican solicitudes de AJAX para obtener información de noticias de Yahoo! URL del servidor de noticias, http://rss.news.yahoo.com/. Debido a la restricción del mismo origen de las solicitudes AJAX, el navegador no puede enviar esas solicitudes directamente a Yahoo! Servidor de noticias Como solución temporal, empleamos un archivo PHP en nuestro servidor web, llamado bridge.php, que envía esas solicitudes a Yahoo! Servidor de noticias en nombre del navegador y retransmite la respuesta. Por otro lado, la acción de la página News Detail implica una solicitud HTTP GET regular para Yahoo! Servidor de noticias Por esta razón, bridge.php no es necesario.

Request/Response model

En términos del modelo de solicitud / respuesta, la aplicación nativa de Android difiere de la aplicación web de dos maneras. Primero, no necesita bridge.php. Esto se debe a que cuando se empaqueta como parte de una aplicación nativa de Android, una página HTML que se ejecuta en android.webkit.WebView no está sujeta a las mismas restricciones de origen cuando se realizan llamadas AJAX. En segundo lugar, en la aplicación nativa de Android, la acción de la página News Detail es una llamada AJAX en lugar de una solicitud HTTP GET regular. Discutiremos esto más adelante en la Parte 3, "Cambios en index.html".


Estructura de página

Una "página" en el marco de jQuery Mobile puede ser una sola página o una página vinculada interna local dentro de una página. Una página de contenedor incluirá una o más páginas de contenido. Es posible mostrar / ocultar páginas de contenido de forma selectiva. Como se mencionó anteriormente, nuestra aplicación web consiste en una sola página HTML llamada index.html que contiene toda la UI y el código de manejo de eventos. Definimos nuestra página de contenedor de la siguiente manera:

El atributo data-theme de la etiqueta div del contenedor tiene el valor b. El atributo data-theme nos permite elegir entre los estilos jQuery Mobile disponibles:

El tema predeterminado tiene varias muestras de color llamadas a, b, c, d, e, cada una de las cuales proporciona un conjunto consistente de colores para diferentes elementos en la página. Para nuestra aplicación elegimos el color correspondiente a b.

Las categorías de páginas de contenido, la Selección de categoría y las Noticias estarán dentro de la página del contenedor. Una página de contenido generalmente tendrá un encabezado, un área de contenido y un pie de página con cada uno definido dentro de una etiqueta div. El valor del atributo data-role en la etiqueta div define el rol de la etiqueta.

  • Para definir un encabezado, use <div ... data-role="header" ... >
  • Para definir un área de contenido, use <div ... data-role="content" ... >
  • Para definir un pie de página, use <div ... data-role="footer" ... >

Veamos ahora las diversas páginas de contenido en nuestra aplicación.

Página de Categorías

Categories

En la sección del encabezado, observe el atributo data-nobackbtn="true". De forma predeterminada, jQuery Mobile framework incluiría un botón Atrás en la sección del encabezado. Al establecer explícitamente ese atributo como se indicó anteriormente, evitamos tener un botón Atrás. En cambio, incluimos un botón Agregar en el encabezado usando <a id="buttonAddCategory" ...>. Como el valor del atributo data-icon es plus, el botón tendrá un signo más. Además, class="ui-btn-left" asegura que el botón se coloque en el lado izquierdo del encabezado. No queremos incluir nada en la sección del pie de página y, por lo tanto, el div para el pie de página está vacío. Como resultado, solo se mostrará una delgada línea horizontal en la sección del pie de página.

El área de contenido tiene una llamada lista dividida jQuery Mobile. Con referencia a la Figura 1 que muestra la página de Categorías, cada elemento de la lista consta de una sección a la izquierda con texto y otra sección a la derecha con un botón, por lo tanto 'dividir'. Los atributos data-split-icon y data-split-theme definen la lista como una lista dividida. Tenga en cuenta que el framework jQuery Mobile tiene la flexibilidad de formatear las secciones divididas de diferentes maneras. Por ejemplo, puede colocar iconos en la sección de texto, lo que significa que en lugar de un botón eliminar a la derecha, puede elegir tener un ícono diferente. En nuestra aplicación Noticias, cada elemento de la lista corresponderá a una categoría de noticias particular. Los elementos de la lista se construirán dinámicamente en función de las selecciones del usuario. Inicialmente, la lista está vacía.

Página de selección de categoría

Category Selection

En la página Selección de categoría, en el área de contenido hay un formulario que permite al usuario seleccionar y agregar una categoría de noticias. Las categorías de noticias son un subconjunto de categorías en Yahoo! Las noticias se enumeran en http://news.yahoo.com/rss. La selección de categoría se procesa cuando el usuario presiona el botón con id="buttonGetCategory".

Observe que no hay un botón de retroceso y la sección del pie de página está vacía.

Página de noticias

News

En esa página, el área de contenido se rellenará dinámicamente con todas las noticias asociadas a una categoría según la selección del usuario. Inicialmente, el área de contenido está vacía. En la sección del encabezado, hay un botón Atrás. Sin embargo, en lugar de confiar en la acción de retorno predeterminada de jQuery Mobile implementaremos esa acción a través de un controlador de eventos. Por lo tanto, definimos explícitamente un botón con id="buttonHdrShowCategories" (El código del controlador de eventos para el botón se revisará en la Parte 2, "Ir a la página de categorías desde la página de noticias"). El atributo data-icon="arrow-l" usa un ícono de jQuery Mobile incorporado designado para botones de retroceso. Para ver los iconos disponibles del botón de jQuery Mobile, consulte http://jquerymobile.com/demos/1.0a2/#docs/buttons/buttons-icons.html. En esa página también tenemos un botón de retroceso en el pie de página. Esto se debe a que la página suele ser larga y el usuario tendrá que desplazarse hacia abajo para acceder a todas las noticias. Queremos que el usuario pueda regresar desde la parte inferior de la página sin tener que desplazarse hasta la parte superior. Los manejadores de eventos para los botones de arriba y abajo de atrás serán idénticos.

Página de progreso

Anteriormente, mencionamos que durante varias transiciones de página mostramos una página de progreso hasta que se completa la transición. Esto es necesario solo en transiciones que requieren tiempo de procesamiento debido a la construcción de una solicitud o al análisis de la respuesta. La página de progreso es muy simple, con texto descriptivo y un ícono giratorio.

Página de detalles de noticias

El contenido de la página Detalles de noticias es proporcionado por Yahoo! URL de noticias La forma en que se muestra esta página se describe en la Parte 2, "Ir a la página de detalles de noticias desde la página de noticias".

Mostrar páginas

Simplemente mostrar una página equivale a mostrar esa página y ocultar todas las demás. Vamos a discutir cómo lograr este comportamiento. A los elementos div que representan el encabezado, el contenido y el pie de página de cada página se les asignan variables que los identifican en la convención jQuery como se muestra a continuación. Dado que se utilizan de forma repetida, la definición de variables globales para ellos proporciona una ventaja de rendimiento ya que cada variable se inicializa solo una vez, pero se puede usar muchas veces.

Para ocultar una página, llamamos a la función jQuery hide() en las variables de encabezado, contenido y pie de página de esa página. Por ejemplo, para ocultar la página Categorías:

Del mismo modo, para las páginas de Selección de categoría, Noticias y Progreso, tenemos las siguientes funciones 'hide':

Para mostrar una página, ocultamos todas las demás páginas y llamamos a la función jQuery show() en las variables de encabezado, contenido y pie de página de esa página. Por ejemplo, para mostrar la página de Categorías, tenemos la siguiente función:

Del mismo modo, para las páginas Selección de categoría, Noticias y progreso, tenemos las siguientes funciones 'show':

En lugar de tener una sola página HTML que contiene todo el código de la interfaz de usuario, podríamos haber organizado la interfaz de usuario en varias páginas HTML. Para los propósitos de este tutorial, elegimos el enfoque anterior. Para el último caso, consulte el modelo de navegación de jQuery Mobile que explica cómo jQuery Mobile realiza navegaciones de página entre diferentes archivos físicos.


Palabras de cierre

En esta parte inicial de la serie de tutoriales, presentamos los objetivos del tutorial y discutimos la aplicación de ejemplo que se implementará. También comenzamos a presentar el marco jQuery Mobile con énfasis en la estructura de la página. La próxima semana, continuaremos introduciendo el código jQuery Mobile y completaremos la implementación de nuestra aplicación web en la segunda parte de esta serie.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.