Usando templates, JSTL e Ajax para criar sites
No artigo anterior desta coluna, foram apresentados os recursos do Tiles, originalmente um sub-projeto do Struts, mas hoje um projeto top-level da Apache Software Foundation. Vimos como o Tiles permite separar o layout geral de um site do conteúdo das suas páginas. Vimos também como ele torna possível a construção de páginas JSP com conteúdo gerado por outras páginas ou servlets independentes entre si, formando o que seria uma “página composta”.
Neste artigo colocaremos novamente em prática os recursos do Tiles em um exemplo mais sofisticado, construído sobre a base apresentada no artigo anterior. Mostramos ainda como o Tiles é facilmente conjugado com técnicas de Ajax para criar um site mais dinâmico e interativo.
O exemplo deste artigo é um portal “light”, que pode ter temas e caixas configurados interativamente pelo usuário. O foco aqui será na infra-estrutura do portal e na construção das “caixas”1, ou pequenas regiões modulares do site. O resultado final é um ambiente de portal facilmente reutilizável em diversos tipos de aplicações Java e que pode ser utilizado mesmo pelos adeptos de frameworks diferentes do Struts, por exemplo o JSF. Chamamos este portal de “light” porque não é utilizado um container de Portlets como o Apache Pluto, ou um produto mais pesado como o JBoss Portal ou o Apache Jetspeed.
O Ajax será utilizado na configuração do portal em si, para adicionar ou remover caixas, e para reposicionar as caixas dentro da página inicial. Além disso, uma das caixas fará uso de Ajax para seu conteúdo interno. O mesmo código poderia ser utilizado nas páginas de conteúdo do site.
O exemplo deste artigo utiliza o Struts 1.3.x (mais especificamente, 1.3.8), que ainda é a versão do framework mais utilizada. Também são usadas caixas baseadas em servlets e páginas JSP simples, para reforçar que o portal não exige o uso do Struts como controlador da aplicação. Para execução e testes, pode ser utilizado qualquer container web com suporte a Servlets 2.4 e JSP 2.0 (ou superior), mas nossos testes foram feitos com o Tomcat 5.5 e 6.0. Quando houver necessidade de inserir lógica dentro das páginas JSP do portal (incluindo as páginas utilizadas como caixas) serão utilizadas a EL (Expression Language) do JSP 2.0 e os taglibs do JSTL 1.1.
|
Nota 1: 1 O termo “caixa” é utilizado em vez de “portlet” para evitar confusão com os Portlets defi nidos pela JSR-168.
|
Ajax para criar sites
Mais sobre o portal de exemplo
Iniciamos o artigo apresentando as páginas de exemplo do portal e seus recursos de configuração. Depois apresentamos a estrutura interna do portal e o código que implementa os seus recursos.
Figura 1. Páginas do exemplo Portal Light.
A Figura 1 ilustra o site de exemplo do nosso Portal Light. Ele não é uma aplicação “real”, mas sim um conjunto de páginas que simula a aparência de um site estilo portal – pois o foco deste artigo é na infraestrutura do portal em si. Ainda assim as páginas do site de exemplo usarão alguns macetes que serão úteis especialmente para o iniciante em desenvolvimento web com Java.
As quatro páginas do exemplo mostradas na figura ilustram estilos de página típicos em uma aplicação de portal:
1. A página inicial, que seria a página de Notícias do site, traz uma série de caixas na lateral, contendo informações das mais diversas. Usamos essa página como exemplo da configuração dinâmica de caixas pelo usuário do portal, portanto as caixas em si são simples. O foco aqui é demonstrar como a página inicial poderia ser configurada livremente pelo visitante, para incluir apenas as informações do seu próprio interesse.
2. A segunda página é a página Institucional que contém texto corrido, sem maiores surpresas. Serve para chamar a atenção ao fato de que, em um portal real, há geralmente poucas páginas com “caixas” configuráveis. Na maioria dos casos, apenas a página inicial se beneficia realmente de um alto grau de configurabilidade.
3. A página de Colaboração demonstra como seria a agregação de várias informações diferentes, porém conceitualmente relacionadas. No caso, foi simulado um resumo de recursos de colaboração: próximos compromissos na agenda, incidentes em aberto e mensagens mais recentes de fóruns de discussão.
4. A quarta página, Indicadores, ilustra como inserir em uma mesma página visões diferentes do mesmo conjunto de dados.
Também demonstra como um pouco decriatividade e HTML básico podem gerar efeitos visuais bastante atrativos, como gráficos de barras – isso sem o uso de Flash ou “mágicas” com JavaScript e CSS. Os dados nesta página são provenientes de uma coleção Java, cujo conteúdo é inicializado por um servlet, mas o próprio servlet não “conhece” as três visões que são baseadas na mesma coleção.
No exemplo mostramos páginas típicas de um portal. Um portal real certamente conteria mais páginas, que seriam organizadas como subpáginas de cada seção indicada pelo menu de navegação na parte esquerda.
Customizando o portal
Observe, no canto superior direito das páginas (Figura 1), o link que indica o modo atual do portal. Inicialmente ele está no “Modo de Navegação”, mas um clique muda para o “Modo de Configuração”. Neste segundo modo, surgem novos elementos na página: dois comboboxes, um para mudar o tema e outro para acrescentar caixas. Além disso, as barras de títulos das caixas passam a exibir links adicionais para seu posicionamento, conforme mostra a Figura 2. Um novo clique no link do canto superior direito (que agora indica "Modo de Configuração") retorna o portal para o "Modo de Navegação".
Figura 2. Página inicial do portal no modo de edição. As setas e elipses vermellhas chamam a atenção para as mudanças em relação ao modo de navegação.
O exemplo inclui dois temas para o portal: um tema com menu lateral e em tons de azul, que é o padrão inicial; e um tema com menu no tipo da página, em estilo de “abas”, com cores em tons alaranjados, que pode ser visto na Figura 3. Observe que, no tema com abas, os dois comboboxes estão juntos na lateral direita da página inicial, enquanto que no tema com menu lateral o combo de seleção do tema fica junto ao menu de navegação e o combo de adicionar caixa é posicionado perto das próprias caixas.
Figura 3. Tema “Abas” do exemplo do portal.
O reposicionamento dos comboboxes de configuração e do menu de navegação mostra como os temas podem utilizarlayouts radicalmente diferentes – e não apenas mudar o esquema de cores. Este é um benefício da separação entre estrutura, formatação e conteúdo possibilitado pela junção do Tiles2 e CSS, com páginas JSP.
A configuração das caixas (apenas na página de Notícias) é feita por um combo e links na lateral direita. Cada caixa possui links para sua remoção, ou para movimentá-la para cima e para baixo em relação às caixas vizinhas. O combo no canto superior direito permite acrescentar novas caixas, sendo que o exemplo inclui apenas as três caixas vistas nas figuras, as quais descreveram a seguir:
· “Data de Hoje” é uma caixa gerada por um servlet e exibe a data corrente formatada segundo as configurações regionais do usuário.
· “Recomendamos” é gerada por uma página JSP contendo links para projetos interessantes de software livre para Java.
- “Pesquisa de Opinião”, que é gerada por um Action do Struts e duas páginas JSP de visão, permite que os visitantes votem no seu framework Java preferido. É similar a uma caixa criada no exemplo da edição anterior – mas desta vez é usado Ajax, então não haverá refresh da página quando o usuário votar.
A própria configuração das caixas pelo portal utiliza Ajax: adicionar, remover ou reposicionar as caixas não provoca refresh da página, o que estimula o usuário a experimentar com diferentes configurações.
Independentemente do modo ativo (Navegação ou Configuração) as caixas na lateral direita podem ser “minimizadas” clicando-se o link no canto direito. Isso deixa apenas o título à mostra e esconde o “miolo” da caixa. Um exemplo pode ser visto na Figura 4, onde o tema de abas foi colocado no modo de navegação e então a caixa “Recomendamos” foi minimizada. Esta operação também usa Ajax, o que dá ao usuário grande sensação de interatividade.
Figura 4. Portal com uma caixa minimizada.
Agora que apresentamos a funcionalidade do exemplo, podemos estudar como ele foi construído. Iniciamos pelas páginas de conteúdo, examinando como o portal implementa a configuração de temas. Depois passamos pela configuração das caixas, e por fim vemos como são implementados os recursos Ajax.
Páginas e temas do portal
Como vimos, os recursos de temas do portal utilizam recursos do Tiles e CSS. O Tiles permite a geração de layouts e facilita o posicionamento de menus, títulos e caixas em locais diferentes da página em relação ao seu corpo principal. Já o CSS permite modificar cores, fontes e bordas, enfim, o aspecto visual de cada elemento lógico do portal. Iremos nos aprofundar apenas na geração do layout, pois o código CSS é em sua maioria auto-explicativo.
As quatro páginas do portal não têm qualquer “conhecimento” de como o portal funciona internamente, exceto por uns poucos tags do Tiles, que referenciam os templates padrões do site. Estes templates são fornecidos por definições do Tiles, as quais esperam receber como atributos o título e o corpo da página. A Listagem 1 mostra a página Institucional do site, junto com o arquivo de configuração do Tiles. Note que o código JSP da página é completamente independente do tema selecionado ou das caixas configuradas.
Listagem 1. Página Institucional do portal (exemplo.jsp) e o arquivo de configuração do Tiles (tiles-defs.xml).
/institucional/exemplo.jsp
<%@ page contentType=”text/html; charset=utf-8” pageEncoding=”utf-8”%>
<%@ taglib uri=”http://java.sun.com/jsp/jstl/core” prefix=”c” %>
<%@ taglib uri=”http://struts.apache.org/tags-tiles-el” prefix=”tiles” %>
<tiles:insert definition=”pagina_comum”>
<tiles:put name=”titulo” type=”string”>
Seção Institucional do Portal Light
</tiles:put>
<tiles:put name=”corpo” type=”string”>
<p>
A <strong>Java Magazine</strong> é a melhor revista sobre Java não só no
Brasil mas em todo mundo! ;-)
<p>
Em um portal real, não haverá repetição das caixas em todas as páginas,
embora portais maiores possam ter “subportais”, com suas próprias páginas
iniciais agregando conjuntos de caixas diferentes da home-page do site.
</tiles:put>
</tiles:insert>
/WEB-INF/tiles-defs.xml
<?xml version=”1.0” encoding=”UTF-8”?>
<!DOCTYPE tiles-definitions PUBLIC
“-//Apache Software Foundation//DTD Tiles Configuration 1.3//EN”
“http://struts.apache.org/dtds/tiles-config_1_3.dtd”>
<tiles-definitions>
<definition name=”pagina_inicial” extends=”portal_tema”>
<putList name=”menu”>
<item value=”Notícias” link=”/noticias/ultimas.jsp”/>
<item value=”Institucional” link=”/institucional/exemplo.jsp”/>
<item value=”Colaboração” link=”/colaboracao/sumario.jsp”/>
<item value=”Indicadores” link=”/indicadores/vendas”/>
</putList>
</definition>
<definition name=”pagina_comum” extends=”pagina_inicial”>
<put name=”tem_painel” value=”false”/>
</definition>
</tiles-definitions>
O arquivo de configuração do Tiles contémapenas duas definições: uma para a página inicial, que inicializa uma lista com os links do menu de navegação, e outra que sobrepõe o valor padrão do atributo tem_painel, para que a página não exiba as caixas na lateral direita. Todas as páginas do site deverão inserir uma dessas duas definições: pagina_inicial ou pagina_comum.
...
