1/

Padres de Projeto em Aplicaes Web

Desenvolvendo projetos web consistentes baseados em reuso de
solues
Adote as melhores prticas de reuso de solues com a abordagem de Padres de
Projeto (Design Patterns) no desenvolvimento de aplicaes web.
CLUDIO MARTINS

De que se trata o artigo:
Este artigo apresenta a abordagem de padres de projeto (design patterns) no contexto do
desenvolvimento de aplicaes web, e a importncia da documentao e organizao dos padres em
catlogos on-line.
Para que serve:
Ajudam os projetistas e desenvolvedor a tomar decises por melhores solues para problemas que
recorrentemente ocorre nos projeto de aplicaes, em especial as disponibilizadas na web.
Em que situao o tema til:
A adoo de padres, organizados em catlogos, ajuda a manter a consistncia e coerncia dos
projetos, alm da qualidade que se obtm na arquitetura do software. Por facilitar a comunicao pelo
uso de uma linguagem comum, essa abordagem indicada para organizaes que desenvolvam grandes
projetos, possuam grandes e mdias equipes ou que estejam distribudas geograficamente.
Resumo DevMan:
Padres de Projeto uma tcnica de reuso de software que oferece benefcios prticos no
desenvolvimento de aplicaes web, tais como prover solues de projeto de forma consistente, orientar
equipes de desenvolvimento com diretrizes e boas prticas, melhorar o processo de comunicao com a
adoo de uma linguagem comum de padres, entre outros.

Padres de projeto so boas solues aplicadas a boa parte de problemas comuns em um determinado
contexto. uma abordagem para o desenvolvimento de software baseado no reuso de idias e solues
genricas, mas que devem ser contextualizadas para problemas especficos.
As principais caractersticas so: (a) criam uma linguagem compreendida por todos; (b) facilitam a
mentalizao da soluo; e, (c) so propostas em alto nvel (sem detalhes de implementao) 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 preocupaes da Engenharia de
Software. H padres identificados para a anlise de negcio, para transformao de cdigo
(refatorao), para projeto de banco de dados, para interfaces web, enfim, onde possvel identificar e
catalogar boas solues que so frequentemente aplicados, haver padres de projeto.
Este artigo apresenta a abordagem de padres de projeto no contexto do desenvolvimento de aplicaes
web, e discute a importncia de se documentar e organizar os padres em catlogos, ao que promove a
sistematizao dessa abordagem em um processo de construo de aplicaes web.
2

Definio
Os padres de projeto surgiram de um conceito criado pelo arquiteto Christopher Alexander, em sua
obra "The Timeless Way of Building", de 1979. O autor props que cada padro uma regra com trs
partes, que expressa a relao entre contexto, problema e soluo.
Cada padro um relacionamento entre um certo contexto, um certo sistema de foras que ocorre repetidamente
nesse contexto (problema), e uma certa configurao (soluo) que permite que essas foras se resolvam.
Essas trs partes, alm do prprio nome do padro, formam a essncia da documentao de um padro:
a) O Contexto: se refere ao conjunto de situaes que se repetem, nas quais o padro de projeto pode
ser aplicado;
b) O Problema: que trata do conjunto de "foras" objetivos e limitaes que ocorrem dentro do
contexto;
c) A Soluo: que uma estrutura formal para ser aplicada na resoluo do problema.
A primeira iniciativa em aplicar padres no desenvolvimento de software veio com a publicao do
livro de Erich Gamma e trs colaboradores (Helm, Johnson e Vlissides), intitulado "Design Patterns:
Elements of Reusable Object-Oriented Software" (1995), onde os autores identificaram 23 padres para
projeto orientado a objetos. Esses padres formam a base para a maiorias dos padres que tratam de
problemas em projetos dessa natureza, como o catlogo de padres Blueprints, tambm chamados de
Core J2EE Patterns.
Catlogos de Padres
A importncia de padres de projeto aumenta quando os padres so documentados em um repositrio
ou biblioteca, tambm denominados catlogos. A adoo de catlogos de padres uma forma efetiva de
documentar e compartilhar solues para problemas recorrentes de projeto, facilitando o reuso dessas
solues e ajudando a manter certa consistncia no projeto. Alm disso, melhoram a eficincia do
processo de desenvolvimento e aumentam a produtividade dos designers por reduzir o retrabalho de
pesquisa de boas solues, minimizando a prtica da "reinveno da roda".
Embora padres sejam solues de projeto independente de questes de implementao, h muitos
benefcios para equipes de desenvolvimento pelo uso de componentes de software que suportem e
instanciam padres de projeto. Depois que um padro escolhido, equipes podem reutilizar e adaptar os
componentes e trechos de cdigo (como templates) para implementar um determinado padro
selecionado, reduzindo o tempo gasto no desenvolvimento de aplicaes web. A eficincia de reuso
melhor obtida quando um catlogo permite relacionar os padres (por dependncia) e identificam quais
componentes incorporam esses padres de projeto. Por exemplo, a implementao do padro Front
Controller pode necessitar do padro Command, dessa forma o desenvolvedor ter mais facilidade em
construir o cdigo a partir do momento que conhece todos os padres envolvidos na soluo.
A maior dificuldade em catalogar um padro saber realmente se o padro um padro de fato. H
uma discusso entre especialistas no tema em identificar o que padro e o que antipadro (aquele que
parece ser uma boa soluo mas conduz a prticas improdutivas e ineficientes). Um exemplo em
aplicaes web o padro Tela de Splash, aquela pgina pop-up que abre automaticamente no incio
de uma homepage; para alguns autores considerado um antipadro, pois contraria a heurstica de
prover feedback ao usurio ou de antecipar sobre o que pode ocorrer na aplicao.

