jQuery Mobile - Criando uma aplicação no WebMatrix

Na primeira parte deste artigo eu apresentei os recursos básicos do jQuery Mobile. Agora vamos mostrar algo mais prático acessando dados e exibindo informações relacionadas.

O jQuery Mobile é um framework de interface de usuário unificada construída com base no jQuery que apresenta um código leve e com realce progressivo possuindo um design flexível e facilmente personalizável.

A biblioteca jQuery Mobile funciona em cima do core da biblioteca jQuery e em essência é uma biblioteca para interface de usuário alternativa ao jQuery que ainda esta na versão Alpha e que se propõe a criar sites para navegação com toque com aparência estilo IPhone/Ipad para diversas plataformas móveis como Apple iOS, Android, Nokia N900, etc.

O jQuery Mobile utiliza recursos de CSS3 e HTML 5 e desse modo para poder usar os recursos do jQuery Mobile você deverá usar um navegador com suporte a HTML 5. A equipe do jQuery planeja dar suporte aos navegadores Firefox, Safari, Google Chrome ou Opera. Atualmente você pode usar o Internet Explorer a partir da versão 8 para testar as aplicações feitas com o jQuery Mobile.

A biblioteca jQuery Mobile é composta por um arquivo JavaScript e um arquivo de estilo CSS com algumas imagens e você pode baixar estes arquivos neste link: http://jquerymobile.com/download/

Você pode baixar os arquivos javascript e css e hospedá-los em sua aplicação ou utilizar a referência aos arquivos hospedados na CDN conforme o código abaixo:


<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>

Obs: os arquivos indicados representam a última versão disponível mas lembre-se que eles estão sendo atualizados com frequência. Para ter uma posição sempre atualizada você pode usar as seguintes referências:


<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

Criando uma aplicação com o Web Matrix

Abra o WebMatrix e clique no ícone Site From Template para que possamos criar um site a partir de um modelo já existente;

A seguir selecione o template Empty Site e informe o nome jQueryMobile_WebMatrizDemo e clique em OK

Após isso teremos um site web com a estrutura exibida na figura abaixo; ou seja se clicarmos na opção Files veremos apenas um arquivo robots.txt;

Vamos então criar algumas pastas em nosso web site para colocarmos os arquivos do jQuery Mobile:

Clicando no item New-> New Folder vamos incluir as seguintes pastas no web site:

App_Data
Styles
     Images
Scripts

Na figura ao lado vemos a estrutura das pastas no web site.

Vamos incluir os arquivos do jQuery e do jQuery Mobile nas pastas Scripts, Styles e Images. Para isso clique com o botão direito do mouse sobre a pasta e selecione a opção : Add Existing File e procure pelos arquivos onde você baixou e descompactou. Defina a estrutura conforme a figura a seguir:

Na pasta App_Data vamos incluir um banco de dados Northwind40.sdf que é a versão 4.0 deste banco de dados para o SQL Server Compact Edition(CE).

Na figura abaixo vemos o banco de dados e suas tabelas. Vamos trabalhar com as tabelas Categories e Products.

A seguir vamos incluir uma nova pasta com o nome Shared e clicando com o botão direito do mouse sobre ela selecione New File;

Em seguida selecione o tipo CSHTML e informe o nome _Layout e clique em OK;

Agora defina o código abaixo no arquivo _Layout.cshtml da pasta Shared:

Neste arquivo definimos as referências para as bibliotecas do jQuery e do jQuery Mobile.

É importante frisar que do doctype <!DOCTYPE html> da suporte ao HTML 5 e é usado por padrão pelo Razor.

Vamos agora incluir um novo arquivo CSHTML com o nome Default.cshtml na raiz do web site e definir neste arquivo o seguinte código:

@{

   Layout = "~/Shared/_Layout.cshtml";

   Page.Title = "Home";

   Page.Header = "Categorias";

      var db = Database.Open("Northwind40");

      var sql = @"SELECT [Category ID] AS ID, [Category Name] As Name

                   FROM Categories ORDER BY [Category Name]";

     var data = db.Query(sql);

}

<div data-role="content">

   <ul data-role="listview" data-inset="true" data-theme="d">

      @foreach(var item in data){

           <li><a href="/Category/@item.ID">@item.Name</a></li>

         }

    </ul>

</div>

Neste código estamos usando a sintaxe Razor para abrir o banco de dados e acessar a tabela Categories selecionando o código (ID) e nome da categoria;

- A seguir estamos usando  as divs contendo o data-role: "content" onde iremos exibir as informações obtidas da tabela
- Usando o atributo data-role="listview" definimos uma lista
- o atributo data-insert="true" para a lista faz com que a mesma tenha bordas e margens;
- a div data-theme="d" define um tema a ser usado
- O laço fore/each percorre os dados e exibe as categorias com um link para Category mais o ID da categoria e o seu nome exibido na página;

