Temas não são um conceito novo. Provavelmente você já lançou alguns usando estilos e classes de Cascading Style Sheet (CSS) para formatar o visual e a sensação dos seus sites. Usando um framework padroniza a abordagem e diminui a quantidade de trabalho e código que precisa ser escrito.

jQuery UI é agora o padrão da indústria para implementação de temas. Existem outras escolhas, tais como Dojo (juntamente com Dijit) ou Ext JS, mas jQuery UI combina temas com o uso de widgets, que são os elementos com os quais os usuários interagem com os coletores de data ou botões. Ao dissecar o funcionamento interno dos arquivos que compõem um tema jQuery UI, o que você encontra nada mais é do que CSS e JavaScript. Mas é o processo de pensamento e padronização que tem sido usado neste uso de CSS e JavaScript que faz do jQuery UI uma plataforma tão excelente para construir o visual e a sensação de um site.

jQuery UI temas

A plataforma jQuery UI consiste em duas sub-estruturas: uma estrutura de widgets, que contém a Widget Factory e um conjunto de widgets comumente usados, e a estrutura CSS. A Widget Factory fornece a base para todos os widgets jQuery UI, incluindo os widgets comuns incluídos no conjunto de widgets. Ao criar widgets, use um dos widgets comuns do conjunto como um ponto de partida ou crie um do zero. Quando você souber onde os widgets comuns estão, abra qualquer um deles no seu editor favorito e veja o código. A partir daí, modifique este código e gere um widget personalizado (usando um dos outros widgets como ponto de partida) ou crie um com uma estrutura similar.

A estrutura de pastas de temas jQuery UI

Antes de continuar a olhar para os vários arquivos e seu conteúdo, baixe um dos temas da plataforma jQuery UI (veja Tópicos relacionados para um link). O arquivo ZIP baixado contém três pastas: css, js, e development-bundle. A pasta development-bundle contém uma pasta chamada temas, que é onde são mantidos os temas da jQuery UI em desenvolvimento. A pasta de temas, por sua vez, contém uma pasta com o nome do tema seleccionado/descarregado (como a leveza da interface de utilizador), bem como uma pasta com o nome de base. Esta pasta contém um ponto de partida para os seus próprios temas. Ela é sempre descarregada, independentemente do tema seleccionado.

A pasta css contém uma pasta com o nome do tema descarregado. Esta pasta de temas contém um ficheiro CSS que incorpora a marcação CSS para todos os componentes ou widgets. A pasta development-bundle, no entanto, também contém uma pasta de temas/pasta (onde está o nome real do tema escolhido) que contém os ficheiros CSS individuais para cada componente ou widget. Esta estrutura torna mais fácil encontrar e modificar as alterações nos seus próprios temas. A figura 1 mostra a estrutura da pasta de temas.

Figure 1. Estrutura da pasta de temas

Ver imagem em tamanho completo

Nem todos os arquivos da pasta estão listados na Figura 1, mas os importantes estão aqui. O arquivo jquery.ui.all.css importa os arquivos jquery.ui.base.css e jquery.ui.theme.css, facilitando a importação dos arquivos usando apenas o arquivo jquery.ui.all.css. O arquivo jquery.ui.base.css importa o arquivo jquery.ui.core.css e todos os outros arquivos componentes e widgets da mesma pasta (não mostrado na Figura 1.). O arquivo jquery.ui.core.css contém classes comuns compartilhadas por todos os arquivos widget. Ele fornece as classes CSS básicas para todos os widgets jQuery UI (dentro do tema), bem como a visibilidade e posicionamento comuns para os widgets. O arquivo final importante é o arquivo jquery.ui.theme.css, que fornece a aparência e comportamento comuns compartilhados por todos os widgets do tema, bem como o próprio tema.

O ficheiro jquery.ui.theme.css tem três tipos diferentes de estilos:

• Container – Este estilo define o tema container, tal como ui-widget, ui-widget-content, ou ui-widget-header.
• States – Este tipo de estilo é usado pelos widgets jQuery UI para definir o aspecto do widget à medida que o utilizador interage com ele. As classes incluem ui-state-default, ui-state-hover, e ui-state-active.
• Cues – Como algo acontece na aplicação (não pela ação do usuário), estas classes mudam a aparência do widget. As classes incluem ui-state-highlight, ui-state-error, e ui-state-disabled.

Widgets comuns

Esta seção olha para o código de exemplo que usa alguns widgets comuns para construir uma aplicação de exemplo. Este exemplo contém um widget deslizante, um botão que abre uma caixa de diálogo, e uma caixa de diálogo que exibe o valor atual do deslizante cada vez que ele é aberto. A Figura 2 fornece um instantâneo da aplicação.

Figure 2. Um exemplo de aplicação usando widgets comuns

Ver imagem em tamanho completo

Listing 1 fornece o arquivo de índice HTML.

Listing 1. Exemplo de aplicação usando widgets comuns

Listing 2 mostra o arquivo JavaScript associado (index.js).

Listing 2. O ficheiro JavaScript associado para a aplicação de exemplo

