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(HttpServletReques t request, HttpServletResponse response) throws ServletException, IOException { // .... código // despacho para a página de resposta request.getRequestDispatcher("clienteRespos ta.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 Comman d { 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().getParamete r("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 reque st, HttpServletResponse response) throws ServletException, IOException { // o objeto helper ajuda a obter os paramet ros e processar o request RequestHelperCommand helper = new RequestHe lperCommand(request, response); // delega o processamento o metodo de execu cao 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.valo rFrete}"/> </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<Pro duto>(); 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/ind ex.html Catálogo dos padrões JEE (Blueprints, Core J2EE Patterns)

Livros (opcional) Padrões de Projeto: Soluções Reutilizáveis de Softw are 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 Techno logies); 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.