Outra dificuldade encontrada para adoo de padres de proeto e uso de cat!logos o pouco consenso em definir
o que um padro, estabelecer um nome e os limites do seu contexto (para o qual ele foi definido). "uitos padres
so semel#antes entre si, mas possuem denominaes diferentes, dependendo de quem documentou e registrou$
atuam em contextos complexos que dificultam a sua aplicabilidade. %m bom padro aquele que, a partir do seu
nome, qualquer desenvolvedor consiga entender e aplicar.



3/
Mesmo com todas as dificuldades em adotar catlogos de padres, o seu emprego deve ser encorajado
em organizaes que desenvolvam grandes projetos, possuam equipes com muitos membros, ou que
seus membros estejam distribudos geograficamente. Um catlogo ajuda a manter a consistncia e
coerncia no projeto, alm da consequente qualidade que se obtm na arquitetura do software.
Na web encontramos alguns catlogos de padres de projeto, em destaque h uma prevalncia por
catlogos de padres para tratar problemas de interface, interao e navegao em aplicaes 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 Interao Efetiva".
Outro catlogo de relevncia o Yahoo! Design Pattern Library, um catlogo de padres web com
mais de 50 padres documentados e organizados em categorias (ver Figura 1).


Figura 1. Site do catlogo de padres do Yahoo!

Padres de Projeto em Aplicaes Web
Quando se trata de padres de projeto para aplicaes web h, em geral, trs dimenses ou
preocupaes que devem ser consideradas:
a) Voltados para o design de interface ou visual: so os padres mais visveis, aqueles que
trabalham a visualizao dos sistemas na web, focando a apresentao e formatao do contedo.
b) Voltados para interao e navegao: dizem respeito dinmica da interao do usurio com a
aplicao, ponto crucial para o sucesso da aplicao web
c) Voltados para a arquitetura de construo: so os padres que fornecem a infraestrutura para
desenvolvimento do software da aplicao web, que tratam desde a modelagem e organizao dos
componentes de software, at o projeto (design) da soluo.
4

A classificao dos padres uma deciso de quem mantm o catlogo de padres, no
necessariamente segue a mesma classificao listada aqui. Para exemplificar, o Yahoo organiza o seu
catlogo em cinco grandes categorias de padres: Layout, Navegao, Seleo, Interao Rica e Design
Social, cada uma est dividida em colees especializadas. O mesmo ocorre com outros catlogos
online, como o Welie, que organiza o seu catlogo em: Necessidade do Usurio (padres que atendam a
uma necessidade direta do usurio), Necessidades de aplicao (padres que ajudam a aplicao, ou o
designer, se comunicar melhor com o usurio), e Contexto do design (diz respeito a padres de
estruturao do contedo e do projeto do site).
Para exemplificar alguns dos padres para aplicaes web, este artigo apresenta dois padres JEE
(Front Controller e Command), e dois de interao e apresentao visual (Paginao e Carrinho de
Compras). Para efeito de demonstrao do formato de documentao, recomendado para registro em um
catlogo, adotamos o formato mnimo para o primeiro padro (Front Controller); nos padres seguintes
adotamos uma apresentao mais livre de formalismo.

Padro "Front Controller"
O objetivo do Front Controller centralizar o processamento de requisies em uma nica fachada.
Front Controller permite criar uma interface genrica para processamento de comandos.

