Olá Pessoal, esta é a sexta parte do pequeno tutorial sobre Jquery Mobile.
Hoje vamos ver caixas de diálogos!
Um dos componentes de interface gráfica de usuário mais utilizado pelos desenvolvedores são, sem dúvida, as caixas de diálogo. Inclusive sem importar o entorno em que se execute a aplicação, seja web, de área de trabalho ou para dispositivos móveis, e independente do objetivo para o que está destinada.
Sua importância se deve à sua capacidade de informar ao usuário e de servir, ao mesmo tempo, para tomar simples decisões que afetam o fluxo da aplicação. Outro detalhe importante é que a informação das caixas de diálogo é tratada de maneira diferente de qualquer outro tipo de componente de interface gráfica de usuário, pois sempre obriga os usuários a dar, ao menos, uma olhada rápida na informação. Típicas caixas de diálogo servem para dar pistas de como trabalhar com as aplicações, outras são advertências e a mais comum é a de alerta.
Nota: As alertas são muito usadas nos entornos web. A função alert(“”); do Javascript é uma das funções mais utilizadas.
As alertas, ou qualquer caixa de diálogo que criemos em jQuery Mobile, é construído com uma simplicidade surpreendente. Ademais, são altamente versáteis, uma vez que nos permitem fazer muitas coisas, e quando digo muitas é porque os diálogos parecem não ter limites , viajando mais além de uma simples alert, confirmDialog, ou inputDialog.
A razão pela qual uma caixa de diálogo em jQuery Mobile parece não ter limites é porque realmente são como uma página web completa, seja das múltiplas em nosso documento HTML ou separada em um arquivo à parte. Graças ao fato de ser uma página independente, poderemos fazer milhares de coisas como adicionar imagens, criar formulários, anexar botões, acrescentar vídeos, ou tudo aquilo que suporte uma página web normal. Com isto se pode entender o sem fim de aplicações e possibilidades que as caixas de diálogo podem ter em jQuery Mobile. Mas claro, tampouco podemos abusar delas, recordemos que ainda continuam sendo caixas de diálogo.
Converter uma página web em caixa de dialogo
Para que uma página se comporte como uma caixa de diálogo não devemos fazer nada sobre ela, senão que devemos construí-la exatamente como se vem fazendo em todo o tutorial. O que faz com que se converta em um diálogo, é um atributo que se adiciona no link que nos leva à página. De modo que, o trabalho de apresentar essa página como um diálogo, é feito pelo próprio framework e com uma implementação muito simples. O vínculo também pode ser um botão, se preferirmos ao invés de um link comum. De qualquer modo nos levará à página que se comporta como caixa de diálogo, quer esteja dentro dopróprio documento HTML ou fora dele.
O atributo em concreto que devemos colocar nos links dirigidos a páginas que queremos que se comportem como caixas de diálogo é data-rel=”dialog”. Mais tarde veremos exemplos completos, mas antes quero esclarecer um assunto que foi motivo de dúvida entre um grupo de pessoas às que explicava o funcionamento dos diálogos em jQuery Mobile: O que torna diferente uma caixa de diálogo de outro tipo de página, se é apenas uma página normal com um link à que colocamos um atributo especial?
Sim tem diferenças e grandes, começando pelo fato de que as páginas que são caixas de diálogos não são salvas no histórico do navegador, ou seja, que não poderemos regressar a elas com o botão atrás e portanto só teremos acesso se pressionarmos o link que nos leva até a página. Outra diferença é que o framework se encarrega de colocar no header da página um ícone de fechamento do diálogo. Outro detalhe visual atrativo que se produz é que a interface gráfica da caixa de diálogo aparece flutuando, permanecendo o documento anterior com o fundo escuro.
Mas bem, agora vejamos um exemplo completo da criação de uma primeira caixa de diálogo, através de um código cuja simplicidade se apreciará. Teremos uma página normal e nela um botão, que abrirá a caixa de diálogo, que será como una espécie de alerta. Esse botão se consegue com um HTML como o seguinte.
<a href=”#dialogo” data-role=”button” data-inline=”true” data-rel=”dialog” data-theme=”b”>Abrir dialogo</a>
Com um botão como o que criamos no código anterior, já estaríamos fazendo da pagina com id “dialogo” uma caixa de diálogo. No entanto, também devemos criar um mecanismo de regresso já que, diferentemente das caixas de alerta convencionais que são criadas com Javascript, estes não permanecem na página que os invoca. Você deve ter em conta que quando se vai a uma caixa de diálogo se viaja através do link a uma nova página, apesar de que jQuery Mobile produza uma visualização diferente.
Para regressar novamente à pagina, podemos agregar o seguinte código na página com id de “diálogo”.
<a href=”#aja” data-role=”button” data-rel=”back”>Aceitar</a>
Como se vê, neste caso também é um botão , com a diferença que desta vez seu atributo data-rel tem o valor de “back”. Com isto não temos a necessidade de atribuir o endereço ao link para a página inicial. Inclusive, se dermos um endereço diferente página de início, jQuery Mobile nos devolverá a página que o dialogo invocou.
Atribuirr temas gráficos às caixas de diálogo
Outra das coisas que podemos fazer com as caixas de diálogo é combinar seus temas, com o que obteremos uma variedade de tipos de alerta. Por exemplo, poderíamos colocar o botão de uma cor, encabeçado de outro e o conteúdo de outro. Só teríamos que atribuir assuntos diferentes a cada um dos objetos ou elementos mencionados.
Para ver tudo isto vamos criar uma segunda caixa de dialogo, que será chamada através de outro botão que construiremos com um HTML como este.
<a href=”#dialogo2″ data-role=”button” data-inline=”true” data-rel=”dialog” data-theme=”c”>Abrir dialogo configurado</a>
Já só bastaría criar outra página web e identifica-la como id=”dialogo2″, nesta poderíamos por exemplo fazer o seguinte.
<div data-role=”page” id=”dialogo2″>
<div data-role=”header” data-theme=”b”><h1>dialogo com cores configuradas</h1></div>
<div data-role=”content” data-theme=”a”>
Esta e uma caixa de dialogo configurada que esta dentro do mesmo HTML do link
<a href=”#” data-role=”button” data-theme=”e” data-rel=”back”>Aceitar</a>
</div>
Como você pode observar só temos que atribuir o atributo data-theme, com diferentes valores, sobre a etiqueta HTML que cria o objeto. Dessa forma podemos obter páginas e neste caso de caixas de diálogo mais variadas em cor.
Exemplo completo de criação de caixas de diálogo em jQuery Mobile
Pois bem, só nos resta atar fios soltos no tema dos diálogos e para isso , deixo o código do exemplo que vimos neste artigo.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>Caixas de dialogos com jQuery Mobile</title>
<link rel="stylesheet" href="jquery.mobile-1.0.min.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="inicio">
<div data-role="header"><h1>Trabalhando com dialogos</h1></div>
<div data-role="content">
Pressiona o botao para abrir uma caixa de dialogo
<a href="#dialogo" data-role="button" data-inline="true" data-rel="dialog" data-theme="b">Abrir dialogo</a></br>
Pressiona o botao para abrir uma caixa de dialogo com cores configuradas
<a href="#dialogo2" data-role="button" data-inline="true" data-rel="dialog" data-theme="c">Abrir dialogo configurado</a>
</div>
<div data-role="footer"><h3>Caixas de dialogos</h3></div>
</div>
<div data-role="page" id="dialogo">
<div data-role="header" ><h1>dialogo de exemplo</h1></div>
<div data-role="content">
Este e um quadro de dialogo simples que esta dentro do mesmo HTML do link
<a href="#" data-role="button" data-rel="back">Aceitar</a>
</div>
</div>
<div data-role="page"id="dialogo2">
<div data-role="header" data-theme="b"><h1>dialogo com cores configuradas</h1></div>
<div data-role="content" data-theme="a">
Este e um quadro de dialogo configurado que esta dentro do mesmo HTML do link
<a href="#" data-role="button" data-theme="e" data-rel="back">Aceitar</a>
</div>
</body>
</html>
Viu que legal? 😀
Até a próxima pessoal!
