Introdução

Na maioria das aplicações que possuem interface gráfica com botões, caixas de texto, checkboxes, etc., é preciso oferecer ao usuário opções de menu e botões de ação para facilitar ou permitir o acesso a determinadas funcionalidades. Dependendo do tipo de aplicação e de interface que se está utilizando, algumas características visuais desses menus, como posição e dimensões são fundamentais para a garantia do bom funcionamento e praticidade no uso dos mesmos.

Com o avanço das tecnologias móveis e o crescimento em nível avançado do número de smartphones e tablets utilizados, tornou-se necessário o desenvolvimento de uma nova solução para a apresentação de certos menus em páginas web e aplicações nativas. Aquele menu comum e muito utilizado que fica no topo da janela e que ao ser clicado exibe submenus flutuantes tornou-se inviável para o uso em dispositivos móveis com tecnologia touch screen. As páginas web também precisaram de modificações, pois o acesso a alguns links e menus se tornara difícil para os usuários que precisavam “tocar na tela”.

Com base nessa necessidade, começaram a ser desenvolvidas soluções de layout com dimensões e posicionamento estratégico, facilitando a visualização e acesso às principais opções de aplicações web e nativas para dispositivos móveis.

Neste artigo serão apresentadas as toolbars (barras de ferramentas) do framework jQuery Mobile, um dos mais utilizados atualmente para o desenvolvimento de páginas web para dispositivos móveis. O objetivo dessas barras é exibir botões de ação com dimensões e posição adequadas às telas reduzidas (em relação aos desktops) dos smartphones e tablets.

jQuery Mobile Básico

Antes de prosseguir e ver como trabalhar com as toolbars, é preciso montar a estrutura básica da página HTML e importar os arquivos do framework a ser utilizado. O procedimento é bastante simples, basta referenciar os arquivos JS e CSS da biblioteca jQuery e do framework jQuery Mobile, adicionar uma tag meta viewport e algumas divs, com a estrutura sugerida na documentação oficial.

Para facilitar, o código base dos exemplos que aqui serão apresentados é mostrado na Listagem 1. O leitor pode copiar este código e salvar como um arquivo de extensão .html.

Listagem 1: Estrutura básica da página




	Listas - jQuery Mobile
	
	
	
	
	


	

Toolbars

Trabalhando com barras de ferramentas no framework jQuery Mobile.

jQuery Mobile

Abrindo o arquivo no browser, deve-se obter o seguinte resultado.

Página básica

Figura 1: Página básica

Criando as barras de opções

Para criar as toolbars, basicamente serão utilizadas as divs do cabeçalho e do rodapé. Ao inserir links (tags &lgt;a>) nas divs com data-role=”header” ou ”footer”, esses são interpretados como botões e exibidos com visual modificado.

Observação: nos exemplos a seguir será mostrado apenas o conteúdo das divs que foram modificadas, devendo o leitor substituir o código original, salvar o arquivo e atualizar/abrir no browser para visualizar o resultado.

Criemos então alguns botões na parte superior da página.

Listagem 2: Criando toolbar básica no cabeçalho

Voltar

Toolbars

Avançar

O resultado, visualizado no browser, é mostrado na figura a seguir.

Toolbar básica superior

Figura 2: Toolbar básica superior

Processo semelhante pode ser feito para o rodapé da página, conforme o código da listagem a seguir.

Listagem 3: Criando toolbar básica no rodapé

O rodapé, por sua vez, não é automaticamente configurado para comportar títulos e botões. Por isso foi removido o título h1 e adicionada a classe ui-bar à div footer. Isso é necessário para que o rodapé passe a se comportar como uma toolbar, se adequando aos botões adicionados. É possível configurar o layout do footer para receber outros elementos, como o próprio título, porém esse não é o foco do artigo, mas o leitor pode consultar a documentação oficial sobre tal assunto no link: http://jquerymobile.com/demos/1.2.0/docs/content/content-grids.html.

O resultado é exibido na Figura 3, onde se tem o rodapé com três botões.

Toolbar básica inferior

Figura 3: Toolbar básica inferior

Ícones e temas

Nos exemplos apresentados acima foram criados botões apenas com texto, mas é possível inserir ícones, garantindo um melhor visual e facilitando o entendimento da função de cada botão. Isso pode ser feito adicionando o atributo data-icon aos botões, definindo um valor que representa a imagem a ser utilizada.

A seguir são adicionados ícones nas barras do cabeçalho e do rodapé e, em seguida, é apresentado o resultado.

Listagem 4: Botões com ícones

Voltar

Toolbars

Avançar

Trabalhando com barras de ferramentas no framework jQuery Mobile.

Toolbars com ícones nos botões

Figura 4: Toolbars com ícones nos botões

A lista de ícones disponíveis pode ser encontrada seguinte endereço: http://jquerymobile.com/test/docs/buttons/buttons-icons.html.

É possível anda remover o texto dos botões e deixar apenas o ícone, o que pode ser feito apenas adicionando o atributo data-iconpos=”notext”. Na listagem a seguir foi removido o texto dos botões, permanecendo apenas as imagens.

Listagem 5: Removendo o texto dos botões

Voltar

Toolbars

Avançar

O que se obtém é o seguinte resultado, apresentado na Figura 5.

Botões só com ícone

Figura 5: Botões só com ícone

Uma outra alteração interessante que se pode fazer é alterar o tema interface, modificando a cor das barras e dos botões. Com o atributo data-theme, tanto é possível alterar o tema da barra como um todo, quanto dos botões individualmente.

A lista de temas nativos e maiores informações como utilizá-los podem ser encontradas no link http://jquerymobile.com/test/docs/api/themes.html.

Para exemplificar, no código a seguir é alterado o tema da barra superior e dos botões da barra inferior individualmente, obtendo o resultado exibido na Figura 6.

Listagem 6: Alterando o tema das barras e botões

Voltar

Toolbars

Avançar

Trabalhando com barras de ferramentas no framework jQuery Mobile.

Temas alterados

Figura 6: Temas alterados

Barras fixas e flutuantes

A última funcionalidade apresentada nesse artigo, mas que não fica atrás das demais em termos de importância, é a possibilidade de definir um posicionamento fixo para as barras. Nesses casos o corpo do documento pode ser movimentado, enquanto o cabeçalho e/ou o rodapé permanecem em suas posições, sendo ocultados durante o scroll e exibidos em seguida.

Basta adicionar o atributo data-position="fixed" às divs header e/ou footer para ver o resultado. No exemplo a seguir foi preciso aumentar o texto contido no corpo da página (div content) para que fosse possível visualizar o efeito. Por questão de prática, porém, esse texto não será apresentado aqui, podendo o leitor fazer essa alteração localmente.

Listagem 7: Barras com posicionamento fixo

Voltar

Toolbars

Avançar

Trabalhando com barras de ferramentas no framework jQuery Mobile.

Barras fixas flutuantes sobre o texto

Figura 7: Barras fixas flutuantes sobre o texto

Esse tipo de funcionalidade é útil quando é necessário que o usuário possa acessar as opções de qualquer ponto do documento, mesmo após o scroll, sem precisar rolar a página até o topo ou até a parte inferior.

Conclusão

Nesse artigo vimos como criar toolbars com o framework jQuery Mobile para aplicações web. As funcionalidades apresentadas aqui não resumem tudo que o framework oferece, é interessante visitar a documentação oficial para obter maiores informações: http://jquerymobile.com/demos/1.2.0/docs/toolbars/docs-bars.html.

Então, finalizamos aqui esse artigo. Até a próxima oportunidade.