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.

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 projeto e uso de catlogos o pouco consenso em definir o que um padro, estabelecer um nome e os limites do seu contexto (para o qual ele foi definido). Muitos padres so semelhantes entre si, mas possuem denominaes diferentes, dependendo de quem documentou e registrou; atuam em contextos complexos que dificultam a sua aplicabilidade. Um 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.

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

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 4.Exemplo de cdigo 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 "Paginao" usando Richfaces

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 5.Exemplo de cdigo 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() { // cdigo para finalizar a compra. } // gets e sets }

Listagem 6.Cdigo da classe Produto

public class Produto { private String nome; private int quantidade; private float preoUnid ; private float preoTotal; // gets e sets

9/

Concluses
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.

Links
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)

Livros (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

Cludio Martins (claudiomartins2000@gmail.com) Mestre em Computao pela UFRGS, professor do Instituto Federal do Par (IFPA) e analista de sistema da Companhia de Informtica de Belm (Cinbesa). Trabalha h dez anos com a plataforma Java.