Introdução ao Jquery Mobile – Parte 5

0

Olá Pessoal, esta é a quinta parte do pequeno tutorial sobre Jquery Mobile.

Tá ficando cada vez mais completo não é mesmo?

Ao longo de diversos artigos do Manual de jQuery Mobile  vimos expressando as grandes vantagens em usar este framework para criar aplicações, orientadas a dispositivos móveis, com uma poderosa interface gráfica de usuário (GUI). No artigo anterior pudemos ver um exemplo disso: Criar botões com jQuery Mobile. A forma de usar os widgets que vêm predeterminados no framework é uma tarefa muito simples, mas obtemos resultados impactantes, com os quais poderemos surpreender nossos amigos.

Um dos componentes de interface gráfica de usuário más relevante, eficiente e útil em jQuery Mobile são as listas, já que nos podem servir como menus de contextos, ou qualquer outro uso que lhe podamos dar em nossas aplicações web móveis. O limite está em nossa imaginação, pois tudo neste framework se amolda de acordo com nossas necessidades, ou melhor, às características específicas do dispositivo móvel que o carregue.

Chegará o momento em que teremos que mostrar um catálogo de artigos, ou serviços de uma empresa, ou qualquer coisa similar. Esta é uma tarefa que podemos cumprir com os componentes ou widgets preparadas, que criamos com jQuery Mobile.

Seguindo o exemplo do catálogo de produtos, podemos ter cada um dos artigos organizados em nossas listas e ao clicar , estaríamos viajando de forma direta a uma página, que nos mostrará toda a informação do elemento selecionado.

Exemplo ilustrativo com listas

Para este artigo onde estamos trabalhando com listas vamos criar um exemplo bastante simples mas muito ilustrativo das coisas que podemos fazer com tais elementos. Com isto obteremos um horizonte de ideias e ilustrações de coisas úteis para fazer com as listas, que nos brinda jQuery Mobile

Nosso exemplo terá quatro páginas web, incluídas dentro do mesmo documento HTML. Na primeira criaremos de imediato uma lista, que nos servirá como exemplo clássico e ilustrativo deste artigo. Na lista haverá três elementos com textos diferentes, ao clicar sobre um estaremos vendo uma pequena informação sobre aquilo que se tenha selecionado.

A informação de cada um dos textos presentes nos elementos da lista se albergará nas três páginas restantes, embora, em nosso exemplo, não serão produtos mas meios de transporte.

Inicialmente começaremos criando uma lista simples com todas as configurações predeterminadas por jQuery Mobile, já que no curso a iremos configurando para conseguir melhores efeitos visuais. Para obter uma lista simples basta com um código como este:

<ul data-role=”listview” >
<li><a href=”#carro” >Carro</a></li>
<li><a href=”#aviao”>Avião</a></li>
<li><a href=”#aeroplano”>Aeroplano</a></li>
</ul>

Até aqui conseguimos criar uma lista simples, onde seus elementos servirão como link para nos comunicar com outras três páginas web. Cada página está relacionada de forma direta com os elementos da lista, ou seja, que ao clicar sobre os elementos com texto de “Carro”, o navegador nos levará a uma página que contém informação acerca dos carros.

Enriquecer visualmente as listas

Igual que no caso dos botões, podemos fazer certas modificações e ir agregando atributos às listas de forma direta sobre as etiquetas HTML. Esta possibilidade de configurar os próprios widgets no código HTML facilitará muito a vida, à hora de criar nossas aplicações com jQuery Mobile.

Divisões:
O primeiro que vamos fazer com as listas é criar uns divisores, que são outros elementos da lista, mas que atuam de forma diferente. Estes elementos são só para orientar o usuário na lista. Em outras palavras, eles atuam como uma espécie de objetos inabilitados aos eventos que podem ser gerados pelo usuário, e portanto, não reacionaram ao duplo click ou ao teclado etc.

Podem-se agregar ou indexar divisores em qualquer lugar nas listas, algo que é muito frequente, pois embora não respondam a nenhum evento, eles cumprem uma tarefa importante. Trata-se de uma forma visual de manter informado o usuário de que está usando nossa aplicação web.

A continuação, vamos criar divisores em nossa lista. Estes nos servirão para indicar os diferentes tipos de meios de transporte, que em nosso exemplo são transporte terrestre e transporte aéreo, para que nosso usuário saiba por onde vai.

Nota: Para servir de exemplo de uso dos divisores podemos pensar em outra cosa. Imagine que sua lista tivesse produtos comerciais. Então você poderia colocar divisores com textos como: artigos eletrônicos e artigos de alimentação.

A tarefa com os divisores é muito simples e se consegue com um código como o seguinte.

<ul data-role=”listview” >
   <li data-role=”list-divider”>Meios de transporte terrestrses</li>
<li><a href=”#carro” >Carro</a></li>
   <li data-role=”list-divider”>Meios de transporte Aéreos</li>
<li><a href=”#aviao”>Avião</a></li>
<li><a href=”#aeroplano”>Aeroplano</a></li>
</ul>

Como podem perceber, é muito simples. Só há que agregar dois elementos <li> na posição onde desejamos ter nossos divisores, mas a estes elementos devemos atribuir o atributo data-role ao qual damos o valor de ?list-divider?. Com esse único detalhe é suficiente para obter um divisor em nossas listas.

