Artigo do tipo Exemplos Práticos
Autores: Daniele Montenegro da Silva Barros e Mayron Cachina


Para que serve o artigo:

A jQuery Mobile é um framework para criar aplicativos web para dispositivos móveis. Através deste framework é possível aprimorar a aparência de sua aplicação móvel de forma bastante intuitiva e fácil.

O artigo descreve conceitos fundamentais sobre a utilização de temas no framework jQuery Mobile. Através de contextualizações e exemplos são apresentadas as formas de utilização de estilo para os aplicativos móveis desenvolvidos por esse framework.

A aplicação de conceitos de tema é útil para desenvolvedores que começaram a utilizar o jQuery Mobile e querem aplicar estilos na sua aplicação aprimorando sua usabilidade.

A utilização de dispositivos móveis permite a seus usuários o acesso a serviços independentemente de sua localização em qualquer lugar e a qualquer momento. Nos últimos anos, o aumento da capacidade de processamento e armazenamento desses dispositivos tem contribuído para a disseminação e uso dessa tecnologia em diversos setores, e com isso cresce também a necessidade de criação de aplicativos que proporcionem maior praticidade e agilidade na realização de tarefas tanto no âmbito pessoal quanto no profissional.

Para dar uma resposta rápida à necessidade de aplicativos para esses dispositivos, são utilizados frameworks que são uma coleção de bibliotecas que oferecem ferramentas que facilitam os processos mais comuns no desenvolvimento de uma aplicação.

Dentro do desenvolvimento para dispositivos móveis, um framework em especial tem sido amplamente difundido e utilizado, o jQuery Mobile. Este é um framework para desenvolvimento web que fornece mecanismos capazes de criar sistemas unificados de interface de usuário, baseados em HTML5 e CSS3, com o objetivo de construir aplicações funcionais em todas as plataformas móveis, tendo como base de construção as bibliotecas jQuery e jQuery UI.

Dentre as características do jQuery Mobile podemos destacar: a simplicidade e flexibilidade gerais que possibilita uma estrutura simples na construção das páginas; o suporte para toque e outros métodos de entrada fornecendo suporte para diversos métodos de entrada e eventos tais como mouse e métodos de entrada do usuário baseados em foco; a estrutura do framework fornece um sistema de temas que permite definir o estilo do seu aplicativo. E é essa característica que esse artigo vai explorar.

No jQuery o suporte a temas é feito de forma transparente, integrado e de fácil manipulação. Dentro desta perspectiva, este artigo tem por objetivo expor de forma geral a implementação de temas do jQuery Mobile.

Temas padrões no jQuey Mobile

O framework fornece por padrão seis estilos de temas, que podem ser utilizados através das letras: A, B, C, D, E e F. Cada letra representa um tipo de cor, Preto, Azul, Branco, Cinza e Amarelo, respectivamente, conforme demonstrado na Figura 1. A maioria dos componentes do jQuery Mobile suportam esses temas.

Figura 1. Temas jQuery Mobile.

No trecho de código exibido na Listagem 1 vamos montar um exemplo onde poderemos alterar os componentes utilizando o recurso de múltiplas páginas do jQuery Mobile, para servir como exemplo prático da utilização dos temas.

Listagem 1. Código de Exemplo padrão para a aplicação dos temas.

...
Quer ler esse conteúdo completo? Tenha acesso completo