1/

Padrões de Projeto em Aplicações Web

Desenvolvendo projetos web consistentes baseados em reuso de
soluções
Adote as melhores práticas de reuso de soluções com a abordagem de Padrões de
Projeto (Design Patterns) no desenvolvimento de aplicações web.

CLÁUDIO MARTINS

De que se trata o artigo:

Este artigo apresenta a abordagem de padrões de projeto (design patterns) no contexto do
desenvolvimento de aplicações web, e a importância da documentação e organização dos padrões em
catálogos on-line.
Para que serve:
Ajudam os projetistas e desenvolvedor a tomar decisões por melhores soluções para problemas que
recorrentemente ocorre nos projeto de aplicações, em especial as disponibilizadas na web.
Em que situação o tema é útil:
A adoção de padrões, organizados em catálogos, ajuda a manter a consistência e coerência dos
projetos, além da qualidade que se obtém na arquitetura do software. Por facilitar a comunicação pelo
uso de uma linguagem comum, essa abordagem é indicada para organizações que desenvolvam grandes
projetos, possuam grandes e médias equipes ou que estejam distribuídas geograficamente.
Resumo DevMan:
Padrões de Projeto é uma técnica de reuso de software que oferece benefícios práticos no
desenvolvimento de aplicações web, tais como prover soluções de projeto de forma consistente, orientar
equipes de desenvolvimento com diretrizes e boas práticas, melhorar o processo de comunicação com a
adoção de uma linguagem comum de padrões, entre outros.

Padrões de projeto são boas soluções aplicadas a boa parte de problemas comuns em um determinado
contexto. É uma abordagem para o desenvolvimento de software baseado no reuso de idéias e soluções
genéricas, mas que devem ser contextualizadas para problemas específicos.
As principais características são: (a) criam uma linguagem compreendida por todos; (b) facilitam a
mentalização da solução; e, (c) são propostas em alto nível (sem detalhes de implementação) para
problemas recorrentes.
Apesar de terem sido criados inicialmente para solucionar problemas encontrados em projeto (design)
de software orientado a objetos, o conceito se estendeu para outras preocupações da Engenharia de
Software. Há padrões identificados para a análise de negócio, para transformação de código
(refatoração), para projeto de banco de dados, para interfaces web, enfim, onde é possível identificar e
catalogar boas soluções que são frequentemente aplicados, haverá padrões de projeto.
Este artigo apresenta a abordagem de padrões de projeto no contexto do desenvolvimento de aplicações
web, e discute a importância de se documentar e organizar os padrões em catálogos, ação que promove a
sistematização dessa abordagem em um processo de construção de aplicações web.
2

Definição
Os padrões de projeto surgiram de um conceito criado pelo arquiteto Christopher Alexander, em sua
obra "The Timeless Way of Building", de 1979. O autor propôs que cada padrão é uma regra com três
partes, que expressa a relação entre contexto, problema e solução.

Cada padrão é um relacionamento entre um certo contexto, um certo sistema de forças que ocorre repetidamente
nesse contexto (problema), e uma certa configuração (solução) que permite que essas forças se resolvam.

Essas três partes, além do próprio nome do padrão, formam a essência da documentação de um padrão:
a) O Contexto: se refere ao conjunto de situações que se repetem, nas quais o padrão de projeto pode
ser aplicado;
b) O Problema: que trata do conjunto de "forças" – objetivos e limitações – que ocorrem dentro do
contexto;
c) A Solução: que é uma estrutura formal para ser aplicada na resolução do problema.
A primeira iniciativa em aplicar padrões no desenvolvimento de software veio com a publicação do
livro de Erich Gamma e três colaboradores (Helm, Johnson e Vlissides), intitulado "Design Patterns:
Elements of Reusable Object-Oriented Software" (1995), onde os autores identificaram 23 padrões para
projeto orientado a objetos. Esses padrões formam a base para a maiorias dos padrões que tratam de
problemas em projetos dessa natureza, como o catálogo de padrões Blueprints, também chamados de
Core J2EE Patterns.