Nota: No código anterior os divisores foram identados à direita, mas isso é simplesmente para que visualmente se possam identificar melhor. Resta dizer que no código HTML estes sangrados não são levados em conta pelos navegadores, embora nos sirvam aos desenvolvedores para ler melhor os códigos que criamos.

Preste atenção!:
Outro assunto que concerne às listas é que em sua configuração por padrão não conservam uma margem na página. Se desejarmos, podemos agregar essa margem por meio de um novo atributo a nossa lista, que se coloca de forma direta na etiqueta <ul> do HTML. Esse atributo é o data-inset, o qual recebe um valor booleano, ou seja, se queremos produzir a margem é só dar valor de true ao atributo. Com isto, obteremos uma lista que conservará certas margens com respeito à pagina, ademais de criar uma borda arredondada. Tudo isso se consegue com um código como este:

<ul data-role=”listview” data-inset=”true”>

Temas gráficos de personalização:
Os componentes de interface gráfica de usuário em jQuery Mobile compartem a grande maioria de atributos, ou seja, que podemos modificar sua data -theme de nossa lista com o fim de obter uma lista com cor diferente. Isto se consegue igual como explicado nos botões, com um código HTML como o seguinte:

<ul data-role=”listview” data-inset=”true” data-theme=”b”>

Também podemos fazer modificações em seus divisores agregando um novo atributo na etiqueta <ul>. É útil fazer isto para que nossos divisores se diferenciem dos demais elementos, ficando com um código como este:

<ul data-role=”listview” data-inset=”true” data-theme=”b” data-dividertheme=”a”>

Como se pode observar, só agregamos um novo atributo data-dividertheme com o que se dá um tema aos divisores da lista, este é o “a”, com o conseguimos uma cor negra. O efeito é que os divisores aparecerão com a cor diferente que atribui jQuery Mobile por padrão.

Código completo de uso de listas em jQuery Mobile

Pois bem, espero que tenham compreendido a importância das listas. Agora, para maior clareza do que foi explicado vamos compartilhar o código completo com tudo aquilo que tratamos neste artigo. Também usaremos aspectos vistos na seção de Criar botões com jQuery Mobile, a igual que outros temas que foram tratados previamente neste manual.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>Listas com jQuery Mobile</title>
<link rel="stylesheet" href="jquery.mobile-1.0.min.css" />
<scriptsrc="jquery-1.7.1.min.js"></script>
<scriptsrc="jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="inicio">
<div data-role="header"><h1>Listas</h1></div>
   <div data-role="content">
<ul data-role="listview" >
<li><a href="#carro" >Carro</a></li>
<li><a href="#aviao">Avião</a></li>
<li><a href="#aeroplano">Aeroplano</a></li>
</ul>
<ul data-role="listview" data-inset="true" data-theme="b" data-dividertheme="a">
   <li data-role="list-divider">Meios de transporte terrestrses</li>
<li><a href="#carro" >Carro</a></li>
   <li data-role="list-divider">Meios de transporte Aereos</li>
<li><a href="#aviao">Aviao</a></li>
<li><a href="#aeroplano">Aeroplano</a></li>
</ul>
   
   </div>
   <div data-role="footer"><h3>Listas</h3>
</div>
</div>

<div data-role="page" id="carro">
   <div data-role="header"><h1>Carros</h1></div>
   <div data-role="content">
    Os carros são um meio de transporte terrestre<br>
   <a href="#inicio"data-role="button" data-theme="b" data-inline="true">Inicio</a>
   </div>
   <div data-role="footer">
   <h3>Os carros</h3>
   </div>
</div>

<div data-role="page" id="aviao">
   <div data-role="header"><h1>Avioes</h1></div>
   <div data-role="content">
    Os avioes sao um meio de transporte aereo<br>
   <a href="#inicio"data-role="button" data-theme="e" data-inline="true">Inicio</a>
   </div>
   <div data-role="footer">
   <h3>Avioes</h3>
   </div>
</div>

<div data-role="page" id="aeroplano">
   <div data-role="header"><h1>Aeroplanos</h1></div>
   <div data-role="content">
    Os aeroplanos são um meio de transporte aereo, menor que os avioes<br>
   <a href="#inicio"data-role="button" data-theme="d" data-inline="true">Inicio</a>
   </div>
   <div data-role="footer">
   <h3>Aeroplanos</h3>
   </div>
</div>
</body>
</html> 

Espero tenham compreendido todo o código anterior. Recomendo ler outros artigos prévios do manual, caso tenham alguma dúvida sobre assuntos como o sistema multipáginas de jQuery Mobile.

Antes de terminar, quero que se observe também que as três páginas que contêm a informação dos meios de transporte (carro, avião, aeroplano), têm uma forma de retorno ao início. São links convertidos em botões. Se você não sabe como criar botões com jQuery Mobile revise o artigo publicado anteriormente.

Vou ficando por aqui. Como sempre, é um grande prazer poder compartilhar informação com vocês. Nos vemos em breve e não esqueçam de deixar seus comentários e dúvidas.

Um abraço a todos! 🙂

Não deixem de curtir nossa página do Facebook!

 

Compartilhe.