IFPA Curso de Tecnologia em Análise e Desenvolvimento de Sistemas
Engenharia da Web Padrões de Projeto em Aplicações Web Prof. Cláudio Martins
[email protected]
1
Objetivos da Aula ➢
➢
➢
➢
Apresentar o conceito de padrões de projeto Aplicar o conceito de padrões de projeto no contexto do desenvolvimento web Classificar os tipos de padrões encontrados em desenvolvimento web Exemplificar alguns padrões (com implementação)
2
Padrões de Projeto
Padrões de Projeto ➢
➢
Padrões de projeto são boas soluções aplicadas a boa parte de problemas comuns em um determinado contexto. Padrões de projeto beneficiam a construção, a manutenção e o reuso do código. ➢
Criam uma linguagem compreendida por todos
➢
Facilitam a mentalização da solução
➢
São propostas em alto nível (sem detalhes de implementação) para problemas recorrentes
4
Padrão de Projeto segundo Gamma (1995) ➢
Gamma (1995) diz que padrões são soluções para um problema em um determinado contexto, onde devem ser identificados: ➢
➢
➢
O Contexto – qual se refere ao conjunto de situações que se repetem, nas quais o padrão de projeto pode ser aplicado; O Problema – que trata do conjunto de "forças" – objetivos e limitações – que ocorrem dentro do contexto; A Solução – que é uma estrutura formal para ser aplicada na resolução do problema.
5
Início histórico: na arquitetura de construção/urbanismo Os padrões de projeto surgiram de um conceito arquitetônico criado pelo arquiteto, urbanista e matemático Christopher Alexander: “Cada padrão descreve um problema que ocorre repetidamente de novo e de novo em nosso ambiente, e então descreve a parte central da solução para aquele problema de uma forma que você pode usar esta solução um milhão de vezes, sem nunca implementa-la duas vezes da mesma forma.” ALEXANDER, C. The Timeless Way of Building. Oxford University Press, 1979. 6
Breve histórico sobre Padrões
1977
1995
2006 7
Padrões na arquitetura
Coliseu (Roma, Itália) – Construção da época do Império Romano
8
Padrões na arquitetura
Ponte de Nayabashi (Nagóia, Japão) - Ano 56 AD
9
Padrões na arquitetura
Basilica de Sacré Coeur Paris, France (1870) 10
Padrões na arquitetura – em comum...
O Arco • Um padrão usado para distribuir o peso em estruturas de construção • Reutilizável em diferentes contextos • Um componente de apoio (subjacente) • Um componente essencial na construção de grandes estruturas
11
Com o “arco” podemos...
...usá-lo como no Coliseum 12
Com o “arco” podemos...
...usá-lo como no Coliseum
13
Com o “arco” podemos...
...usá-lo como na Ponte Nayabashi
14
Com o “arco” podemos...
...usá-lo como na Basílica de Sacré Coeur 15
Padrões de Projeto em Aplicações Web
16
Patterns para aplicações web ➢
Na literatura, padrões de projeto para aplicações web podem ser tratados em pelo menos três dimensões ou preocupações: ➢
➢
➢
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. 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 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. 17
Exemplo de um padrão para projeto de Problema interação Grande volume de dados a serem exibidos. Usuário necessita visualizar os detalhes, mas deseja ver todos os dados de uma só vez (visão geral do todo).
Solução Painel de visão geral (topo ou lateral esquerda) Painel de detalhe (rodapé ou lateral direita)
18
Exemplo de Padrão em Aplicações Web (comerciais)
➢
Carrinho de Compras (Shopping Cart) ➢
Problema ➢
➢
Usuários querem comprar produtos em uma loja virtual.
Solução ➢
Crie a metáfora do “carrinho de compras”, onde o usuário pode selecionar os produtos antes de realizar o pagamento.
Veja a documentação completa dos padrões web de interação em http://www.welie.com/patterns/showPattern.php?patternID=shopping-cart
19
Padrões no www.welie.com ➢
Navegação ➢
➢
Busca (Searching) ➢
➢
Pesquisa avançada, Autocomplete, Resultados esperados, Mapa do Site, etc
Manipulação de Dados (Dealing with data) ➢
➢
Atalho de menu, Diretório, Mapa Navegacional, etc.
Carrossel, Filtros em tabela, Tabuladores, etc.
Além desses, encontramos agrupados padrões em ➢
Personalizing (personalização)
➢
Interações básicas
➢
Shopping (negócios)
➢
etc
20
Catálogo de Padrões ➢
➢
➢
O primeiro trabalho em catalogar padrões de projeto (de software) foi Gamma e outros (1995) – a “Gang dos Quatro” (GoF). Foram identificados 23 padrões em projeto orientado a objetos Outros autores, em diferentes áreas, também propuseram identificar padrões. Padrões específicos para desenvolvimento de software na web: ➢
➢
http://www.designpattern.lu.unisi.ch/index.htm (Hypermedia Design Patterns Repository) http://www.welie.com/ (A Pattern Library for Interaction Design), e outros. 21
Tipos e Classificação de Padrões de Software
22
Tipos de Padrões (Software) ➢
Padrão Arquitetural ➢
Estrutura básica de um sistema de software. ➢
➢
Ex: padrão MVC (Modelo-Visão-Controlador)
Padrão de Projeto ➢
Estrutura recorrente, micro-arquitetura de componentes organizados para resolver um problema genérico em um contexto específico. ➢
Ex: padrões OO (Singleton, Command, etc) ➢
➢
Padrões web: padrões de interação, navegação, etc.
Idioma ➢
Padrão específico associado a linguagens de programação. ➢
Padrão das tecnologias EJB (DTO, Bussiness, etc)
Classificação de Padrões ➢
➢
➢
Não existe um método rígido para realizar uma classificação de padrões Em geral, alguns autores tentam usar abordagens ligadas aos aspectos do desenvolvimento do ciclo de vida de uma aplicação web. Gamma propôs padrões para tratar projeto orientado a objetos.
24
Padrões da Gang of Four (GoF) ➢
E. Gamma and R. Helm and R. Johnson and J. Vlissides. Design Patterns - Elements of Reusable Object-Oriented Software. Addison-Wesley, 1995.
25
Padrões de Projeto de GoF (Gamma)
➢
Categorias de Padrões do GoF ➢
23 padrões identificados em: ➢ ➢ ➢
➢
Padrões de Criação (5) Padrões Estruturais (7) Padrões Comportamentais (11)
Obs: veremos exemplos de alguns desses padrões ao longo da disciplina.
Exemplos em Java: http://www.javacamp.org/designPattern/ ➢
26
Padrões GoF ➢
Padrões Criacionais ➢ ➢
➢
Associados ao processo de criação de objetos Tornam um sistema independente de como seus objetos são criados, compostos e representados
Padrões GoF ➢
Estruturais ➢
➢
➢
➢
Tratam de compor classes e objetos para formar estruturas grandes e complexas Associados à maneira como classes e objetos são organizados estruturalmente Oferecem formas efetivas para usar conceitos OO, como herança, agregação e composição Focam na abstração da estrutura
Padrões GoF ➢
Comportamentais ➢
➢
➢
Tratam de algoritmos e como atribuir responsabilidades entre objetos Associados à maneira que objetos e classes distribuem suas responsabilidades para realizar uma tarefa Focam na abstração do comportamento.
Classificação de Padrões Web (segundo Gérman, 2000)
➢
➢
Germán (2000) propõe uma classificação em domínios de aplicações e interesses específicos: a) Arquitetônico. Padrões que ajudam o desenvolvedor no projeto da estrutura global da aplicação – sua estrutura gráfica, como: Ciclo, Contraponto, Mirrorworld, Nó, Seleção, Montagem, elo, vizinhança, Quebra/Ligação (Split/Join).
➢
b) Construção de componentes. Estes padrões resolvem problemas relacionados ao modo como são combinados componentes básicos mais complexos. ➢
➢
Ex: Nó como uma única unidade, componente de Layout, Consistência Composta.
c) Navegação. Estes padrões tratam problemas relacionados ao modo como uma aplicação é interligada e o modo como o leitor é orientado: ➢
Referência ativa, Contexto Navegacional, Finta Navegacional, ObservadorNavigational, Notícias, Nó como uma Única Unidade, Decorador, Setbased, Navegação, Marco.
30
Classificação de Padrões Web (segundo Gérman, 2000) cont... ➢
d) Apresentação. Padrões relacionados ao modo como o
conteúdo é apresentado ao usuário do sistema quando em execução, como: Agrupamento de comportamento, Informaçãointeração, Acoplamento, Informação-interação, Desacoplamento, Decorador. ➢
e) Interação de Comportamento/ Usuário: Padrões
que resolvem problemas relacionados ao modo de interação entre o usuário e a aplicação: Antecipação de comportamento, Informação sobre Demanda, Link de Anúncio de Destino, Processo Feed -Back, Coletor.
31
Atividade
Padrões de Software para Desenvolvimento Web
Usando o catálogo de padrões do www.welie.com ●
Explique os seguintes padrões, com exemplos
●
Processing Page
●
Product Advisor News Box
●
Shortcut Box
●
●
Navigation Tree
●
Comment Box
●
Help Wizard
●
Purchase Process
●
Paging
●
Thumbnail
●
Slideshow
●
View
●
Captcha
●
Rating
●
Input Error Message
●
Send-a-Friend Link
Referências ➢
➢
GAMMA, R; HELM, R; JOHNSON and J. VLISSIDES. Design Patterns: elements of reusable object-oriented software. 1995. GERMAN, D; COWAN, D. Toward A Unified Catalog Of Hypermedia Design Patterns. 2000.
➢
34