Catálogos de Padrões
A importância de padrões de projeto aumenta quando os padrões são documentados em um repositório
ou biblioteca, também denominados catálogos. A adoção de catálogos de padrões é uma forma efetiva de
documentar e compartilhar soluções para problemas recorrentes de projeto, facilitando o reuso dessas
soluções e ajudando a manter certa consistência no projeto. Além disso, melhoram a eficiência do
processo de desenvolvimento e aumentam a produtividade dos designers por reduzir o retrabalho de
pesquisa de boas soluções, minimizando a prática da "reinvenção da roda".
Embora padrões sejam soluções de projeto independente de questões de implementação, há muitos
benefícios para equipes de desenvolvimento pelo uso de componentes de software que suportem e
instanciam padrões de projeto. Depois que um padrão é escolhido, equipes podem reutilizar e adaptar os
componentes e trechos de código (como templates) para implementar um determinado padrão
selecionado, reduzindo o tempo gasto no desenvolvimento de aplicações web. A eficiência de reuso é
melhor obtida quando um catálogo permite relacionar os padrões (por dependência) e identificam quais
componentes incorporam esses padrões de projeto. Por exemplo, a implementação do padrão Front
Controller pode necessitar do padrão Command, dessa forma o desenvolvedor terá mais facilidade em
construir o código a partir do momento que conhece todos os padrões envolvidos na solução.
A maior dificuldade em catalogar um padrão é saber realmente se o padrão é um “padrão de fato”. Há
uma discussão entre especialistas no tema em identificar o que é padrão e o que é antipadrão (aquele que
parece ser uma boa solução mas conduz a práticas improdutivas e ineficientes). Um exemplo em
aplicações web é o padrão “Tela de Splash”, aquela página “pop-up” que abre automaticamente no início
de uma homepage; para alguns autores é considerado um antipadrão, pois contraria a heurística de
prover feedback ao usuário ou de antecipar sobre o que pode ocorrer na aplicação.

Outra dificuldade encontrada para adoção de padrões de projeto e uso de catálogos é o pouco consenso em definir
o que é um padrão, estabelecer um nome e os limites do seu contexto (para o qual ele foi definido). Muitos padrões
são semelhantes entre si, mas possuem denominações diferentes, dependendo de quem documentou e registrou;
atuam em contextos complexos que dificultam a sua aplicabilidade. Um bom padrão é aquele que, a partir do seu
nome, qualquer desenvolvedor consiga entender e aplicar.
 3/

Mesmo com todas as dificuldades em adotar catálogos de padrões, o seu emprego deve ser encorajado
em organizações que desenvolvam grandes projetos, possuam equipes com muitos membros, ou que
seus membros estejam distribuídos geograficamente. Um catálogo ajuda a manter a consistência e
coerência no projeto, além da consequente qualidade que se obtém na arquitetura do software.
Na web encontramos alguns catálogos de padrões de projeto, em destaque há uma prevalência por
catálogos de padrões para tratar problemas de interface, interação e navegação em aplicações web.
Exemplos como Welie.com e UI-patterns.com, mantidos pela comunidade de designers; o do livro de
Jennifer Tidwell (2010) denominado "Designing Interfaces: Patterns para Design de Interação Efetiva".
Outro catálogo de relevância é o Yahoo! Design Pattern Library, um catálogo de padrões web com
mais de 50 padrões documentados e organizados em categorias (ver Figura 1).

Figura 1. Site do catálogo de padrões do Yahoo!

Padrões de Projeto em Aplicações Web

Quando se trata de padrões de projeto para aplicações web há, em geral, três dimensões ou
preocupações que devem ser consideradas:
a) Voltados para o design de interface ou visual: são os padrões mais “visíveis”, aqueles que
trabalham a visualização dos sistemas na web, focando a apresentação e formatação do conteúdo.
b) Voltados para interação e navegação: dizem respeito à dinâmica da interação do usuário com a
aplicação, ponto crucial para o sucesso da aplicação web
c) Voltados para a arquitetura de construção: são os padrões que fornecem a infraestrutura para
desenvolvimento do software da aplicação web, que tratam desde a modelagem e organização dos
componentes de software, até o projeto (design) da solução.
4

