Introdução ao Jquery Mobile – Parte 3

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

Continuamos dando nossos primeiros passos para o desenvolvimento de páginas orientadas a dispositivos móveis com jQuery Mobile. Nsta ocasião, vamos nos dedicar à estrutura das páginas “multipágina”, o que já nos dará ocasião de ver algum pequeno efeito interessante no nosso navegador.

No artigo anterior explicamos qual é a estrutura da página básica e agora veremos que a multipágina não é mais que a união de várias páginas básicas em um mesmo arquivo HTML.

Talvez uma pessoa com conhecimentos avançados de jQuery possa estar decepcionada, ao ver como neste manual de jQuery Mobile não utilizamos ainda nenhum código Javascript. Se for assim, sinto muito, mas já aviso que esta situação vai ser mantida pelo menos durante mais artigos. Bom, se bem que é certo que nesta ocasião vamos poder ver em funcionamento efeitos dinâmicos, não é necessário utilizar Javascript para nada, porque muitos dos comportamentos básicos deste framework são configurados diretamente sobre o código HTML, por meio de diversos atributos com o prefixo “data-“.

Para fazer a página básica já vimos que as divisões tinham um atributo “data-role” para indicar a estrutura da página, com seu cabeçalho, corpo e pé . Agora veremos outros atributos parecidos para indicar outras coisas sobre as páginas que estamos desenvolvendo.

Multipágina é a união de várias páginas básicas

No mesmo código HTML podemos incluir vários blocos de página básica e teremos um arquivo HTML com diversas páginas que se conhecem como Multipágina. Mas fiquem tranquilos, isto não quer dizer que em jQuery Mobile tenhamos que desenvolver sempre todas as páginas do website no mesmo arquivo HTML. Podemos organizá-las, se desejarmos, em arquivos à parte ou fazer uma mistura entre páginas multipágina e páginas básicas em diferentes arquivos HTML.

Vimos que a página básica incluía uma serie de scripts Javascript e estilos CSS do framework, além de uma declaração META para definir a escala ou zoom com a que se deveria apresentar. Tudo isso permanece igual, o único que mudará será o corpo da página, onde colocaremos vários blocos data-role=”page”.

Vejamos uma união de vários blocos de páginas básicas.

<!-- PORTADA -->
<div data-role="page" id="portada">
   <div data-role="header">
      <h1>Titular de página portada</h1>
   </div>
   <div data-role="content">   
      <p>Fabrico guitarras de todas as cores</p>      
      <p>Podes ver <a href="#galeria">minhas guitarras</a></p>   
      <p>Podes <a href="#comprar" data-rel="dialog">comprar uma guitarra</a></p>
   </div>
   <div data-role="footer">
      Pé de página
   </div>
</div>
<!-- /PORTADA -->

<!-- GALERIA -->
<div data-role="page" id="galeria" data-title="Galeria de guitarras">
   <div data-role="header">
      <h1>Galeria de fotos de minhas guitarras</h1>
   </div>
   <div data-role="content">   
      <p>Podes ver todas as minhas guitarras</p>      
      <p><a href="#portada">voltar</a></p>   
   </div>
   <div data-role="footer">
      Pé de página
   </div>
</div>
<!-- /GALERIA -->

<!-- COMPRAR -->
<div data-role="page" id="comprar" data-title="Comprar guitarras">
   <div data-role="header">
      <h1>Comprar guitarras</h1>
   </div>
   <div data-role="content">   
      <p>Serviço temporariamente indisponivel</p>      
      <p><a href="#portada">voltar</a></p>   
   </div>
   <div data-role="footer">
      Pé de página
   </div>
</div>
<!-- /COMPRAR -->

Este site seria formado por três páginas distintas: “portada”, “galeria” e “comprar”. A pesar de estarem escritas no mesmo arquivo HTML, jQuery se encarregará de mostrá-las como se fossem páginas independentes. A navegação entre elas é realizada por links, como veremos a seguir.