A configuração inicial ocorre no cabeçalho com o seguinte código:

Após ligação no CSS, os ficheiros JavaScript são incluídos.

Os três widgets desta aplicação são definidos usando instruções <div> para a maior parte (excepto para o botão, que já tem uma tag em HTML). Estes widgets são definidos no seguinte código:

<div style="margin-bottom:10px;"></div><button>Display Value</button><div></div>

Finalmente, retarde a construção real dos widgets no código JavaScript até que a página tenha sido totalmente carregada pelo navegador, como mostrado na Listagem 3.

Lista 3. Construindo os widgets

Cada um dos widgets já mencionados é construído com este código. A caixa de diálogo e o botão são ambos funções atribuídas a eventos específicos. Por exemplo, o evento de clique do botão é dito que ele deve abrir a caixa de diálogo ao ser clicado. Quanto à caixa de diálogo, ela é direcionada para alterar seu texto para indicar o valor atual do controle deslizante, o que ele faz cada vez que é aberta.

Existem duas formas de alterar a aparência de um widget. Você pode passar valores para o construtor, juntamente com quaisquer parâmetros necessários do construtor para o widget. Por exemplo:

$("#dlg_popup").dialog( { autoOpen: false, draggable: true });

Or você pode chamar métodos no widget após ele ter sido criado, como a seguir.

$("#dlg_popup").dialog({ draggable: false });

A maioria dos widgets comuns tem muitas opções associadas que podem ser definidas. Além disso, se você optar por ignorar essas opções, os widgets as definem para valores padrão, permitindo que você defina e altere o que for necessário.

Eventos de widgets

Porque os widgets são fundamentalmente objetos JavaScript, eles podem ser configurados com eventos que disparam durante a vida útil da aplicação do site. Como esses eventos disparam, eles são pegos pelo código JavaScript fornecido pelo seu site ou manipulados dentro dos widgets (o padrão).

Toda implementação de comportamento padrão de widgets é bem documentada pela equipe da jQuery UI para cada widget comum. Você pode injetar seu próprio código, no entanto, para lidar com um ou mais eventos de um widget escolhido. Aqui está um exemplo de código para configurar a recepção de um evento:

$( "#dlg_popup" ).dialog({ drag: function(event, ui) { ... }});

Este exemplo em particular se encaixa no evento drag, que é acionado quando a caixa de diálogo é arrastada. A elipse (…) mostrada no exemplo é onde o código individual pode ser colocado para tratar e implementar o código para o evento.

Métodos de widget

Métodos (como em qualquer linguagem familiar) são associados ao widget e permitem a execução de funcionalidades pré-escritas em um widget em particular para que ele execute uma ação específica. Aqui está um exemplo de como chamar o método de um widget:

$("#dlg_popup").dialog("moveToTop");

Conceitualmente, as opções e métodos são diferentes. Note, no entanto, que o valor de uma opção pode ser alterado ou recuperado usando uma implementação semelhante a um método, como mostrado no exemplo a seguir.

$("#dlg_popup").dialog("option", "autoOpen", false);

Selecionar temas

Código pode ser incluído em arquivos HTML e JavaScript que dão a possibilidade de mudar os temas de forma instantânea usando um menu suspenso. A lista 4 mostra as alterações no código-fonte HTML para fazer tal alteração.

Lista 4. Mudando temas na hora

Listing 5 mostra o código fonte JavaScript.

Listing 5. JavaScript source code for changing themes on the fly

$(document).ready(function(){ $('#switcher').themeswitcher();...});

Figure 3 mostra a aplicação de exemplo após estas alterações.

Figure 3. A aplicação de exemplo após as modificações de código

Veja a imagem em tamanho completo

Execute a página HTML no seu navegador novamente, e veja os resultados. Agora você pode clicar na lista suspensa para mudar o tema. O tema selecionado é baixado em segundo plano, conforme necessário.

Embora a utilização da ferramenta de mudança de tema seja boa para sites não produtivos (para testes e visualização de resultados), não é uma boa ideia para sites de produção. A ferramenta depende de um servidor de terceiros para hospedar os temas, e você não terá certeza dos resultados que o usuário vê.

Já outra maneira de testar os temas jQuery UI é usar a ferramenta ThemeRoller, que está disponível apenas para o Mozilla Firefox (veja tópicos relacionados para um link). Após instalar a ferramenta (como um bookmarklet no Firefox), abra a galeria e selecione os temas para vê-los. Escolha um tema e clique no link para download. Uma vez baixado, extraia a pasta de temas, coloque-a na sua pasta jQuery UI e aponte seus arquivos HTML para ela.

Esta ferramenta é muito mais útil do que simplesmente trocar de temas. Ela também permite que você construa temas personalizados mais facilmente do que se você tivesse que implementá-los manualmente.

Criando temas únicos

Utilizando o site ThemeRoller (que roda nos navegadores mais populares; veja Tópicos relacionados para um link), mudanças podem ser feitas em um tema jQuery existente (como ponto de partida) para criar um tema único. Ao fazê-lo, elimina a necessidade de criar o tema a partir do zero. Isso também significa que não é necessário ter experiência em CSS, e a ferramenta permite que você visualize alterações nos temas e widgets existentes na hora. A Figura 4 mostra o site ThemeRoller (não confundir com o ThemeRoller bookmarklet, que roda no Firefox).