A classificação dos padrões é uma decisão de quem mantém o catálogo de padrões, não
necessariamente segue a mesma classificação listada aqui. Para exemplificar, o Yahoo organiza o seu
catálogo em cinco grandes categorias de padrões: Layout, Navegação, Seleção, Interação Rica e Design
Social, cada uma está dividida em coleções especializadas. O mesmo ocorre com outros catálogos
online, como o Welie, que organiza o seu catálogo em: Necessidade do Usuário (padrões que atendam a
uma necessidade direta do usuário), Necessidades de aplicação (padrões que ajudam a aplicação, ou o
designer, se comunicar melhor com o usuário), e Contexto do design (diz respeito a padrões de
estruturação do conteúdo e do projeto do site).
Para exemplificar alguns dos padrões para aplicações web, este artigo apresenta dois padrões JEE
(Front Controller e Command), e dois de interação e apresentação visual (Paginação e Carrinho de
Compras). Para efeito de demonstração do formato de documentação, recomendado para registro em um
catálogo, adotamos o formato mínimo para o primeiro padrão (Front Controller); nos padrões seguintes
adotamos uma apresentação mais livre de formalismo.

Padrão "Front Controller"

O objetivo do Front Controller é centralizar o processamento de requisições em uma única fachada.
Front Controller permite criar uma interface genérica para processamento de comandos.

Problema

Deseja-se um ponto de acesso centralizado para processamento de todas as requisições recebidas pela
camada de apresentação para: (a) controlar a navegação entre os objetos de visão; (b) remover
duplicação de código; e, (c) estabelecer responsabilidades mais definidas para cada objeto, facilitando
manutenção e extensão.
O acesso de páginas clientes sem passar por um mecanismo centralizado, pode dificultar o controle de
navegação e segurança da aplicação, pois uma página pode ser aberta por alguém que não deveria ter
acesso. Outro problema recorrente em aplicações desse tipo é o existência de código de controle
duplicado e misturado ao código de apresentação.

Solução

O Controlador é ponto de acesso para processamento de requisições: chama serviços de segurança

(autenticação e autorização), delega processamento à camadas de negócio, define uma visão apropriada,
realiza tratamento de erros, define estratégias de geração de conteúdo.
A Figura 1 mostra dois cenários possíveis para um Front Controller. No cenário "a", o controlador
utiliza um objeto Dispatcher (despachante), solução que é usada para redirecionar /repassar para a
página de resposta correspondente, como no exemplo (usando Servlet) visto na Listagem 1.

Listagem 1. Solução de Front Controller usando Servlet

