Aplicación web móvil con jQuery Mobile y ASP.NET MVC 2

jQuery Mobile es un conjunto de plugins de jQuery y widgets que provee una API multiplataforma para crear aplicaciones web optimizadas para visualizarse en dispositivos móviles inteligentes.

“jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets
A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.” (http://jquerymobile.com/).

La implementación del código para jQuery Mobile es similar a jQuery UI siendo la diferencia que jQuery UI está enfocado a aplicaciones web para navegadores de escritorio mientras que jQuery Mobile está enfocado para dispositivos móviles.

Para realizar nuestro tutorial básico de nuestra aplicación web con ASP.NET MVC 2 optimizada para dispositivos móviles, es necesario antes de todo, dar un paseo por la documentación de jQuery Mobile en http://jquerymobile.com/demos visite también la sección de recursos donde se ofrece una galería de web apps con jQuery Mobile http://jquerymobile.com/resources/ y http://www.jqmgallery.com/

Para empezar a trabajar con jQuery Mobile, procedemos a descargarlo en http://jquerymobile.com/download/ o simplemente revisar como podemos enlazarlo desde el servidor de jQuery.com para no descargarlo (pero es recomendable descargarlo).

La versión actual y final es la 1.0 (de manera personal cuando visualicé mi app en el móvil con esta versión encontré que permite hacer zoom cuando no debe permitirse hacer zoom en una app móvil), la sugerencia es utilizar la versión 1.0RC3 http://jquerymobile.com/blog/2011/11/13/jquery-mobile-rc3-released/ para descargarlo tenemos el link http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.zip

Esta es una pantalla de la aplicación que estaremos creando:

Img. 1. Parte del resultado a obtener.

La base del ejemplo es una aplicación de ASP.NET MVC 2 ya realizada y que puede descargar de http://bit.ly/da3-archs (archivo Agencia 2012.zip) que contiene algunas características de jQuery AJAX + JSON.

Entonces desempaquetar el proyecto y abrirlo en Visual Studio (v.2010), el ejemplo requiere: VS2010, SQL Server Express, Características de web developer (ASP.NET MVC2).

Nota: Es importante recalcar que no se estará explicando detalladamente toda la implementación ya que se supone que ya estamos familiarizados con VS, C#, ASP.NET MVC2, JavaScript, CSS, jQuery y ahora con un poco de jQuery Mobile.

Empezando con la versión para móvil.

Como estamos pensando que crear una versión especial para verse en móvil, crearemos un Área (http://elegantcode.com/2010/03/13/asp-net-mvc-2-areas/) en nuestro proyecto.

Img. 2. Agregar un Área al proyecto.

El área le pondremos el nombre “m” en representación de móvil para tener una dirección del tipo: http://localhost/m/

Img. 3. Agregando el área "m".

Ya creado el área nos hace falta agregar jQuery Mobile, entonces ya descargado jQuery Mobile, agregaremos la carpeta desempaquetada a una nueva carpeta “Content” en Areas/m/ del proyecto Agencia2012 como se muestra en la img. 4.

La versión 1.0rc3 sugiere la versión de jQuery 1. 1.6.4 que podemos descargar de http://code.jquery.com/jquery-1.6.4.min.js

Img. 4. Agregar archivos de jQuery Mobile al proyecto.

Ahora hagamos que estos archivos sean parte del proyecto.

Img. 5. Incluir en el proyecto los archivos agregados.

Nota: Yo eliminé la carpeta Demos y el archivo jquery.mobile-1.0rc3.docs.zip que vienen dentro de jquery.mobile-1.0rc3.

Agregando una nueva plantilla (Master) para la versión móvil.

Agregaremos un nuevo elemento a la carpeta Areas/m/Views/Shared.

Img. 6. Agregar nuevo elemento.

Seleccionamos “Página maestra de vista de MVC 2” al que le pondremos el nombre de Movil.Master.

Img. 7. Añadir página maestra.

Modificaremos el código de esta nueva plantilla en la que enlazaremos a los archivos de jQuery y jQuery Mobile.

El código de Movil.Master quedará como:

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <script src="../../../Areas/m/Content/scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
    <link href="../../Content/jquery.mobile-1.0rc3/jquery.mobile-1.0rc3.min.css" rel="stylesheet"
        type="text/css" />
    <script src="../../../Areas/m/Content/jquery.mobile-1.0rc3/jquery.mobile-1.0rc3.min.js" type="text/javascript"></script>
</head>
<body>
    <div>
        <asp:ContentPlaceHolder ID="MainContent" runat="server">        
        </asp:ContentPlaceHolder>
    </div>
</body>
</html>

Añadiendo el primer controlador (Inicio).

Para que nuestro demo vaya tomando forma, agregaremos un controlador llamado Inicio.

Img. 8. Agregando controlador.

Al controlador le pondremos el nombre “Inicio”.

img. 9. Controlador "Inicio".

Este controlador tendrá solo 2 ActionResult, será el encargado de proporcionar la página principal de nuestro demo.

namespace Agencia2012.Areas.m.Controllers
{
    public class InicioController : Controller
    {
        //
        // GET: /m/Inicio/

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult AcercaDe()
        {
            return View();
        }
    }
}

Dando forma a la vista (página) principal de nuestro demo.

Crearemos la vista Index para el Controlador Inicio.

Img. 10. Agregando la vista Index con la plantilla Movil.Master.

Como para nuestro demo se ha creado una nueva plantilla, al momento de crear todas las vista para la versión móvil, debemos asegurarnos de elegir la plantilla o página maestra Movil.Master.

Agregada la vista Index, escribiremos el código para nuestra primera vista con la estructura de jQuery Mobile.

<%@ Page Title="" Language="C#" MasterPageFile="~/Areas/m/Views/Shared/Movil.Master" 
Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Mi jQuery Mobile App.
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<% 
    /* Demos y documentación en http://jquerymobile.com/demos/1.0rc3/
     * Es importante estudiar la estructura básica de una aplicación en jQuery Mobile
     * 
     * comprender el uso de: data-role, data-theme y demás atributos que se irán mostrándo
     * en el tutorial.
     * Además comprender el manejo de los temas disponibles, iconos, botones, etc. en jQueryM.
     * 
    */
%>
<div data-role="page" data-theme="b" id="home">
    <div  data-role="header" data-theme="b">
        <h1>Demo app</h1> <a href="/m/inicio/acercade" data-icon="arrow-r">Acerca de</a>
    </div>
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
<li data-role="list-divider">Ir a</li>
<li><a href="/m/mclientes">Clientes</a></li>
<li><a href="/m/mautos">Autos</a></li>
                <li><a href="/m/mventas">Ventas</a></li>
</ul>
    </div>
    <div data-role="footer" data-theme="a">
        <h4><a href="http://www.afelipelc.mx" rel="external">www.afelipelc.mx</a></h4>
    </div>
</div>
</asp:Content>

Importante: Como se comentó, es importante que antes de todo se estudie sobre jQuery Mobile, en la documentación en linea encontramos toda la información necesaria con ejemplos: http://jquerymobile.com/demos/  donde en http://jquerymobile.com/demos/1.0/docs/about/getting-started.html encontramos toda la información básica para comprender la estructura de una página en jQuery Mobile, los temas e ir agregando contenido (eso es con lo que estaremos trabajando).

Ya revisada la documentación comprenderemos fácilmente el código que aquí se irá agregando.

Ahora probemos nuestra app, compilemos el proyecto para verlo en el navegador.

Nota: se comentó que la versión móvil está implementanda en una nueva área m“, por lo tanto para acceder a la versión móvil lo haremos manualmente: http://localhost:####/m/inicio

Img. 11. Vista de la página principal del demo.

Tarea: Crear la vista AcercaDe de igual forma que Index para hacer funcionar el link correspondiente de la vista Index.

Configurando el controlador por default para el área “m”.

Podemos configurar nuestra app de asp mvc 2 para predeterminar el controlador y acción por default, es decir, que al ingresar a  http://localhost:####/m/ tengamos la vista móvil sin tener que ingresar hasta http://localhost:####/m/inicio

Para esto, abrir el archivo mAreaRegistration.cs que se encuentra dentro de Areas/m/ en el que el método RegisterArea() quedará:

public override void RegisterArea(AreaRegistrationContext context)
{
    context.MapRoute(
        "m_default",
        "m/{controller}/{action}/{id}",
        new { controller = "Inicio", action = "Index", id = UrlParameter.Optional }
    );
}

Al código solo se le ha agregado la propiedad controller al nuevo Map.Route en el que se especifica cual es el controlador predeterminado, acción y párámetro(s) para el área m.

Ejecute la aplicación y verifique que al ingresar a http://localhost:####/m/ ya se tiene la vista móvil.

Esto es todo en la primera parte del tutorial, aún falta mucho trabajo.

Anuncios

Un comentario en “Aplicación web móvil con jQuery Mobile y ASP.NET MVC 2

Escribe tu comentario:

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s