Upload
claudio-martins
View
81
Download
0
Embed Size (px)
DESCRIPTION
Demonstração da arquitetura MVC em aplicações usando componente para visualização de tabelas (DisplayTag).
Citation preview
5/16/2018 EngWeb 05 Arquitetura MVC CompDisplayTag - slidepdf.com
http://slidepdf.com/reader/full/engweb-05-arquitetura-mvc-compdisplaytag 1/17
1
IFPACurso de Tecnologia em Análise e Desenvolvimento de Sistemas
Engenharia da Web
Desenvolvimento de Software na Web
- Exemplos de componente MVC
- Aplicação web com JSP e Servlet
Prof. Cláudio Martins
5/16/2018 EngWeb 05 Arquitetura MVC CompDisplayTag - slidepdf.com
http://slidepdf.com/reader/full/engweb-05-arquitetura-mvc-compdisplaytag 2/17
2
Objetivos da Aula● Apresentar um componente que segue o
modelo MVC (arquitetura web)
● Utilizar o componente DisplayTag comoexemplo MVC-web.
5/16/2018 EngWeb 05 Arquitetura MVC CompDisplayTag - slidepdf.com
http://slidepdf.com/reader/full/engweb-05-arquitetura-mvc-compdisplaytag 3/17
3
Usando DisplayTag
para exibir tabela dedados
5/16/2018 EngWeb 05 Arquitetura MVC CompDisplayTag - slidepdf.com
http://slidepdf.com/reader/full/engweb-05-arquitetura-mvc-compdisplaytag 4/17
4
Sobre o DisplayTag● DisplayTag é uma biblioteca (library) “open
source” com tags personalizadas quefornecem uma apresentação de alto nívelpara aplicações web que seguem o modelo
MVC.● Está disponível em
● http://www.displaytag.org
● O displaytag utiliza-se de dadosarmazenados em objetos JavaBeans(entidades de dados).
5/16/2018 EngWeb 05 Arquitetura MVC CompDisplayTag - slidepdf.com
http://slidepdf.com/reader/full/engweb-05-arquitetura-mvc-compdisplaytag 5/17
5
Exemplos com DisplayTag1) Uso simplificado, usando a mesma estrutura do JavaBean .
2) Auto paginação para exibir uma lista (coleção) de dados extensa.
5/16/2018 EngWeb 05 Arquitetura MVC CompDisplayTag - slidepdf.com
http://slidepdf.com/reader/full/engweb-05-arquitetura-mvc-compdisplaytag 6/17
6
Exemplos com DisplayTag3) Utilizando opções de exportação (csv, Excel,Xml, Pdf, Rtf)
5/16/2018 EngWeb 05 Arquitetura MVC CompDisplayTag - slidepdf.com
http://slidepdf.com/reader/full/engweb-05-arquitetura-mvc-compdisplaytag 7/177
Homepage do DisplayTag
Página com exemplos:
http://demo.displaytag.org/displaytag-examples-1.2/index.jsp
5/16/2018 EngWeb 05 Arquitetura MVC CompDisplayTag - slidepdf.com
http://slidepdf.com/reader/full/engweb-05-arquitetura-mvc-compdisplaytag 8/178
Configuração e uso do DisplayTag● Em um projeto web, considerando a estrutura de
diretórios/pastas default :
● Na pasta “src” deve estar o arquivo “displaytag.properties”. -* Este arquivo contém a tradução e as propriedades padrão doDisplayTag na aplicação.
● Na pasta raiz (WebContent ou “Páginas Web”) devem estar as páginas “jsp” configuradas com a seguinte taglib:<%@taglib uri="http://displaytag.sf.net"prefix="display"%>
● Na pasta raiz (WebContent) devem estar as pastas deimagens (img) e arquivos “css” de estilos (css).
● Se você usa Eclipse, na pasta “lib” devem estar asbibliotecas “.jar”: displaytag-1.2.jar e várias outras de apoio.
–
No NetBeans basta adicionar todos os arquivos “.jar”como Bibliotecas do projeto.
5/16/2018 EngWeb 05 Arquitetura MVC CompDisplayTag - slidepdf.com
http://slidepdf.com/reader/full/engweb-05-arquitetura-mvc-compdisplaytag 9/179
Exemplo da aplicação Simulador
5/16/2018 EngWeb 05 Arquitetura MVC CompDisplayTag - slidepdf.com
http://slidepdf.com/reader/full/engweb-05-arquitetura-mvc-compdisplaytag 10/1710
Código na página JSP
<%@taglib uri="http://displaytag.sf.net" prefix="display"%><head>
<style type="text/css" media="all">
@import url("css/maven-base.css"); @import url("css/maven-theme.css");
@import url("css/site.css"); @import url("css/screen.css");
</style>
<link rel="stylesheet" href="./css/print.css" type="text/css" media="print" />
</head>
<body>
<display:table name="rend_bean">
<display:column title="MES" property="mes"/>
<display:column title="VALOR" property="valor"/>
< /display:table>
</body>
</html>
5/16/2018 EngWeb 05 Arquitetura MVC CompDisplayTag - slidepdf.com
http://slidepdf.com/reader/full/engweb-05-arquitetura-mvc-compdisplaytag 11/1711
Exemplos – paginação
Código: <display:table name="rend_bean" pagesize="12"
requestURI="Simulador" >
<display:column title="MES" property="mes"/>
<display:column title="VALOR" property="valor"/>
</display:table>
5/16/2018 EngWeb 05 Arquitetura MVC CompDisplayTag - slidepdf.com
http://slidepdf.com/reader/full/engweb-05-arquitetura-mvc-compdisplaytag 12/1712
Exemplo - Exportação
Código:
<display:table name="rend_bean" pagesize="12"
requestURI="Simulador" export="true" >
<display:column title="MES" property="mes"/><display:column title="VALOR" property="valor"/>
</display:table>
5/16/2018 EngWeb 05 Arquitetura MVC CompDisplayTag - slidepdf.com
http://slidepdf.com/reader/full/engweb-05-arquitetura-mvc-compdisplaytag 13/1713
Exemplo – Classificação de Colunas
Código:<display:table name="rend_bean" pagesize="12" sort="list"
requestURI="Simulador" export="true" >
<display:column title="MES" property="mes" sortable="true"/>
<display:column title="VALOR" property="valor" sortable="true"/>
</display:table>
5/16/2018 EngWeb 05 Arquitetura MVC CompDisplayTag - slidepdf.com
http://slidepdf.com/reader/full/engweb-05-arquitetura-mvc-compdisplaytag 14/1714
Exercício – Atividade Prática● Mini Blog
● Elabore um formulário que solicita uma “noticia”
● Envie para um servlet (controlador) quearmazene a “noticia”, junto com a data/hora da
criação da notícia, em uma lista (coleção) emtempo de sessão.
● Crie uma página para exibir todas as notíciaspostadas e o horário que foi criada a notícia.
– Como sugestão, use a mesma página do formulário.
5/16/2018 EngWeb 05 Arquitetura MVC CompDisplayTag - slidepdf.com
http://slidepdf.com/reader/full/engweb-05-arquitetura-mvc-compdisplaytag 15/1715
Página de envio de notícias
5/16/2018 EngWeb 05 Arquitetura MVC CompDisplayTag - slidepdf.com
http://slidepdf.com/reader/full/engweb-05-arquitetura-mvc-compdisplaytag 16/1716
Exibindo notícias