Problema
Deseja-se um ponto de acesso centralizado para processamento de todas as requisies recebidas pela
camada de apresentao para: (a) controlar a navegao entre os objetos de viso; (b) remover
duplicao de cdigo; e, (c) estabelecer responsabilidades mais definidas para cada objeto, facilitando
manuteno e extenso.
O acesso de pginas clientes sem passar por um mecanismo centralizado, pode dificultar o controle de
navegao e segurana da aplicao, pois uma pgina pode ser aberta por algum que no deveria ter
acesso. Outro problema recorrente em aplicaes desse tipo o existncia de cdigo de controle
duplicado e misturado ao cdigo de apresentao.

Soluo
O Controlador ponto de acesso para processamento de requisies: chama servios de segurana
(autenticao e autorizao), delega processamento camadas de negcio, define uma viso apropriada,
realiza tratamento de erros, define estratgias de gerao de contedo.
A Figura 1 mostra dois cenrios possveis para um Front Controller. No cenrio "a", o controlador
utiliza um objeto Dispatcher (despachante), soluo que usada para redirecionar /repassar para a
pgina de resposta correspondente, como no exemplo (usando Servlet) visto na Listagem 1.

Listagem 1. Soluo 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 {
// .... cdigo
// despacho para a pgina de resposta
request.getRequestDispatcher("clienteResposta.jsp").forward(request, response);
}

No cenrio "b" (Figura 2), o Front Controller delega processamento a um objeto de apoio (Helper).
Nessa soluo, pode-se aplicar padres como Command, Value Beans, e outros onde a competncia
para realizar a operao decidida.




5/

Figura 2. Dois cenrios para um Front Controller

Padro "Command"
O padro Command separa o mecanismo que trata a solicitao (request) do servio que realiza a
tarefa a ser executada.
Command (no contexto de aplicaes web) uma adaptao do padro de Gamma et al. (1995) como
estratgia de implementao do Front Controller. um padro que pode ser implementado em
aplicaes web na forma mais simples, at mais elaborada. Para aplicaes que adotam Servlets, por
exemplo, uma soluo simples tratar o comando que vem na solicitao, enviado com parmetro na
solicitao, normalmente chamado de action ou comando. Esse parmetro que informa a ao do
comando contm um de vrios valores das tarefas a serem executados na aplicao. O servlet de controle
recupera o valor da ao como parmetro da solicitao, e determina qual a lgica de negcio deve ser
executado pelo objeto Command . A definio desse padro no catlogo JEE de padres realizada pelo
padro "Service to Worker". A Figura 3 mostra um exemplo simplificado de Command para uma
calculadora que deve executar operaes para somar, subtrair, multiplicar e dividir dois nmeros. O
cdigo dessa soluo visto na Listagem 2 (a interface de Command) e na Listagem 3 mostrada as
classes controladora e de implementao do Command.


Figura 3. Exemplo do padro Command usando servlet

6

Listagem 2. Interface Command
public interface Command {
public String execute () ;
}

Listagem 3.Implementao 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 aes

// retornar pgina de resposta
return "calcform.jsp?resposta=" + result + "&n1=" + n1 + "&n2=" + n2;
}

// gets e sets
} // 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 pgina de resposta
request.getRequestDispatcher(paginaResposta).forward(request, response);
}
} // fim da classe controladora


Padro "Paginao"
Paginao um padro para projeto de interao de interface com usurio. indicado quando o
usurio necessita visualizar um subconjunto de dados que no sero fceis de mostrar dentro de uma
nica pgina. Esse problema solucionado com a adio de um mecanismo de paginao, normalmente
uma barra que permite navegar entre as pginas que so geradas como resultado da paginao. Um
exemplo bem conhecido a lista de resultados de uma pesquisa do Google, como visto na Figura 4.



7/
Note que a soluo deve prover meios para: a) quebrar a lista de itens em uma seqncia de pginas; b)
fornecer links para acessar tanto as pginas anteriores, quanto as prximas em relao pgina que est
sendo exibida; c) fornecer links para saltar para a primeira e ltima pginas do conjunto; d) destacar qual
o nmero da pgina que o usurio est navegando.


Figura 4. Exemplo do padro "Paginao" na barra de resultados do Google

A instanciao do padro Paginao, quando se desenvolve aplicaes 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 coleo registrada no bean
gerenciado (cidadeMB.cidades), o componente <rich:dataScroller> trabalha em colaborao com o
componente <rich:dataTable>, onde se especifica o nmero mximo de itens a serem exibidos em cada
paginao (rows="4").