Figure 4. ThemeRoller site

Ver imagem em tamanho real

>

Clicking on the Gallery permite selecionar qualquer um dos temas existentes. Ao fazer isso, você alterna os estilos e imagens CSS que os widgets de amostra usam para refletir a mudança. Clicando no botão Edit associado a um tema leva-o para o separador “Roll Your Own”, onde pode fazer alterações aos estilos CSS associados ao tema. Se não escolher um tema para editar e começar no separador “Roll Your Own” sem tema seleccionado, está simplesmente a construir um tema a partir do zero.

Finalmente, clicando em Download theme download o tema selecionado como um tema personalizado contendo todas as suas modificações de tema. Note que o jQuery UI e os seus temas suportam muitas funcionalidades do CSS3, o que significa que todos os principais navegadores são suportados (excepto para versões anteriores do Windows Internet Explorer).

A aba “Roll Your Own” do ThemeRoller está bem organizada para que você possa encontrar e alterar rapidamente o que está procurando. A aba contém as seguintes seções importantes (entre outras):

• Configurações de fonte – Permite alterações gerais na fonte utilizada ao longo de um tema.
• Raio do canto – Controla o arredondamento (ou falta) de cantos para vários widgets.
• Cabeçalho/Barra de ferramentas – Fornece o aspecto e a sensação dos cabeçalhos utilizados nos vários widgets.
• Conteúdo – Fornece configurações para controlar o corpo principal dos widgets.
• Clicável – Controla vários estados que os widgets usam.

Ao clicar nas opções, você vai notar algumas coisas interessantes sobre a construção destes temas. Por exemplo, os temas jQuery UI tiram partido das texturas. Para vê-los em uso, clique em Header/Toolbar em ThemeRoller. Depois clique no botão colorido no meio. É revelada uma palete pendente que contém padrões a partir dos quais se pode escolher. A textura selecionada é combinada com a sua escolha de cor de fundo para produzir o padrão que os cabeçalhos e barras de ferramentas usam. Isto é apenas um uso de texturas. Existem outras ao longo dos temas jQuery UI. Por exemplo, modifique a textura no “Clickable: default state” para ver como a alteração afecta os botões no tema seleccionado.

Uma característica interessante dos temas jQuery UI é a utilização de destaques e erros (também conhecidos como tacos visuais). O ThemeRoller proporciona um controlo completo sobre a forma como estes sinais visuais são apresentados aos utilizadores. A textura, cor de fundo, cantos de contorno, cor do texto e até mesmo a cor do ícone podem ser alterados (se um ícone for exibido no taco). Os nomes destes estilos são exibidos no ThemeRoller, então simplesmente use estes nomes em seus próprios sites para que estes estilos sejam aplicados conforme necessário ao texto mostrado aos usuários.

Fazer alterações nas várias configurações produz alterações na URL do seu navegador. Listando 6 fornece uma URL como exemplo.

Listando 6. Exemplo ThemeRoller URL

Guardar e mais tarde restaurar esta URL para voltar e fazer mais alterações nas configurações. Por exemplo, copie a URL depois de ter feito modificações e cole-a em algum lugar para mantê-la segura. Agora, feche seu navegador (ou a aba do navegador que contém o site ThemeRoller) e reabra-o usando a URL copiada. Como você pode ver, todas as suas modificações estão de volta, prontas para mais modificações.

Conclusion

Muito mais pode ser dito sobre os internos da jQuery UI, mas você deve ter o básico necessário para começar a experimentar com os temas da jQuery UI. Você já viu a estrutura das pastas e arquivos, o que lhe permitirá modificar um tema. Você pode visualizar ou usar esses arquivos como ponto de partida para criar seus próprios temas quando você estiver pronto.

Este artigo também cobriu o ThemeRoller e as páginas associadas do site que suportam a modificação dos temas existentes, assim como a criação de novos temas a partir do zero. Finalmente, você explorou o processo de salvar e restaurar as modificações de temas no site do ThemeRoller.

Recursos descarregáveis

• PDF deste conteúdo

• plataforma jQuery UI: Baixe o jQuery UI para testar e seguir junto com este artigo e os exemplos que ele fornece.
• ThemeRoller: Confira o site do ThemeRoller, que permite testar temas existentes da plataforma jQuery UI, customizar temas existentes, ou criar temas personalizados.
• developerWorks Web development zone: Encontre artigos cobrindo várias soluções baseadas na web. Veja a biblioteca técnica de desenvolvimento Web para uma ampla gama de artigos técnicos e dicas, tutoriais, padrões e Redbooks IBM.
• Versões de avaliação de produtos IBM: Baixe e ponha suas mãos em ferramentas de desenvolvimento de aplicativos e produtos middleware da DB2, Lotus, Rational, Tivoli e WebSphere.
• developerWorks no Twitter: Junte-se hoje para seguir os tweets developerWorks.