@WebServlet(name = "FrontController", urlPatterns = {"/FrontController "})
public class FrontController extends HttpServlet {

protected void processRequest(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {
// .... código
// despacho para a página de resposta
request.getRequestDispatcher("clienteResposta.jsp").forward(request, response);
}

No cenário "b" (Figura 2), o Front Controller delega processamento a um objeto de apoio (Helper).
Nessa solução, pode-se aplicar padrões como Command, Value Beans, e outros onde a competência
para realizar a operação é decidida.
 5/

Figura 2. Dois cenários para um Front Controller

Padrão "Command"
O padrão Command separa o mecanismo que trata a solicitação (request) do serviço que realiza a
tarefa a ser executada.
Command (no contexto de aplicações web) é uma adaptação do padrão de Gamma et al. (1995) como
estratégia de implementação do Front Controller. É um padrão que pode ser implementado em
aplicações web na forma mais simples, até à mais elaborada. Para aplicações que adotam Servlets, por
exemplo, uma solução simples é tratar o comando que vem na solicitação, enviado com parâmetro na
solicitação, normalmente chamado de action ou comando. Esse parâmetro que informa a ação do
comando contém um de vários valores das tarefas a serem executados na aplicação. O servlet de controle
recupera o valor da ação como parâmetro da solicitação, e determina qual a lógica de negócio deve ser
executado pelo objeto Command . A definição desse padrão no catálogo JEE de padrões é realizada pelo
padrão "Service to Worker". A Figura 3 mostra um exemplo simplificado de Command para uma
calculadora que deve executar operações para somar, subtrair, multiplicar e dividir dois números. O
código dessa solução é visto na Listagem 2 (a interface de Command) e na Listagem 3 é mostrada as
classes controladora e de implementação do Command.

Figura 3. Exemplo do padrão Command usando servlet

6

Listagem 2. Interface Command

public interface Command {
public String execute () ;
}

Listagem 3.Implementação de Command e o Controlador

public class RequestHelperCommand implements Command {
private HttpServletRequest request;
private HttpServletResponse response;

public RequestHelperCommand(HttpServletRequest request, HttpServletResponse response) {

this.request = request;
this.response = response;
}

@Override
public String execute() {
// tratar a requisicao
float n1 = Float.parseFloat(this.getRequest().getParameter("n1"));
float n2 = Float.parseFloat(this.getRequest().getParameter("n2"));
String acao = this.getRequest().getParameter("acao");
float result = 0;
if (acao.equalsIgnoreCase("SOMAR")) {
result = n1 + n2;
}
if (acao.equalsIgnoreCase("SUBTRAIR")) {
result = n1 - n2;
}
// outras ações

// retornar página de resposta

return "calcform.jsp?resposta=" + result + "&n1=" + n1 + "&n2=" + n2;
}

// gets e set´s
} // Fim da classe

// Classe controladora
@WebServlet(name = "ControladorCalc", urlPatterns = {"/ControladorCalc"})
public class ControladorCalc extends HttpServlet {
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

// o objeto helper ajuda a obter os parametros e processar o request

RequestHelperCommand helper = new RequestHelperCommand(request, response);

// delega o processamento o metodo de execucao do helper

String paginaResposta = helper.execute();

// redireciona a página de resposta

request.getRequestDispatcher(paginaResposta).forward(request, response);
}
} // fim da classe controladora

Padrão "Paginação"
Paginação é um padrão para projeto de interação de interface com usuário. É indicado quando o
usuário necessita visualizar um subconjunto de dados que não serão fáceis de mostrar dentro de uma
única página. Esse problema é solucionado com a adição de um mecanismo de paginação, normalmente
uma barra que permite navegar entre as páginas que são geradas como resultado da paginação. Um
exemplo bem conhecido é a lista de resultados de uma pesquisa do Google, como é visto na Figura 4.
 7/

Note que a solução deve prover meios para: a) quebrar a lista de itens em uma seqüência de páginas; b)
fornecer links para acessar tanto as páginas anteriores, quanto as próximas em relação à página que está
sendo exibida; c) fornecer links para saltar para a primeira e última páginas do conjunto; d) destacar qual
o número da página que o usuário está navegando.

Figura 4. Exemplo do padrão "Paginação" na barra de resultados do Google

A instanciação do padrão Paginação, quando se desenvolve aplicações web com Java Server Faces
(JSF), quase sempre é resolvido com o uso de componentes baseados em tag library. Um exemplo é o
componente dataScroller do RichFaces, como pode ser visto na Listagem 4 e renderizado como na
Figura 5. Neste exemplo, um conjunto de dados é tabulado a partir da coleção registrada no bean
gerenciado (cidadeMB.cidades), o componente <rich:dataScroller> trabalha em colaboração com o
componente <rich:dataTable>, onde se especifica o número máximo de itens a serem exibidos em cada
paginação (rows="4").

Listagem 4.Exemplo de código JSF do componente dataTable do Richfaces

<rich:dataTable value="#{cidadeMB.cidades}" var="cid" rows="4">
<rich:column>
<f:facet name="header">
<h:outputText value="CIDADE" />
</f:facet>
<h:outputText value="#{cid.nome}"/>
</rich:column>

<rich:column>
<f:facet name="header">
<h:outputText value="FRETE" />
</f:facet>
<h:outputText value="#{cid.valorFrete}"/>
</rich:column>

<f:facet name="footer">
<rich:dataScroller renderIfSinglePage="true" />
</f:facet>
</rich:dataTable>

Figura 5. Exemplo do componente "Paginação" usando Richfaces

8

Padrão "Carrinho de Compras"