Listagem .Exemplo de cdigo JSF do componente dataTable do ic!faces
<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 "Paginao" usando Richfaces

8

Padro "Carrinho de Compras"
Um padro bastante adotado em aplicaes de comrcio eletrnico o "Carrinho de Compras". O
padro permite que clientes comprem produtos em uma loja virtual, utilizando a metfora do carrinho
de compras, onde o cliente pode selecionar os produtos antes de realizar o pagamento.
De uma forma geral, o padro fornece funcionalidades com as vistas na Figura 6. Neste exemplo,
identificamos as principais operaes que sero codificadas em mtodos como adicionar produto,
remover produto e finalizarCompra, que demonstrado na soluo 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 padro necessrio atentar para dois requisitos da aplicao. Primeiro, uma
instncia da classe CarrinhoBean no deve atender vrios clientes para no misturar produtos
escolhidos por clientes diferentes, soluo fornecida pela anotao @SessionScoped. Segundo, os
produtos adicionados devem ser mantidos entre as chamadas dos mtodos da classe CarrinhoBean. Em
outras palavras, necessrio manter o estado do carrinho representado por uma estrutura de dados do
tipo coleo ou lista. A soluo, neste caso, utilizar no cdigo o objeto de coleo "produtos"
(Set<Produto> produtos), que mantm o estado da lista de produtos adicionados no carrinho.


Figura 6. Pgina com a metfora do padro "Carrinho de Compras"

Listagem !.Exemplo de cdigo JSF do componente dataTable do ic!faces
@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() {
// cdigo para finalizar a compra.
}
// gets e sets
}

Listagem ".Cdigo da classe "roduto
public class Produto {
private String nome;
private int quantidade;
private float preoUnid ;
private float preoTotal;
// gets e sets



9/
}

Concl#ses
Padres de Projeto uma tcnica de reuso de software que oferece benefcios prticos no
desenvolvimento de aplicaes web, tais como prover solues de projeto de forma consistente, orientar
equipes de desenvolvimento com diretrizes e boas prticas, melhorar o processo de comunicao com a
adoo de uma linguagem comum de padres, entre outros. Entretanto, para atingir esses benefcios
importante que os padres de projetos estejam documentados e disponveis em um formato que promova
o reuso. Vrias colees de padres esto documentadas e disponveis na Web, normalmente em forma
de bibliotecas ou catlogos, como o caso de Welie (http://www.welie.com) e Yahoo! Design Pattern
Library (http://developer.yahoo.com/patterns/).
Apesar da popularidade de padres e dos catlogos de padres, atualmente no h um consenso em
como os padres deveriam ser documentados, mantidos e compartilhados por todos. Contudo, inegvel
a importncia de utilizar padres de projeto para orientar as decises por melhores solues para
problemas que recorrentemente ocorre nos projeto de aplicaes, em especial as disponibilizadas na
web.


Lin$s
http://developer.yahoo.com/ypatterns/
Catlogo do Yahoo! Design Pattern Library

http://www.welie.com/
Catlogo com mais de 130 padres de interao web.

http://ui-patterns.com/
Catlogo com 58 padres de projeto de interface web, agrupados em cinco categorias.

http://java.sun.com/blueprints/corej2eepatterns/index.html
Catlogo dos padres JEE (Blueprints, Core J2EE Patterns)

Li%ros &opcional'

Padres de Projeto: Solues Reutilizveis de Software Orientado a Objetos; Gamma, Helm, Johnson e
Vlissides; Artmed, 2000.
Primeiro livro a abordar o assunto, apresenta um catlogo com 23 padres para solucionar problemas de design orientado a
objetos.

Core J2EE Patterns, 3a. Edio; Alur, Crupi; Campus/Elsevier, 2004.
Apresenta um catlogo com 21 padres com as melhores prticas, estratgias de design e solues para as principais
tecnologias JEE.

Web Application Design Patterns (Interactive Technologies); Pawan Vora; Morgan Kaufmann Publishers,
2009.
Apresenta uma coleo com mais de cem padres documentados para design de aplicaes web.

Designing Web interfaces; Bill Scott,Theresa Neil; O'Reilly, 2009.
Apresenta mais de 75 padres de projeto para construo de interfaces web.



10


Cl#dio (artins #claudiomartins&'''(gmail.com$ % &estre em Computao pela 'F(S) professor do Instituto Federal do "ar* #IF"+$
e analista de sistema da Compan!ia de Inform*tica de ,el%m #Cinbesa$. Trabal!a !* de- anos com a plataforma Java.