Links entre as páginas da estrutura multipágina

Cada uma das páginas básicas do esquema multipágina têm um identificador, que é colocado no DIV principal da página, o que tem data-role=”page”. Vejamos a continuação o código HTML da divisão geral da página de portada.

Como vemos, foi colocado id=”portada”, com o que já tem um nome atribuído. Agora, se queremos fazer links dirigidos para esta portada, os criamos simplesmente como se fossem links internos. Para tanto colocamos o href=”#portada”, ou seja, exatamente como é feito com os links dentro da mesma página que conhecemos do HTML.

<a href=”#portada”>Ir para a portada</a>

O genial destes links é que, para passar de uma página a outra, jQuery Mobile produz uma transição automática, que faz com que uma página atual desapareça e entre a lincada com um efeito suavizado. Mais adiante explicaremos como configurar as transições entre páginas.

Títulos das páginas

Como todas as páginas desta estrutura multipágina estão no mesmo arquivo HTML, acontece que todas compartilham um mesmo TITLE, que foi indicado no HEAD da página. No entanto, os desenvolvedores provavelmente vão querer que cada página tenha um título independente. Para tornar possível esse caso de uso, jQuery Mobile dispõe de um atributo data-title que é colocado no DIV principal de cada uma das páginas.

Em data-title podemos indicar o título que cada página tem do esquema de multipágina e jQuery Mobile se encarregará de atualizá-lo automaticamente quando se navegue nessa página. Podemos ver o título da subpágina de galeria:

Assim vemos que, quando o usuário pressione um link que o leve a esta página, o titular da janela do navegador mudará de maneira automática para o indicado mediante data-title=”Galeria de guitarras”.

Em resumo. A primeira das páginas poderá ter o título que indiquemos no TITLE do documento HTML, mas se quisermos atribuir outros títulos diferentes a outras páginas da estrutura multipágina, deveremos fazê-lo através dos atributos data-title.

Atributos data-X

Quero fazer uma referencia à parte sobre estes atributos especiais de jQuery Mobile. Como você pode observar, ao desenvolver para este framework são utilizados diversos atributos “data-X”, como os mencionados data-role ou data-title.

Nota: Outro exemplo que colocamos neste artigo da estrutura multipágina é data-rel=”dialog” que, atribuído a um link, faz com que a página que está sendo lincada seja mostrada como se fosse um quadro de diálogo. Mais adiante veremos mais coisas sobre os quadros de diálogo, mas para que se identifique esse data-rel=”dialog” ponho aqui o código do link onde esse atributo foi colocado.

<a href=”#comprar” data-rel=”dialog”>comprar uma guitarra</a>

Todos estes atributos com prefixo data- são perfeitamente válidos na sintaxe HTML5, já que as especificações da linguagem permitem qualquer número de atributos que comecem pela cadeia “data-“. Em HTML5 são utilizadas para embeber dados das aplicações web nas próprias etiquetas do HTML e jQuery Mobile os utiliza, como você pode ver, para configurar o funcionamento das páginas desenvolvidas com estas bibliotecas

Mais à frente veremos outros usos desta técnica para implementar diversos componentes de interfaces de usuário, configurar as transições entre páginas, o comportamento dos links, etc.

Conclusão

Como você poderá comprovar ao ver o exemplo em funcionamento, foram realizados dois tipos de comportamentos dinâmicos. Primeiro, as transições entre páginas, com um efeito de deslocamento suavizado. A seguir, a mudança automática do TITLE do documento, ao passar de uma página a outra. É simplesmente uma pequena amostra das possibilidades do framework e de como, a partir de mero código HTML, se podem configurar diversos dinamismos. Nem é preciso dizer que, se não baseássemos nossas aplicações em jQuery Mobile, realizar estes comportamentos dinâmicos exigiria usar bastante Javascript e lutar com as particularidades de cada dispositivo e navegador.

Por hoje é só, está gostando do nosso tutorial?

Deixe suas sugestões nos comentários!