artigo2012-javamagazine107claudiomartins-final-130123151654-phpapp01

Prévia do material em texto

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 paraaplicaçõ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.