Um padrão bastante adotado em aplicações de comércio eletrônico é o "Carrinho de Compras". O
padrão permite que clientes comprem produtos em uma loja virtual, utilizando a metáfora do “carrinho
de compras”, onde o cliente pode selecionar os produtos antes de realizar o pagamento.
De uma forma geral, o padrão fornece funcionalidades com as vistas na Figura 6. Neste exemplo,
identificamos as principais operações que serão codificadas em métodos como adicionar produto,
remover produto e finalizarCompra, que é demonstrado na solução de uma classe Java do tipo Managed
Bean (JSF), CarrinhoBean, como mostra a Listagem 5; a Listagem 6 mostra a classe Produto.
Para implementar esse padrão é necessário atentar para dois requisitos da aplicação. Primeiro, uma
instância da classe CarrinhoBean não deve atender vários clientes para não misturar produtos
escolhidos por clientes diferentes, solução fornecida pela anotação @SessionScoped. Segundo, os
produtos adicionados devem ser mantidos entre as chamadas dos métodos da classe CarrinhoBean. Em
outras palavras, é necessário manter o estado do carrinho representado por uma estrutura de dados do
tipo coleção ou lista. A solução, neste caso, é utilizar no código o objeto de coleção "produtos"
(Set<Produto> produtos), que mantém o estado da lista de produtos adicionados no carrinho.

Figura 6. Página com a metáfora do padrão "Carrinho de Compras"

Listagem 5.Exemplo de código JSF do componente dataTable do Richfaces

@ManagedBean
@SessionScoped
public class CarrinhoBean {
private Set<Produto> produtos = new HashSet<Produto>();

public CarrinhoBean() { }

public void adicionar(Produto produto) {

this.produtos.add(produto);
}

public void excluir(Produto produto) {

this.produtos.remove(produto);
}

public void finalizarCompra() {

// código para finalizar a compra.
}
// gets e set´s
}

Listagem 6.Código da classe Produto

public class Produto {
private String nome;
private int quantidade;
private float preçoUnid ;
private float preçoTotal;
// gets e set´s
 9/

Conclusões
Padrões de Projeto é uma técnica de reuso de software que oferece benefícios práticos no
desenvolvimento de aplicações web, tais como prover soluções de projeto de forma consistente, orientar
equipes de desenvolvimento com diretrizes e boas práticas, melhorar o processo de comunicação com a
adoção de uma linguagem comum de padrões, entre outros. Entretanto, para atingir esses benefícios é
importante que os padrões de projetos estejam documentados e disponíveis em um formato que promova
o reuso. Várias coleções de padrões estão documentadas e disponíveis na Web, normalmente em forma
de bibliotecas ou catálogos, como é o caso de Welie (http://www.welie.com) e Yahoo! Design Pattern
Library (http://developer.yahoo.com/patterns/).
Apesar da popularidade de padrões e dos catálogos de padrões, atualmente não há um consenso em
como os padrões deveriam ser documentados, mantidos e compartilhados por todos. Contudo, é inegável
a importância de utilizar padrões de projeto para orientar as decisões por melhores soluções para
problemas que recorrentemente ocorre nos projeto de aplicações, em especial as disponibilizadas na
web.

Links
http://developer.yahoo.com/ypatterns/
Catálogo do Yahoo! Design Pattern Library

http://www.welie.com/
Catálogo com mais de 130 padrões de interação web.

http://ui-patterns.com/
Catálogo com 58 padrões de projeto de interface web, agrupados em cinco categorias.

http://java.sun.com/blueprints/corej2eepatterns/index.html
Catálogo dos padrões JEE (Blueprints, Core J2EE Patterns)

Livros (opcional)
Padrões de Projeto: Soluções Reutilizáveis de Software Orientado a Objetos; Gamma, Helm, Johnson e
Vlissides; Artmed, 2000.
Primeiro livro a abordar o assunto, apresenta um catálogo com 23 padrões para solucionar problemas de design orientado a
objetos.

Core J2EE Patterns, 3a. Edição; Alur, Crupi; Campus/Elsevier, 2004.

Apresenta um catálogo com 21 padrões com as melhores práticas, estratégias de design e soluções para as principais
tecnologias JEE.

Web Application Design Patterns (Interactive Technologies); Pawan Vora; Morgan Kaufmann Publishers,
2009.
Apresenta uma coleção com mais de cem padrões documentados para design de aplicações web.

Designing Web interfaces; Bill Scott,Theresa Neil; O'Reilly, 2009.

Apresenta mais de 75 padrões de projeto para construção de interfaces web.
10

Cláudio Martins (claudiomartins2000@gmail.com) é Mestre em Computação pela UFRGS, professor do Instituto Federal do Pará (IFPA)
e analista de sistema da Companhia de Informática de Belém (Cinbesa). Trabalha há dez anos com a plataforma Java.