Vamos executar esta página selecionando e clicando no menu Run e escolhendo um Navegador para exibição. Eu estou usando o Chrome.

O resultado é visto na figura a seguir, a exibição dos nomes das categorias da tabela Categories:

Observe na parte inferior esquerda da página o link para a categoria selecionada: Category/2

Nosso próximo objetivo será exibir os produtos de uma determinada categoria de forma que quando o usuário clicar em um nome de categoria seja aberta uma página contendo os produtos desta categoria.

Para isso vamos  incluir novo arquivo CSHTML com o nome Category.cshtml na raiz do web site e definir neste arquivo o seguinte código:

@{
    Layout = "~/Shared/_Layout.cshtml";
    Page.Title = "Produtos";
    Page.Header = "Produtos";
    if(UrlData[0].IsEmpty()){
        Response.Redirect("~/");
    }
    var db = Database.Open("Northwind40");
    var sql = @"SELECT [Product ID] AS ID, [Product Name] As Name FROM Products 
                  WHERE [Category ID] = @0 ORDER BY [Product Name]";

    var category = UrlData[0];
    var data = db.Query(sql, category);
    var primeiraletra = "";
}
<div data-role="content">
    <ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="b">
    @foreach(var item in data){
        if(item.Name.Substring(0,1) != primeiraletra){
            <li data-role="list-divider">@item.Name.Substring(0,1).ToUpper()</li>
            primeiraletra= item.Name.Substring(0,1);
        }
        <li><a href="/Product/@item.ID">@item.Name</a></li>
    }
    </ul>
</div

Este código acessa a tabela Products e filtra os produtos pelo código da categoria selecionada;

- Novamente estamos usando os atributos data-role="content" para definir onde iremos exibir as informações;
- Estamos extraindo a primeira letra de cada grupo de produtos e usando o atributo data-role="list-divider" para dividir a lista e assim exibir os produtos por ordem alfabética e agrupados pela primeira letra;

Executando novamente a página Default.cshtml e clicando em um categoria iremos obter a exibição dos produtos na página Category.cshtml:

Vamos agora exibir os detalhes de um produto, para isso inclua uma nova página chamada product.cshtml na raiz do web site e inclua nela o seguinte código:

@{
    Layout = "~/Shared/_Layout.cshtml";
    Page.Title = "Produtos";
    Page.Header = "Detalhes do Produto";
    if(UrlData[0].IsEmpty()){
        Response.Redirect("~/");
    }
    var product = UrlData[0];
    var db = Database.Open("Northwind40");
    var sql = @"SELECT Products.[Product Name] AS Name, 
                Categories.[Category Name] AS Category, 
                Suppliers.[Company Name] AS Supplier, 
                Products.[Quantity Per Unit]  AS Quantity,
                Products.[Unit Price] AS Price, 
                Products.[Units In Stock] AS InStock, 
                Products.[Units On Order] AS OnOrder
                FROM Products 
                INNER JOIN
                Categories ON Products.[Category ID] = Categories.[Category ID] 
                INNER JOIN
                Suppliers ON Products.[Supplier ID] = Suppliers.[Supplier ID]
                WHERE Products.[Product ID] = @0";
    
    var item = db.QuerySingle(sql, product);
}

<div data-role="content" data-theme="d">

    <ul data-role="listview" data-inset="true" data-theme="e" data-dividertheme="b">

          <li data-role="list-divider">@item.Name</li>

      <li>Fornecedor: @item.Supplier</li>

        <li>Categoria: @item.Category</li>

      <li>Quantidade por unidade: @item.Quantity</li>

      <li>Unidades em estoque    : @item.InStock</li>

      <li>Unidades no pedido      : @item.OnOrder</li>

    </ul>

</div>

Neste código extraímos alguns dados do produto selecionado filtrando pelo ID do produto.

Executando o projeto teremos a sequência de execução das página até a exibição dos detalhes de um produto selecionado:

Neste exemplo eu não utilizei os efeitos de transição durante a navegação para uma nova página. Para fazer isso basta adicionar o atributo data-transition ao link.

Os valores possíveis são:

Como vimos usar os recursos do jQuery Mobile para exibir dados de um banco de dados e criar aplicações para dispositivos móveis é muito simples.

Poderíamos usar um emulador para testarmos a nossa aplicação. Uma opção gratuita seria o iBBDemo2 que é uma aplicação Adobe Air.

Pegue os exemplos usados aqui: jQueryMobile_WebMatrixDemo.zip

"Porque eu não tenho falado de  mim mesmo; mas o Pai, que me enviou, Ele me deu mandamento sobre o que hei de fazer e sobre o que hei de falar. E sei que o seu mandamento é a vida eterna. Portanto, o que eu falo, falo-o como o Pai mo tem dito." João 12:49-50

Referências:

José Carlos Macoratti