Share
jQuery Mobile es un marco web móvil relativamente nuevo, con su primer lanzamiento realizado en octubre de 2010. El marco tiene muchas características interesantes para apoyar el desarrollo de aplicaciones móviles basadas en web. En este tutorial, nos centraremos en algunos elementos básicos de jQuery Mobile: estructura de página, formularios y envío de formularios Ajax. El tutorial se basa en la versión 1.0 alpha versión 2 del framework jQuery Mobile.
Como parte del tutorial escribiremos una pequeña aplicación B2C. Una compañía de envío de paquetes tiene un formulario en su sitio web para que los clientes ingresen información sobre paquetes que se pierden o dañan durante el envío. Al usar un dispositivo de mano (por ejemplo, un teléfono habilitado para la web), un cliente ingresa información al formulario sobre su reclamo: el número de envío del recibo original, el nombre / dirección y una descripción de la pérdida / daño. Cuando el cliente envía el formulario, el sitio web responde con un ID de reclamo para un seguimiento adicional. El escenario se muestra en el siguiente diagrama:
El marco jQuery Mobile es compatible con una variedad de navegadores que incluyen dispositivos iOS, dispositivos Android, Blackberry OS 6 y webOS (para una matriz de soporte, consulte http://jquerymobile.com/gbs/). La aplicación en este tutorial ha sido probada contra un dispositivo Android 2.2 y un dispositivo iOS 4.1.
Antes de entrar en detalles técnicos, hablemos sobre las principales consideraciones que impulsan el diseño de la aplicación..
Por supuesto, una aplicación típica de la vida real tendrá problemas de diseño adicionales o diferentes. A los fines de este tutorial, nuestro alcance se limitará a las consideraciones anteriores..
La mayor parte de la discusión en esta sección ha sido tomada de la documentación en http://jquerymobile.com. Ver la referencia original para más detalles..
jQuery Mobile es un sistema de interfaz de usuario basado en el popular marco de JavaScript jQuery. Consta de elementos de la interfaz de usuario y construcciones de programación que proporcionan una funcionalidad uniforme en una gran variedad de navegadores web para dispositivos móviles y de escritorio. Los principios de 'Mejora progresiva' y 'Degradación agraciada' están detrás de su diseño. La funcionalidad principal del marco es compatible con un amplio conjunto de plataformas, mientras que las plataformas más nuevas se benefician de características más mejoradas.
jQuery Mobile tiene una huella relativamente pequeña. Dado que la configuración básica de una página de jQuery Mobile se realiza únicamente mediante marcado, es posible lograr ciclos de desarrollo rápidos, especialmente si su aplicación no necesita funciones de programación complejas. Aunque está construido en jQuery core, el sistema de temática de jQuery Mobile se basa en un nuevo marco CSS que apunta a separar el color y la textura de los estilos estructurales que definen cosas como el relleno y las dimensiones. Una API de manejo de eventos maneja los métodos de entrada de usuario basados en enfoque táctil, mouse y cursor de una manera unificada.
jQuery Mobile viene de serie con muchos elementos de la interfaz de usuario, como las barras de herramientas de encabezado y pie de página, botones con iconos, elementos de formulario (incluido el control deslizante sensible al tacto y los interruptores de palanca) y listas. También se proporcionan estilos HTML básicos, grillas de dos o tres columnas y elementos plegables.
A partir del lanzamiento de jQuery Mobile 1.0 alpha 2, las siguientes bibliotecas de hojas de estilo y JavaScript deben incluirse en sus páginas HTML. Puede consultarlos como se muestra abajo o servirlos desde su propio servidor:
Introduzcamos la estructura básica de una página en jQuery Mobile. Una página en el marco de jQuery Mobile puede ser una página única o una 'página' local vinculada interna dentro de una página. Una página de "contenedor" incluirá una o más páginas de "contenido". El límite de una página de contenedor se define de la siguiente manera:
...
Observe que el valor de la rol de datos atributo es página. Por otro lado, el límite de una página de contenido se define de la siguiente manera:
...
Observe que el valor de la rol de datos atributo es contenido.
Una página de contenido puede tener un encabezado y un pie de página asociados. Como ejemplo, una página de contenedor con varias páginas de contenido puede tener la siguiente estructura:
.....................
Cuando se carga una página de contenedor, todas las páginas de contenido en ella serán visibles. En nuestra aplicación, necesitamos mostrar solo un contenido a la vez. Por lo tanto, debemos controlar mediante programación qué contenido se mostrará según el contexto.
Para ocultar un elemento, use la API de jQuery Mobile esconder() función:
Accentsconagua
$ ('# hdrMain'). hide (); ocultará el encabezado con carné de identidad hdrMain. Aquí, usamos el selector de ID de jQuery pasando carné de identidad del elemento que nos gustaría seleccionar precedido por # firmar. A la inversa, la espectáculo() La función muestra un elemento oculto:
$ ('# hdrMain'). show (); los Nuestra aplicación de demostración consiste en una sola página html., Las transiciones de contenido se muestran en el diagrama a continuación: Observaciones adicionales sobre el código listado arriba: Nuestro formulario de reclamaciones consta de los siguientes campos: Como ejemplo, veamos el campo de texto para el Número de envío: Usamos un Como veremos más adelante, esta convención especial de nombres nos ayudará a detectar los campos faltantes durante el envío del formulario. Otro elemento de forma notable es el La página de formulario como se muestra en un teléfono Android 2.2 se muestra a continuación. El usuario se desplazará por la página para acceder a los elementos en el formulario: La misma forma se muestra en un iPod touch con iOS 4.1: Haremos referencia a varios elementos en la página html a lo largo de nuestro código. Tiene sentido definir esas referencias solo una vez y reutilizarlas según sea necesario. Por este motivo, declaramos las variables utilizadas globalmente, así como las constantes en el Las asignaciones de esas variables se realizan en jQuery. Veamos ahora las funciones de selección de contenido que llamarán los controladores de eventos.. Para ocultar y mostrar el contenido principal y su encabezado / pie de página, usamos el Para ocultar y mostrar el contenido de transición, usamos el Para ocultar y mostrar el contenido del diálogo, usamos el Finalmente, para ocultar y mostrar el contenido de confirmación y su encabezado / pie de página, usamos el Cuando se carga la página, solo se debe mostrar el contenido principal. Por esta razón, otras páginas de contenido están ocultas: Discutiremos cómo vincular esas funciones de selección de contenido con los controladores de eventos a continuación.. Cuando un usuario presiona el botón de enviar, debemos validar los datos del formulario antes de enviar el formulario. Para simplificar las cosas, solo verificaremos si se han proporcionado todos los campos requeridos. Si la validación del formulario es exitosa, mostramos el contenido de transición que consiste en una imagen giratoria con un breve texto que informa al usuario de que se está enviando su formulario. Si la validación falla, mostramos el contenido del cuadro de diálogo que consiste en una advertencia y un botón Aceptar para cerrar el cuadro de diálogo. Las etiquetas de los elementos del formulario con datos faltantes se resaltarán en rojo. Para este propósito, agregamos una nueva clase de estilo llamada falta y extendiendo el jQuery Mobile A continuación se muestra el controlador de eventos para el envío de formularios. En la notación jQuery típica, el identificador para Establecemos un indicador de error para los Después de restablecer todas las etiquetas resaltadas previamente, volvemos a visitar Además, el indicador de error se establece en verdadero y se muestra el cuadro de diálogo de error. La siguiente figura muestra el diálogo de error en nuestro teléfono Android 2.2: Después de que el usuario presiona el botón OK, se muestra la página del formulario con los campos que faltan resaltados, como se muestra a continuación. En esa imagen, la orientación de la pantalla del teléfono es horizontal. Observe que cada etiqueta y su campo de texto hermano se muestran en una sola línea en lugar de la orientación vertical en la Figura 3 donde la etiqueta está sobre el campo de texto. Por otro lado, si la validación es exitosa, mostramos el contenido de la transición y enviamos el formulario como se explica a continuación.. El envío del formulario utiliza el jQuery Mobile. Tenga en cuenta que el La función en línea para procesar la respuesta se ejecuta solo cuando el servidor devuelve su respuesta. Para simplificar, la aplicación del servidor procesa los datos del formulario., Cuando se recibe la respuesta del servidor, se ejecuta el código del controlador de eventos. El primer paso es poblar el Luego, ocultamos el contenido de Transición y mostramos el contenido de Confirmación que contiene el Se ha creado una nueva reclamación basada en los datos que ha enviado.. Tu numero de confirmación es: La página de confirmación que se muestra en nuestro teléfono Android 2.2 se muestra a continuación (la orientación del teléfono es horizontal): La misma página de confirmación se muestra en un iPod touch de la siguiente manera (la orientación es vertical): El código fuente para el tutorial tiene una estructura de carpetas simple. Todos los recursos se almacenan en una carpeta llamada En este tutorial presentamos conceptos básicos de jQuery Mobile framework con enfoque en la estructura de la página, estilo básico, elementos de formulario y envío de formularios Ajax. Se presentó una aplicación de procesamiento de reclamos de muestra para demostrar esos conceptos. Proporcionamos capturas de pantalla de varias páginas de la aplicación ejecutándose en un teléfono Android 2.2 y un dispositivo iPod touch con iOS 4.1. A continuación se presentan algunas observaciones y comentarios finales:esconder() y espectáculo() Las funciones se aplican a elementos de muchos tipos diferentes, en particular, ( etiquetas). En este tutorial, utilizaremos esconder() y espectáculo() funciona ampliamente para mostrar solo el contexto relevante para el usuario de la aplicación. Se dan más detalles a continuación.
Paso 1: Estructura de la página de la aplicación de demostración
index.html, que consiste en una página de contenedor como se muestra a continuación:
tema de datos El atributo nos permite elegir entre los estilos disponibles en el marco de jQuery Mobile: a B C D e, cada uno proporciona un conjunto consistente de colores para diferentes elementos en la página. Para nuestra aplicación elegimos el color correspondiente a segundo. data-nobackbtn = "true".Elementos de formulario
entrada campos de texto de tipo: número de envío, nombre, apellido, correo electrónico, teléfono, dirección postal, ciudad y código postal. Todos los campos son obligatorios excepto el teléfono.seleccionar Elemento para el estado. Este es un campo obligatorio.textarea Elemento para que un usuario ingrese información sobre el envío perdido o dañado. Este es un campo obligatorio.
etiqueta con un para atributo cuyo valor es el mismo que el carné de identidad del entrada elemento del etiqueta se adjunta a Además, envolvimos el etiqueta y entrada en un div con rol de datos atributo valorado como fieldcontain. El framework jQuery Mobile utilizará el fieldcontain Valor de atributo para un estilo especial. Además, mira name = "shipNo_r". Para esta aplicación en particular, decidimos definir el valor de la nombre atributo de cualquier elemento de formulario requerido para ser el valor de la carné de identidad atributo añadido por _r. Si el elemento no es requerido, el valor del nombre atributo será el mismo que el valor de la carné de identidad atributo. Por ejemplo, como Teléfono no es un campo obligatorio, se define de la siguiente manera:
seleccionar elemento. Similar al anterior, el valor de la para atributo es el mismo que el id de la seleccionar elemento del etiqueta se adjunta a También el etiqueta y seleccionar están envueltos en un div con el rol de datos valor de atributo como el fieldcontain. Con la larga lista de opciones que tenemos en esta aplicación, jQuery Mobile framework abrirá la lista en una nueva página cuando el usuario se centre en el seleccionar elemento.
Paso 2: Definiciones de variables
cabeza sección de la página:
$ (documento) .ready () función utilizando selectores de ID, como se muestra a continuación. (Recordemos que jQuery $ (documento) .ready () La función se llama cuando se carga toda la jerarquía DOM en la página. Esa función es la mejor ubicación para inicializar nuestras variables.) También definimos inputMapVar como una colección que consta de todos entrada elementos con _r en su nombre atributo (la llamada de función $ ('input [nombre * = "_ r"]') selecciona todos esos elementos).
Paso 3: Funciones de selección de contenido
hideMain () y showMain () funciones: función hideMain () hdrMainVar.hide (); contentMainVar.hide (); ftrMainVar.hide (); función showMain () hdrMainVar.show (); contentMainVar.show (); ftrMainVar.show ();
hideContentTransition () y showContentTransition () funciones: function hideContentTransition () contentTransitionVar.hide (); función showContentTransition () contentTransitionVar.show ();
hideContentDialog () y showContentDialog () funciones: function hideContentDialog () contentDialogVar.hide (); función showContentDialog () contentDialogVar.show ();
ocultarConfirmación () y showConfirmation () funciones: function hideConfirmation () hdrConfirmationVar.hide (); contentConfirmationVar.hide (); ftrConfirmationVar.hide (); función showConfirmation () hdrConfirmationVar.show (); contentConfirmationVar.show (); ftrConfirmationVar.show ();
Paso 4: Envío de formulario
Validación de formularios
etiqueta clase. label.missing color: # FF0000; font-weight: negrita;
formulario 1 se pasa a la llamada de objeto jQuery para manejar el evento de envío: $ ('# form1'). submit (function () var err = false; // Ocultar el contenido principal hideMain (); // Restablecer los elementos del formulario previamente resaltados stateLabelVar.removeClass (MISSING); whatLabelVar.removeClass (MISSING) ; inputMapVar.each (función (índice) $ (this) .prev (). removeClass (MISSING);); // Realice la validación de formularios inputMapVar.each (función (índice) if ($ (this) .val ( ) == null || $ (this) .val () == EMPTY) $ (this) .prev (). addClass (MISSING); err = true;); if (stateVar.val () == NO_STATE) stateLabelVar.addClass (MISSING); err = true; if (whatVar.val () == null || whatVar.val () == EMPTY) whatLabelVar.addClass (MISSING); err = true; / / Si la validación falla, muestre el contenido del diálogo si (err == verdadero) showContentDialog (); devuelva falso; // Si la validación pasa, muestre el contenido de la transición showContentTransition (); // Envíe el formulario $ .post ("/ forms / requestProcessor.php ", form1Var.serialize (), function (data) confirmationVar.text (data); hideContentTransition (); showConfirmation ();); return false;); falso y ocultar el contenido principal que contiene el formulario. Luego restablecemos las etiquetas resaltadas previamente en cada miembro de la colección. inputMapVar. Para hacer eso, pasamos una función en línea como un argumento para cada() que simplemente contiene $ (this) .prev (). removeClass (MISSING);. Tenga en cuenta que esta es el seleccionado entrada elemento y anterior () devuelve su hermano anterior inmediato que es el etiqueta asociado a ello.estado para la selección del estado y qué Para la descripción de la reclamación no son campos de texto. Por lo tanto, las etiquetas correspondientes tienen sus estilos restablecidos por separado.entrada Elementos para comprobar si alguno de ellos tiene un valor perdido. Si ese es el caso, agregamos la clase faltante a la etiqueta asociada con el campo de entrada: // Realizar la validación de formulario inputMapVar.each (función (índice) if ($ (this) .val () == null || $ (this) .val () == EMPTY) $ (this) .prev () .addClass (MISSING); err = true;); if (stateVar.val () == NO_STATE) stateLabelVar.addClass (MISSING); err = true; if (whatVar.val () == null || whatVar.val () == EMPTY) whatLabelVar.addClass (MISSING); err = true;
Enviando el formulario a través de Ajax
enviar Función que acepta tres argumentos: $ .post ("/ forms / requestProcessor.php", form1Var.serialize (), function (data) …);
publicar por fascículos() en el objeto jQuery pasándole el identificador de nuestro formulario.datos, enviado desde el servidor.enviar La función realiza una llamada Ajax que es asíncrona por naturaleza. Inmediatamente después de llamar al enviar, la ejecución del programa continuará devolviendo falso desde el enviar Función y el usuario comenzará a ver el contenido de Transición..
requestProcessor.php, devuelve un ID de reclamación codificado para que el usuario lo use como referencia futura. Antes de enviar el ID de reclamo requestProcessor.php, duerme 4 segundos para emular el tiempo de procesamiento del servidor. Es en este período que la aplicación mostrará el contenido de Transición..
lapso etiqueta llamada confirmación con el valor devuelto desde el servidor. Esto se hace simplemente con: confirmationVar.text (datos);
lapso etiqueta llamada confirmación:
Despliegue del código fuente
formas. En esa carpeta, hay dos subcarpetas, css y img. los css carpeta contiene colores.css, que tiene el label.missing clase, y img víveres wait.gif, La imagen del hilandero. los index.html y requestProcessor.php los archivos están directamente debajo de la formas carpeta. En nuestras pruebas, utilizamos un servidor web Apache con la versión 2.2.11 que ejecuta la versión 5.3.0 de PHP. Si colocas el formas carpeta directamente debajo de la Raiz del documento del servidor web, puede acceder a la aplicación a través de http: // [your_host_name] /folder/index.html.
Conclusión
