Apostila 140214171846 Phpapp02

Java para Web
na prtica
Construindo aplicaes utilizando JSF, JPA e
Primefaces
ROSICLIA FRASSON
PREFCIO
Este material foi escrito com o intuito de facilitar a consulta e o acompanhamento da disciplina de
Programao Web, tendo como premissa explicar em mais detalhes temas abordados em sala de aula.
Neste material podem ser encontrados conceitos e dicas necessrias ao desenvolvimento de
uma aplicao completa utilizando JSF com JPA, tendo como biblioteca de persistncia o Hibernate e a
biblioteca de componentes Primefaces. Nesta segunda edio, foram includos os princpios da
programao web com captulos exclusivos sobre HTML5 e CSS3, alm de conceitos bsicos da
programao Java EE, como Servlets e pginas JSP.
Para a montagem deste material, diversas referncias consagradas foram utilizadas. Na
bibliografia as mesmas podem ser consultadas. Vale ressaltar que este material no substitui a leitura
de livros consagrados sobre o tema.
Todos
os
cdigos
presentes
neste
material
podem
ser
consultados
https://drive.google.com/?tab=mo&authuser=0#folders/0B8cQpHd6a5gENnJYd0ZFTkdKVGM.
em:
Caso possua correes, sugestes ou mesmo esclarecer alguma dvida sinta-se livre para
entrar em contato: rosicleiafrasson@gmail.com.
Um bom estudo!
Cricima, julho de 2014.

Rosiclia Frasson
SUMRIO
JPA ................................................................................................................................................................................3
Generics ......................................................................................................................................................................27
HTML...........................................................................................................................................................................35
CSS ..............................................................................................................................................................................47
JAVA EE .......................................................................................................................................................................71
Servlets .......................................................................................................................................................................78
JSP ...............................................................................................................................................................................88
Frameworks MVC .......................................................................................................................................................99
JSF .............................................................................................................................................................................102
Componentes JSF......................................................................................................................................................113
Escopos JSF ...............................................................................................................................................................150
Facelets .....................................................................................................................................................................158
Filtros ........................................................................................................................................................................163
Bibliotecas de componentes ....................................................................................................................................205
Primefaces ................................................................................................................................................................208
Captulo 1 - JPA
Rosiclia Frasson
JPA
Aplicaes comerciais so desenvolvidas pela necessidade de coletar e armazenar grandes
quantidades de dados e eventualmente esses dados so transformados para gerar informaes para as
companhias em forma de relatrios. O armazenamento desses dados normalmente
normal
feito utilizando
sistemas gerenciadores de banco de dados (SGBDs). Existem inmeros SGBDs no mercado e a grande
maioria deles trabalha com o modelo relacional, onde os dados so armazenados em tabelas com
linhas e colunas.
Aplicaes desenvolvidas na linguagem Java, so escritas utilizando o paradigma orientado a
objetos e a manipulao de dados, como descrita anteriormente, segue o modelo relacional. Como os
modelos utilizados so de paradigmas diferentes, necessrio, que os dados sejam ajustados
ajustado cada vez
que passam de um modelo para o outro. Em outras palavras, a cada nova operao de insero,
atualizao, remoo ou pesquisa, uma quantidade imensa de cdigo deve ser implementada para
tratar essas incompatibilidades de estruturas.
Com a popularizao
izao do Java notou-se
notou se que os programadores gastavam muito tempo com a
codificao de queries SQL e nos cdigos JDBC que manipulavam as mesmas. Alm da produtividade,
o acesso via JDBC dificulta a troca de bancos de dados, visto que algumas queries possuem
possue diferenas
significativas dependendo do fabricante.
Para facilitar a vida dos programadores surge o conceito de ORM (Mapeamento objeto
relacional) que prope que a transformao entre os paradigmas orientado a objetos e relacional ocorra
de maneira transparente
parente para o programador. Utilizando este conceito, ao invs do programador efetuar
as devidas converses, o mesmo pode utilizar um framework para efetuar as alteraes necessrias.
Java Persistence API e Ferramentas ORM

O Hibernate o framework ORM mais conhecido do mercado e como os demais existentes
disponibiliza toda a programao necessria para o mapeamento objeto-relacional
objeto relacional e persistncia dos
dados.
Com a aceitao dos frameworks ORM pela comunidade de programadores e prevendo o

surgimento de muitos outros frameworks ORM, foi includa, a partir do Java 5, uma API de persistncia
Captulo 1 - JPA
Rosiclia Frasson
chamada de Java Persistence API ou JPA que padroniza o mapeamento objeto-relacional. A JPA
prope a possibilidade de trabalhar diretamente com as classes sem a utilizao de consultas nativas
de cada banco de dados.
A JPA apenas uma especificao, ou seja, muitos textos, normas e interfaces do Java de
como uma implementao deve se comportar. Atualmente existem no mercado diversas
implementaes da JPA, entre elas, as mais conhecidas so o Hibernate da JBoss, EclipseLink da
EclipseFundation e OpenJPA da Apache.
Como os provedores de persistncia seguem a especificao, possvel migrar de framework
durante o desenvolvimento de uma aplicao. E como o provedor que cuida da transformao dos
dados para os SGBDs, tambm possvel efetuar a troca do fabricante de banco de dados sem
alteraes na aplicao.
Algumas caractersticas da JPA:
Qualquer classe que contenha um construtor sem parmetros, pode ser tornar persistente sem
nenhuma alterao no cdigo. Apenas algumas anotaes so necessrias.
Como a JPA, oferece diversos valores defaults, bastam poucas anotaes para efetuar o
mapeamento.
As consultas com a JPA so efetuadas atravs da JPQL (Java Persistence Query Language)
que possui sintaxe similar as queries SQL.
Anotaes
Para efetuar o mapeamento das classes em JPA, o desenvolvedor pode optar entre as
anotaes diretamente no cdigo fonte ou criar um arquivo XML. As anotaes so mais
recomendadas, pois a informao fica no cdigo fonte sendo mais fcil a visualizao e compreenso
dos parmetros utilizados.
As anotaes so inseridas diretamente no cdigo fonte, antes do elemento a ser anotado. Para
identificar, cada anotao deve ser precedida por uma @. As anotaes precisam dos imports que
pertencem ao pacote java.persistence.
O mecanismo de persistncia define padres que se aplicam a grande maioria das aplicaes.
Dessa forma, o desenvolvedor necessita anotar apenas quando deseja substituir o valor padro.
As anotaes tambm podem possuir parmetros. Os parmetros so especificados dentro de
parnteses como par nome-valor e separados por vrgula. A ordem dos parmetros no interfere na
execuo.
Entidades
As entidades ou entities so utilizadas pela JPA para efetuar o mapeamento objeto-relacional.
Dessa forma elas devem refletir a estrutura da tabela no banco de dados. Classes Java podem ser
facilmente transformadas em entidades.
Para que um POJO Java seja considerada uma entidade necessrio que ela possua os
seguintes requisitos:
Possuir um construtor sem parmetros. Outros construtores podem ser adicionados.
Ter a anotao @Entity. Essa anotao indica a JPA que a classe deve ser transformada em
uma tabela no banco de dados. Por padro o nome da tabela o mesmo nome da classe. Se o
desenvolvedor preferir outro nome para a tabela, necessrio adicionar o parmetro name com
o nome desejado.
Captulo 1 - JPA
Rosiclia Frasson
Toda entidade tem que possuir uma identidade nica. O identificador da entidade equivale a
primary key da tabela. Esse campo deve ser anotado com @Id. Em geral esse campo um
nmero sequencial, mas pode ter outros tipos de valores.
Os atributos da classe devem ser privados e os mesmos devem possuir os mtodos de acesso
(gets/sets).
Segue um exemplo de entidade.
import javax.persistence.Entity;
import javax.persistence.Id;
@Entity
public class Funcionario {
@Id
private int matricula;
private String nome;
private double salario;
public Funcionario() {
}
public int getMatricula() {

return matricula;
}
public void setMatricula(int matricula) {

this.matricula = matricula;
}
public String getNome() {

return nome;
}
public void setNome(String nome) {

this.nome = nome;
}
public double getSalario() {

return salario;
}
public void setSalario(double salario) {
Captulo 1 - JPA
Rosiclia Frasson
this.salario = salario;
}
}
Entity Manager
Na JPA, a persistncia de um objeto feita invocando o gerenciador de entidades (Entity
Manager). Uma Entity Manager responsvel pela troca de informaes entre a aplicao e um
esquema de armazenamento de dados e pela abertura e fechamento das transaes.
O contexto de persistncia (Persistence Context) o espao de memria, onde os objetos
persistentes se encontram. Dentro do contexto de persistncia, as instncias de entidades e seu ciclo
de vida so gerenciados. O ciclo de vida de uma entidade pode possuir quatro estados diferentes:
New (novo): A entidade foi criada, porm, ainda no foi persistida na base de dados, ou seja, ela
ainda no reconhecida pela JPA porque nunca passou pelo gerenciador de persistncia
EntityManager.
Managed (gerenciado): A entidade foi persistida e encontra-se num estado gerencivel.
Mudanas no estado da entidade so sincronizadas assim que uma transao for finalizada com
sucesso, ou seja, a JPA garante que a entidade ter representao idntica na base de dados.
Removed (removido) : A entidade foi marcada para ser removida da base de dados. Essa
remoo ser efetuada quando a transao com o banco de dados for finalizada com sucesso.
Detached(desacoplado): A entidade foi persistida no banco de dados, porm, encontra-se em
um estado que no est associado ao contexto persistvel, ou seja, alteraes em seu estado
no so refletidos na base de dados.
A interface EntityManager define mtodos que so usados para interagir com o contexto de
persistncia, ou seja, ela usada para criar e remover instncias persistentes de uma entidade, para
encontrar entidades pela sua chave primria e para efetuar consultas de entidades.
O conjunto de entidades que pode ser gerenciado por uma instncia da EntityManager definida
por uma unidade de persistncia. Segue uma lista com os mtodos mais utilizados da EntityManager:
createNamedQuery: cria uma instncia de consulta para a execuo de uma consulta nomeada.
createQuery: cria uma instncia de consulta para a execuo de uma instruo de linguagem de
consulta de persistncia Java.
find: efetua a busca pela primary key e traz os dados imediatamente.
getReference: efetua uma busca pela primary key, os dados so carregados apenas quando o
estado do objeto acessado, aliviando o trfego do banco de dados.
getTransaction: retorna o objeto da transao com o banco de dados.
merge: mescla o estado da entidade no contexto da persistncia atual.
persist: faz uma instncia de entidade gerenciada e persistente.
remove: remove a instncia da entidade do banco de dados.
Para criar uma EntityManager necessria uma instncia de EntityManagerFactory ou uma
fbrica de EntityManager. Como a EntityManagerFactory um processo custoso e demorado, apenas
uma instncia da fbrica usada por aplicao. Exceto quando necessrio acessar mais de uma fonte
de dados diferente.
Captulo 1 - JPA
Rosiclia Frasson
Persistence Unit
A unidade de persistncia utilizada para configurar as informaes referentes ao provedor JPA
e ao banco de dados utilizado.
Para definir a unidade de persistncia utilizado um arquivo XML, chamado persistence.xml que
deve ser criado dentro da pasta META-INF do projeto. Neste arquivo podem ser definidas vrias
unidades de persistncia.
JPQL
Como a linguagem SQL possui mudanas significativas para cada fabricante de banco de dados
para efetuar consultas utilizando a JPA, recomendado utilizar a JPQL (Java Persistence Query
Language).
A JPQL uma API de queries, similar as queries SQL que define consultas para entidades e seu
estado persistente. Com o uso da JPQL, as consultas se tornam portteis, independente do fabricante
de banco de dados utilizado.
Um objeto query pode ser obtido atravs do Entity Manager usando o mtodo createQuery. As
queries podem ser estticas ou dinmicas. Uma query esttica pode ser definida atravs de anotao
@NamedQuery e possui uma performance melhor do que a query dinmica, pois a JPA armazena
cache da consulta, podendo executar a mesma query vrias vezes apenas alterando os valores.
PASSO-A-PASSO
Configurando o ambiente
Neste exemplo, ser usado o Hibernate com JPA. Sendo assim, o primeiro passo colocar os
jars correspondentes no classpath do projeto que podem ser encontrados no site oficial do Hibernate:
www.hibernate.org. Sero necessrios todos os jars obrigatrios (required), os jars da especificao
JPA, que esto na pasta com o nome desta.
1. Para configurao no Netbeans, necessrio criar uma aplicao Java SE. Em exemplos
posteriores ser feita a configurao em projetos Java EE.
2. Aps a criao do projeto, as propriedades do mesmo devem ser acessadas e no menu
Bibliotecas, necessrio acionar a opo Adicionar Biblioteca.
Captulo 1 - JPA
Rosiclia Frasson
3. Na caixa de dilogo aberta, necessrio acessar a opo Criar.
4. Aps dar um nome para a biblioteca e clicar

clicar em OK, ser aberta uma janela para adicionar os jars
da biblioteca criada. So necessrios todos os jars da pasta required e jpa. Opcionalmente podem ser
inclusos outros jars. A figura a seguir, contm a lista de todos os jars adicionados.
Captulo 1 - JPA
Rosiclia Frasson
5. Aps serr criada, necessrio que a biblioteca seja adicionada ao projeto.

6. Alm do Hibernate, tambm necessrio adicionar o driver JDBC do banco utilizado. Neste caso,
ser utilizado o MySQL.
Entidades
Para que o JPA possa mapear corretamente cada tabela do banco de dados para uma classe
Java foi criado o conceito de Entity (Entidade). Para uma classe Java ser considerada uma Entity,
necessariamente ela precisa possuir a anotao @Entity, um construtor pblico sem parmetros e um
campo anotado com @Id.
Neste
ste exemplo ser feito um CRUD de um funcionrio, que contm como atributos matrcula,
que ser gerada automaticamente, nome e salrio. Segue o mapeamento da classe Funcionario.
package br.com
com.rosicleiafrasson.exemplohibernate1.modelo;
;
javax.persist
import javax.persistence.GeneratedValue;
javax.persistence.GeneratedValue
javax.persistence.Id
@Entity
Captulo 1 - JPA
Rosiclia Frasson
@Id
@GeneratedValue
public int getMatricula() {

return matricula;
}
public void setMatricula(int matricula) {

this.matricula = matricula;
}

return nome;
}

this.nome = nome;
}
public double getSalario() {

return salario;
}
public void setSalario(double salario) {

this.salario = salario;
}
}
Por conveno, a classe Funcionario ser mapeada para uma tabela com o mesmo nome
(Funcionario). O atributo matricula est anotado com @Id, indicando que o mesmo representa a
chave primria da tabela. A anotao @GeneratedValue indica que o valor ter autoincremento.
Se for necessrio alterar o nome da tabela ou o nome da coluna podem ser usadas as
anotaes @Table e/ou @Column. Na ausncia dessas configuraes, a JPA ir mapear a classe
Funcionario para uma tabela com o mesmo nome e os atributos matricula, nome e salario para
colunas com os respectivos nomes tambm.
Persistence.xml
Para que a JPA consiga mapear e executar transaes em um banco necessrio definir
10
Captulo 1 - JPA
Rosiclia Frasson
algumas configuraes, como por exemplo, provedor de persistncia, dialeto usado para
manipulao, driver de conexo, usurio e senha do banco, entidades que faro parte do contexto;
algumas
as configuraes avanadas do Hibernate como pool de conexes, controle de cache, entre
outros. Essas configuraes so armazenadas no arquivo persistence.xml.
1. No Netbeans para criar um arquivo persistence.xml, basta clicar com o boto secundrio em cima
do projeto, escolher a opo Novo, Outros, categoria Persistncia e o tipo de arquivo Unidade de
Persistncia.
2. Na tela provedor e banco de dados necessrio

necessrio definir um nome para a unidade de persistncia,
especificar o provedor de persistncia, neste caso, ser utilizado o Hibernate 2.0. Em fonte de dados,
necessrio informar a base de dados. Se esta no estiver listada, necessrio configur-la.
configur
Para
isso, a opo Nova Conexo de Banco de Dados deve ser acessada, e o Driver de Conexo
selecionado, para este exemplo, ser o driver do MySQL.
3. Na tela Assistente de Nova Conexao necessrio informar o nome do banco, o usurio e a senha.
Na opo Testarr Conexao, possvel verificar se os parmetros para a conexo foram definidos
corretamente.
4. A opo Estratgia de Gerao de Tabela podem ser escolhidas entre as opes Criar, Eliminar e
Criar e Nenhum. Selecionando a primeira delas - Criar - novas tabelas
belas so criadas se necessrio,
porm os dados no so apagados. A segunda opo - Eliminar e Criar - apaga as tabelas existentes
no banco e cria novamente, apagando os dados existentes. A terceira opo - Nenhum - no altera a
estrutura da base de dados.
11
Captulo 1 - JPA
Rosiclia Frasson
5. Aps a finalizao, criado um arquivo persistence.xml dentro da pasta META-INF

META
que deve estar
no classpath do projeto, portanto, junto as classes.
<?xml version="1.0" encoding="UTF-8"?>
encoding="UTF
<persistence version="2.0" xmlns="http://java.sun.com/xml/ns/persistence"
xmlns=
xmlns:xsi="http://www.w3.org/2001/XMLSchema
"http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/persistence
"http://java.sun.com/xml/ns/persistence
http://java.sun.com/xml/ns/persistence/persistence_2_0.xsd"
http://java.sun.com/xml/ns/persistence/persistence_2_0.xsd">
<persistence-unit name="ExemploHibern
"ExemploHibernate1PU" transaction-type="RESOURCE_LOCAL"
"RESOURCE_LOCAL">
<provider>org.hibernate.ejb.HibernatePersistence
org.hibernate.ejb.HibernatePersistence</provider>
<properties>
<property name="javax.persistence.jdbc.url"
"javax.persistence.jdbc.url"
value="jdbc:mysql://localhost:3306/exemplohibernate1?zeroDateTimeBehavior=convertToNull"
"jdbc:mysql://localhost:3306/exemplohibernate1?zeroDateTimeBehavior=convertToNull"
"jdbc:mysql://localhost:3306/exemplohibernate1?zeroDateTimeBehavior=convertToNull"/>
<property name="javax.persistence.jdbc.password"
"javax.persistence.jdbc.password" value="root"/>
<property name="javax.persistence.jdbc.driver"
"javax.persistence.jdbc.driver" value="com.mysql.jdbc.Driver"
"com.mysql.jdbc.Driver"/>
<property name="javax.persistence.jdbc.user"
"javax.persistence.jdbc.user" value="root"/>
<property name="hibernate.cache.provider_class"
"hibernate.cache.provider_class"
value="org.hibernate.cache.NoCacheProvider"
"org.hibernate.cache.NoCacheProvider"/>
<property name="hibernate.hbm2ddl.auto"
"hibernate.hbm2ddl.auto" value="update"/>
<property name="hibernate.dialect"
"hibernate.dialect" value="org.hibernate.dialect.MySQLDialect"
"org.hibernate.dialect.MySQLDialect" />
<property name="hibernate.show_sql"
"hibernate.show_sql" value="true"/>
<property name="hibernate.format_sql"
"hibernate.format_sql" value="true"/>
</properties>
12
Captulo 1 - JPA
Rosiclia Frasson
</persistence-unit>
</persistence>
O arquivo gerado possui um cabealho, declarado com a tag persistence. Dentro desta tag,
necessrio definir um conjunto de configuraes para indicar o provedor de persistncia, o fabricante
e as configuraes do banco de dados . Esse conjunto de configuraes chamado de persistenceunit, que deve possuir um nome, neste caso, foi definido como ExemploHibernate1PU, mas poderia ser
dado qualquer outro nome.
Dentro das properties so colocadas tags property contendo um atributo name e um atributo
value. No atributo name indicado a configurao que deve ser feita e no atributo value, o contedo
da configurao. possvel observar no arquivo persistence.xml criado que existem tags property
para configurao da url, driver, user e password, que equivalem respectivamente as configuraes
do endereo, onde a base de dados est hospedada, o driver de conexo do banco de dados
correspondente, o usurio e a senha do mesmo. importante perceber que essas propriedades
comeam com javax.persistence.jdbc. Isso acontece porque elas fazem parte da especificao da
JPA.
Alm das propriedades da especificao JPA, possvel tambm configurar propriedades
especficas da implementao. Uma delas a escolha do dialeto do banco de dados. Quando a
conexo feita via JDBC, utiliza-se cdigos em SQL e alguns comandos so especficos de um
determinado banco de dados. Como o Hibernate pode trabalhar com diversos fabricantes de bancos
de dados necessrio informar qual o dialeto do banco, ou seja, a variao do SQL utilizado pelo
mesmo. No javadoc do Hibernate, disponvel em: http://docs.jboss.org/hibernate/orm/4.1/javadocs/
pode ser encontrada a lista completa dos dialetos. Como ser utilizado o MySQL para o
armazenamento de dados necessrio inserir o dialeto do mesmo utilizando a seguinte propriedade
no persistence.xml.
<property name="hibernate.dialect" value="org.hibernate.dialect.MySQLDialect" />
A propriedade hibernate.hbm2ddl.auto permite que tabelas sejam criadas ou tenham suas

estruturas alteradas automaticamente. Setando o valor para update, novas tabelas, colunas ou
relacionamentos so criados, se necessrio, porm os dados no so apagados. Essa configurao
deve ser utilizada apenas na fase de desenvolvimento. Quando o software estiver em produo
aconselhvel desabilitar essa configurao.
O Hibernate possui uma propriedade que permite que os comandos SQL sejam impressos no
console quando esto sendo executados. Para ativar esse recurso, necessrio adicionar uma nova
propriedade chamada show_sql com o valor true. interessante que os comandos sejam impressos
formatados. Isso possvel com a propriedade format_sql. Segue abaixo os comandos que devem
ser adicionados no arquivo persistence.xml.
<property name="hibernate.show_sql" value="true"/>
<property name="hibernate.format_sql" value="true"/>
Entity Manager
Criadas as configuraes, necessrio fazer com que a aplicao se comunique com a base
de dados. Para isso, deve ser criada uma classe que garanta essa comunicao. A ttulo de exemplo,
essa classe deve se chamar PersistidorFuncionario e invocar alguns mtodos para que as
13
Captulo 1 - JPA
Rosiclia Frasson
informaes da aplicao sejam pesistidas na base de dados.

A classe Persistence carrega o arquivo XML e inicializa as configuraes. A classe
EntityManagerFactory descobre quem cria as conexes e necessrio uma instncia da mesma.
Para obter uma instncia de EntityManagerFactory utilizado o mtodo createEntityManagerFactory
indicando qual a persistence-unit que foi definida no persistence.xml, no nosso caso
ExemploHibernate1PU. Executando o cdigo abaixo dentro de um mtodo main, a tabela funcionrio
deve ser criada no banco.
EntityManagerFactory emf = Persistence.createEntityManagerFactory("ExemploHibernate1PU");
Com a instncia de EntityManagerFactory necessrio invocar o mtodo

createEntityManager. Este mtodo devolve um objeto do tipo EntityManager que representa a
conexo com a unidade de persistncia. O EntityManager responsvel por gerenciar as entidades,
atravs dele possvel gerenciar o ciclo de vida das entidades, efetuar operaes de sincronizao
com a base de dados (insert, delet e update), consultar entidades entre outros. Uma Entity est em
um contexto gerencivel, quando a mesma est associada a um EntityManager. Isso garante que
todas as operaes realizadas em um objeto Entity so refletidas na base de dados.
EntityManager em = emf.createEntityManager();
Insero
Para testar uma insero de um funcionrio na base de dados, necessrio instanciar e
popular um objeto do tipo Funcionario e passar o mesmo para a EntityManager realizar a persistncia.
Tambm indispensvel pedir uma transao para a EntityManager e invocar os mtodos begin e
commit. O mtodo begin inicializa os recursos da transao e o mtodo commit confirma a transao
corrente. Para salvar a entidade gerenciada na base de dados, necessrio invocar o mtodo persist.
Funcionario f = new Funcionario();
f.setNome("Joo da Silva Junior Aguinaldo");
f.setSalario(611500.678);
em.getTransaction().begin();
em.persist(f);
em.getTransaction().commit();
importante mencionar que EntityManagerFactory uma fbrica para criar EntityManager.

Por essa razo, interessante que exista apenas uma EntityManagerFactory para toda a aplicao. A
existncia de vrias fbricas de conexes espalhadas pela aplicao resultam em lentido do
software, entre outros problemas. Sendo assim, importante garantir que a EntityManagerFactory
seja criada apenas uma vez, isso possvel com a implementao de uma classe que possua um
atributo esttico para armazenar essa instncia e que o mesmo seja uma constante, para que no
seja criado outras vezes. Essa classe pode ser chamada de JPAUtil.
Na classe JPAUtil, tambm necessrio implementar um mtodo getEntityManager que
devolva uma EntityManager, desta forma, possvel ter acesso a um objeto de conexo sempre que
necessrio.
14
Captulo 1 - JPA
Rosiclia Frasson
package br.com.rosicleiafrasson.exemplohibernate1.util;
import javax.persistence.EntityManager;
import javax.persistence.EntityManagerFactory;
import javax.persistence.Persistence;
public class JPAUtil {
private static final EntityManagerFactory emf = Persistence.

createEntityManagerFactory("ExemploHibernate1PU");
public static EntityManager getEntityManager() {

return emf.createEntityManager();
}
}
Com a existncia de uma fbrica de conexes centralizada, necessrio alterar a classe

PersistidorFuncionario, para que a mesma utilize a classe JPAUtil.
EntityManager em = JPAUtil.getEntityManager();
Consulta
Com os dados gravados na base de dados, possvel realizar consultas. As consultas em
JPA podem ser feitas utilizando SQL, porm no recomendado, pois, ao usar SQL, a aplicao fica
presa a um determinado fabricante de banco de dados. Existe uma linguagem chamada de JPQL
(Java Persistence Query Language) que portvel e possui a sintaxe e estrutura bem similar ao SQL.
Para realizar uma pesquisa por todos os funcionrios utilizada a String select f from
Funcionario f. Na clausula from deve ser indicada a entidade a ser buscada, nesse caso Funcionario.
necessrio tambm a criao de um alias (apelido) para a entidade, no exemplo mostrado f.
O mtod createQuery recebe a consulta com a String com a consulta desejada e o tipo de
objeto que a consulta deve retornar. Para executar a consulta, invocado o mtodo getResultList que
devolve uma lista com os objetos indicados no momento da chamada ao createQuery.
Query q = em.createQuery("select f from Funcionario f", Funcionario.class);
List<Funcionario> funcionarios = q.getResultList();
for (Funcionario f : funcionarios) {

System.out.println("\nMatrcula: " + f.getMatricula()
+ "\nNome: " + f.getNome()
15
Captulo 1 - JPA
Rosiclia Frasson
+ "\nSalrio: " + f.getSalario() + "\n");

}
em.close();
Remoo
Para efetuar uma remoo, basta chamar o mtodo remove, passando um objeto Funcionario
com o id populado.
Funcionario f = em.getReference(Funcionario.class, 1);
em.getTransaction().begin();
em.persist(f);
em.getTransaction().commit();
Mapeamento
Alm das anotaes @Entity, @Id e @GeneratedValue j citadas anteriormente, a JPA
disponibiliza uma srie de anotaes, que permitem ao desenvolvedor efetuar os relacionamentos da
base de dados e modificar as configuraes padro de mapeamento da JPA.
Por padro, ao anotar uma classe com @Entity, o JPA far o mapeamento para uma tabela
como o mesmo nome na base de dados. Caso seja necessrio que a tabela possua um outro nome, a
anotao @Table deve ser usada juntamente com a propriedade name, como mostrado no trecho de
cdigo a seguir.
@Entity
@Table (name = "tb_funcionario")
Os atributos das classes tambm so mapeados para as tabelas da base de dados com o
mesmo nome que se apresentam nas classes. Para modificar os nomes das colunas, necessrio
utilizar a anotao @Column juntamente com a propriedade name. Alm de modificar o nome da
coluna, outras restries podem ser impostas. Entre elas, podem ser citadas:
length: Limita a quantidade de caracteres de uma String.
nullable: Indica se o campo pode ou no possuir valor null.
unique: Indica se uma coluna pode ou no ter valores repetidos.
O cdigo mostrado a seguir indica que o atributo nome ser mapeado como nome_fun, aceitar
no mximo 100 caracteres, no pode ser nulo e dois funcionrios no podem possuir o mesmo nome.
@Column(name = "nome_fun", length = 100, unique = true, nullable = false)
16
Captulo 1 - JPA
Rosiclia Frasson
Para armazenar dados grandes, como imagens e sons, o atributo deve ser anotado com @Lob.
O cdigo a seguir demonstra o uso da anotao.
@Lob
private byte[] foto;
Os tipos java.util.Date e java.util.Calendar necessitam da anotao @Temporal para serem

mapeados. Esta anotao exige que o programador defina como a data ser armazenada. Existem trs
opes de armazenamento:
TemporalType.DATE: Armazena apenas a data.
TemporalType.TIME: Armazena apenas a hora.
TemporalType. TIMESTAMP: Amazena a data e a hora.
Segue o cdigo utilizado para mapear uma data utilizando uma das anotaes descritas.
@Temporal (TemporalType.DATE)
private Date dataNascimento;
Eventualmente, um campo contido em uma classe no pode ser mapeado para a base de
dados. Para evitar que o atributo seja mapeado, necessrio inserir a anotao @Transient como
mostrado a seguir.
@Transient
private String confirmaSenha;
Existem diversas formas de mapear a herana em Java utilizando a JPA. Uma delas utilizando
a anotao @MappedSuperclass. Utilizando esta anotao, toda a classe que herdar da superclasse
ter em sua tabela, os atributos pertencentes a classe e a superclasse. A anotao pode ser utilizada
tanto em classes concretas, quanto abstratas.
Para demonstrar o mapeamento, ser utilizado o diagrama de classes ilustrado a seguir.
17
Captulo 1 - JPA
Rosiclia Frasson
O mapeamento das classes ilustradas, deve ser feito conforme os trechos de cdigo abaixo.
package br.com.rosicleiafrasson.exemplohibernate1.modelo;
import java.util.Date;
import javax.persistence.MappedSuperclass;
import javax.persistence.Temporal;
import javax.persistence.TemporalType;
@MappedSuperclass
public class Pessoa {
@Id
@GeneratedValue
private int id;
@Temporal(TemporalType.DATE)
public int getId() {

return id;
}
public void setId(int id) {
this.id = id;
}
18
Captulo 1 - JPA
Rosiclia Frasson

return nome;
}

this.nome = nome;
}
public Date getDataNascimento() {

return dataNascimento;
}
public void setDataNascimento(Date dataNascimento) {

this.dataNascimento = dataNascimento;
}
}
@Entity
public class Funcionario extends Pessoa{
private Date dataAdmissao;
public Date getDataAdmissao() {

return dataAdmissao;
}
public void setDataAdmissao(Date dataAdmissao) {

this.dataAdmissao = dataAdmissao;
}
19
Captulo 1 - JPA
Rosiclia Frasson
@Entity
public class Cliente extends Pessoa{
private Date dataCadastro;
public Date getDataCadastro() {

return dataCadastro;
}
public void setDataCadastro(Date dataCadastro) {

this.dataCadastro = dataCadastro;
}
}
A base de dados apresentada a seguir corresponde ao mapeamento citado.
Relacionamentos
Uma das maiores divergncia no mapeamento objeto-relacional ocorre nos relacionamentos
existentes entre as classes. A JPA define quatro tipos de relacionamento de acordo com a sua
cardinalidade: OneToOne, OneToMany, ManyToOne e ManyToMany.
OneToOne
Tambm conhecido como relacionamento um para um, ocorre quando um registro da tabela
pode possuir ligao com apenas um registro de outra tabela. o caso por exemplo, do relacionamento
do funcionrio com o cnjuge. Um funcionrio s pode ter um cnjuge e um cnjuge s pode pertencer
20
Captulo 1 - JPA
Rosiclia Frasson
a um funcionrio.
Para efetuar o relacionamento utilizada a anotao @OneToOne. importante perceber que

em Java, o relacionamento feito com o objeto inteiro, ou seja, todos os dados do cnjuge, so
carregados, juntamente com o funcionrio. Na base de dados, o cdigo do cnjuge, o nico dado
correspondente a ligao entre as tabelas na entidade funcionrio.
package br.com.rosicleiafrasson.cap1mapeamentoonetoone.model;
@Entity
public class Conjuge {
@Id @GeneratedValue
private int codigo;
private String cpf;
//Gets e sets
}
package br.com.rosicleiafrasson.cap1mapeamentoonetoone.model;
import javax.persistence.JoinColumn;
import javax.persistence.OneToOne;
@Entity
21
Captulo 1 - JPA
Rosiclia Frasson
@Id
@GeneratedValue
private String cpf;
private Date dataAdmissao;
@OneToOne
@JoinColumn(name = "conjuge_codigo")
private Conjuge conjuge;
//Gets e sets
}
One to Many
O relacionamento um para muitos informa que o registro de uma entidade est relacionado com
vrios registros de outra. Como exemplo desse relacionamento pode ser citado o funcionrio e seus
dependentes. Um funcionrio pode possuir zero ou vrios dependentes.
Na base de dados, alm das tabelas funcionrio e dependente uma terceira tabela deve ser
gerada para relacionar os registros dos dependentes com o registro do funcionrio.
Na JPA, para efetuar o mapeamento do relacionamento um para muitos, utilizada a anotao

@OneToMany, como exemplificado no cdigo a seguir.
package br.com.rosicleiafrasson.cap1mapeamentoonetomany.model;
22
Captulo 1 - JPA
Rosiclia Frasson
@Entity
public class Dependente {
@Id @GeneratedValue
private int codigo;
private String parentesco;
//Gets e sets
}
package br.com.rosicleiafrasson.cap1mapeamentoonetomany.model;
import java.util.Collection;
import javax.persistence.JoinTable;
import javax.persistence.OneToMany;
@Entity
@Id @GeneratedValue
private String cpf;
private Date dataCadastro;
@OneToMany
private Collection<Dependente> dependentes;
//Gets e sets
}
23
Captulo 1 - JPA
Rosiclia Frasson
Por padro, o nome da tabela gerada para indicar o relacionamento a juno das duas tabelas,
funcionrio e dependente (funcionario_dependente). Se necessrio alterar o padro, pode ser utilizada
a anotao @JoinTable com a propriedade name.
@OneToMany
@JoinTable(name = "func_depen")
private Collection<Dependente> dependentes;
Many to One
No relacionamento muitos para um, muitos registros de uma entidade esto relacionados com
um registro de outra entidade. Como exemplo deste relacionamento, pode ser citado, o relacionamento
entre o produto e sua categoria. Muitos produtos devem possuir a mesma categoria.
A anotao @ManyToOne responsvel por efetuar este mapeamento na JPA. O cdigo a

seguir, demonstra a utilizao desta.
package br.com.rosicleiafrasson.cap1mapeamentomanytoone.model;
@Entity
public class Categoria {
@Id
@GeneratedValue
private int codigo;
private String descricao;
//Gets e sets
}
package br.com.rosicleiafrasson.cap1mapeamentomanytoone.model;
24
Captulo 1 - JPA
Rosiclia Frasson
import javax.persistence.ManyToOne;
@Entity
public class Produto {
@Id
@GeneratedValue
private int codigo;
private double valorUnitario;
@ManyToOne
private Categoria categoria;
//Gets e sets
}
Many To Many
O relacionamento muitos para muitos indica que mltiplos registros de uma entidade podem se
relacionar com mltiplos registros de outra entidade. o caso por exemplo do relacionamento entre
alunos e cursos. Um aluno pode estar matriculado em mais de um curso e um curso pode ter mais de
um aluno.
Na JPA, existe a anotao @ManyToMany para indicar esse relacionamento. Um exemplo de

utilizao desta anotao pode ser visto no cdigo a seguir.
package br.com.rosicleiafrasson.cap1mapeamentomanytomany.model;
@Entity
public class Curso {
25
Captulo 1 - JPA
Rosiclia Frasson
@Id
@GeneratedValue
private int codigo;
//Gets e sets
package br.com.rosicleiafrasson.cap1mapeamentomanytomany.model;
import java.util.Collection;
import javax.persistence.ManyToMany;
@Entity
public class Aluno {
@Id
@GeneratedValue
private String cpf;
@ManyToMany
private Collection<Curso> cursos;
//Gets e sets
26
Captulo 2 - Generics
Rosiclia Frasson
Generics
Os generics esto presentes em diversas linguagens de programao e permite ao
desenvolvedor construir cdigos que podem ser utilizados com vrios tipos de dados. Na linguagem
Java, os tipos genricos foram inclusos na verso 5.0, fato considerado pela comunidade de
programadores como uma grande evoluo da linguagem. A utilizao de generics permite tipos na
declarao de mtodos, interfaces e classes, dessa forma, permite que o programador desenvolva
cdigo mais limpo, seguro e reutilizvel.
Bons exemplos do uso do Generics so encontrados na API do Java na interface Collections.
Tanto a interface quanto as implementaes desta utilizam os tipos genricos. A interface List, por
exemplo, que herda de Collection, possui uma implementao chamada ArrayList que responsvel
pelo armazenamento dos dados em forma de lista ligada. No seria interessante que o programador se
preocupasse em sobrescrever os mtodos a cada nova classe criada em que houvesse a necessidade
de armazenamento em forma de lista, para que os mesmos fossem suportados pela estrutura. A classe
ArrayList como todas as classes pertencentes a hierarquia de Collections so genricas, permitindo que
o uso destas possa ser feito por qualquer objeto.
O uso adequado de tipos genricos apresenta inmeras vantagens, a maior delas o grande
reaproveitamento de cdigo, alm disso as classes genricas eliminam a necessidade de cast e deixam
o cdigo mais robusto.
Em cdigos que utilizam genricos, o compilador responsvel por remover o parmetro de tipo
e substituir por tipos reais. Esse processo ocorre na traduo para bytecodes e definido como
erasure.
Classes genricas
As classes genricas ou parametrizadas aceitam parmetros em sua declarao. Como os
parmetros contidos nos mtodos, os parmetros de tipos - definio dos parmetros genricos - ,
podem ser utilizados com diferentes entradas.
public class ExemploGenerico<T> {
}
Na declarao de classe, necessrio colocar aps o nome da classe, o indicador genrico. O

indicar genrico definido por uma letra que ser substituda no momento da compilao e podem
representar apenas tipos por referncia. Tipos primitivos no so permitidos, porm podem manipular
objetos de classes empacotadoras de tipos. O indicador genrico fica dentro de uma seo de
parmetros delimitada por colchetes angulares (< e >). Cada seo de parmetros pode ter um ou mais
indicadores, separados por vrgulas.
Por conveno, os indicadores so nomeados por letras maisculas nicas e obedecem a
seguinte padronizaao:
E - Elemento
K - Chave
N - Nmero
T - Tipo
V - Valor
Para utilizar uma classe genrica, a instanciao feita da seguinte forma:
27
Rosiclia Frasson
ExemploGenerico<ExemploObjeto> eg = new ExemploGenerico<ExemploObjeto>();
Mtodos genricos
Um grande recurso da orientao a objetos a sobrecarga de mtodos. Na sobrecarga,
possvel a definio de mtodos com o mesmo nome, porm com tipo ou quantidade de parmetros
diferentes. Caso haja a necessidade de um mtodo funcionar para tipos de objetos diferentes, so
definidos mtodos para cada tipo de dado.
O uso de generics permite que uma nica declarao de mtodo com argumentos de tipos
diferentes seja codificada, nos casos em que as operaes realizadas forem idnticas para todos os
tipos de dados.
public T pesquisar (I pk) {
T tipo;
}
Da mesma forma, que nas classes genricas, os mtodos genricos possuem uma seo de
parmetros de tipos, que precedem o tipo de retorno do mtodo. Nos mtodos genricos, os
indicadores podem representar o tipo de retorno, tipos de parmetros e tipos de variveis locais.
Os mtodos genricos podem ser sobrecarregados por mtodos genricos e no genricos. Na
ocorrncia de sobrecarga, o compilador procura pelo mtodo que mais se adequa aos tipos de
argumentos especificados na chamada. Primeiramente ele procura nos mtodos no genricos, caso
no encontre uma correspondncia precisa de tipos, tenta localizar um mtodo genrico
correspondente.
PASSO-A-PASSO
DAO Genrico
Quando a persistncia dos dados de uma aplicao feita utilizando JPA, a implementaao
do CRUD idntica, diferindo apenas o tipo de dados utilizado. Desta forma, uma boa soluo para
reduzir a quantidade de cdigo implementado seria a utilizao de Generics. Alm da reduo de
cdigo, o uso de classes genricas facilita posteriores modificaes, pois os mtodos ficam todos
centralizados.
O primeiro passo para a criao de um DAO genrico a criao de uma interface contendo a
assinatura dos mtodos comuns a serem implementados por todos os DAOs. Segue a seguir.
package br.com.rosicleiafrasson.cap2jpagenerico.model.persistencia.dao;
import java.util.List;
public interface DAO <T, I> {
28
Rosiclia Frasson
T save(T entity);
boolean remove(Class <T> classe, I pk);
T getById(Class<T> classe, I pk);
List<T> getAll(Class<T> classe);
EntityManager getEntityManager();
Concluda a interface DAO, o prximo passo a criao de uma classe que implementa este
DAO. Essa classe ser chamada de DAOJPA. Por questes de organizao a classe criada ser
abstrata e todas as entidades tambm possuiro seus DAOs especifcos que devem herdar de DAO e
DAOJPA. As implementaes especficas no necessitam sobrescrever os mtodos comuns j
implementados.
package br.com.rosicleiafrasson.cap2jpagenerico.model.persistencia;
import br.com.rosicleiafrasson.cap2jpagenerico.model.persistencia.dao.DAO;
import javax.persistence.NoResultException;
import javax.swing.JOptionPane;
public abstract class DAOJPA<T, I> implements DAO<T, I> {
private JPAUtil conexao;
@Override
public T save(T entity) {
T saved = null;
try {
getEntityManager().getTransaction().begin();
saved = getEntityManager().merge(entity);
getEntityManager().getTransaction().commit();
} catch (Exception e) {
if (getEntityManager().getTransaction().isActive() == false) {
}
29
Rosiclia Frasson
getEntityManager().getTransaction().rollback();
JOptionPane.showMessageDialog(null, "Erro ao salvar elemento na base de
dados" + e.getMessage());
}
return saved;
}
@Override
public boolean remove(Class<T> classe, I pk) {
boolean estado = false;
try {
getEntityManager().remove(getEntityManager().getReference(classe, pk));
getEntityManager().getTransaction().commit();
if (getEntityManager().getTransaction().isActive() == false) {
}
getEntityManager().getTransaction().rollback();
JOptionPane.showMessageDialog(null, "Erro ao remover elemento na base de
dados" + e.getMessage());
}
return estado;
}
@Override
public T getById(Class<T> classe, I pk) {
try {
return getEntityManager().find(classe, pk);
} catch (NoResultException e) {
return null;
}
}
@Override
public List<T> getAll(Class<T> classe) {
return getEntityManager().createQuery("select x from " + classe.getSimpleName()
+ " x").getResultList();
}
@Override
30
Rosiclia Frasson
public EntityManager getEntityManager() {

if (conexao == null) {
conexao = new JPAUtil();
}
return conexao.getEntityManager();
}
}
O DAOJPA responsvel pelas principais aes de movimentao dos dados de todas as

entidades. Dessa forma as inseres, remoes, atualizaes na base de dados so definidas nesta
classe. As pesquisas pela chave primria e a pesquisa de todos os registros de determinada entidade
tambm j esto implementadadas. Vale ressaltar, que os mtodos citados no precisam ser
sobrescritos em seus DAOs especficos, j que a implementao definida na classe DAOJPA funciona
para todas as entidades.
A fim de exemplificar, a utilizao de um DAO genrico para mapeamento de uma entidade, foi
criada a classe Pessoa, com apenas dois atributos. As regras de mapeamento prevalecem as
mesmas j citadas.
package br.com.rosicleiafrasson.cap2jpagenerico.model;
@Entity
public class Pessoa {
@Id @GeneratedValue
private int id;
//Gets e sets
}
Para que a entidade Pessoa, possa utilizar as operaes do DAO genrico necessrio criar
uma interface que extenda de DAO, neste exemplo PessoaDAO. Os parmetros Pessoa e Integer so
necessrios porque a interface DAO, como classe genrica, parametrizada e necessita dos
parmetros tipo de classe e tipo de chave primria, nesse caso, Pessoa e Integer.
Se forem necessrios mtodos de busca especficos para a entidade Pessoa, ou seja,
diferentes dos mtodos existentes no DAO genrico, os mesmos devem ser declarados na interface
PessoaDAO.
package br.com.rosicleiafrasson.cap2jpagenerico.model.persistencia.dao;
import br.com.rosicleiafrasson.cap2jpagenerico.model.Pessoa;
31
Rosiclia Frasson
public interface PessoaDAO extends DAO <Pessoa, Integer>{

}
Alm da interface, tambm faz-se necessrio a criao de uma classe concreta que estenda
de DAOJPA e implemente a interface correspondente a interface da entidade. Nessa classe, se
necessrio, so efetuadas as implementaes dos mtodos especficos a entidade Pessoa.
import br.com.rosicleiafrasson.cap2jpagenerico.model.persistencia.dao.PessoaDAO;
public class PessoaDAOJPA extends DAOJPA<Pessoa, Integer> implements PessoaDAO{

}
A utilizao de tipos genricos no exclui a necessidade de uma fbrica de entityManager, a

JPAUtil. Segue a implementao da mesma.
import javax.persistence.EntityManagerFactory;
import javax.persistence.Persistence;
public class JPAUtil {
private static final String UNIT_NAME = "JPAGenericoPU";

private EntityManagerFactory emf = null;
private EntityManager em = null;
public EntityManager getEntityManager() {
if (emf == null) {
emf = Persistence.createEntityManagerFactory(UNIT_NAME);
}
if (em == null) {
em = emf.createEntityManager();
}
return em;
}
}
importante perceber que a definio de uma varivel para o armazenamento do nome da

unidade de persistncia aumenta a visibilidade do cdigo. As condicionais para verificao da
32
Rosiclia Frasson
existncia de objetos EntityManager e EntityManagerFactory antes a criao dos mesmos, aumenta a

performance da aplicao.
O arquivo persistence.xml segue a estrutura padro anteriormente apresentada.
Para atestar a validade dos mtodos genricos foi efetuada a insero de uma pessoa na base
de dados e posteriormente a listagem das pessoas que esto cadastradas. Segue o cdigo de teste.
package br.com.rosicleiafrasson.cap2jpagenerico.teste;
import br.com.rosicleiafrasson.cap2jpagenerico.model.persistencia.PessoaDAOJPA;
public class Teste {
public static void main(String[] args) {

PessoaDAOJPA dao = new PessoaDAOJPA();
Pessoa p = new Pessoa();

p.setNome("Teste");
dao.save(p);
List<Pessoa> pessoas = dao.getAll(Pessoa.class);
for (Pessoa pessoa : pessoas) {

System.out.println(pessoa.getNome());
}
}
}
Em aplicaces com uma quantidade maior de entidades, a utilizao do DAO genrico

semelhante com o exemplo apresentado. Todas as entidades devem possuir seu DAO que extende
do DAO genrico e seu DAOJPA que implementa o seu DAO e extende do DAOJPA. A seguir uma
ilustraao de uma aplicao que contm as entidades funcionrio e produto.
33
Rosiclia Frasson
importante perceber que a entidade funcionrio possui mtodos de pesquisa por nome e
idade e a entidade produto possui os mtodos de pesquisa por descrio e categoria. Como os
mtodos citados, no so utilizados
utilizados por todas as entidades, o ideal que os mesmos sejam
implementados em seus DAOs especficos.
34
Captulo 3 - HTML
Rosiclia Frasson
HTML
O W3C, rgo responsvel pela padronizao da internet, define HTML (Hyper Text Markup
Language) como uma linguagem de marcao para a construo de pginas web, ou seja, todas as
pginas web do mundo inteiro so construdas utilizando HTML.
O HTML uma linguagem de marcao formada por tags. Diversas tags so disponibilizadas
pela linguagem e cada uma possui uma funcionalidade especfica. As tags so definidas com os
caracteres < e > e seu nome. As tags precisam ser abertas e fechadas. O fechamento de uma
u
tag
feito utilizando uma barra /.
Estrutura HTML
Todos os documentos HTML possuem obrigatoriamente uma estrutura padro composta pelas
tags html, head e body. Segue um detalhamento sobre essas tags essenciais em documentos HTML:
<html> </html>
Essa tag indica o incio e o fim do documento html. Dentro desta tag so
necessrias as tags head e body, apresentadas a seguir.
<head> </head>
O elemento head representa o cabealho de um documento. Dentro do

cabealho devem ser inseridas informaes de configurao para
pa o browser.
Dessa forma, o contedo da tag head no exibido pelo navegador.
<body> </body>
Dentro da tag body so definidas informaes que devem ser exibidas pelo
browser.
Alm das tags obrigatrias anterirmente descritas, um documento

documento HTML tambm necessita da
instruo DOCTYPE. Essa instruo indica ao navegador a verso do HTML que o documento foi
escrito. Ao utilizar a verso 5 do HTML a instruo DOCTYPE deve ser semelhante a exibida a seguir:
<!DOCTYPE html>
A seguir est ilustrada a estrutura padro de uma pgina HTML.
<!DOCTYPE html>
<html>
<head>
<title>
<title>Ttulo
da pgina</title>
<meta charset="UTF-8">
</head>
<body>
35
Captulo 3 - HTML
Rosiclia Frasson
</body>
</html>
Como visto no cdigo acima, todo documento html deve iniciar com a tag <html> e fechar com
</html>. Todas as demais tags devem ficar entre a abertura e o fechamento desta.
A tag <head> possui informaes para o navegador. Os dados contidos dentro desta tag no
so exibidos na rea do documento no navegador.
navegador. imprescindvel que dentro da tag <head> exista a
tag <title>, que indica o ttulo do documento que exibido na barra de ttulo do navegador.
Para que os caracteres como acentos e cedilha apaream corretamente no navegador,
necessrio informar o tipo de codificao utilizada por meio da configurao charset na tag <meta>.
Atualmente para essa configurao utilizado o valor UTF-8,
UTF 8, tambm chamado de Unicode.
A tag <body> contm o corpo do documento que exibido pelo navegador. Dentro do body
que sero colocados todos os elementos que devem aparecer na janela.
O DOCTYPE um comando especial que indica ao navegador qual a verso do html utilizar. No
trecho de cdigo ilustrado, a declarao de DOCTYPE simples, indica que deve ser usada a ltima
verso do html.
Alm da estrutura apresentada, existem inmeras tags que podem ser utilizadas em documentos
HTML. Segue uma lista das mais utilizadas:
Tag
Descrio
h1, h2, h3, h4, h5 e h6
Define cabealhos. A importncia dos cabealhos dada pelos nmeros

aps o h. Onde h1 o cabealho mais importante e o h6 o de menor
importncia.
<h1>Ttulo 1</h1>
<h2>Ttulo 2</h2>
<h3>Ttulo 3</h3>
<h4>Ttulo 4</h4>
<h5>Ttulo 5</h5>
<h6>Ttulo 6</h6>
Define um link que leva o usurio para outros documentos.

<a href="pagina2.html">link para outra pgina</a>
pgina
36
Captulo 3 - HTML
link
Rosiclia Frasson
Define um link para fontes externas que sero usadas no documento.

<link rel="stylesheet" type="text/css" href="style.css">
href=
Define um pargrafo.
<p>Lorem
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Etiam eget ligula eu lectus lobortis condimentum. Aliquam
nonummy auctor massa. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Nulla
at
risus.
Quisque
purus
magna,
auctor
et,
sagittis
ac,
posuere eu, lectus. Nam mattis, felis ut adipiscing.</p>

adipiscing.
<p>Lorem
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Etiam eget ligula eu lectus lobortis condimentum. Aliquam
nonummy auctor massa. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Nulla
at
risus.
Quisque
purus
magna,
auctor
et,
sagittis
ac,
posuere eu, lectus. Nam mattis, felis ut adipiscing.</p>

adipiscing.
ul / li
ul: Define uma lista de elementos.

li: Define um elemento da lista.
<ul>
<li>Sorvete</li>
<li>Chocolate</li>
<li>Caf</li>
</ul>
table / tr / td
table: Define uma tabela.

td: Define uma clula da tabela.
tr: Define uma linha da tabela.
<table >
37
Captulo 3 - HTML
Rosiclia Frasson
<tr>
<td>Clula 1</td>
<td>Clula 2</td>
</tr>
<tr>
<td>Clula 3</td>
<td>Clula 4</td>
</tr>
</table>
Formulrios HTML
Os formulrios so usados para obter dados do usurio para serem processados. Um formulrio
composto por trs partes: a tag form, os elementos do formulrios e os botes de envio. As tags form
delimitam o formulrio, tendo como principais atributos:
action: especifica o que ser executado quando o usurio enviar os dados.
method: Especifica se o mtodo de envio ser get ou post. O mtodo get envia o conjunto de
dados junto com a URL.. No mtodo post, os dados no so mostrados na URL.
Os formulrios devem ser compostos por elementos de interao com o usurio. Segue uma
lista com os principais:
input: Este elemento cria vrios tipos de controle e o atributo type quem define o tipo de
controle que ser utilizado. Alguns valores para o atributo type:
Valor atributo type
Descrio
text
Campo de entrada de dados com apenas uma linha.

Nome: <input type="text" name="nome"
password
id=
id="name"
/>
Campo de senha.
Senha:<input type="password" name="senha"
"senha">
radio
Boto de opo.
38
Captulo 3 - HTML
Rosiclia Frasson
Sexo: <br>
<input type="radio" name="sexo" value="m">Masculino
Masculino<br>
<input type="radio" name="sexo" value="f">Feminino
Feminino<br>
checkbox
Caixa de seleo.
Veculo:
Veculo:<br>
<input type="checkbox" name="veiculo"
value=
value="Bicicleta">Bicicleta<br>
<input type="checkbox" name="veiculo" value="Carro"
"Carro">Carro<br>
<input type="checkbox" name="veiculo"
value=
value="Motocicleta">Motocicleta<br>
submit
Boto para envio de formulrio.

<input type="submit" value="Salvar"
"Salvar">
reset
Boto para limpar os campos do formulrio.

<input type="reset" value="Cancelar"
"Cancelar">
select: Elemento para a criao de listas de seleo.

Estado civil:
<select>
<option value="solteiro">Solteiro</option>
<option value="casado">Casado</option>
<option
option value="divorciado">Divorciado</option>
<option value="viuvo">Vivo</option>
</select>
39
Captulo 3 - HTML
Rosiclia Frasson
textArea: Campo de entrada de dados que pode possuir mais de uma linha.
Observaes: <br>
<textarea name="observacoes"cols="30"
name=
rows="4"></textarea>
></textarea>
PASSO-A-PASSO
Exemplo pgina html
1. No projeto criado no passo-a-passo
passo anterior, o arquivo index.html deve conter o cdigo mostrado
abaixo.
<!DOCTYPE html>
<html>
<head>
<title>
<title>Exemplo
pgina HTML</title>
charset=
</head>
<body>
<h1>Primeira
Primeira pgina HTML</h1>
HTML
<p>Essa
Essa a primeira pgina usando HTML.</p>
HTML.
</body>
</html>
2. Ao executar a aplicao, deve ser mostrada a janela ilustrada abaixo.
40
Captulo 3 - HTML
Rosiclia Frasson
HTML 5
Estrutura bsica do HTML 5
<header>:: Especifica o cabealho de um documento ou de uma seo.

<footer>:: Especifica o rodap de um documento ou seo. Normalmente o rodap de um
documento contm o autor do documento, informaes de copyright, links para termos de uso e
41
Captulo 3 - HTML
Rosiclia Frasson
informaes de contato.
<section>:: Delimita as sees de um documento.
<nav>:: Representa uma seo da pgina que contm um conjuntos de links de navegao.
Geralmente esse elemento utilizado no menu principal e nos blocos de links colocados no
rodap.
<aside>: Representa um contedo secundrio que no faz parte do contedo principal do site.
Esta marcao bastante utilizada em sidebars e publicidade.
<article>:: Delimita um contedo que se constitui em um componente autosuficiente que pode
ser distribudo ou reusado de forma independente. recomendado o uso deste elemento em
posts de frums e blogs, notcias e comentrios.
<main>:: Define o contedo principal da pgina, ou seja, representa o contedo mais importante
da pgina.
Novos tipos de campos

Novos valores atributo
Descrio
tel
Campo usado para armazenar um telefone. Por no existir um padro

definido para nmeros de telefone, este tipo no possui mscara de
formatao ou validao. Se necessrio, a validao deve ser feita com
o uso do atributo pattern.
Telefone:
<input type="tel" name="tel" >
search
Campo de busca. Por ser um campo de busca a estilizao do

componente diferenciado.
<input type="search" name="procura"
"procura" >
email
Campo de email com formatao e validaao.

Email:
<input type="email" name="email"
"email" >
url
Campo para endereo url com formatao e validao.
42
Captulo 3 - HTML
Rosiclia Frasson
Site:
<input type="url" name="site" >
datetime
Campo destinado a receber data e hora.

Data de nascimento:
<input type="datetime" name="data"
"data" >
datetime-local
Campo destinado a receber data e hora segundo a hora local, ou seja

trata automaticamente a diferena entre fusos horrios.
Data de cadastro:
<input type="datetime-local" name="data"
"data" >
date
Campo destinado a data.

Data de cadastro:
<input type="date" name="data" >
month
Campo destinado a receber ms e ano.

Ms:
<input type="month" name="mes" >
week
Campo destinado a receber a semana e o ano.

Semana:
<input type="week" name="semana" >
43
Captulo 3 - HTML
time
Rosiclia Frasson
Campo destinado para receber hora.

Horrio:
<input type="time" name="horrio"
"horrio" >
number
Campo destinado a entrada de nmeros.

Idade:
<input type="number" name="idade"
"idade" >
range
Campo destinado a receber um nmero dentro de um intervalo.

Volume:
<input type="range" name="volume" min="0" max="100" >
color
Campo seletor de cor.

Cor:
<input type="color" name="cor" >
44
Captulo 3 - HTML
Rosiclia Frasson
Recursos de formulrios
Recurso
Descrio
autofocus
Atribui o foco ao campo com o atributo quando a pgina carregada.
placeholder
Atribui dentro de um input um texto que ser apagado quando o usurio

comear a digitar dentro de um campo.
required
Determina que o preenchimento do campo obrigatrio.
maxlenght
Limita a quantidade de caracteres em um campo. No HTML5, o elemento

textArea tambm possui essa propriedade.
patternn
Determina
rmina que o preenchimento do campo deve seguir um padro definido por
uma expresso regular.
Elementos de audio e vdeo

Elemento
Descrio
audio
Adiciona um som na pgina. necessrio declarar o caminho do arquivo

de som no atributo src do elemento. O atributo control adiciona controles
de audio como os botes play e pause e controle de volume.
<audio controls>
<source src="kalimba.mp3" type="audio/mpeg"
"audio/mpeg">
Seu navegador no suporta o elemento de audio.
</audio>
video
Adiciona um elemento de vdeo na pgina. Da mesma forma que no

elemento de audio, necessrio declarar o caminho do arquivo. O
atributo control adiciona os controles de vdeo como play, pause e som.
<video width="320" height="240" controls>
>
<source src="amostra.mp4" type="video/mp4"
"video/mp4">
Seu navegador no suporta o elemento de vdeo.
</video>
45
Captulo 3 - HTML
Rosiclia Frasson
46
Captulo 4 - CSS
Rosiclia Frasson
CSS
Os usurios de pginas web esto cada vez mais exigentes. As pginas web devem ter boa
usabilidade, possuir uma navegao simples e agradvel, onde o usurio possa concluir sua tarefa em
poucos passos. Alm disso, o usurio deseja pginas que sejam visualmente atraentes. Como visto no
captulo anterior a criao de pginas utilizando apenas componentes JSF,
JSF, no deixa as mesmas
esteticamente bonitas.
Para aprimorar o visual, necessrio aplicar CSS (Cascading Style Sheets) nas pginas. O CSS
usado para definir a aparncia da pgina. Com ele possvel definir a cor, o tamanho, o
posicionamento, entre outros
utros detalhes, dos componentes HTML.
Declarao do CSS
O CSS pode ser declarado diretamente na tag ou na seo head de uma pgina HTML, no
entanto, mais comum e produtivo utilizar folhas de estilo externas, j que essa abordagem permite
que o mesmo estilo seja aplicado em diversas pginas. Essas folhas de estilos possuem a extenso
.css.
A indicaco do uso de uma folha de estilo deve ficar dentro da tag head. Segue exemplo de
declarao de uma folha de estilo.
<head>
<link rel="stylesheet"
"stylesheet" type="text/css" href="style.css"
"style.css">
</head>
Sintaxe do CSS
Uma regra CSS pode ser dividida em duas partes: seletor e declarao. O seletor normalmente
o elemento HTML que deve receber o estilo. A declarao composta por uma propriedade e um
valor. Por sua vez a propriedade um atributo de estilo que ser aplicado. Cada propriedade deve
possuir um valor.
Alm de definir um estilo para um elemento HTML, possvel especificar seletores utilizando
classes e ids. Um id uma identificao nica, s pode ser utilizado uma vez na pgina html. J a
classe reutilizvel, ou seja, pode ser repetida na mesma pgina.
Os seletores podem ser combinados para aplicar formataes mais especficas. Tambm
possvel aplicar um bloco de declaraes para mais de um seletor.
se
47
Captulo 4 - CSS
Rosiclia Frasson
HTML
CSS
<div id="cabecalho">
#cabecalho{
Aqui vai o cabealho do site
/*Declaraes*/
</div>
<div id="conteudo">
<div class="subtitulo">
#conteudo{
<p>subttulo 1 </p>
/*Declaraes*/
</div>
<div class="subtitulo">
<p>subttulo 2 </p>
#rodape{
</div>
/*Declaraes*/
</div>
<div id="rodape">
Aqui vai o rodap do site
.subtitulo{
</div>
/*Declaraes*/
}
Propriedades
background-color
Especifica a cor de um elemento de fundo. Em CSS a cor pode ser

especificada:
em hexadecimal: #FFFFFF.
em RGB: rgb(255,0,0).
pelo nome da cor: red.
body{
background-color: #082767;
}
background-image
Indica um arquivo de imagem para ser exibido no fundo do elemento.

body{
background-image: url("fundo.png");
}
background-repeat
Controla a repetio da imagem de fundo. Essa propriedade pode

conter os seguintes valores:
repeat: a imagem repetida tanto na horizontal quanto na
vertical.
repeat-x: a imagem repetida na horizontal.
repeat-y: a imagem repetida na vertical.
no-repeat: a imagem no repetida.
body{
48
Captulo 4 - CSS
Rosiclia Frasson
background-repeat: no-repeat;
}
background-attachment
Define se a imagem de fundo fixa ou se rola junto com a pgina.

Possui dois valores fixed e scroll.
body{
background-attachment: scroll;
}
color
Define a cor de um elemento. Normalmente a cor especificada em

nmeros hexadecimais, porm tambm ser definida atravs de seu
nome ou RGB.
p{
color: #23FF56;
}
text-align
Define o alinhamento horizontal do texto. Os valores disponveis para

esta propriedade so:
center: texto alinhado ao centro.
right: texto alinhado direita.
left: texto alinhado esquerda.
justify: texto justificado.
p{
text-align: left;
}
text-decoration
Propriedade que permite adicionar ou retirar a decorao de um texto.

Pode conter os seguintes valores:
underline: texto sublinhado.
line-through: texto tachado.
overline: texto com sobrelinha.
blink: texto que pisca.
none: sem decorao.
h1{
text-decoration: underline;
}
text-transform
Permite transformaes no formato caixa-alta ou caixa-baixa no texto.

Permite os seguintes valores:
capitalize: primeira letra das palavras em maiscula.
lowercase: todas as letras em maisculas.
uppercase: todas as letras em minsculas.
none: sem efeito.
h1{
text-transform: uppercase;}
49
Captulo 4 - CSS
text-ident
Rosiclia Frasson
Permite que um recuo seja aplicado na primeira linha do pargrafo.

p{
text-ident: 30px;
}
font-family
Define a famlia de fonte utilizada. Normalmente definida uma lista de

fontes e sua prioridade para apresentao na pgina. Dessa forma, se
a primeira fonte da lista no estiver instalada na mquina do usurio,
dever ser usada a segunda. Se a segunda tambm no estiver
instalada usa-se a terceira e assim at ser encontrada uma fonte
instalada.
As fontes podem ser definidas pelo nome da famlia, como por
exemplo, Times New Roman, Georgia, Arial, Tahoma. Tambm podem
ser definidas fontes de famlias genricas, ou seja, fontes que
pertencem a um grupo com aparncia uniforme. Dentre as famlias
genricas podem ser citadas:
serif: fontes que possuem p.
sans-serif: fontes que no possuem p.
monospace: fontes que possuem todos os caracteres com uma
largura fixa.
recomendado que a lista de fontes seja encerrada com uma fonte
genrica.
h1 {
font-family: arial, verdana, sans-serif;
}
font-style
Define o estilo da fonte que pode ser normal, italic e oblique.

h1 {
font-style: italic;
}
font-size
Define o tamanho da fonte. O tamanho da fonte pode ser definido em

pixel ou em. O tamanho de 1 em equivale a 16 px.
h1 {
font-size:2.5em;
}
h1 {
font-size:40px;
}
list-style-type
Define o estilo de marcador de uma lista. Em uma lista no ordenada

os marcadores devem ser sempre do mesmo tipo e podem assumir os
seguintes valores:
none: sem marcador.
disc: crculo preenchido.
50
Captulo 4 - CSS
Rosiclia Frasson
circle: crculo no preenchido.

square: quadrado cheio.
J nas listas ordenadas, os marcadores podem ser:
decimal: nmero decimal.
decimal-leading-zero: o marcador um nmero decimal com
dois dgitos.
upper-latin: o marcador composto por letras maisculas.
lower-latin: o marcador composto por letras minsculas.
upper-roman: o marcador composto por letras romanas.
ul {
list-style-type: circle;
}
width
Define a largura de um elemento.

h1 {
width: 200px;
border: 1px solid black;
background: orange;
}
height
Define a altura de um elemento.

h1 {
height: 50px;
border: 1px solid black;
background: orange;
}
float
Desloca um elemento para a esquerda ou para a direita.

#figura {
float:left;
width: 100px;
}
Para limpar a flutuao dos elementos posteriores, necessrio utilizar

a propriedade clear com o valor both.
Links
Os links podem ser formatados usando qualquer propriedade CSS. Diferentemente do que
ocorre com outros seletores, os links podem ser formatados de acordo com o seu estado.
a:link
Estiliza um link no visitado.

a : link {
51
Captulo 4 - CSS
Rosiclia Frasson
color: green;
}
a:visited
Estiliza um link j visitado pelo usurio.

a: visited {
color: blue;
}
a:hover
Estiliza o link quando o mouse est sobre ele.

a:hover: visited {
background-color:#FF704D;
}
a: active
Estiliza o link quando est sendo clicado.

a:active {
background-color:#FF704D;
}
Box Model
O box model uma espcie de caixa que envolve todos os elementos HTML. O box model
possui opes de ajuste de margem, borda, preenchimento e contedo para cada elemento.
margin: rea limpa ao redor da borda. A margem no possui uma cor de fundo, que
completamente transparente.
border: rea que gira em torno do contedo e do padding.
52
Captulo 4 - CSS
Rosiclia Frasson
padding: rea limpa ao redor do contedo.

content: rea onde o texto e as imagens aparecem.
border-style
Define o estilo da borda. Alguns estilos suportados:

none: sem borda.
dotted: borda pontilhada.
dashed: borda tracejada.
solid: borda em linha slida.
double: define duas bordas.
h1 {
border-style: dotted;
}
Para que as demais propriedades de borda surtam efeito, o border-style deve ser
diferente de none.
Os lados que compem a borda podem possuir propriedades diferentes. Nesse caso,
necessrio indicar o lado em que a propriedade ser aplicada: top, bottom, right e left.
border-width
Define o tamanho da borda. A espessura pode ser definida em pixels ou utilizando os

valores thin, medium, e thick (fina, mdia e grossa).
h1 {
border-width: thick;
}
border-color
Define a cor da borda.

h1 {
border-color: gold;
}
margin
Define uma margem para o elemento. Esta propriedade adiciona espao aps o limite
do elemento. possvel indicar o lado que a margem ser aplicada utilizando bottom,
top, left e right.
possvel tambm aplicar margens diferentes em uma mesma propriedade. Sendo
que o primeiro valor representa top, o segundo right, o terceiro bottom e o ltimo left.
body{
margin:25px 50px 75px 100px;
}
h1{
margin-top: 10px;
margin-bottom: 20px;
margin-left: 15px;
margin-right: 30px;
}
padding
Define uma margem interna para o elemento, ou seja, a distncia entre o limite do
53
Captulo 4 - CSS
Rosiclia Frasson
elemento, sua borda e seu contedo.

body{
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}
CSS3
O CSS3 o novo padro para CSS. compatvel com as verses anteriores e possui alguns
recursos interessantes. A seguir so listados alguns.
border-radius
Adiciona bordas arredondadas ao elemento.

div{
border-radius:25px;
}
box-shadow
Define sombra aos elementos da pgina. Este atributo necessita de alguns

valores para especificar as caractersticas da sombra:
Deslocamento horizontal da sombra: Corresponde ao primeiro valor do
atributo. Se for definido um valor positivo a sombra deve aparecer
direita do elemento. Para sombra
sombra aparecer esquerda do elemento,
necessrio definir um valor negativo.
Deslocamento vertical da sombra: Corresponde ao segundo valor da
propriedade. Corresponde ao deslocamento vertical da sombra com
relao ao elemento que a produz. Se for definido um valor positivo a
sombra aparece abaixo do elemento e um valor negativo aplica a
sombra acima do elemento.
Esfumaado: o terceiro valor da propriedade. O valor zero indica
que a sombra no esfumaada. Valores maiores aumentam o efeito.
cor da sombra: o ltimo elemento. Podem ser utilizados os nomes
das cores, rgb ou hexadecimal.
Para o Firefox essa propriedade definida como -moz
moz-box-shadow. Para o
Chrome e Safari a propriedade definida como -webkit
webkit-box-shadow.
#caixa{
width: 100px;
height: 100px;
background: #CFE2F3;
box-shadow: 5px 5px 3px #333;
54
Captulo 4 - CSS
Rosiclia Frasson
-webkit-box-shadow: 5px 5px 3px #333;

#333
-moz-box-shadow: 5px 5px 3px #333;
#333
}
text-shadow
Propriedade que aplica sombras a um texto. Esta propriedade possui quatro

parmetros: o primeiro deles representa o deslocamento da sombra para a
direita (valor positivo) ou para a esquerda (valor negativo), o segundo
representa o deslocamento da sombra para baixo (valor positivo) ou para
cima (valor negativo), o quarto representa o raio para o esfumaado da
sombra e o ltimo parmetro representa a cor da sombra.
h1{
text-shadow: 1px 1px 4px #9B30FF;
#9B30FF
}
linear-gradient
Define um gradiente sem a utilizao de imagens. A propriedade aceita

valores para o ngulo do gradiente e as cores utilizadas.
Vale ressaltar que no navegador Safari o gradiente definido com a
propriedade: -webkit-linear-gradient, no Opera: -o-linear
linear-gradient e no Firefox:
-moz-linear
linear-gradient.
#caixa
#caixa{
width: 300px;
height: 100px;
background-image: linear-gradient(to bottom, white, blue);
}
Para auxiliar na criao de gradientes, existem algumas ferramentas

disponveis. Seguem duas delas:
http://www.colorzilla.com/gradient-editor/
http://www.colorzilla.com/gradient
http://www.css3factory.com/linear-gradients/.
http://www.css3factory.com/linear
@font-face
Propriedade que permite a utilizao de famlias de fontes fora do padro do

sistema operacional.
55
Captulo 4 - CSS
Rosiclia Frasson
@font-face {
font
font-family:
alexbrush;
src url('AlexBrush-Regular.ttf');
src:
}
p{
font
font-family:
alexbrush;
font
font-size:40px;
}
Para que a fonte escolhida funcione da maneira correta, necessrio utilizar

vrias extenses da mesma. Os formatos de fontes aceitos pelos
navegadores padres so .ttf, .eot, .otf, .svg e .svgz.
Arquivos de fontes podem ser encontrados em http://www.dafont.com/ e
http://www.google.com/fonts/.
/www.google.com/fonts/.
PASSO-A-PASSO
Construo de um menu horizontal
1. Inicialmente necessrio construir uma lista no ordenada. Os itens da lista devem ser links. Esta
lista deve ficar dentro do elemento NAV.
<!DOCTYPE HTML>
<html>
<head>
<title>Exemplo
Exemplo</title>
charset=
<link rel="stylesheet"
rel=
href="css/style.css" />
</head>
<body>
<header>
<nav id="menu">
id=
<ul>
<li><a href="#lancamento">Lanamento</a></li>
</a></li>
<li><a href="#marca">Marca</a></li>
<li><a href="#campanha">Campanha</a></li>
</a></li>
<li><a href="#colecao">Coleo</a></li>
56
Captulo 4 - CSS
Rosiclia Frasson
<li><a href="#contato">Contato</a></li>
</ul>
</nav>
</header>
</body>
</html>
2. Com o CSS a formatao da lista deve ser removida.

#menu ul {
list-style-type: none;
}
3. Por padro as listas HTML possuem um recuo a esquerda. Para remover o recuo necessrio
setar valor 0 para margin e para o padding.
#menu ul {
margin:0;
padding:0;
}
57
Captulo 4 - CSS
Rosiclia Frasson
4. Para forar que os elementos fiquem em uma mesma linha necessrio aplicar a formatao a
seguir.
#menu ul li {
display: inline;
}
5. Para remover o sublinhado do texto, necessrio retirar a formatao do link.

#menu ul li a {
text-decoration: none;
}
6. Cada item da lista deve se comportar como uma caixa, para que a formatao possa ser aplicada.
O elemento padding concede esse efeito. Para que o mesmo seja visvel foi aplicada uma cor de
fundo nos links presentes na lista. Tambm foi alterada a cor, o tamanho e o peso da fonte.
#menu ul li a {
padding: 10px 30px;
color: #FFFFFF;
background-color: #1C1C1C;
font-size:18px;
font-weight:bold;
}
58
Captulo 4 - CSS
Rosiclia Frasson
7. Para que o menu fique atraente, interessante alterar a formatao quando o mouse for
posicionado sobre o elemento. Foi alterada a cor da fonte e a cor de fundo.
#menu ul li a:hover {
background
background-color:#999999;
color:
color:#000000;
box
box-shadow:
0 5px 10px #CCC;
text
text-shadow:
1px 1px 2px #FFFFFF;
}
8. Para que o menu fique centralizado na pgina, necessrio adicionar uma nova formatao.
#menu ul {
margin:0;
padding:0;
text-align: center;
}
PASSO-A-PASSO
Construo formulrio de contato
1. Inicialmente necessrio construir um formulrio de contato. Aproveitando as tags da HTML5 o
formulrio foi colocado dentro de uma section. Com o intuito de deixar o formulrio mais clean, os
campos no possuem rtulo, apenas uma informao indicativa sobre o que ele representa usando o
atributo placeholder.
Para auxiliar ma formatao os botes esto dispostos dentro de uma div.
<!DOCTYPE HTML>
<html>
<head>
<title>Exemplo
Exemplo formulrio contato</title>
contato
<link rel="stylesheet" href="css/style.css"
href=
/>
</head>
<body>
<section>
<header>
59
Captulo 4 - CSS
Rosiclia Frasson
<h2>Entre
Entre em contato!</h2>
contato!
<h6>Ornare
Ornare nulla proin odio consequat sapien vestibulum ipsum sed lorem.</h6>
lorem.
</header>
<form method="post" action="#">

<input type="text"
"text" name="nome" id="nome" class="cxTexto" placeholder="Nome"
placeholder=
/>
<input type="text"
"text" name="email" id="email" class="cxTexto" placeholder="Email"
placeholder=
/>
<input type="text"
"text" name="assunto" id="assunto" class="cxTexto"
"cxTexto"
placeholder="Assunto" />
<textarea name="messagem"
"messagem" id="messagem" placeholder="Mensagem"
"Mensagem"></textarea>
<div class="pnBotoes"
"pnBotoes">
<a href="#" class="button">Enviar Mensagem</a>
<a href="#" class="button">Limpar Formulrio</a>
</div>
</form>
</section>
</body>
</html>
2. Para melhorar a aparncia do formulrio necessrio aplicar algumas regras de CSS. Inicialmente
devem ser definidas as regras aplicadas a todo o corpo da pgina. No trecho de cdigo a seguir
podem ser identificadas regras para alterar a cor do fundo e da fonte da pgina.
body
body{
background-color: #303030;
color: #FFFFFF;
}
60
Captulo 4 - CSS
Rosiclia Frasson
2. Para formatar o ttulo foram aplicadas regras para alterar o tamanho da fonte, deixar o texto
centralizado e com uma sombra. Alm disso, foram atribudos valores para margem do elemento,
lembrando que o atributo h2 possui um tamanho de margem default que diferente em cada
navegador.
h2{
font-size: 30px;
text-align: center;
text-shadow: -1px -1px 0px #181818;
margin: 0 0 10px 0;
}
3. O subttulo do formulrio no momento apenas um Lorem ipsum. Este tipo de texto muito
utilizado na diagramao, com a finalidade de verificar o layout, a tipografia e a formatao quando
no possvel colocar o contedo real. As formataes aplicadas so similares a formatao do
ttulo, apenas um atributo referente ao peso da fonte.
h6{
font-size: 18px;
text-align: center;
font-weight: lighter;
margin: 0 0 10px 0;
}
4. Para deixar o formulrio centralizado necessrio que o mesmo tenha um tamanho definido. A
propriedade margin com os valores 0 auto centraliza qualquer elemento de bloco.
form{
width: 900px;
margin: 0 auto;
}
61
Captulo 4 - CSS
Rosiclia Frasson
5. Nas caixas de entrada de texto foi definida uma margem superior para atribuir um espaamento
entre os elementos.
entos. A propriedade padding aumenta o espao entre o texto e a borda do elemento,
neste caso foi setado o valor de 10 pixels. Tambm foi alterado o tamanho, a cor e o tipo de fonte
utilizado. Uma melhor estilizao foi possvel aumentando a largura dos elementos,
elementos, para que estes
fossem renderizados na largura total do formulrio. Outra alterao importante foi a retirada da borda
padro e a definio de uma borda arredondada e com sombreamento. A parte interna dos
componentes ganhou uma cor de fundo diferente
diferen para um melhor destaque.
input,textarea{
margin:15px 0 0 0;
;
border:0;
background: #282828;
#282828
box-shadow:
shadow: inset 0px 2px 5px 0px rgba(0,0,0,0.50), 0px 1px 0px 0px
rgba(255,255,255,0.050
050);
color: #FFFFFF;
border-radius: 8px;
8px
width: 100%;
padding: 10px;
font-size: 18px;
font-family:
family: Times New Roman, serif;
}
6. Para formatar o atributo placeholder necessrio manipular uma pseudo-class

pseudo
::placeholder. No
exemplo a seguir foi alterado a cor do texto.
::-moz-placeholder {
color: #CDCDCD;
}
7. O campo mensagem deve ser um pouco maior, dessa forma deve ser aplicado uma altura para o
mesmo.
textarea{
height:150px;
}
62
Captulo 4 - CSS
Rosiclia Frasson
8. Tambm foi atribuda um sombreamento diferenciado para os campos com foco.

input:focus, textarea:focus{
:focus{
box-shadow:
shadow: inset 0px 2px 5px 0px rgba(0,0,0,0.05), 0px 1px 0px 0px
rgba(255,255,255,0.025),
), inset 0px 0px 2px 1px #74CAEE;
}
9. Para retirar a formatao de link e melhorar o visual do boto algumas regras foram aplicadas.
Inicialmente foi colocada uma margem no painel que abriga os botes para forar um espaamento
com os demais campos do formulrio. Alm disso foram colocadas bordas, sombreamento, cor de
fundo e espaamento. Tambm foi retirada a formatao do link.
l
As pseudo-classes
classes hover e active formatam o boto na passagem do mouse e quando o elemento
clicado.
.pnBotoes{
margin-top:
top: 50px;
}
.button {
border-top:
top: 1px solid #96d1f8;
background: #65a9d7;
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
);
padding: 15px 20px;
border-radius:
radius: 9px;
box-shadow:
shadow: rgba(0,0,0,1)
rgba(
0 1px 0;
text-shadow:
shadow: rgba(0,0,0,.4)
rgba(
0 1px 0;
color: white;
white
font-family:
family: Times New Roman, serif;
text-decoration:
decoration: none;
font-size: 20px;
20px
63
Captulo 4 - CSS
Rosiclia Frasson
font-weight:
weight: bold;
margin-right:
right:10px;
}
.button:hover {
border-top-color:
color: #28597a;
background: #28597a;
color: #fffaff;
#fffaff
}
.button:active
:active {
border-top-color:
color: #1b435e;
background: #1b435e;
}
10. Para centralizar os botes no formulrio necessrio definir uma posio absoluta para o objeto e
definir uma distncia de 50% do lado esquerdo do documento (left: 50%). Para facilitar essa
manipulao a mesma ser aplicada na div que abriga os botes.
.pnBotoes{
margin-top: 50px;
position:absolute;
left: 50%;
}
64
Captulo 4 - CSS
Rosiclia Frasson
11. O CSS no usa o centro do objeto como referncia para o posicionamento, mas sim as
extremidades. Sendo assim, o que ficar no centro ser o canto esquerdo do objeto.
Para alinhar no centro necessrio identificar a largura do objeto (neste caso 400px). Identificada a
largura necessrio definir uma margem do lado esquerdo com o valor negativo da metade da
largura do objeto (200px).
.pnBotoes{
margin-top: 50px;
position:absolute;
left: 50%;
margin-left: -200px;
}
65
Captulo 4 - CSS
Rosiclia Frasson
PASSO-A-PASSO
Construo barra redes sociais com font icons
Para a construo de um barra de links para as redes sociais necessrio a utilizao de
cones. Antes do advento do CSS3 eram utilizadas imagens para este fim. No entanto, com o
aumento da variedade de dispositivos com resolues de telas diferentes e diversidade
di
de densidade
de pixels ficou invivel trabalhar desta forma.
Atualmente a melhor soluo para utilizao de cones a utilizao de uma famlia de fonte
no formato de cone. Como exemplos de fonts de cones podem ser citados o fontello e o icomoons.
icom
No exemplo a seguir ser utilizado o icomoons.
1. Inicialmente necessrio acessar o repositrio da fonte e escolher os cones que sero utilizados:
http://icomoon.io/app/#/select.
2. Clicando em Font, a pgina redirecionada para os cones escolhidos com seus respectivos
identificadores.
66
Captulo 4 - CSS
Rosiclia Frasson
3. necessrio fazer o download. Na pasta do download juntamente com os arquivos de fontes tem
um arquivo html e uma folha de estilo css com o demo dos cones baixados. Para utiliz-los,
necessrio copiar a pasta fonts para a pasta do projeto onde os cones devem ser utilizados.
4. Os botes referentes as redes sociais devem ser inseridos em uma lista de links. A seguir est
representado o cdigo HTML da pgina. Em cada elemento da lista atribuda uma classe para
posterior formatao.
<!DOCTYPE HTML>
<html>
<head>
<title>Exemplo redes sociais</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="social">
<ul>
<li><a class="icon-googleplus" href="#"></a></li>
<li><a class="icon-googledrive" href="#"></a></li>
<li><a class="icon-facebook" href="#"></a></li>
<li><a class="icon-instagran" href="#"></a></li>
<li><a class="icon-twitter" href="#"></a></li>
<li><a class="icon-youtube" href="#"></a></li>
<li><a class="icon-picassa" href="#"></a></li>
<li><a class="icon-github" href="#"></a></li>
<li><a class="icon-blogger" href="#"></a></li>
<li><a class="icon-skype" href="#"></a></li>
<li><a class="icon-linkedin" href="#"></a></li>
<li><a class="icon-pinterest" href="#"></a></li>
</ul>
</div>
</body>
</html>
5. Para utilizar a famlia de fontes necessrio declar-la no CSS da pgina.

@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?fe14q2');
src:url('fonts/icomoon.eot?#iefixfe14q2') format('embedded-opentype'),
url('fonts/icomoon.woff?fe14q2') format('woff'),
url('fonts/icomoon.ttf?fe14q2') format('truetype'),
67
Captulo 4 - CSS
Rosiclia Frasson
url('fonts/icomoon.svg?fe14q2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
6. Para adicionar o cone necessrio criar um pseudo-elemento antes (before) de qualquer objeto
que tenha no atributo class um valor que inicia com icon-.
[class^="icon-"]:before, [class*="icon-"]:before {
font-family: 'icomoon';
font-style: normal;
speak: none;
}
7. O pseudo-elemento before trabalha em parceria com uma propriedade chamada content. Sendo
assim em cada classe atribuda na propriedade content, o cdigo do cone correspondente.
.icon-googleplus:before {
content: '\e600';
}
.icon-googledrive:before {
content: '\e601';
}
.icon-facebook:before {
content: '\e602';
}
.icon-instagran:before {
content: '\e3';
}
.icon-twitter:before {
content: '\e603';
}
.icon-youtube:before {
content: '\e6';
}
.icon-picassa:before {
content: '\e604';
68
Captulo 4 - CSS
Rosiclia Frasson
.icon-github:before {
content: '\e605';
}
.icon-blogger:before {
content: '\e606';
}
.icon-skype:before {
content: '\ec';
}
.icon-linkedin:before {
content: '\ed';
}
.icon-pinterest:before {
content: '\e607';
}
8. Acessando a pgina possvel verificar que os cones j foram carregados. No entanto, a

formatao segue o padro de formatao das listas.
9. Para melhorar o design da pgina, algumas regras de formatao foram definidas.

#social ul {
margin:
margin:0;
69
Captulo 4 - CSS
Rosiclia Frasson
padding:
padding:0;
list
list-style-type:
none;
text
text-align:
center;
#social ul li {
display: inline;
}
#social ul li a {
text
text-decoration:
none;
padding: 10px;
color: #FFFFFF;
background
background-color:
#1C1C1C;
font
font-size:18px;
font
font-weight:bold;
border
border-radius:
3px;
}
#social ul li a:hover {
color:
color:#000000;
box
box-shadow:
0 5px 10px #CCC;
text
text-shadow:
1px 1px 2px #FFFFFF;
background: #999999;
}
70
Captulo 5 - Java EE
Rosiclia Frasson
JAVA EE
Com a popularizao da internet no cenrio mundial, as pginas web esto cada vez mais
presentes no dia-a-dia da populao. Como tendncia desse crescimento, as aplicaes corporativas
esto migrando para a plataforma web.
As aplicaes web apresentam diversas vantagens se comparadas com as aplicaes desktop.
A principal delas que no existe a necessidade de instalar a aplicao em cada mquina onde ser
utilizada. Toda a programao fica armazenada em um servidor - ou vrios servidores, dependendo da
infraestrutura - e os usurios conseguem acesso ao software atravs de um navegador.
Como no existe a necessidade de instalar o software, o usurio pode acessar a aplicao de
qualquer computador que possua um browser. A portabilidade tambm muito maior, visto que o
comportamento dos navegadores em sistemas operacionais distintos praticamente o mesmo. O
processo de atualizao de verso dos softwares tambm simplificado, pois apenas o servidor precisa
ser atualizado. A figura a seguir demonstra a arquitetura padro de um software utilizando JEE.
Na linguagem Java, para o desenvolvimento de aplicaes que rodem em um servidor, existe

um conjunto de especificaes j padronizadas. Essas especificaes fazem parte da Java Enterprise
Edition (JEE) e so publicadas pela Oracle e pelo Java Community Process (JCP) e podem ser
consultadas em http://jcp.org.
A idia que o desenvolvedor codifique apenas a lgica de negcio da aplicao. Recursos
como portabilidade, robustez, segurana entre outros, devem ser fornecidos pelas implementaes do
JEE, diminuindo o tempo de desenvolvimento, os riscos do projeto e os problemas com manuteno.
71
Captulo 5 - Java EE
Rosiclia Frasson
Tecnologias do Java EE
Dentre as APIs disponibilizadas pela JEE, algumas so bastante utilizadas no desenvolvimento
de aplicaes. A documentao das mesmas esto publicadas na JCP e esto organizadas em JSRs
(Java Specification Requests). Cada JSR possui um nmero de identificao e contempla todas as
informaes sobre a API na qual se refere. Segue uma lista com as JSRs mais utilizadas:
Java Persistence (JSR 317): Como j mencionado em captulos anteriores, a JPA uma API
para mapeamento objeto relacional. Embora faa parte da especificao do Java EE, ela
tambm pode ser usada em aplicaes JSE (Java Standart Edition).
Java Servlet (JSR 315): Esta API proporciona a incluso de contedo dinmico em um Container
JEE.
Java Server Pages (JSR 245): Permite a criao de pginas dinmicas de modo mais simples
do que com a utilizao de Servlets..Um JSP faz as funes de um script em uma pgina web e
compilado como servlet em seu container. Uma pgina JSP contm dois tipos de texto:
esttico, representado por marcaes HTML, WML, ou XML, e elementos dinmicos JSP.
Java Server Faces (JSR 314): Tecnologia desenvolvida para permitir o desenvolvimento de
aplicaes web com a aparncia e facilidade de uma aplicao desktop.
Java Message Service API - JMS (JSR 914) : API que padroniza a troca de mensagens entre
programas distintos, com o uso de mecanismos de criao, envio, recebimento e leitura de
mensagens.
Java Autenthication and Authorization Service - JAAS (JSR) : API para padro do Java para
segurana.
Java Transaction API - JTA (JSR 907): Especifica o controle de transao pelo Container.
JavaMail API (JSR 919): API para suporte ao envio e recebimento de e-mails em Java.
Servidor de aplicao
A JEE apenas uma especificao e como tal, necessita de uma implementao do conjunto de
normas e regras presentes. Cabe aos fornecedores de servidores de aplicao implementar essas
regras definidas pela JEE.A especificao Java EE implementada pelos servidores de aplicao.
Existem inmeros servidores de aplicao no mercado, dentre os mais conhecidos esto o
JBoss Application Server da RedHat, o GlassFish da Sun, o Apache Geronimo da Apache, o WebLogic
Application Server da Oracle e o IBM Websphere Application Server da IBM.
Os servidores de aplicao necessitam implementar toda a especificao Java EE e so
responsveis pelos mecanismos de tolerncia a falhas, balanceamento de carga, gerenciamento de
componentes, gerenciamento de transaes e console de gerenciamento. Dessa forma, em um projeto
JEE, o desenvolvedor deve preocupar-se apenas com a resoluo de problemas referentes regras de
negcio e no com questes de infraestrutura.
Servlet Container
O Java EE possui vrias especificaes, entre elas, algumas especficas para lidar com o
desenvolvimento de uma aplicao Web: JSP, Servlets, JSF. Em alguns casos, no existe a
necessidade de um servidor que implemente o JEE completo mas apenas a parte web da
especificao. Aplicaes de pequeno e mdio porte se encaixam nessa categoria.
Para essas aplicaes existem pequenos servidores que implementam apenas parte do JEE.
72
Captulo 5 - Java EE
Rosiclia Frasson
Estes servidores so chamados de ServletContainer. O ServletContainer mais famoso do mercado o

Apache Tomcat.
PASSO-A-PASSO
Configurando o ambiente
Para este exemplo ser utilizada a ferramenta Netbeans e como servidor de aplicao o
Glassfish. O Glassfish foi escolhido por j vir instalado junto com o Netbeans, ser open source e
gratuito e estar ganhando fora no mercado nos ltimos anos. Ele tambm um dos poucos a
suportar o JEE 7.
1. Na criao do projeto, guia Escolher Projeto, a Catgoria Java Web deve ser selecionada e em
Projetos Aplicao Web.
2. Na guia Nome e Localizao, necessrio dar um nome ao projeto e identificar a pasta onde o
mesmo ficar armazenado.
73
Captulo 5 - Java EE
Rosiclia Frasson
3. Na guia Servidores e Definies deve ser escolhido como Servidor o Glassfish 4.0.
74
Captulo 5 - Java EE
Rosiclia Frasson
4. Em Java EE, o caminho do contexto o caminho no qual a aplicao pode ser acessada aps ser
implantada no servidor, ou seja, os contextos servem para diferenciar sites ou projetos distintos em
um mesmo servidor. Por padro o caminho do contexto gerado o mesmo nome da aplicao. Nesta
configurao apresentada, considerando a porta default do glassfish - 8080 - para o acesso da
aplicao deve ser utilizado o seguinte endereo:
http://localhost:8080/ExemploAplicacaoWeb/
5. Na guia Frameworks, neste momento nenhum deles ser selecionado.
6. O projeto criado obedece o padro de pastas listado a seguir. A seguir, sero detalhados os
contedos destas pastas. Por ora, importante perceber o servidor de aplicao e a verso do Java
EE utilizados.
75
Captulo 5 - Java EE
Rosiclia Frasson
7. Ao executar o projeto uma pgina web aberta, semelhante figura a seguir.
Nas aplicaes Java Web, alguns diretrios e arquivos devem existir por padro. Segue uma
descrio sucinta dos mesmos:
Pginas Web: Este diretrio representa o contedo raiz do projeto. Nessa pasta deve ser
armazenado o arquivo index.html e todos os arquivos .html, .jsp, .xhtml, .jsf, .css e imagens.
Dentro desta pasta pode ser criada uma estrutura de pastas para organizao dos arquivos.
Tudo o que colocado dentro desta pasta acessvel na URL do projeto.
WEB-INF: Essa pasta faz parte da especificao JEE e armazena as configuraes e recursos
necessrios para o projeto rodar no servidor. Todo o projeto Java Web precisa ter esta pasta.
Ela inacessvel na URL do projeto, o que garante que os usurios no conseguem visualizar
o contedo dos arquivos presentes nesta pasta.
web.xml: Tambm chamado de descritor de implantao. Este arquivo contm as
informaes para realizar os ajustes dos parmetros da aplicao, como mapeamentos,
segurana, filtros, entre outros. Este arquivo fica dentro da pasta WEB-INF e sua utilizao
necessria apenas se existir a necessidade de adicionar servlets e/ou parmetros de
inicializao.
Pacotes de Cdigo-fonte: Nesta pasta ficam armazenados os arquivos .java da aplicao.
Bibliotecas: Nesta pasta ficam armazenadas todas as bibliotecas necessrias para que o
projeto seja executado corretamente.
O desenvolvimento Web e o protocolo HTTP
Em aplicaes Web, o usurio no possui o software instalado em seu computador. Toda a

aplicao fica hospedada em um servidor e o acesso feito utilizando o protocolo HTTP atravs do
76
Captulo 5 - Java EE
Rosiclia Frasson
modelo request-response.
No modelo request-response, o cliente solicita a execuo de uma tarefa - request. Por sua vez
o servidor recebe a requisio, realiza e responde para o cliente - response. Sendo assim, quando e
endereo de uma pgina digitado em um browser, uma requisio est sendo gerada ao servidor. O
mesmo ocorre quando um boto ou um link acionado. Por sua vez, o navegador, entende somente
HTML, dessa forma os dados so trafegados utilizando somente esta linguagem.
PASSO-A-PASSO
Exemplo pgina html
1. No projeto criado no passo-a-passo anterior, o arquivo index.html deve conter o cdigo mostrado
abaixo.
<!DOCTYPE html>
<html>
<head>
<title>Exemplo pgina HTML</title>
</head>
<body>
<h1>Primeira pgina HTML</h1>
<p>Essa a primeira pgina usando HTML.</p>
</body>
</html>
2. Ao executar a aplicao, deve ser mostrada a janela ilustrada abaixo.
77
Captulo 6 - Servlets
Rosiclia Frasson
Servlets
No incio da era da internet, as pginas web eram todas estticas, ou seja, no existia nenhuma
interao com o usurio. Porm, com o passar do tempo, notou-se
notou se que a web tinha enorme poder de
comunicao e para a interao com os usurios, seriam necessrias pginas que gerassem contedo
dinamicamente baseadas
eadas nas requisies dos mesmos.
Na plataforma Java, a tecnologia capaz de gerar pginas dinmicas so as Servlets. Embora,
existam atualmente diversos frameworks para facilitar o desenvolvimento em Java Web, todos eles
criam um nvel de abstrao sobre Servlets.
As Servlets possuem como responsabilidade o tratamento de solicitaes. Em outras palavras,
as Servlets recebem requisies provenientes de um browser ou outro cliente HTTP qualquer, obtm os
dados embutidos e produz uma resposta.
@WebServlet
@WebServlet(urlPatterns
= {"/MeuServlet"})
public class MeuServlet extends HttpServlet {
A nvel de implementao uma Servlet uma classe Java que estende da interface
javax.servlet.http.HttpServlet. Existem duas classes na API de servlets que implementam esta interface:
GenericServlet, que como o prprio nome diz uma classe genrica que atende requisies de
qualquer protocolo e sua subclasse HttpServlet que atende requisies HTTP.
O servlet permite por meio de programao Java definir todo o cdigo HTML que ser exibido ao
cliente. No entanto, o programador precisa preparar todo o texto que ser mostrado ao cliente, sendo
ele esttico ou no.
Ciclo de vida das Servlets
O funcionamento de uma Servlet formado basicamente por trs etapas:

Inicializao: O servidor responsvel pela inicializao da servlet pelo mtodo init e a utiliza
durante todo o seu perodo ativo. O container pode criar o servlet no momento da sua
inicializao ou quando chegar a primeira requisio.
Chamadas a mtodos de servio: So
So as requisies enviadas ao servidor durante todo o ciclo
de vida das Servlets. O mtodo service o responsvel pelo tratamento dessas requisies.
Finalizao: O servidor destri a Servlet, carregada na inicializao. Esse processo efetuado
78
Rosiclia Frasson
atravs do mtodo destroy.

O ciclo de vida de uma Servlet controlado pelo container. Cada requisio recebida pelo
servidor passada para o container que tem como responsabilidade carregar a classe, criar e inicializar
uma instncia da mesma, controlar as requisies
requisies at a remoo da Servlet da memria.
Na inicializao do servidor, o servlet carregado, porm no entra em funcionamento. No
momento em que uma requisio chega ao servidor, caso a servlet ainda no esteja carregada - isso
ocorre na primeira requisio -,, a mesma inicializada atravs do mtodo init. A partir deste momento
todas as requisies so tratadas pelo mtodo service. O container cria um objeto de requisio
(ServletRequest) e um objeto de resposta (ServletResponse) e aps chama o mto service,
se
passando
os objetos criados como parmetro. Aps o envio da resposta, os objetos so destrudos. Esse
processo se repete at que o Servlet seja destrudo, atravs do mtodo destroy.
O fato da Servlet permanecer carregada durante o tempo que o servidor

servidor est ativo e a aplicao
carregada, permite que dados armazenados em variveis de classe persistam ao longo de diversas
requisies. Isso garante que processos custosos sejam efetuados apenas uma vez durante todo o ciclo
de vida da Servlet. o caso, por exemplo, de uma conexo com a base de dados.
PASSO-A-PASSO
1. Aps a criao de um projeto Java web no Netbeans recomendada a criao de um pacote para
o armazenamento da classe Servlet. A estrutura do projeto deve ser similar a figura a seguir:
79
Rosiclia Frasson
2. Com o boto secundrio em cima do pacote criado, clique em Novo, opo Servlet.
3. O Netbeans gera uma estrutura padro de Servlet, como mostrado a seguir.

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet(urlPatterns = {"/PrimeiraServlet"})
public class PrimeiraServlet extends HttpServlet {
/**
* Processes requests for both HTTP
* <code>GET</code> and
* <code>POST</code> methods.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
80
Rosiclia Frasson
protected void processRequest(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
/* TODO output your page here. You may use following sample code. */
out.println("<!DOCTYPE html>");
out.println("<html>");
out.println("<head>");
out.println("<title>Servlet PrimeiraServlet</title>");
out.println("</head>");
out.println("<body>");
out.println("<h1>Servlet
PrimeiraServlet
at
"
request.getContextPath()
"</h1>");
out.println("</body>");
out.println("</html>");
} finally {
out.close();
}
}
// <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on

the left to edit the code.">
/**
* Handles the HTTP
* <code>GET</code> method.
*
*/
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
processRequest(request, response);
}
/**
* Handles the HTTP
* <code>POST</code> method.
*
81
Rosiclia Frasson

*/
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
}
/**
* Returns a short description of the servlet.
*
* @return a String containing servlet description
*/
@Override
public String getServletInfo() {
return "Short description";
}// </editor-fold>
}
importante perceber que a classe possui a anotao @WebServlet contendo o nome da

Servlet e a URL que seve ser utilizada para acesso da mesma. Em verses posteriores do java o
mapeamento deveria ser feito no web.xml, atualmente este mapeamento feito utilizando apenas a
anotao.
Aps
a
execuo
do
projeto,
a
Servlet
pode
ser
acessada
em:
http://localhost:8080/Cap4Servlets/PrimeiraServlet e deve exibir o contedo mostrado na imagem a
seguir.
Vale lembrar que o contedo mostrado na tela est presente dentro do mtodo
processRequest, que responsvel por processar as requisies. No exemplo apresentado, a Servlet
no executa nenhuma lgica e apenas exibe um contedo esttico na tela. O mtodo getWriter da
varivel response obtm um objeto que representa a sada a ser enviada ao usurio. Por sua vez, o
objeto criado out do tipo PrintWriter imprime a resposta para o cliente.
82
Rosiclia Frasson
Mtodo Get
O mtodo GET, quando utilizado em formulrios, indica que os valores dos parmetros so
passados atravs da URL junto dos nomes dos mesmos, separados por &. Separa o endereo da URL
dos dados do formulrio com um ponto de interrogao ?.
O mtodo GET deve ser usado apenas quando a quantidade de informaes passadas for
pequena e no for secreta, como em uma pesquisa, por exemplo.
Mtodo Post
Utilizando o mtodo POST, os dados so passados dentro do corpo do protocolo HTTP, sem
aparecer na URL que mostrada no navegador.
Esse mtodo utilizado em formulrios de cadastro, onde os dados no podem ser visualizados
ou alterados na URL.
Mtodos doGet e doPost

Os mtodos doGet e/ou doPost devem ser implementados na Servlet indicando como ser
efetuado o tratamento do formulrio. Os mtodos doGet e doPost so invocados pelo mtodo service e
cabe a este detectar o tipo da requisio recebida e invocar o mtodo adequado para trat-la.
Vale lembrar que requisies get so processadas pelo mtodo doGet e requisies post so
processadas pelo mtodo doPost. Ambos os mtodos possuem dois parmetros HttpServletRequest e
HttpServletResponse.
PASSO-A-PASSO
Mtodo Get
1. Crie um projeto Java Web no Netbeans e altere o arquivo index.html de modo que fique semelhante
ao trecho de cdigo listado a seguir.
<!DOCTYPE html>
<html>
<head>
<title>Mtodo GET</title>
<meta name="viewport" content="width=device-width">
</head>
<body>
<form name="teste" method="GET" action="/Cap4ServletGet/ServletController">
<table>
<tr>
<td>Nome: </td>
<td><input type="text" name="nome"></td>
83
Rosiclia Frasson
</tr>
<tr>
<td>Idade: </td>
<td><input type="text" name="idade"></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Salvar"/>
<input type="reset" value="Limpar"/>
</td>
</tr>
</table>
</form>
</body>
</html>
2. Em seguida, deve ser criada uma Servlet com os comandos abaixo.

@WebServlet(name="ServletController", urlPatterns = {"/ServletController"})

public class ServletController extends HttpServlet {
protected
void
processRequest(HttpServletRequest
request,
HttpServletResponse
response)
PrintWriter pw = response.getWriter();
String nome = request.getParameter("nome");
int idade = Integer.parseInt(request.getParameter("idade"));
pw.println("<html><body>");
pw.println("<h1>Valores digitados</h1>");
pw.println("Nome: " + nome);
pw.println("</br>");
pw.println("Idade: " + idade);
84
Rosiclia Frasson
pw.println("</body></html>");
}
@Override
}
@Override
}
}
Como pode ser visualizado, a classe ServletController um Servlet que implementa o mtodo
doGet. Sendo assim, responde requisies do tipo HTTP via mtodo GET. A resposta desse Servlet
processada atravs dos valores dos parmetros que so passados atravs da URL. O mtodo
getParameter responsvel por acessar as informaes passadas pelos parmetros na URL.
Vale lembrar que como os dados so passados via URL, existe a possibilidade do usurio
efetuar a alterao do mesmo pela URL. Por este motivo, requisies via mtodo get devem ser
utilizadas apenas em operaes que dados da base de dados no sero alterados.
Mtodo Post
1. Crie um projeto Java web no Netbeans e altere o arquivo index.html como no cdigo a seguir.
importante perceber que o formulrio possui o mtodo POST.
<!DOCTYPE html>
<html>
<head>
<title>Mtodo POST</title>
<meta name="viewport" content="width=device-width">
</head>
<body>
<form name="teste" method="POST"
action="/Cap4ServletPost/ServletController">
<table>
<tr>
85
Rosiclia Frasson
<td>Nome: </td>
<td><input type="text" name="nome"></td>
</tr>
<tr>
<td>Idade: </td>
<td><input type="text" name="idade"></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Salvar"/>
<input type="reset" value="Limpar"/>
</td>
</tr>
</table>
</form>
</body>
</html>
2. Em seguida, crie uma Servlet e deixe a mesma com os seguintes comandos.

@WebServlet(name="ServletController", urlPatterns = {"/ServletController"})

protected void processRequest(HttpServletRequest request, HttpServletResponse

response) throws ServletException, IOException {
PrintWriter pw = response.getWriter();
String nome = request.getParameter("nome");
int idade = Integer.parseInt(request.getParameter("idade"));
pw.println("<html><body>");
pw.println("<h1>Valores digitados</h1>");
pw.println("Nome: " + nome);
pw.println("</br>");
86
Rosiclia Frasson
pw.println("Idade: " + idade);

pw.println("</body></html>");
}
@Override
}
@Override
}
}
Como pode ser visualizado este exemplo semelhante ao anterior, execeto o fato de usar o
mtodo post ao invs do mtodo get. A diferena primordial dessas duas abordagens que no
mtodo get os dados aparecem na URL e no mtodo post os dados no so exibidos no navegador.
87
Captulo 7 - JSP
Rosiclia Frasson
JSP
Os Servlets permitem que contedos dinmicos sejam adicionados as pginas HTML. Porm, o
uso de Servlets exige que grande parte do cdigo esttico HTML seja escrito nas Servlets como cdigo
Java, diminuindo assim a legibilidade do cdigo e dificultando a manuteno das pginas. Outro
problema encontrado com o uso das Servlets, que o trabalho de deixar as pginas mais bonitas,
desenvolvido pelo designer, ficou muito difcil, visto que este profissional, na maioria das vezes, no
possui conhecimento na linguagem de programao Java.
A tecnologia JSP (Java Server Pages) permite que seja adicionado comportamento dinmico
nas pginas HTML, ou seja, um arquivo com extenso .jsp pode possuir elementos HTML e cdigos
Java embutidos. A grande vantagem na utilizao desta tecnologia, se comparada, as demais
existentes como ASP e PHP, que a mesma independente de plataforma. Os trechos de cdigos
dinmicos, dentro dos arquivos JSP so delimitados com <% e %>.
De maneira oculta, as pginas JSP so compiladas em Servlets. A compilao feita no
primeiro acesso. Nos acessos subsequentes, a requisio redirecionada ao servlet que foi gerado a
partir do arquivo JSP. Levando em considerao as afirmativas apresentadas, o primeiro acesso a um
arquivo JSP sempre mais lento, por conta do processo de compilao.
A tecnologia JSP permite separar a apresentao da lgica de negcio, facilitando o
desenvolvimento de aplicaes robustas, onde o programador e o designer podem trabalhar em um
mesmo projeto de forma independente. Com JSP tambm possvel reutilizar contedos dinmicos.
Elementos de uma pgina JSP
Diretivas: Fornecem informaes gerais acerca da pgina JSP. Sua sintaxe <%@ diretiva %>.
As principais diretivas so page, include e taglib.
page: A diretiva page responsvel por fornecer informaes sobre a pgina JSP. Deve
ser usada no incio da pgina. No exemplo mostrado a seguir, o atributo contentType
indica o tipo de sada do documento e o atributo pageEncoding define o conjunto de
caracter a ser utilizado.
<%@page contentType="text/html" pageEncoding="UTF-8"%>
include: A diretiva include permite que um arquivo texto seja inserido em uma pgina
JSP. Esta diretiva pode ser utilizada em qualquer lugar da pgina e quantas vezes forem
necessrias. No exemplo de cdigo mostrado a seguir, deve ser adicionado ao arquivo
corrente, o contedo do arquivo header.html.
<%@include file="header.html"%>
taglib: A diretiva taglib indica que um conjunto de tags personalizadas estar a disposio
para ser utilizada. Tambm associa um prefixo a uma biblioteca de tags.
<%@taglib prefix="teste" uri="taglib.tdl"%>
Declaraes: As declaraes permitem a adio de cdigo Java, ou seja, qualquer cdigo vlido
em uma classe Java, pode estar dentro de uma declarao, como por exemplo, declarao e
inicializao de variveis, declarao e implementao de mtodos. Um detalhe importante
que as declaraes no geram sadas. Deste modo, as mesmas so usadas em conjunto com
expresses ou scriptlets. As declaraes devem estar entre <%! e %>.
88
Captulo 7 - JSP
Rosiclia Frasson
<%!int i = 0;%>
Expresso: As expresses geram sadas para a pgina. Utilizam-se as expresses para

instrues que retornam valor.
<%=area;%>
Scriptlet: Os scriptlets so utilizados em processamentos mais complexos do que as expresses.

Dentro dos scriptlets possvel inserir condicionais e loops.
<%
double base = Double.parseDouble(request.getParameter("base"));
double altura = Double.parseDouble(request.getParameter("altura"));
double area = base * altura;
double perimetro = (base + altura) * 2;
%>
Comentrios de uma pgina JSP: Os comentrios indicam ao compilador que trechos de cdigo
devem ser ignorados. Os comentrios em JSP devem ser escritos entre <%-- e --%>.
<%-Document
: resultado
Created on : 20/12/2013, 11:33:30

Author
: Rosiclia Frasson
--%>
Ciclo de vida de uma pgina JSP

No momento em que uma pgina JSP requerida atravs de um browser, esta ser processada
pelo servidor. Existe diferena entre o primeiro acesso pgina e os demais. No primeiro acesso, a
pgina transformada em uma Servlet, compilada, gerando dessa forma o bytecode. A partir do
bytecode gerada a pgina HTML que enviada de volta ao browser do cliente. O processo de
montagem da pgina HTML pode requerer informaes da base de dados, arquivos texto, entre outros.
Caso, a requisio seja para uma pgina anteriormente acessada, uma verificao feita com o intuito
de averiguar se houve alguma mudana. Em caso afirmativo, feita a compilao novamente. Caso
contrrio o HTML montado.
Devido ao procedimento citado, o primeiro acesso a pgina JSP lento. A partir do segundo
acesso, as pginas JSP so mais velozes.
PASSO-A-PASSO
1. No Netbeans deve ser criado um projeto Java web, o mesmo deve ficar com a estrutura mostrada a
seguir.
89
Captulo 7 - JSP
Rosiclia Frasson
2. O arquivo index.html deve ser removido e criado um arquivo index.jsp.

index
3. No arquivo criado, deve ser inserido o cdigo a seguir.

<%-Document
: index
Created on : 20/12
12/2013, 11:10:29
Author
: Rosiclia Frasson
--%>
<%@page language="java"
"java" contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=
equiv="Content-Type" content="text/html;
"text/html; charset=UTF-8">
charset=UTF
90
Captulo 7 - JSP
Rosiclia Frasson
<title>Exemplo pgina JSP</title>

</head>
<body>
<h1>Exemplo pgina JSP</h1>
<p>Clculo rea retngulo</p>
<form action="resultado.jsp" method="post">
<table>
<tr>
<td>Base</td>
<td><input type="text" name="base" /></td>
</tr>
<tr>
<td>Altura</td>
<td><input type="text" name="altura" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Calcular" />
<input type="reset" value="Limpar" />
</td>
</tr>
</table>
</form>
</body>
</html>
importante perceber que o atributo action da tag form especifica a pgina em que os dados
do formulrio sero enviados e o atributo method, o mtodo que ser utilizado.
4. Para exibir a rea do retngulo, necessrio criar uma nova pgina JSP. Esta deve ter o nome de
resultado.jsp, pois na ao do formulrio esta pgina est sendo referenciada. O cdigo da mesma
est ilustrado a seguir.
<%-Document
: resultado
Created on : 20/12/2013, 11:33:30

Author
: Rosiclia Frasson
--%>
<%@page language="java" contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-
91
Captulo 7 - JSP
Rosiclia Frasson
8">
</head>
<body>
<%
double base =
Double.parseDouble(request.getParameter("base"));
double altura =
Double.parseDouble(request.getParameter("altura"));
double area = base * altura;
double perimetro = (base + altura) * 2;
%>
<table border="1">
<tr>
<td colspan="2"><b>Dados fornecidos pelo usurio</b></td>
</tr>
<tr>
<td>Base</td>
<td><%=base%></td>
</tr>
<tr>
<td>Altura</td>
<td><%=altura%></td>
</tr>
<tr>
<td colspan="2">
<b>Dados calculados pelo aplicativo</b>
</td>
</tr>
<tr>
<td>rea</td>
<td><%=area%></td>
</tr>
</table>
</html>
No scriptlet contido logo aps o incio do bloco body, primeiramente so obtidos os valores dos
parmetros - base e altura - enviados pelo usurio e convertidos para o tipo double. Em seguida,
efetuado o clculo da rea.
Os valores da base, altura e rea so exibidos na pgina atravs de expresses.
5. Na execuo do projeto deve ser exibida a seguinte pgina.
92
Captulo 7 - JSP
Rosiclia Frasson
6. Os valores de base e altura devem ser informados e ao clicar

clicar no boto calcular, deve ser exibida a
pgina a seguir com o clculo da rea a partir dos dados informados.
93
Captulo 7 - JSP
Rosiclia Frasson
Java Beans
Um bean uma classe Java que segue uma srie de convenes:

Propriedades: Tambm chamadas de atributos, so responsveis por armazenar o estado do
bean. Devem possuir modificador de acesso private.
Um construtor sem argumentos: A classe pode possuir diversos construtores, porm, deve ter o
construtor padro. Nos casos em que apenas o contrutor default necessrio, o mesmo pode
estar implcito.
Atributos privados e mtodos de acesso get e set: Para cada propriedade necessria a
existncia dos mtodos de acesso.
PASSO-A-PASSO
Para exemplificar o uso do bean, o exemplo apresentado anteriormente ser modificado.
m
1. Deve ser criado um novo projeto java web no Netbeans.
2. O arquivo index.html deve ser removido e criado um arquivo index.jsp com o cdigo a seguir.
<%-Document
: index
Created on : 20/12
12/2013, 11:10:29
Author
: Rosiclia Frasson
--%>
94
Captulo 7 - JSP
Rosiclia Frasson

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="ServletController" method="post">
<table>
<tr>
<td>Base</td>
<td><input type="text" name="base" /></td>
</tr>
<tr>
<td>Altura</td>
<td><input type="text" name="altura" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Calcular" />
<input type="reset" value="Limpar" />
</td>
</tr>
</table>
</form>
</body>
</html>
3. Tambm necessria a criao de um bean chamado Retangulo, onde sero armazenados os

atributos e os respectivos mtodos de acesso. Esta classe deve ficar dentro do pacote modelo. O
cdigo da mesma est descrito a seguir.
package br.com.rosicleiafrasson.cap7exemplojavabean.modelo;
public class Retangulo {
private double base;

private double altura;
private double area;
95
Captulo 7 - JSP
Rosiclia Frasson
public double getBase() {

return base;
}
public void setBase(double base) {

this.base = base;
}
public double getAltura() {

return altura;
}
public void setAltura(double altura) {

this.altura = altura;
}
public double getArea() {

return base * altura;
}
4. Tambm necessrio a criao de uma servlet que captura os dados da pgina index e envia para
o bean.
package br.com.rosicleiafrasson.cap7exemplojavabean.controller;
import br.com.rosicleiafrasson.cap5exemplojavabean.modelo.Retangulo;
import javax.servlet.RequestDispatcher;
@WebServlet(name = "ServletController", urlPatterns = {"/ServletController"})

protected void processRequest(HttpServletRequest request, HttpServletResponse response)

96
Captulo 7 - JSP
Rosiclia Frasson
Retangulo r = new Retangulo();

r.setBase(Double.parseDouble(request.getParameter("base")));
r.setAltura(Double.parseDouble(request.getParameter("altura")));
request.setAttribute("retanguloBean", r);
RequestDispatcher rd = request.getRequestDispatcher("resultado.jsp");
rd.forward(request, response);
}
@Override
}
@Override
}
}
5. Por fim, a criaao da pgina resultado.jsp que exibe os dados calculados pelo aplicativo.
<%-Document
: index
Created on : 20/12/2013, 11:10:29

Author
: Rosiclia Frasson
--%>
<%@page import="br.com.rosicleiafrasson.cap7exemplojavabean.modelo.Retangulo"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<%
Retangulo ret = (Retangulo) request.getAttribute("retanguloBean");
%>
<h1>Clculo rea retngulo</h1>
<table border="1">
97
Captulo 7 - JSP
Rosiclia Frasson
<tr>
<td colspan="2"><b>Dados fornecidos pelo usurio</b></td>
</tr>
<tr>
<td>Base</td>
<td><%=ret.getBase()%></td>
</tr>
<tr>
<td>Altura</td>
<td><%=ret.getAltura()%></td>
</tr>
<tr>
<td colspan="2"><b>Dados calculados pelo aplicativo</b></td>
</tr>
<tr>
<td>rea</td>
<td><%=ret.getArea()%></td>
</tr>
</table>
</body>
</html>
importante perceber que a utilizao de pginas jsp, juntamente com os java beans e as
servlets, separam a lgica de negcio da visualizao. Como este um aplicativo que contm poucos
requisitos de negcio no percepetvel a vantagem desta separao. Em aplicaes complexas,
seria muito difcil misturar cdigos jsp com a lgica de negcio.
98
Captulo 8 - Frameworks MVC
Rosiclia Frasson
Frameworks MVC
notria a dificuldade de manuteno quando cdigos HTML ficam misturados com cdigo
Java.
Pensando nisso, a comunidade de desenvolvedores comeou a desenvolver ferramentas que auxiliem a
separao das responsabilidades na aplicao. Essas ferramentas so conhecidas como framewoks
MVC ou controladores MVC.
O MVC separa a codificao do software em trs partes:
Modelo: Parte do cdigo onde esto representados os objetos de negcio. So esses objetos
que mantm o estado da aplicao e fornecem ao controlador. O modelo responsvel pelos
dados, regras de acesso e modificao dos dados. Essa parte do cdigo responsvel tambm
por se comunicar com a base de dados e outros sistemas existentes.
Visualizao: Responsvel pela interface do usurio. na camada de visualizao que
definida
nida a forma como os dados so apresentados e as aes dos usurios so encaminhadas
para o controlador.
Controle: Responsvel por efetuar a ligao entre o modelo e a visualizao. no controle que
so interpretadas as solicitaes dos usurios, acionando
acionando as opes corretas a serem realizadas
no sistema encaminhando as mesmas ao modelo e retornando as visualizaes das solicitaes
correpondentes.
A utilizao do MVC prov algumas vantagens no processo de desenvolvimento. Entre elas
pode ser citada o reaproveitamento
proveitamento dos componentes do modelo. Ao utilizar o MVC, possvel utilizar
os objetos de negcio definidos na camada modelo em diversas classes/arquivos de visualizao. Alm
disso, com o aumento da complexidade do software, a manuteno do mesmo torna-se
torn
um processo
mais difcil. A separao das responsabilidades em camadas pr-estabelecidas
pr estabelecidas deixa a manuteno do
cdigo mais compreensvel.
Diante da aceitao do MVC pela comunidade de programadores Java, surgiram alguns
frameworks baseados no mesmo. Seguem
S
os mais conhecidos.
Struts
99
Rosiclia Frasson
O Struts um framework gratuito, de cdigo aberto, disponibilizado pela Apache Software

Foundation <http://struts.apache.org/
http://struts.apache.org/>. Este framework foi desenvolvido para facilitar o desenvolvimento
de aplicaes Java EE utilizando o MVC.
Com o uso do Struts, atravs do ActionForm, os dados de um formulrio HTML so recuperados
mais facilmente. Alm disso, o framework conta com o Action, que um frontController que delega o
processamento da requisio para um componente especfico. O Struts conta ainda com uma biblioteca
de tags para a construo das pginas JSP e um arquivo de configuraes XML, que indicam as
Actions responsveis para o atendimento de determinada requisio.
requisi
VRaptor
O VRaptor um framework desenvolvido em territrio nacional. Foi criado na USP por
Guilherme Silveira e atualmente mantido pela Caelum. gratuito, open source e possui
documentao em portugus.
Uma das grandes vantagens do framework,

framework, que o mesmo encapsula as principais classes de
Servlets como HttpServletRequest, HttpServletResponse e Session. Por encapsular a lgica dos
Servlets, garante alta produtividade e baixa curva de aprendizado.
Spring
um framework open source para
para gerenciar componentes e um conjunto de servios para
interfaces de usurios, transaes e persistncia. Alm do mdulo core, que representa o cerne do
framework, existe o Spring Data para persistncia e o Spring Security para segurana da aplicao.
100
Rosiclia Frasson
JSF
O Java Server Faces (JSF) foi desenvolvido pelo comit JCP - Java Community Process - e
est especificado na JSR 314 (Java Specification Request) . Por ser uma especificao, existem
diversos fornecedores que desenvolvem a implementao.
O JSF prov
rov um conjunto de componentes baseados em eventos para a construo da interface
com o usurio. Esses componentes possuem um modelo para manipulao de eventos. Alm disso, o
JSF possui suporte de diversos fabricantes que fornecem conjuntos de componentes
componente prontos para
utilizao. Alm disso, o JSF inclui APIs para validao das entradas dos usurios, definio e controle
de navegao das pginas e suporte a internacionalizao.
O JSF tambm permite a integrao com diversos frameworks como os j citados Spring e
Struts. Alm da integrao com frameworks de mapeamento objeto-relacional
objeto relacional como Hibernate,
EclipseLink.
101
Captulo 9 - JSF
Rosiclia Frasson
JSF
A tecnologia Java Server Faces (JSF) foi desenvolvida com o intuito de deixar o
desenvolvimento de aplicativos JEE com aparncia, facilidade e produtividade de sistemas desktop. Ela
composta por um modelo de componentes para interfaces do usurio, um modelo de programao
orientada a eventos, validao do lado servidor e converso de dados.
O JSF uma especificao lanada juntamente com JEE 6 e pode ser consultada em:
http://jcp.org/en/jsr/detail?id=314. Sendo uma especificao, existem diversas implementaes da
mesma. A implementao referencial a Mojarra da Oracle. Existe tambm uma outra implementao
bastante conhecida que a MyFaces da Apache.
O JSF baseado no MVC e a separao das camadas fica muito clara para o desenvolvedor. A
camada de controle nesta tecnologia basicamente formada por uma servlet chamada de
FacesServlet, por arquivos de configurao e por manipuladores de ao e observadores de eventos. O
FacesServlet possui como responsabilidade o recebimento de requisies dos usurios, redirecionando
as mesmas para o modelo e retornando a resposta devida. Nos arquivos de configurao esto
contidas as regras de navegao. Os manipuladores de eventos recebem dados da camada de
visualizao, acessam o modelo e retornam o resultado atravs do FacesServlet.
A camada de visualizao do JSF, composta por pginas com extenso xhtml. Essas pginas
so construdas utilizando um conjunto de componentes, que incluem caixas de texto, botes,
formulrios, tabelas, calendrios, entre outros, que so adicionados, renderizados e exibidos em
formato html. Deste modo, o desenvolvedor que utiliza tal tecnologia no possui a necessidade de
escrever cdigo HTML.
O uso do JSF para o desenvolvimento de projetos possui inmeras vantagens. Entre elas podem
ser citadas:
componentes customizados: alm dos componentes bsicos fornecidos pelo framework, podem
ser utilizadas bibliotecas de componentes de terceiros e/ou a fabricao de novos componentes.
converso de dados: os dados digitados pelo usurio podem facilmente ser convertidos para
tipos especficos como datas, nmeros, entre outros.
validao: o JSF facilita o processo de validaes bsicas como campos requeridos, formatos de
cpf, cnpj, entre outros.
manipulao de erros: a manipulao de erros, bem como customizao de mensagens de erro
apropriadas so facilitadas com o uso do JSF.
suporte a internacionalizao: o JSF suporta aplicaes multiidiomas com o recurso i18n.
Estrutura bsica de uma pgina JSF

O contedo de uma pgina JSF definido no corpo da tag <html>. Esse contedo dividido em
duas partes: o cabealho, delimitado pela tag <h:head> (e no pela tag <head>), e o corpo, delimitado
pela tag <h:body> (e no pela tag <body>).
As bibliotecas de tags que sero utilizadas para construir a pgina devem ser importadas
atravs do pseudo-atributo xmlns aplicado tag <html>.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
102
Captulo 9 - JSF
Rosiclia Frasson
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
</h:head>
<h:body>
Hello JSF!
</h:body>
</html>
PASSO-A-PASSO
Primeiro Projeto JSF
1. Para criar um projeto JSF no Netbeans necessrio escolher a categoria Java Web e em Projetos
Aplicao Web.
2. Na Guia Nome e Localizao, necessrio dar um nome ao projeto e apontar onde o mesmo ser
salvo.
103
Captulo 9 - JSF
Rosiclia Frasson
3. Na Guia Servidor e Definies ser escolhido como servidor o GlassFish Server 4.0. A escolha por
este servidor se deu em funo do mesmo ser instalado junto com o Netbeans. Outros servidores
podem ser utilizados, porm, eles devem ser instalados.
A verso do Java utilizada a verso 7.
O caminho do contexto o caminho que ser utilizado para acessar a aplicao. Neste exemplo, o
caminho do contexto mesmo nome da aplicao.
104
Captulo 9 - JSF
Rosiclia Frasson
4. Na Guia Frameworks, necessrio sinalizar a IDE que ser utilizado o framework JSF. Em
bibliotecas, deve ser selecionada a verso do JSF que ser utilizada.
Em componentes, no ser utilizada nenhuma biblioteca de componentes neste projeto.
Em configurao, o padro de URL do Servlet JSF /faces/*. importante ressaltar que nos projetos
JSF, existe uma Servlet que efetua o controle da aplicao. Como j mencionado esta servlet possui
o nome de Faces Servlet. No arquivo web.xml, montado automaticamente pelo Netbeans apontada
a classe que implementa a Faces Servlet e o padro de url associado a esta servlet. No exemplo
apresentado, toda vez que o caminho da URL iniciar por /faces/, a Faces Servlet invocada.
105
Captulo 9 - JSF
Rosiclia Frasson
5. Deve ser criado um projeto com estrutura similar figura a seguir. importante perceber que o JSF
utiliza arquivos com extenso .xhtml para construo de suas pginas.
6. Na estrutura de arquivos e pastas criadas existe um arquivo que merece grande ateno, o
web.xml que fica dentro da pasta WEB-INF. No mesmo constam alguns parmetros importantes para
o projeto. Um parmetro que merece ateno no momento o servlet. O elemento servlet-class
declara javax.faces.webapp.FacesServlet fazendo com que a classe seja carregada automaticamente.
A url pattern declarada /faces/*, o que indica que a Servlet invocada cada vez que o caminho da
URL iniciar por /faces/. O elemento session-timeout indica que a sesso expira em 30 minutos. Por
sua vez, o elemento welcome-file indica a pgina inicial da aplicao. Vale salientar que o nome do
arquivo que corresponde a pgina inicial index.xhtml e como configurado anteriormente a url pattern
faces antecede o nome do arquivo.
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
106
Captulo 9 - JSF
Rosiclia Frasson
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>faces/index.xhtml</welcome-file>
</welcome-file-list>
</web-app>
7. A pgina index.xhtml deve ser modificada e conter o cdigo a seguir. importante perceber a
declarao da biblioteca html do JSF com o prefixo h: xmlns:h="http://java.sun.com/jsf/html". Essa
declarao permite que os componentes do JSF sejam utilizados. No exemplo apresentado so
utilizados os componentes h:head, que indica o cabealho da pgina e h:body que indica o corpo da
pgina.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Primeira pgina JSF</title>
</h:head>
<h:body>
Hello JSF!
</h:body>
</html>
8. Executando a aplicao, deve ser exibida a seguinte pgina.
107
Captulo 9 - JSF
Rosiclia Frasson
Ciclo de vida JSF

Pelo fato do JSF ser uma tecnologia baseada nas pginas JSP, seu ciclo de vida semelhante.
Do mesmo modo, que nas pginas JSP, em JSF, as requisies dos usurios so efetuadas utilizando
o protocolo HTTP e as respostas so devolvidas como pginas HTML. Porm, no JSF, como existe a
necessidade de converso e validao dos dados antes do envio ao servidor, o ciclo de vida um
pouco mais complexo e dividido em vrias fases:
Restore View: Nesta fase se a pgina j foi exibida anteriormente, a rvore de componentes
recuperada. Caso seja a primeira exibio da pgina, a rvore de componentes construda. O
JSF mantm os dados do formulrio. Isso significa que se a requisio rejeitada pelo servidor,
as entradas antigas so reexibidas para que o usurio possa corrig-las. Caso no existam
dados a serem submetidos, o request vai direto para a fase Render Response.
Apply Request Values: Nesta fase, os dados contidos no formulrio so recuperados e setados
nos respectivos componentes.
Process Validation: Esta fase transforma as strings dos componentes em valores locais que
podem ser objetos de qualquer tipo. Na criao de uma pgina JSF podem ser anexados
validadores que realizam verificaes sobre os valores locais. Se no processo de validao no
ocorrer nenhum erro, o ciclo de vida continua. Caso ocorra erro de validao ou converso, o
JSF vai para a fase Render Response, reexibindo a pgina para que o usurio possa corrigir os
valores.
Update Model Values: Nesta fase os valores locais so utilizados para atualizar as propriedades
dos beans que esto ligados aos componentes.
Invoke Application: Nesta fase ocorre a execuo do componente acionado.
Render Response: Nesta fase a resposta codificada e enviada para o navegador. importante
ressaltar que se ocorrer algum erro de converso ou validao na fase Process Validation, o
ciclo de vida passa para esta fase para que o formulrio seja reexibido e os dados possam ser
alterados. No primeiro acesso a pgina, em que o JSF monta a rvore e exibe para o usurio
tambm o ciclo de vida possui apenas a fase de Restore View e Render Response.
108
Captulo 9 - JSF
Rosiclia Frasson
Managed Bean
Em aplicaes
es que utilizam a tecnologia JSF, existe uma separao bem clara entre a camada
de apresentao e a lgica de negcios. Para efetuar a comunicao entre as duas camadas citadas,
so utilizados os managed beans. Como principais responsabilidades dos managed
manag beans podem ser
citados o fornecimento de dados que devem ser exibidos nas telas, recebimento de dados enviados nas
requisies e a execuo de tarefas de acordo com as aes dos usurios.
Os managed beans podem ser configurados atravs do arquivo faces-config
face
ou atravs de
anotaes. As anotaes so mais utilizadas devido a simplicidade das mesmas. A utilizao da
anotao @ManagedBean do pacote javax.faces.bean torna uma classe um managed bean.
import javax.faces.bean.ManagedBean;
@ManagedBean
public class Hello {
}
Utilizando esta anotao, o JSF aplica como nome do managed bean o mesmo nome da classe,
porm com a primeira letra minscula. Esse padro pode ser alterado utilizando o atributo name da
anotao.
@ManagedBean (name = "outroNome")
}
Para que um managed bean disponibilize dados para as telas necessrio a criao dos
109
Captulo 9 - JSF
Rosiclia Frasson
mtodos gets.
private String saudacao = "Primeira pgina JSF 2.0";
public String getSaudacao(){

return saudacao;
}
Para o recebimento de dados pelos managed bean necessrio a criao dos mtodos sets.
public void setSaudacao(String saudacao) {
this.saudacao = saudacao;
}
Os managed beans tambm podem conter mtodos para o tratamento de aes do usurio,
como o cadastro de um objeto em uma base de dados por exemplo.
Expression Language
Expression Language - EL - a linguagem utilizada para que os managed beans possam ser
referenciados nas pginas xhtml. Nos arquivos xhtml, a EL delimitada atravs dos smbolos #{ }.
Os managed beans so acessados pelas telas atravs do seu nome. As propriedades do mesmo
tambm podem ser acessadas.
<h:outputText value="#{hello.saudacao}"/>
Embora no seja recomendado, a EL aceita algumas operaes. Seguem os operadores aceitos

pela EL:
aritmticos : +, -, *, / e %. Para os dois ltimos tambm podem ser utilizadas as variantes
alfabticas DIV e MOD.
relacionais: <, <=, >, >=, == e != e suas respectivas variantes alfabticas lt, le, gt, ge, ne e not.
lgicos: &&, || e ! e suas variantes alfabticas and, or e not.
operador empty: verifica se uma varivel nula ou vazia ou uma colao ou array possui
tamanho igual a zero.
PASSO-A-PASSO
Utilizao do Managed Bean e Expression Language
1. Deve ser criado um projeto web no Netbeans como mostrado no exemplo anterior.
2. necessria a criao de um pacote controller para armazenar o managed bean que deve ter o
nome de Hello. O managed bean uma classe do Java. Segue o cdigo da mesma.
package br.com.rosicleiafrasson.cap9managedbean;
110
Captulo 9 - JSF
Rosiclia Frasson
@ManagedBean
private String saudacao = "Primeira pgina JSF 2.0";
public String getSaudacao(){

return saudacao;
}
}
3. Tambm deve ser alterado o cdigo do arquivo index.xhtml.

<?xml version='1.0' encoding='UTF-8'
encoding='UTF
?>
<!DOCTYPE
!DOCTYPE html PUBLIC "-//W3C//DTD
" //W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1
"http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
"http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Saudao
Saudao</title>
</h:head>
<h:body>
<h:form>
<h:outputText value="#{hello.saudacao}"/>
</h:form>
</h:body>
</html>
importante perceber a utilizao da expression language na tag outputText. O nome do

managed bean o mesmo nome da classe, porm inicia com a letra minscula. Vale ressaltar
tambm que a varivel saudao acessada diretamente. Porm, necessrio o mtodo de acesso.
Se o mesmo no estiver implementado, o valor no acessado e ser gerado um erro durante a
execuo da aplicao.
A seguir, o resultado da execuo da aplicao.
importante perceber que os componentes JSF so transformados em HTML. Segue o

cdigo fonte da pgina apresentada.
111
Captulo 9 - JSF
Rosiclia Frasson

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="j_idt2">
<title>Saudao</title>
</head>
<body>
<form id="j_idt5" name="j_idt5" method="post"
action="/Cap7ManagedBean/faces/index.xhtml;jsessionid=55db7da934971a30a221d6888434"
enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt5" value="j_idt5" />
Primeira pgina JSF 2.0<input type="hidden" name="javax.faces.ViewState"
id="j_id1:javax.faces.ViewState:0" value="6832589163449025133:5102407919025672837"
autocomplete="off" />
</form>
</body>
</html>
112
Captulo 10 - Componentes JSF
Rosiclia Frasson
Componentes JSF
No JSF 2.0 as telas so definidas por meio arquivos .xhtml. A especificao do JSF possui um
conjunto de componentes que podem ser utilizados na construo dessas telas. Esses componentes
esto divididos duas bibliotecas:
HTML (http://java.sun.com/jsf/html): A biblioteca HTML possui os componentes visuais que
geram o HTML da pgina.
Core (http://java.sun.com/jsf/core): A biblioteca core possui componentes no visuais, como
validadores.
Com a tecnologia JSF, os componentes so renderizados em tempo de execuo, o que permite
que um mesmo componente seja renderizado de acordo com o tipo de cliente que est solicitando, ou
seja, uma mesma pgina ser renderizada de formas diferentes se for acessado por um computador e
por um celular.
Para a utilizao dos componentes necessrio que as bibliotecas estejam importadas nos
arquivos xhtml, atravs do pseudo-atributo xmlns. Segue um exemplo de como devem ser importadas
as duas bibliotecas mencionadas.
xmlns:f="http://xmlns.jcp.org/jsf/core">
importante perceber que foram declarados prefixos para as duas bibliotecas. Para a biblioteca
core foi declarado o prefixo f e para a biblioteca html foi declarado o prefixo h. Podem ser declarados
qualquer prefixo porm os mencionados so considerados padro e usados pelas maioria dos
desenvolvedores.
Biblioteca HTML
Elementos HTML
Tag
Descrio
form
Formulrio HTML. Embora nos formulrios HTML necessrio indicar os

atributos method e action, em JSF estes valores no so definidos pelo
desenvolvedor, pois, o method sempre post e a ao igual ao endereo
da mesma pgina.
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
<h:head>
113
Rosiclia Frasson
<title>Exemplo formulrio</title>
</h:head>
<h:body>
<h:form>

formulrio
</h:form>
</h:body>
</html>
inputText
Campo de entrada de dados com apenas uma linha. Pode ser vinculado
com um atributo de um managed bean.
<h:inputText value="#{usuarioBean.usuario.nome}"
"#{usuarioBean.usuario.nome}" id="nome"/>
inputTextArea
Campo de entrada de dados com mltiplas linhas.

<h:inputTextarea
id="observacoes"/>
id=
inputSecret
value="#{usuarioBean.usuario.observacoes}"
"#{usuarioBean.usuario.observacoes}"
Campo de entrada de dados do tipo senha. Os caracteres digitados

ficam ocultos.
<h:inputSecret value="#{usuarioBean.usuario.senha}"
"#{usuarioBean.usuario.senha}" id="senha"
inputHidden
/>
Campo oculto. Este campo pode ser utilizado para inserir informaes
que devem ser enviadas automaticamente quando um formulrio
enviado ao servidor.
<h:inputHidden/>
outputLabel
Renderiza o elemento label da HTML. Normalmente utilizado para

rotular campos de formulrio.
formulrio. O atributo for vincula este componente
com outro.
<h:outputLabel value="Login: " for="login"
"login" />
outputLink
Renderiza links externos na pgina.
114
Rosiclia Frasson
<h:outputLink value="http://www.google.com">
<h:outputText value="Para
"Para mais informaes clique aqui"/>
</h:outputLink>
outputFormat
Permite a adio de texto parametrizado, ou seja, o texto possui espaos

reservados para serem substitudos por valores reais durante o
processamento.
<h:outputFormat value="Ol {0}">
<f:param value="#{loginBean.usuario}"
"#{loginBean.usuario}" />
</h:outputFormat>
outputText
Renderiza textos simples na tela.

<h:outputText value="Cadastro
"Cadastro de Usurio"/>
Usurio"
commandButton
Este componente envia os dados de um formulrio HTML para um

servidor atravs do mtodo post. Pode ser associado a mtodos de ao
de um managed bean atravs dos atributos action e actionListener.
<h:commandButton value="Cadastrar"
action="#{usuarioBean.adicionaUsuario}"
"#{usuarioBean.adicionaUsuario}"/>
commandLink
Componente com funo similar ao commandButton. Apenas com

aparncia de um link.
<h:commandLink value="Cadastrar"
action="#{usuarioBean.adicionaUsuario}"
"#{usuarioBean.adicionaUsuario}"/>
message
Exibe uma mensagem de um componente especfico. Geralmente

utilizada em conjunto com validadores e conversores. Para utilizar essa
tag, necessrio definir um id para o componente referente a mensagem
e associar message a este id atravs do atributo for.
<h:outputLabel value="Idade: " for="idade" />
<h:panelGroup>
<h:inputText value="#{usuarioBean.usuario.idade}"
"#{usuarioBean.usuario.idade}"
id=
id="idade"
validatorMessage="S
"S aceitamos candidatos que possuam
idade entre 18 e 80 anos.">
anos."
<f:validateLongRange minimum="18"
minimum=
maximum="80"/>
115
Rosiclia Frasson
</h:inputText>
<h:message for="idade"/>
</h:panelGroup>
messages
Este componente permite que os erros dos diversos componentes de um

formulrio sejam exibidos juntos em um local especfico da tela.
<h:messages/>
graphicImage
Este componente adiciona uma imagem na tela. O endereo da imagem

deve ser informado no atributo value e pode ser usado o caminho
relativo da mesma.
<h:graphicImage value="/imagens/jsf.jpg"
"/imagens/jsf.jpg"/>
selectOneListBox
Lista de seleo onde apenas um item pode ser selecionado. Os itens do

componente podem ser estticos, como mostrado no exemplo abaixo ou
dinmicos.
<h:outputLabel value="Escolaridade: " for="escolaridade"
"escolaridade"/>
<h:selectOneListbox id="escolaridade"
value=
value="#{usuarioBean.usuario.escolaridade}"
>
<f:selectItem itemValue="1" itemLabel="No
"No alfabetizado"/>
alfabetizado"
<f:selectItem itemValue="2" itemLabel="Alfabetizado"
"Alfabetizado"/>
<f:selectItem itemValue="3" itemLabel="Ensino
"Ensino fundamental
completo"
completo"/>
"Ensino mdio
completo"
completo"/>
<f:selectItem itemValue="5" itemLabel="Superior
"Superior completo"/>
completo"
</h:selectOneListbox>
116
selectOneMenu
Rosiclia Frasson
Componente conhecido como combo box. No uso deste componente

apenas uma opo pode ser selecionada. Os itens do componente
podem ser estticos ou dinmicos. No exemplo a seguir, os elementos
esto sendo carregados atravs de uma lista que pode representar
dados adivindos de um banco de dados.
<h:outputLabel value="rea de Atuao: " for="areaAtuacao"
"areaAtuacao"/>
<h:selectOneMenu id="areaAtuacao"
value=
value="#{usuarioBean.usuario.areaAtuacao}">
<f:selectItems value="#{usuarioBean.areas}"
"#{usuarioBean.areas}"/>
</h:selectOneMenu>
/h:selectOneMenu>
selectOneRadio
Caixa de seleo. No uso deste componente, entre as vrias opes,

apenas uma pode ser selecionada. Este componente tambm pode ser
populado com valores estticos ou dinmicos.
<h:outputLabel value="Sexo: " for="sexo" />
<h:selectOneRadio value="#{usuarioBean.usuario.sexo}"
"#{usuarioBean.usuario.sexo}" id="sexo">
<f:selectItem itemLabel="Feminino" itemValue="F"/>
itemValue=
<f:selectItem itemLabel="Masculino" itemValue="M"/>
itemValue=
</h:selectOneRadio>
selectBooleanCheckBox
Caixa de seleo. Permite que o usurio faa selees do tipo sim ou

no.
<h:selectBooleanCheckbox id="aceito"
"aceito"
value="#{usuarioBean.aceite}"/>
<h:outputLabel value="Li
"Li e concordo com
117
Rosiclia Frasson
os termos de uso" for="aceito"/>
selectManyCheckBox
Caixa de seleo. No uso deste componente, vrias opes podem ser

marcadas.
<h:outputLabel value="Hobbies: " for="hobbies"/>
/>
<h:selectManyCheckbox id="hobbies"
value=
value="#{usuarioBean.usuario.hobbies}"
layout="pageDirection"
"pageDirection">
<f:selectItem itemValue="Msicas"/>
<f:selectItem itemValue="Filmes"/>
<f:selectItem itemValue="Culinria"/>
<f:selectItem itemValue="Artesanato"/>
<f:selectItem itemValue="Decorao"/>
<f:selectItem itemValue="Livros"/>
<f:selectItem itemValue="Passeios
"Passeios tursticos"/>
tursticos"
<f:selectItem itemValue="Prtica
"Prtica de esportes"/>
esportes"
</h:selectManyCheckbox>
selectManyListBox
Componente similar ao selectOneListBox, porm, neste componente

vrios itens podem ser selecionados com a ajuda do boto CTRL.
<h:outputLabel value="Escolaridade: " for="escolaridade"
"escolaridade"/>
<h:selectOneListbox id="escolaridade"
value=
value="#{usuarioBean.usuario.escolaridade}"
>
<f:selectItem itemValue="1" itemLabel="No
"No alfabetizado"/>
alfabetizado"
<f:selectItem itemValue="2" itemLabel="Alfabetizado"
"Alfabetizado"/>
"Ensino fundamental
completo"
completo"/>
"Ensino mdio
completo"
completo"/>
<f:selectItem itemValue="5" itemLabel="Superior
"Superior completo"/>
completo"
118
selectManyMenu
Rosiclia Frasson
Componente similar ao selectOneMenu, com a diferena de que o

mesmo permite que sejam selecionados vrios itens de uma vez
utilizando a tecla CTRL.
<h:outputLabel value="Idiomas: " for="idiomas"/>
/>
<h:selectManyMenu id="idiomas"
value=
value="#{usuarioBean.usuario.idiomas}"
style="height:
"height: 90px">
90px"
<f:selectItem itemValue="Ingls"/>
<f:selectItem itemValue="Francs"/>
<f:selectItem itemValue="Alemo"/>
<f:selectItem itemValue="Espanhol"/>
<f:selectItem itemValue="Mandarim"/>
</h:selectManyMenu>
panelGrid
Este componente funciona como um organizador de componentes na

pgina e pode acomodar qualquer componente JSF. O panelGrid possui
como valor padro o nmero de colunas igual a 1. Para modific-lo
necessrio utilizar o atributo columns. No exemplo a seguir tambm foi
utilizada a propriedade border de 1 pixel para a visualizao do
componente.
<h:panelGrid columns="2">
<h:outputLabel value="Nome: " for="nome"

"nome"/>
<h:inputText value="#{usuarioBean.usuario.nome}"
"#{usuarioBean.usuario.nome}" id="nome"
dir=
dir="rtl"
size="50"/>
<h:outputLabel value="Sexo: " for="sexo"

"sexo" />
<h:selectOneRadio value="#{usuarioBean.usuario.sexo}"
"#{usuarioBean.usuario.sexo}"
id="sexo"
"sexo">
119
Rosiclia Frasson
<f:selectItem itemLabel="Feminino"
"Feminino" itemValue="F"/>
<f:selectItem itemLabel="Masculino"
"Masculino" itemValue="M"/>
</h:selectOneRadio>
</h:panelGrid>
panelGroup
Este componente utilizado para organizar as telas. Com ele possvel

agrupar vrios componentes em apenas um n, colocando em apenas
uma clula do panelGrid, por exemplo.
<h:panelGroup>
"login" />
<h:graphicImage value="/imagens/ajuda.png"
"/imagens/ajuda.png" alt="ajuda"/>
</h:panelGroup>
<h:panelGroup>
h:panelGroup>
<h:inputText value="#{usuarioBean.usuario.login}"
"#{usuarioBean.usuario.login}"
id=
id="login"
validatorMessage="O
"O login deve ser composto apenas por
letras e deve possuir entre 6 e 18 caracteres.">
caracteres."
<f:validateRegex pattern="[a-z]{6,18}"
z]{6,18}"/>
</h:inputText>
<h:message for="login"/>
</h:panelGroup>
<h:outputLabel value="Senha: " for="senha"/>

<h:panelGroup>
"#{usuarioBean.usuario.senha}"
id=
id="senha"
validatorMessage="A
"A senha deve possuir no mnimo 6
caracteres e no mximo 10 caracteres.">
caracteres."
<f:validateLength maximum="10" minimum="6"/>
</h:inputSecret>
<h:message for="senha"/>
</h:panelGroup>
120
dataTable
Rosiclia Frasson
Componente que gera uma tabela HTML. Pode ser vinculado a um

managed bean para preenchimento de dados dinmicos.
No exemplo a seguir, gerada uma tabela que representa uma agenda
de contatos. Esses contatos poderiam estar armazenados em uma base
de dados. A ttulo de exemplo, os contatos esto sendo adicionados
manualmente
ualmente no managed bean.
Segue o bean Contato, onde est definido que cada objeto deste tipo
deve possuir um nome e um telefone. Tambm foi definido um construtor
com estes dois atributos para facilitar a criao de um novo contato.
package br.com.rosicleiafrasson.cap10componentestabela
cap10componentestabela.modelo;
public class Contato {

private String telefone;
public Contato(String nome, String telefone)

telefone {
this.nome = nome;
this.telefone = telefone;
}

return nome;
}

this.nome = nome;
}
public String getTelefone() {

return telefone;
}
public void setTelefone(String telefone) {

this.telefone = telefone;
}
121
Rosiclia Frasson
A seguir, est ilustrado o managed bean ContatoBean que possui uma

lista de contatos. No mtodo de acesso a esta lista so adicionados dois
contatos para que os mesmos populem a tabela.
package br.com.rosicleiafrasson.cap10componentestabela.controller;
import br.com.rosicleiafrasson.cap10componentestabela.modelo.Contato;
import java.util.ArrayList;
@ManagedBean
public class ContatoBean {
private List<Contato> contatos = new ArrayList<>();
public List<Contato> getContatos() {

contatos.clear();
contatos.add(new Contato("Maria", "(48) 9924-9078"));
contatos.add(new Contato("Joo", "(11) 3645-6754"));
return contatos;
}
}
Na pgina, onde est o componente dataTable definido atravs do

atributo value os dados da tabela. O atributo var nomeia o elemento da
iterao corrente para se ter acesso ao ndice da mesma nas colunas.
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Exemplo Tabela</title>
</h:head>
<h:body>
<h:form>
<h:dataTable border="1"
value="#{contatoBean.contatos}" var="contato">
<f:facet name="header">
<h:outputText value="Agenda de Contatos"/>
</f:facet>
122
Rosiclia Frasson
<h:column>
<h:outputText value="Nome"/>
value=
</f:facet>
<h:outputText value="#{contato.nome}"
"#{contato.nome}"/>
</h:column>
<h:column>
<h:outputText value="Telefone"/>
value=
</f:facet>
<h:outputText
value=
value="#{contato.telefone}"/>
</h:column>
</h:dataTable>
</h:form>
</h:body>
</html>
column
Define uma coluna em uma tabela.

<h:column>
<h:outputText value="Telefone"
"Telefone"/>
</f:facet>
<h:outputText value="#{contato.telefone}"
"#{contato.telefone}"/>
</h:column>
123
Rosiclia Frasson
Tags de atributos bsicos HTML

Atributo
Descrio
id
Identifica o componente. Pode ser utilizado em todos os elementos

HTML.
<h:inputText value="#{usuarioBean.usuario.nome}" id="nome"/>
binding
Associa o componente da camada de viso sua camada de controle.

Pode ser utilizado em todos os elementos HTML.
<h:inputText binding="#{candidatoBean.candidato.cpf}" id="cpf"/>
rendered
Renderiza ou no um componente. O valor false indica que o

componente no deve ser renderizado. Pode ser utilizado em todos os
elementos HTML.
<h:panelGrid
columns="4" rendered="#{funcionarioBean.ehUsuario}">
<h:outputLabel for="login" value="Login: "/>

<h:inputText id="login"
value="#{funcionarioBean.funcionario.login}" />
<h:outputLabel for="senha" value="Senha: "/>

<h:inputText id="senha"
value="#{funcionarioBean.funcionario.senha}"/>
</h:panelGrid>
styleClass
Especifica uma classe CSS que contm definies de estilo. Pode ser
utilizado em todos os elementos HTML.
<h:inputText value="#{candidatoBean.candidato.nome}"
id="nome" styleClass="cxTexto" />
value
Associa o componente da camada de viso sua camada de controle.

Pode ser utilizado nos input, output e command.
<h:inputText value="#{candidatoBean.candidato.cpf}" id="cpf" />
valueChangeListener
Evento disparado quando o usurio muda o valor selecionado no

controle.
<h:selectOneMenu valueChangeListener="#{testeBean.carregarCidades}">
<f:selectItems value="#{testeBean.estados}" />
<f:ajax event="change" render="cidades" />
</h:selectOneMenu>
<h:selectOneMenu id="cidades">
<f:selectItems value="#{testeBean.cidades}" />
</h:selectOneMenu>
converter
Permite a utilizao de um converter prprio, ou seja, um converter

especfico do projeto.
124
Rosiclia Frasson
<h:selectOneMenu value="#{cadastrarMoradorBean.morador.apartamento}"
"#{cadastrarMoradorBean.morador.apartamento}"
converter=
converter="entityConverter">
<f:selectItems value="#{cadastrarMoradorBean.apartamentos}"
"#{cadastrarMoradorBean.apartamentos}"
var="apartamento"
"apartamento" itemLabel="#{apartamento.apartamento}"
"#{apartamento.apartamento}"/>
</h:selectOneMenu>
validator
Permite a utilizao de um validator prprio, ou seja, um validator

especfico do projeto.
required
Indica se um campo obrigatrio. Pode ser utilizado nos inputs.

"#{candidatoBean.candidato.nome}" id="nome"
required=
required="true"
/>
Atributos HTML 4.0

Atributo
Descrio
accesskey
Cria uma tecla de atalho para dar foco em um elemento. Embora a

documentao W3C sugere que a combinao de teclas para acionar o atributo
accesskey seja Ctrl + Alt + tecla, a maioria dos navegadores utilizam Alt + tecla
ou Shift + Alt + tecla.
action="#{candidatoBean.adicionarCandidato}"
"#{candidatoBean.adicionarCandidato}" accesskey="C"/>
accesskey=
acceptcharset
Indica o charset que deve ser utilizado.

<h:form acceptcharset="ISO-8859-1">
>
alt
Texto alternativo para elementos no textuais como imagens.

<h:graphicImage value="/imagens/estrela.png" alt="estrela"/>
alt=
border
Valor em pixel para a largura da borda de um componente.

<h:panelGrid columns="2" border="3">
<h:outputLabel value="Nome: "/>
<h:inputText />
</h:panelGrid>
dir
Define a direo do texto. Pode ser ltr - esquerda ou rtl - direita.

<h:inputText value="#{candidatoBean.candidato.nome}" id="nome"
id=
dir="rtl" />
disable
Desabilita um componente. No exemplo a seguir o input est desabilitado, ou

seja, no permite que nenhum valor seja digitado no mesmo.
125
Rosiclia Frasson

id=
disabled="true"
/>
maxlenght
Define a quantidade mxima de caracteres de uma caixa de texto.

<h:inputText value="#{candidatoBean.candidato.login}" id="login"
maxlenght="12
"12 />
readonly
O valor do componente fica visvel. Porm no pode ser alterado. Normalmente

utilizado em conjunto com teclados virtuais ou calendrios, pois o valor do
campo fica disponvel para leitura, porm no pode ser alterado.
rel
Relao entre o documento atual e um link especificado com o atributo href.

<link href="/css/estilo.css"
href=
type="text/css" rel="stylesheet"
"stylesheet"/>
rows
Nmero visvel de linhas em uma rea de texto.

<h:inputTextarea
value="#{usuarioBean.usuario.observacoes}
"#{usuarioBean.usuario.observacoes}
" id="observacoes" rows="4"/>
size
Define o tamanho de uma caixa de texto.

"#{candidatoBean.candidato.nome}" id="nome"
dir="rtl"
"rtl" size="75" />
style
Aplica um estilo a um componente.

value="#{candidatoBean.candidato.idiomas}"
"#{candidatoBean.candidato.idiomas}" style="height:
"height: 90px" >
tabindex
Define a ordem em que um elemento recebe o foco usando a tecla TAB. O

valor para este atributo deve ser um nmero inteiro entre 0 e 32767.
Atributos de eventos DHTML

Atributo
Descrio
onblur
Evento disparado quando o componente perde o foco.
onchange
Evento disparado quando o valor do campo alterado.
onclick
Evento disparado quando o componente clicado.
126
Rosiclia Frasson
onfocus
Evento disparado quando o componente recebe foco.
onkeydown
Evento disparado assim que a tecla pressionada.
onkeypress
Evento disparado assim que a tecla pressionada. disparado aps o

onkeydow.
onkeyup
Evento disparado quando a tecla pressionada solta.
onmousedown
Evento disparado quando o boto do mouse pressionado sobre o elemento.
onmousemove
Evento disparado quando o mouse se move sobre o elemento.
onmouseout
Evento disparado quando o mouse sair de cima do componente.
onmouseover
Evento disparado quando o mouse passar em cima do componente.
onmouseup
Evento disparado quando o boto do mouse liberado.
onreset
Evento disparado quando o boto de reset do formulrio acionado.
onselect
Evento disparado quando o texto contido no componente selecionado.
onsubmit
Evento disparado quando o formulrio submetido.
Biblioteca Core
Tag
Descrio
view
Serve para delimitar a regio onde ser criada a rvore de componentes

do JSF. Essa tag s necessria com o uso de JSP, no facelet no
necessrio.
subview
Serve para evitar que os IDs dos componentes se repitam na rvore de

componentes, nos casos em que existem includes de pginas dinmicos.
facet
Adiciona uma faceta a um componente. No caso das tabelas, por exemplo,

com esta tag possvel adicionar cabealho ou rodap.
<h:dataTable border="1" value="#{contatoBean.contatos}"
var="contato">
<h:outputText value="Agenda de Contatos"/>
</f:facet>
<h:column>
<h:outputText value="Nome"/>
</f:facet>
<h:outputText value="#{contato.nome}"/>
</h:column>
127
Rosiclia Frasson
<h:column>
<h:outputText value="Telefone"/>
value=
</f:facet>
<h:outputText value="#{contato.telefone}"
"#{contato.telefone}"/>
</h:column>
</h:dataTable>
attribute
Cria um par de nome/valor que define o valor de um atributo nomeado

associado com a tag que o contm.
param
Adiciona um parmetro a um componente.
action
um evento de ao disparado quando o componente clicado. O evento

executado na fase Invoke Application. O action contribui para a navegao
das pginas, porm no possui informaes sobre o evento.
<h:commandLink value="Cargo" action="/faces/paginas/cargo.xhtml"
"/faces/paginas/cargo.xhtml"/>
actionListener
Tambm um evento de ao disparado quando o componente clicado e

executado na fase Invoke Application. Diferentemente do action, o
actionListener possui informaes sobre o evento, porm no contribui
para a navegao de pginas.
valueChangeListener
Evento disparado quando o valor de um componente alterado. Pode ser

usado por exemplo, para carregar uma lista de cidades de acordo
ac
com o
estado selecionado.
Conversores:
Converso o processo que garante que os dados informados pelo

usurio se transformem em um tipo especfico. O processo de converso
ocorre na fase Apply Request Values. Os valores convertidos no so
aplicados aos beans neste momento, eles apenas so convertidos e
aplicados a objetos que representam os componentes e so chamados de
valores locais.
No JSF, a converso para os tipos primitivos feita de forma implcita. Os
objetos do tipo BigInteger e BigDecimal
BigDecimal tambm so convertidos
implicitamente. possvel converter valores de entrada e de sada. Para os
tipos que no possuem conversor padro ou em casos em que o tipo
possui, porm no adequado, possvel definir conversores explcitos.
Os conversores
conversores disparam mensagens que podem ser configuradas atravs
do elemento converterMessage. Tambm possvel trabalhar com
conversores explcitos nos casos em que os conversores implcitos no
forem suficientes.
128
convertDateTime
Rosiclia Frasson
Permite a formatao de datas utilizando um pattern. Esse conversor pode

ser aplicado em dados do tipo java.util.Date.
<h:outputLabel value="Data Nascimento: " for="dtNascimento"
"dtNascimento"/>
<h:panelGroup>
<h:inputText
value="#{candidatoBean.candidato.dataNascimento}" id="dtNascimento"
value="#{candidatoBean.candidato.dataNascimento}"
converterMessage=
converterMessage="Data
no fomato invlido. Utilize DD/MM/AAAA." >
<f:convertDateTime pattern="dd/MM/yyyy"
"dd/MM/yyyy"
type=
type="date"/>
</h:inputText>
<h:message for="dtNascimento" />
</h:panelGroup>
convertNumber
Permite a formatao de um nmero de acordo com uma definio prvia.

Seguem alguns atributos desta tag:
currencySimbol: Define um smbolo na formatao de moedas.
<h:outputLabel value="ltimo Salrio: " for="ultimoSalario"
"ultimoSalario" />
<h:inputText value="#{candidatoBean.candidato.ultimoSalario}"
didato.ultimoSalario}"
id="ultimoSalario"
"ultimoSalario">
<f:convertNumber currencySymbol="R$" type="currency"/>
type=
</h:inputText>
maxFractionDigits: Define o nmero mximo de dgitos que sero

formatados na parte fracionria do resultado. No fragmento de
cdigo a seguir, o atributo pode ter no mximo 3 dgitos na parte
fracionria. Caso a parte fracionria tenha uma maior quantidade
de dgitos do que foi definido, o nmero ser arredondado.
<h:outputLabel value="Peso: " for="peso" />

<h:inputText value="#{candidatoBean.candidato.peso}"
"#{candidatoBean.candidato.peso}" id="peso">
<f:convertNumber maxFractionDigits="3"
"3" />
</h:inputText>
O campo acima ser convertido para o resultado a seguir.
maxIntegerDigits: Define a quantidade mxima de dgitos da parte

inteira de um nmero.
<h:outputLabel value="Peso: " for="peso" />
129
Rosiclia Frasson
<h:inputText value="#{candidatoBean.candidato.peso}"
"#{candidatoBean.candidato.peso}" id="peso">
<f:convertNumber maxIntegerDigits="3" />
</h:inputText>
minFractionDigits: Define a quantidade mnima de dgitos da parte

fracionria de um nmero.
<h:outputLabel value="Altura: " for="altura" />

<h:inputText value="#{candidatoBean.candidato.altura}"
"#{candidatoBean.candidato.altura}"
id=
id="altura">
<f:convertNumber minFractionDigits="2"
"2" />
</h:inputText>
minIntegerDigits: Define a quantidade mnima de dgitos da parte

inteira de um nmero.
<h:outputLabel value="Altura: " for="altura" />

"#{candidatoBean.candidato.altura}" id="altura">
<f:convertNumber minFractionDigits="2" minIntegerDigits="1"
minIntegerDigits=
/>
</h:inputText>
pattern: Define um padro de formatao personalizado atravs de

uma expresso regular.
<h:outputLabel value="Altura: " for="altura"
"altura" />
"#{candidatoBean.candidato.altura}"
id="altura">
<f:convertNumber pattern="#0.00" />
</h:inputText>
type: Este atributo especifica como a string deve ser formatada.

Possui trs valores vlidos: number, currency e percentage.
Number o valor padro, currency o valor usado para moedas e
percentage usado para percentuais.
<h:outputLabel value="Valor: " for="valor" />
<h:inputText value="#{candidatoBean.candidato.valor}"
"#{candidatoBean.candidato.valor}"
id="valor">
<f:convertNumber type="percent" />
</h:inputText>
130
Rosiclia Frasson
converter
utilizado para a utilizao de conversores criados pelo desenvolvedor, ou

seja, conversores que no fazem parte da especificao.
Validadores
Durante o processo de construo de aplicativos, alm de converter

valores digitados pelo usurio em tipos especficos, necessrio verificar
se os mesmos esto conforme algumas regras de negcio estabelecidas.
A validaao ocorre na fase Process Validation. Os validadores disparam
mensagens que podem ser configuradas com o elemento
validatorMessage.
validateDoubleRange
Utilizado para verificar se um valor numrico real est entre um

determinado intervalo de nmeros.
<h:panelGroup>
<h:inputText value="#{usuarioBean.usuario.peso}"
"#{usuarioBean.usuario.peso}" id="peso"
validatorMessage="O valor do peso deve estar entre 45 e 250.">
validatorMessage="O
250."
<f:convertNumber maxFractionDigits="3"
maxFractionDigits=
maxIntegerDigits=
maxIntegerDigits="3"
/>
<f:validateDoubleRange minimum="45.00"
"45.00"
maximum=
maximum="250.00"/>
</h:inputText>
<h:message for="peso" />
</h:panelGroup>
validateLenght
Verifica se uma string possui uma quantidade mnima ou mxima de letras.

<h:panelGroup>
"#{usuarioBean.usuario.senha}"
id="senha"
"senha" validatorMessage="A
"A senha deve possuir no mnimo 6
caracteres e no mximo 10 caracteres.">
caracteres."
minimum=
</h:inputSecret>
</h:panelGroup>
validateLongRange
Verifica se um nmero inteiro est entre um determinado intervalo de

nmeros.
131
Rosiclia Frasson
<h:outputLabel value="Idade: " for="idade" />

<h:panelGroup>
<h:inputText value="#{usuarioBean.usuario.idade}"
"#{usuarioBean.usuario.idade}" id="idade"
validatorMessage="S aceitamos candidatos que possuam idade entre 18 e
validatorMessage="S
80 anos.">
anos."
<f:validateLongRange minimum="18"
"18" maximum="80"/>
</h:inputText>
<h:message for="idade"/>
</h:panelGroup>
/h:panelGroup>
validateRegex
Verifica se um texto respeita determinada expresso regular.

<h:panelGroup>
"login" />
<h:graphicImage value="/imagens/ajuda.png"
"/imagens/ajuda.png"
alt=
alt="ajuda"/>
</h:panelGroup>
<h:panelGroup>
<h:inputText value="#{usuarioBean.usuario.login}"
"#{usuarioBean.usuario.login}"
id=
id="login"
validatorMessage="O
"O login deve ser composto apenas por
letras e deve possuir entre 6 e 18 caracteres.">
caracteres."
<f:validateRegex pattern="[a-z]{6,18}"
z]{6,18}"/>
</h:inputText>
</h:panelGroup>
validator
Este componente deve ser utilizado para validadores customizados.
loadBundle
Permite carregar um pacote de recursos do Locale da pgina atual e

armazenar o mesmo em um mapa no escopo de request.
selectItems
Especifica itens para um componente de seleo. Utilizado para valores

dinmicos. No exemplo a seguir, os itens esto armazenados
armazen
em uma lista
e podem representar valores advindos de uma base de dados.
<h:outputLabel value="rea de Atuao: " for="areaAtuacao"/>
for=
<h:selectOneMenu id="areaAtuacao"
value="#{usuarioBean.usuario.areaAtuacao}">
>
132
Rosiclia Frasson
<f:selectItems value="#{usuarioBean.areas}"
"#{usuarioBean.areas}"/>
</h:selectOneMenu>
selectItem
Especifica um item para um componente de seleo. Utilizado para valores

estticos.
<h:outputLabel value="Hobbies: " for="hobbies"
"hobbies"/>
<h:selectManyCheckbox id="hobbies"
value=
value="#{usuarioBean.usuario.hobbies}"
layout=
layout="pageDirection">
<f:selectItem itemValue="Msicas"/>
<f:selectItem itemValue="Filmes"/>
<f:selectItem itemValue="Culinria"/>
/>
<f:selectItem itemValue="Artesanato"/>
/>
<f:selectItem itemValue="Decorao"/>
/>
<f:selectItem itemValue="Livros"/>
<f:selectItem itemValue="Passeios
"Passeios tursticos"/>
tursticos"
<f:selectItem itemValue="Prtica
"Prtica de esportes"/>
esportes"
133
Rosiclia Frasson
PASSO-A-PASSO
Cadastro de currculo
Para exemplificar o uso de componentes JSF, uma pgina para cadastro de currculos ser
montada.
1. Aps a criao do projeto JSF, necessrio criar as classes de modelo. No pacote modelo
necessria a criao da classe Cargo que deve armazenar os possveis cargos dos candidatos.
package br.com.rosicleiafrasson.curriculo.model;
public class Cargo {

private int codigo;
//Gets e sets
}
2. Ainda no pacote modelo, a classe Conhecimento tem por objeto armazenar os conhecimentos
tcnicos que os candidatos possuem.
public class Conhecimento {
private int codigo;

//Gets e sets
}
3. Para facilitar possveis manutenes, o endereo do usurio tambm deve possuir uma classe.
public class Endereco {

private String endereco;
private String complemento;
private String municipio;
private String bairro;
private String estado;
//Gets e sets
}
4. Para finalizar o pacote modelo, necessria a classe candidato.
134
Rosiclia Frasson
public class Candidato {
private int codigo;

private String cpf;
private char sexo;
private char nacionalidade;
private String raca;
private String estadoCivil;
private boolean ehDeficiente;
private String email;
private Endereco endereco;
private String login;
private String senha;
private List<String> formacoes;
private List<String> idiomas;
private List<Conhecimento> conhecimentos;
private List<Cargo> cargosPretendidos;
private String experiencias;
private double ultimoSalario;
private double pretensaoSalarial;
private int cargaHoraria;
public Candidato() {
endereco = new Endereco();
}
//Gets e sets
}
5. O pacote controller composto pela classe CandidatoBean que tem como responsabilidade efetuar
a ligao entre o modelo e a camada de visualizao composta pelas pginas xhtml.
importante perceber que os cargos e conhecimentos esto sendo adicionados de maneira esttica.
Porm os mesmos poderiam estar armazenados em uma base de dados.
package br.com.rosicleiafrasson.curriculo.controller;
135
Rosiclia Frasson
import br.com.rosicleiafrasson.curriculo.model.Candidato;
import br.com.rosicleiafrasson.curriculo.model.Cargo;
import br.com.rosicleiafrasson.curriculo.model.Conhecimento;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class CandidatoBean {
private List<Candidato> candidatos;

private Candidato candidato;
private List<Cargo> cargos;
private List<Conhecimento> conhecimentos;
public CandidatoBean() {
candidatos = new ArrayList<>();
candidato = new Candidato();
cargos = new ArrayList<>();
conhecimentos = new ArrayList<>();
cargos.add(new Cargo(1, "Analista de Sistemas"));

cargos.add(new Cargo(2, "Analista de Qualidade e Processos"));
cargos.add(new Cargo(3, "Analista Implementador BI"));
cargos.add(new Cargo(4, "Administrador de Banco de Dados"));
cargos.add(new Cargo(5, "Analista de Infraestrutura de TI"));
cargos.add(new Cargo(6, "Analista de Negcio"));
cargos.add(new Cargo(7, "Analista de Suporte"));
cargos.add(new Cargo(8, "Analista de Testes"));
cargos.add(new Cargo(9, "Analista Programador Java"));
cargos.add(new Cargo(10, "Arquiteto de Software"));
cargos.add(new Cargo(11, "Designer Grfico"));
cargos.add(new Cargo(12, "Estagirio"));
conhecimentos.add(new Conhecimento(1, "MS Project"));

conhecimentos.add(new Conhecimento(2, "Modelagem de Dados"));
conhecimentos.add(new Conhecimento(3, "Gesto da Qualidade ( ISO, CMMI)"));
conhecimentos.add(new Conhecimento(4, "Gerncia de Projetos"));
conhecimentos.add(new Conhecimento(5, "Testes de Software"));
conhecimentos.add(new Conhecimento(6, "UML"));
136
Rosiclia Frasson
conhecimentos.add(new Conhecimento(7, "Anlise e Projeto de Sistemas"));

conhecimentos.add(new Conhecimento(8, "Usabilidade/Ergonomia de Software"));
conhecimentos.add(new Conhecimento(9, "Pontos de Funo"));
conhecimentos.add(new Conhecimento(10, "Metodologias de Desenvolvimento"));
conhecimentos.add(new Conhecimento(11, "Redao"));
conhecimentos.add(new Conhecimento(12, "Trabalho em Equipe"));
conhecimentos.add(new Conhecimento(13, "Enterprise Architect"));
conhecimentos.add(new Conhecimento(14, "Mapeamento de Processos"));
conhecimentos.add(new Conhecimento(15, "Levantamento de Requisitos"));
conhecimentos.add(new Conhecimento(16, "Treinamento de Sistemas"));
conhecimentos.add(new Conhecimento(17, "Implantao de Sistemas"));
conhecimentos.add(new Conhecimento(18, "CSS"));
conhecimentos.add(new Conhecimento(19, "HTML"));
}
public Candidato getCandidato() {

return candidato;
}
public void setCandidato(Candidato candidato) {

this.candidato = candidato;
}
public List<Cargo> getCargos() {
return cargos;
}
public void setCargos(List<Cargo> cargos) {

this.cargos = cargos;
}
public List<Conhecimento> getConhecimentos() {

return conhecimentos;
}
public void setConhecimentos(List<Conhecimento> conhecimentos) {

this.conhecimentos = conhecimentos;
}
public List<Candidato> getCandidatos() {
137
Rosiclia Frasson
return candidatos;
}
public String adicionarCandidato() {

candidatos.add(candidato);
candidato = new Candidato();
return "tabela";
}
}
6. Por fim, as pginas index.xhtml e tabela.xhtml.

<h:head>
<title>Currculo</title>
</h:head>
<h:body>
<h1>Revoluo People Soft</h1>
<p>Venha fazer parte da empresa que est transformando o Brasil</p>
</div>
<div id="pagina">
<div id="tituloPrincipal">
<h:graphicImage value="/imagens/estrela.png" alt="estrela"/>
<h3>CADASTRE SEU CURRCULO</h3>
</h:panelGrid>
</div>
<div id="formulario">
<h:form>
138
Rosiclia Frasson
<h:messages/>
<fieldset>
<legend>DADOS PESSOAIS</legend>
<h:inputHidden value="#{candidatoBean.candidato.codigo}"/>
<h:outputLabel value="Nome: " for="nome"/>

dir="rtl" size="75" required="true" />
<h:outputLabel value="CPF: " for="cpf"/>

<h:inputText value="#{candidatoBean.candidato.cpf}" id="cpf" />
<h:outputLabel value="Data Nascimento: " for="dtNascimento"/>

<h:panelGroup>
<h:inputText value="#{candidatoBean.candidato.dataNascimento}"
id="dtNascimento" converterMessage="Data no fomato invlido. Utilize DD/MM/AAAA." >
<f:convertDateTime pattern="dd/MM/yyyy" type="date"/>
</h:inputText>
<h:message for="dtNascimento" />
</h:panelGroup>
<h:outputLabel value="Sexo: " for="sexo" />

<h:selectOneRadio value="#{candidatoBean.candidato.sexo}" id="sexo">
<f:selectItem itemLabel="Feminino" itemValue="F"/>
<f:selectItem itemLabel="Masculino" itemValue="M"/>
</h:selectOneRadio>
<h:outputLabel value="Nacionalidade: " for="nacionalidade" />

<h:selectOneMenu value="#{candidatoBean.candidato.nacionalidade}"
id="nacionalidade" >
<f:selectItem itemLabel="Brasileira" itemValue="B"/>
<f:selectItem itemLabel="Estrangeira" itemValue="E"/>
</h:selectOneMenu>
<h:outputLabel value="Raa: " for="raca" />

<h:selectOneListbox value="#{candidatoBean.candidato.raca}" id="raca"
size="3">
139
Rosiclia Frasson
<f:selectItem itemLabel="Branca" itemValue="Branca"/>

<f:selectItem itemLabel="Preta" itemValue="Preta"/>
<f:selectItem itemLabel="Parda" itemValue="Parda"/>
<f:selectItem itemLabel="Indgena" itemValue="Indgena"/>
<f:selectItem itemLabel="Amarela" itemValue="Amarela"/>
<f:selectItem itemLabel="No desejo declarar" itemValue="No
declarou"/>
<h:outputLabel value="Estado civil: " for="estCivil" />

<h:selectOneListbox value="#{candidatoBean.candidato.estadoCivil}"
id="estCivil" size="3">
<f:selectItem itemLabel="Solteiro" itemValue="Solteiro"/>
<f:selectItem itemLabel="Casado" itemValue="Casado"/>
<f:selectItem itemLabel="Vivo" itemValue="Vivo"/>
<f:selectItem itemLabel="Divorciado" itemValue="Divorciado"/>
<f:selectItem itemLabel="Outro" itemValue="Outro"/>
<h:selectBooleanCheckbox id="deficiente"
value="#{candidatoBean.candidato.ehDeficiente}"/>
<h:outputLabel value="Portador de necessidades especiais"
for="deficiente"/>
<h:outputLabel value="Telefone: " for="telefone"/>

<h:inputText value="#{candidatoBean.candidato.telefone}"
id="telefone"/>
<h:outputLabel value="Email " for="email"/>

<h:inputText value="#{candidatoBean.candidato.email}" id="email"
size="75"/>
</h:panelGrid>
</fieldset>
<br />
<br />
<fieldset>
<legend>ENDEREO</legend>
140
Rosiclia Frasson
<h:outputLabel value="Endereo: " for="endereco"/>
<h:inputText value="#{candidatoBean.candidato.endereco.endereco}"
id="endereco" size="75" />
<h:outputLabel value="Complemento: " for="complemento"/>

<h:inputText value="#{candidatoBean.candidato.endereco.complemento}"
id="complemento" size="75"/>
<h:outputLabel value="Municpio: " for="municipio"/>

<h:inputText value="#{candidatoBean.candidato.endereco.municipio}"
id="municipio" size="75" />
<h:outputLabel value="Bairro: " for="bairro"/>

<h:inputText value="#{candidatoBean.candidato.endereco.bairro}"
id="bairro" size="75"/>
<h:outputLabel value="Estado: " for="estado"/>

<h:selectOneMenu value="#{candidatoBean.candidato.endereco.estado}"
id="estado" >
<f:selectItem itemLabel="AC" itemValue="AC"/>
<f:selectItem itemLabel="AL" itemValue="AL"/>
<f:selectItem itemLabel="AP" itemValue="AP"/>
<f:selectItem itemLabel="AM" itemValue="AM"/>
<f:selectItem itemLabel="BA" itemValue="BA"/>
<f:selectItem itemLabel="CE" itemValue="CE"/>
<f:selectItem itemLabel="DF" itemValue="DF"/>
<f:selectItem itemLabel="ES" itemValue="ES"/>
<f:selectItem itemLabel="GO" itemValue="GO"/>
<f:selectItem itemLabel="MA" itemValue="MA"/>
<f:selectItem itemLabel="MT" itemValue="MT"/>
<f:selectItem itemLabel="MS" itemValue="MS"/>
<f:selectItem itemLabel="MG" itemValue="MG"/>
<f:selectItem itemLabel="PA" itemValue="PA"/>
<f:selectItem itemLabel="PB" itemValue="PB"/>
<f:selectItem itemLabel="PR" itemValue="PR"/>
<f:selectItem itemLabel="PE" itemValue="PE"/>
<f:selectItem itemLabel="PI" itemValue="PI"/>
<f:selectItem itemLabel="RJ" itemValue="RJ"/>
<f:selectItem itemLabel="RN" itemValue="RJ"/>
<f:selectItem itemLabel="RS" itemValue="RJ"/>
141
Rosiclia Frasson
<f:selectItem itemLabel="RO" itemValue="RO"/>

<f:selectItem itemLabel="RR" itemValue="RR"/>
<f:selectItem itemLabel="SC" itemValue="SC"/>
<f:selectItem itemLabel="SP" itemValue="SP"/>
<f:selectItem itemLabel="SE" itemValue="SE"/>
<f:selectItem itemLabel="TO" itemValue="TO"/>
</h:selectOneMenu>
</h:panelGrid>
</fieldset>
<br />
<br />
<fieldset>
<legend>DADOS DE ACESSO</legend>
<h:panelGroup>
<h:outputLabel value="Login: " for="login" />
<h:graphicImage value="/imagens/ajuda.png" alt="ajuda"/>
</h:panelGroup>
<h:panelGroup>
<h:inputText value="#{candidatoBean.candidato.login}" id="login"
validatorMessage="O login deve ser composto apenas por letras e deve possuir entre 6 e 18
caracteres.">
<f:validateRegex pattern="[a-z]{6,18}"/>
</h:inputText>
</h:panelGroup>

<h:panelGroup>
<h:inputSecret value="#{candidatoBean.candidato.senha}"
id="senha" validatorMessage="A senha deve possuir no mnimo 6 caracteres e no mximo 10
caracteres.">
</h:inputSecret>
</h:panelGroup>
</h:panelGrid>
142
Rosiclia Frasson
</fieldset>
<br />
<br />
<fieldset>
<legend>FORMAO E EXPERINCIAS PROFISSIONAIS</legend>
<h:outputLabel value="Formao: " for="formacao"/>

<h:selectManyListbox id="formacao"
value="#{candidatoBean.candidato.formacoes}" size="3">
<f:selectItem itemValue="1" itemLabel="Ensino Mdio"/>
<f:selectItem itemValue="2" itemLabel="Curso Tcnico"/>
<f:selectItem itemValue="3" itemLabel="Graduao"/>
<f:selectItem itemValue="4" itemLabel="Especializao"/>
<f:selectItem itemValue="5" itemLabel="Mestrado"/>
<f:selectItem itemValue="6" itemLabel="Doutorado"/>
</h:selectManyListbox>
<h:outputText/>
<h:outputText/>
<h:outputLabel value="Idiomas: " for="idiomas"/>

value="#{candidatoBean.candidato.idiomas}" style="height: 90px" >
<f:selectItem itemValue="Ingls"/>
<f:selectItem itemValue="Francs"/>
<f:selectItem itemValue="Alemo"/>
<f:selectItem itemValue="Espanhol"/>
<f:selectItem itemValue="Mandarim"/>
</h:selectManyMenu>
<h:outputText/>
<h:outputText/>
</h:panelGrid>
<h:outputLabel value="Habilidades/Conhecimentos: "
for="conhecimento"/>
<h:selectManyCheckbox id="conhecimento"
value="#{candidatoBean.candidato.conhecimentos}" layout="pageDirection" >
143
Rosiclia Frasson
<f:selectItems value="#{candidatoBean.conhecimentos}"/>
<h:outputLabel value="Cargos Pretendidos: " for="cargosPre"/>

<h:selectManyListbox id="cargosPre"
value="#{candidatoBean.candidato.cargosPretendidos}">
<f:selectItems value="#{candidatoBean.cargos}"/>
</h:selectManyListbox>
<h:outputLabel value="Experincias Profissionais: "

for="exProfissional"/>
<h:inputTextarea value="#{candidatoBean.candidato.experiencias}"
id="exProfissional" rows="10" cols="80"/>
<h:outputLabel value="ltimo Salrio: " for="ultimoSalario" />

<h:inputText value="#{candidatoBean.candidato.ultimoSalario}"
id="ultimoSalario">
<f:convertNumber currencySymbol="R$" type="currency"/>
</h:inputText>
<h:outputLabel value="Pretenso Salarial: " for="pretensaoSalarial"

/>
<h:inputText value="#{candidatoBean.candidato.pretensaoSalarial}"
id="pretensaoSalarial">
</h:inputText>
<h:outputLabel value="Carga Horria: " for="carga" />

<h:inputText value="#{candidatoBean.candidato.cargaHoraria}"
id="carga">
</h:inputText>
</h:panelGrid>
</fieldset>
<br />
action="#{candidatoBean.adicionarCandidato}" />
<br />
144
Rosiclia Frasson
<br />
<h:outputLink value="http://www.google.com">
<h:outputText value="Para mais informaes clique aqui"/>
</h:outputLink>
<br />
<br />
<br />
</h:form>
</div>
</div>
</h:body>
</html>

<h:head>
<title>Currculo</title>
</h:head>
<h:body>
<h:form>
<h3>Candidatos</h3>
<h:dataTable border="1" var="candidatos" value="#{candidatoBean.candidatos}">
<h:column>
<f:facet name="header">Nome</f:facet>
#{candidatos.nome}
</h:column>
<h:column>
<f:facet name="header">CPF</f:facet>
#{candidatos.cpf}
</h:column>
<h:column>
145
Rosiclia Frasson
<f:facet name="header">Data
name=
de Nascimento</f:facet>
<h:outputText value="#{candidatos.dataNascimento}">
<f:convertDateTime
f:convertDateTime pattern="dd/MM/yyyy" />
</h:outputText>
</h:column>
<h:column>
<f:facet name="header">Telefone</f:facet>
name=
#{candidatos.telefone}
</h:column>
</h:dataTable>
<br/>
value=
action="cadastro" />
</h:form>
</h:body>
</html>
Vale lembrar que a codificao apresentada salva o candidato apenas em uma lista. Sendo
assim, os dados so temporrios, ou seja, para cada execuo criada uma lista vazia. Serve apenas
para exemplificar o uso dos componentes JSF.
Executando o projeto, a pgina exibida deve ser semelhante
semelhante a figura a seguir.
146
Rosiclia Frasson
PASSO-A-PASSO
Com o intuito de deixar o projeto apresentado - cadastro de currculo - com uma melhor
aparncia sero inseridas algumas regras de estilo.
1. No projeto criado no captulo anterior, necessrio indicar a folha de estilo que ser aplicada a
pgina.
<h:head>
<title>Currculo
Currculo</title>
<h:outputStylesheet library="css" name="style.css"/>
/>
</h:head>
2. O prximo passo a criao da folha de estilo. Segue a seguir a codificao da mesma.

body{
margin: 0;
padding: 0;
background: #F6F6F6;
font-size:
size: 13px;
text-align:
align: justify;
}
#cabecalho{
width: 800px;
height: 100px;
margin: 0 auto;
}
#cabecalho h1,
, #cabecalho p{
margin: 0;
padding: 0;
}
#cabecalho h1{
{
147
Rosiclia Frasson
font-size: 52px;
color: #20A001;
}
#cabecalho p{
margin-top: 0px;
margin-left: 30px;
padding: 0 0 0 4px;
font-size: 15px;
color: #86EA66;
text-transform: uppercase;
}
#pagina{
width: 800px;
margin: 0 auto;
padding: 0px;
background: #ffffff;
box-shadow: 5px 4px 10px #333, -5px -5px 10px #ccc;
#tituloPrincipal{
text-transform: uppercase;
background-color: #20A001;
color: #FFFFFF;
font-size: 15px;
}
#formulario{
margin: 20px;
}
#formulario input, textarea, select, option, body{

font-family: Arial, Helvetica, sans-serif;
color: #83826A;
}
fieldset{
border-radius: 5px;
}
148
Rosiclia Frasson
149
Captulo 11 - Escopos JSF
Rosiclia Frasson
Escopos JSF
Request Scope
Os objetos armazenados com escopo request sobrevivem apenas a uma submisso do ciclo de
vida do JSF, ou seja, os dados recebidos so processados e uma resposta enviada ao cliente, aps o
envio da resposta os dados so apagados da memria do servidor. A cada requisio criada uma
nova instncia do managed bean, sendo assim, as informaes no so compartilhadas entre as
requisies.
O escopo request possui o menor tempo de vida entre os escopos, sendo assim os objetos
permanecem pouco tempo na memria, melhorando a performance da aplicao. RequestScoped o
escopo apropriado em telas onde no so necessrias chamadas ajax e no necessrio armazenar
dados entre as requisies dos usurios. Um bom exemplo para utilizao desse escopo a submisso
de um formulrio simples.
@ManagedBean
@RequestScoped
public class ExemploEscopoRequest {
}
Os managed beans com escopo request no necessitam da anotao @RequestScoped, pois

este o escopo padro. Porm uma boa prtica utilizar a anotao.
Session Scope
Os objetos armazenados com o escopo session sobrevivem enquanto a seo do usurio estiver
ativa. Em outras palavras, ao utilizar este escopo, os atributos do managed bean tero seus valores
mantidos at o fim da sesso do usurio.
O escopo de sesso recomendado para o armazenamento de informaes do usurio e dados
de preferncia deste. Vale ressaltar que a sesso definida pelo vnculo do usurio com o navegador.
Sendo assim, se dois navegadores distintos forem abertos pelo mesmo usurio, duas sees diferentes
sero criadas no servidor.
Uma seo pode ser destruda em duas situaes: a primeira delas quando a prpria aplicao
decide finalizar a sesso, que o que ocorre quando um usurio faz o logout e a outra situao se d
quando o servidor decide expirar a sesso. O tempo para que uma seo seja expirada pode ser
configurada no web.xml.
@ManagedBean
@SessionScoped
public class ExemploEscopoSession {
}
Embora a utilizao do Session Scope seja relativamente fcil, importante ter muita cautela ao
anotar um managed bean com este escopo. importante lembrar que um objeto com escopo session
permanecer na memria durante toda a seo. Isso significa que quanto maior a quantidade de
usurios maior ser a quantidade de memria que o servidor ter que gerenciar, ou seja, a cada nova
seo criada um novo managed bean com todos os atributos ser alocado na memria do servidor.
150
Rosiclia Frasson
Application Scoped
A utilizao do escopo de aplicao cria uma instncia do managed bean no momento em que a
classe requisitada e a mantm at a finalizao da aplicao. Com o application Scoped, o managed
bean estar disponvel para todos os usurios da aplicao enquanto a mesma estiver sendo
executada. importante ressaltar que informaes que no devem ser compartilhadas no devem
possuir este escopo.
O escopo de aplicao geralmente utilizado para guardar valores de configurao e realizao
de cache manual como o carregamento de listagem de estados e municpios.
@ManagedBean
@ApplicationScoped
public class ExemploEscopoAplicacao {
}
Atravs da configurao @ManagedBean (eager = true), o servidor instancia o managed bean

antes que qualquer tela da aplicao seja acessada. Isto significa que a informao ser carregada em
memria antes de ser solicitada pelo usurio.
View Scoped
O escopo de viso mantm os dados enquanto o usurio permanecer na pgina. No momento
em que h troca de pgina o objeto excludo da memria.
View Scoped possui um tempo de vida maior que o Request Scoped e menor que o Session
Scoped e muito indicado para pginas que possuem requisies ajax.
importante salientar que um managed bean com anotao @ViewScoped s removido da
memria se a mudana de pgina for feita pelo mtodo POST o que pode acarretar em objetos
desnecessrios na memria, caso a navegao for feita via link.
@ManagedBean
@ViewScoped
public class ExemploEscopoView {
}
PASSO-A-PASSO
Com o intuito de demonstrar a diferena entre os escopos dos managed beans, deve ser criado
um novo projeto JSF.
1. O pacote modelo deve conter uma classe com o nome de Aluno. Esse aluno deve possuir o atributo
nome.
package br.com.rosicleiafrasson.cap11escopos.modelo;
public class Aluno {
151
Rosiclia Frasson

return nome;
}

this.nome = nome;
}
}
2. Para controlar os dados recebidos e enviados pela visualizao, necessrio criar um managed
bean. Neste primeiro exemplo ser utilizado o escopo request.
package br.com.rosicleiafrasson.cap11escopos.controle;
import br.com.rosicleiafrasson.cap11escopos.modelo.Aluno;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class AlunoBean {
private List<Aluno> alunos = new ArrayList<>();

private Aluno aluno = new Aluno();
public String adicionaAluno() {

this.alunos.add(this.aluno);
this.aluno = new Aluno();
return "index";
}
public List<Aluno> getAlunos() {

return alunos;
}
public Aluno getAluno() {

return aluno;
}
152
Rosiclia Frasson
public void setAluno(Aluno aluno) {

this.aluno = aluno;
}
}
3. A pgina de visualizao deve ser composta por um campo de texto e um boto para adio dos
alunos e um componente de repetio para exibir todos os alunos cadastrados. Como a aplicao no
est conectada a uma base de dados, a lista dos alunos ser mantida durante o tempo de vida do
managed bean.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<title>Primeira pgina JSF</title>
</h:head>
<h:body>
<h:form>
<h:inputText value="#{alunoBean.aluno.nome}" id="nome"/>
<h:commandButton value="Adicionar"
action="#{alunoBean.adicionaAluno}"/>
</h:panelGrid>
</h:form>
<h:panelGroup rendered="#{not empty alunoBean.alunos}">

<h1>Alunos cadastrados</h1>
<ul>
<ui:repeat value="#{alunoBean.alunos}" var="aluno">
<li>
<h:outputText value="#{aluno.nome}"/>
</li>
</ui:repeat>
</ul>
</h:panelGroup>
</h:body>
</html>
Executando a aplicao uma pgina semelhante a pgina mostrada a seguir deve ser exibida.
153
Rosiclia Frasson
importante perceber que quando o escopo do managed bean request, a cada requisio, ou
seja, cada vez que o usurio acionar o boto adicionar, a lista fica vazia. Isso ocorre porque os
managed beans com escopo request duram o tempo de uma requisio.
Alterando o managed bean para o escopo de sesso, possvel perceber que os alunos
permanecem na lista cada vez que o usurio aciona o boto de adicionar.
package br.com.
.rosicleiafrasson.cap11escopos.controle;
br.com.rosicleiafrasson.cap11escopos.modelo.Aluno
java.util.ArrayList
java.util.List
javax.faces.bean.ManagedBean
javax.faces.bean.SessionScoped
@ManagedBean
@SessionScoped
Como a seo muda a cada usurio ou navegador distinto, necessrio abrir a pgina em um
outro navegador para visualizar como o SessionScoped funciona. Como mostra a imagem a seguir, o
mesmo software em sees distintas possui em sua lista de alunos, valores distintos.
154
Rosiclia Frasson
Se o managed bean for alterado para escopo de aplicao, possvel perceber que mesmo em
sees distintas os valores
alores contidos na lista de alunos continuam os mesmos.
ackage br.com
com.rosicleiafrasson.cap11escopos.controle;
br.com.rosicleiafrasson.cap11escopos.modelo.Aluno;
java.util.ArrayList
java.util.List
import javax.faces.bean.ApplicationScoped;
javax.faces.bean.ApplicationScoped
@ManagedBean
@ApplicationScoped
155
Rosiclia Frasson
Para finalizar resta exemplificar o escopo de viso. Como j mencionado o escopo de viso
existe na memria enquanto o usurio permanecer na pgina exibida. No exemplo exposto, o mtodo
adicionar um mtodo void. Isso significa que ao acionar o boto adicionar, a pgina continua a
mesma. Portanto, para demonstrar este escopo necessrio uma modificao no mtodo adicionar,
adiciona
para que o mesmo seja redirecionado. No exemplo mostrado ser redirecionado para a mesma
pgina, mas o comportamento ser o mesmo se a pgina redirecionada for diferente.
package br.com.rosicleiafrasson
rosicleiafrasson.cap11escopos.controle;
br.com.rosicleiafra
java.util.ArrayList
java.util.List
import javax.faces.bean.ViewScoped;
javax.faces.bean.ViewScoped
156
Rosiclia Frasson
@ManagedBean
@ViewScoped
private List<Aluno> alunos = new ArrayList<>();

private Aluno aluno = new Aluno();
public String adicionaAluno() {

this.alunos.add(this.aluno);
this.aluno = new Aluno();
return "index";
}
Executando o projeto possvel perceber que a lista est sempre vazia. Isso ocorre porque
cada vez que o boto adicionar acionado a pgina redirecionada. O ViewScoped muito til em
pginas com chamadas ajax.
157
Captulo 12 - Facelets
Rosiclia Frasson
Facelets
Facelets um framework utilizado para a construo de pginas com templates padronizados,
bem como para a criao de componentes customizveis.
As aplicaes, em sua grande maioria, possuem um modelo padro para as pginas. O menu, o
cabealho e o rodap tendem a ter a mesma estrutura no aplicativo inteiro. Codificar estes
componentes em todas as pginas torna difcil a manuteno das mesmas. O suporte a templates do
facelets permite a definio de uma estrutura visual padro que pode ser reaproveitada em diversas
telas.
Na padronizao das telas com o uso do facelets possvel construir uma estrutura fixa com o
que semelhante em todas as telas como topo, menu e rodap.
Alm da facilidade de manuteno, reduo drstica na quantidade de cdigo e consequente
diminuio no tempo de desenvolvimento, a utilizao de facelets prov outras vantagens. A principal
delas que com a utilizao da tecnologia o cdigo a execuo do cdigo fica de 30% a 50% mais
rpida do que em pginas jsp. O facelets independente de servidor de aplicao e est incorporado
ao JSF 2.0.
Para construir um template para uma aplicao, necessrio identificar um padro em um
determinado conjunto de telas. Em posse deste padro, faz-se
faz se a montagem do esqueleto utilizando
trechos estticos e dinmicos.. Vale ressaltar que um template nunca ser executado, pois uma pgina
incompleta, deste modo, importante que os templates sejam salvos dentro da pasta WEB-INF
WEB
para
que o usurio no consiga acess-las
las diretamente.
Em pginas que utilizam facelets necessrio
necessrio importar o namespace de facelets:
http://xmlns.jcp.org/jsf/facelets. Seguem algumas tags dessa biblioteca:
Tag
Descrio
ui:insert
Define uma rea de substituio no template, ou seja, demarca onde ser, por
exemplo, o menu, o topo e o corpo da pgina.
ui: include
Insere um fragmento de tela dentro de uma pgina. Essa tag muito utilizada
quando o cdigo fonte de uma pgina fica muito extenso. Esse cdigo pode ser
separado em vrios arquivos, o que facilita a manuteno.
ui:define
Define o contedo de uma rea criada no template como ui:insert.
ui:composition
Define o relacionamento de composio entre a tela e o template.
158
Rosiclia Frasson
PASSO-A-PASSO
Criao de um template
Como j mencionado um template nunca deve ser executado, pois trata-se
trata
de uma pgina
incompleta. Dessa forma recomendado que os templates fiquem dentra da pasta WEB-INF
WEB
para que
o usurio no tenha acesso a mesma.
1. Aps a criao de um novo projeto, necessrio criar uma pasta templates dentro do diretrio
WEB-INF. Dentro da pasta
asta criada, necessrio um arquivo com extenso .xhtml. No caso ilustrado foi
criado o arquivo template.xhtml.
2. No template criado necessrio definir os trechos estticos e dinmicos. O trecho de cdigo

apresentado possui o trecho dinmico contedo
contedo e os trechos estticos: topo, menuLateral e rodap.
encoding='UTF
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD
" //W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtm
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
"http://xmlns.jcp.org/jsf/facelets"
"http://xmlns.jcp.org/jsf/html">
<h:head>
</h:head>
<h:body>
<div id="topo"
"topo">
Topo
</div>
<div id="conteudo"
"conteudo">
<ui:insert name="conteudo">Contedo</ui:insert>
</div>
159
Rosiclia Frasson
<div id="menuLateral"
"menuLateral">
Menu Lateral
</div>
<div id="rodape"
"rodape">
Rodap
</div>
</h:body>
</html>
3. Na utilizao deste template, importante definir o que ser colocado no template nos trechos
dinmicos. Neste caso o nico trecho dinmico o contedo. Portanto a pgina index, cujo cdigo
est mostrado a seguir possui apenas a definio do contedo, o menu, rodap e cabealho exibidos
exibido
sero os que foram definidos no template.
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:ui=
template=
template="./WEB-INF/templates/template.xhtml"
INF/templates/template.xhtml"
xmlns ="http://www.w3.org/1999/xhtml">
=
<ui:define name="conteudo">
name=
Pgina inicial
</ui:define>
</ui:composition>
4. Ao executar a pgina index do projeto, deve ser exibida uma pgina semelhante a imagem a
seguir.
importante perceber que a pgina exibida possui trechos definidos no template e na pgina
160
Rosiclia Frasson
index.
5. O posicionamento de cada trecho deve ser feito utilizando CSS.
#topo {
position: relative;
background
background-color:
#036fab;
padding: 5px;
margin: 0px 0px 10px 0px;
}
#rodape {
position: relative;
background
background-color:
#c2dfef;
padding: 5px;
margin: 10px 0px 0px 0px;
}
#menuLateral {
float: left;
background
background-color:
#ece3a5;
padding: 5px;
width: 150px;
}
#conteudo {
float: right;
background
background-color:
#ccffcc;
padding: 5px;
width: 450px;
}
161
Rosiclia Frasson
6. Para simplificar a construo das pginas, tambm possvel que as mesmas sejam divididas. No
exemplo mostrado o menu poderia ser criado em uma pgina distinta e incluso no template.
<ui:composition
:composition xmlns:ui="http://java.sun.com/jsf/facelets"
"http://java.sun.com/jsf/facelets"
xmlns ="http://www.w3.org/1999/xhtml"
<h:form>
<ul>
<li
li>Cadastro</li>
<li
li>Relatrio</li>
</ul>
</h:form>
</ui:composition
:composition>
7. Na pgina onde o menu deve ser incluso, neste caso, o template, deve ser adicionado o comando a
seguir.
<div
div id="menuLateral">
<ui:include src="menu.xhtml"/>
</
</div>
162
Captulo 13 - Filtros
Rosiclia Frasson
Filtros
Lanados na especificao Servlet 2.3, os filtros so classes que permitem que cdigos sejam
executados antes da requisio e depois que a resposta gerada, ou seja, eles permitem que os
objetos HTTPServletRequest e HTTPServletResponse sejam acessados antes dos servlets. Os filtros
interceptam requisies e respostas, sendo totalmente transparentes para os clientes e para os servlets.
A nvel de implementao um filtro uma classe Java que implementa a interface
javax.servlet.Filter.
public class JPAFilter implements Filter{
A interface Filter exige a implementao de trs mtodos: init, destroy e doFilter.

@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
}
@Override
public void destroy() {
}
init: mtodo executado quando o filtro carregado pelo container. Como parmetro passado
um FilterConfig. Um objeto FilterConfig representa a configurao para o filtro. Desse objeto
possvel obter o nome do filtro, os parmetros de inicializao e o ServletContext.
destroy: mtodo executado quando o filtro descarregado no container. Este mtodo avisa o
filtro que ele est sendo desativado, para que o mesmo possa liberar eventuais recursos da
memria.
doFilter: mtodo que executa a filtragem. O mtodo doFilter recebe trs parmetros:
ServletRequest, ServletResponse e FilterChain. Os objetos ServletRequest e ServletResponse
so os mesmos que sero passados a um servlet.
No interessante que um filtro processe toda a requisio. A grande utilidade dos filtros a
interceptao de vrios requests semelhantes, sendo assim, os filtros so interessantes para
encapsular tarefas recorrentes. Cada filtro encapsula apenas uma responsabilidade. Porm, eles podem
ser concatenados ou encadeados para permitir que uma requisio passe por mais de um filtro.
O objeto FilterChain utilizado pelo Filter para executar o prximo filtro, ou, se este for o ltimo,
indicar ao container que este deve seguir seu processamento. Sendo assim, os comandos colocados
antes da chamada chain.doFilter so executados na ida e os comandos colocados aps so executados
na volta.
chain.doFilter(request, response);
importante ressaltar que em todas as requisies feitas ao container verificado se existe um
163
Rosiclia Frasson
filtro associado ao recurso solicitado. Em caso afirmativo, a requisio redirecionada para o filtro. Este
por sua vez executa os seus comandos e aps permite que o processamento normal do request
prossiga. Os filtros tambm podem ser utilizados para tomada de decises, ou seja, eles podem decidir
se uma requisio executada ou se interrompem o caminho normal da requisio.
O uso de filtros permite que informaes sejam armazenadas na requisio. Para efetuar este
armazenamento utilizado o mtodo setAttribute no request. O mtodo setAttribute necessita de uma
identificao para o objeto que est sendo armazenado na requisio e o objeto que deve ser guardado.
Para acessar este objeto utilizado o mtodo getAttribute.
request.setAttribute("EntityManager", manager);
Para funcionar os filtros devem ser registrados. Esse registro pode ser feito no web.xml ou
atravs de anotao. A seguir est sendo demonstrado como registrar um filtro atravs de anotao. O
atributo servletNames define os servlets que sero filtrados pelo filtro.
@WebFilter(servletNames = "Faces Servlet")
PASSO-A-PASSO
Conexo com banco de dados com Filter
A inicializao e finalizao de uma unidade de persistncia deve ser efetuada apenas uma vez
durante a execuo da aplicao. Como j mencionado, os filtros possuem esta caracterstica. Eles
so carregados quando a aplicao executada e destrudos quando a aplicao finalizada. Sendo
assim, ser demonstrado a utilizao de um filtro para a criao da fbrica de conexo e controle das
transaes com a base de dados.
1. Aps criar um novo projeto, o primeiro passo a criao da unidade de persistncia. No Netbeans
possvel a criao de uma unidade de persistncia de forma automtica como mostrado no captulo
1. O cdigo da unidade de persistncia deve ficar similar ao cdigo abaixo.
<persistence version="2.0" xmlns="http://java.sun.com/xml/ns/persistence"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/persistence
http://java.sun.com/xml/ns/persistence/persistence_2_0.xsd">
<persistence-unit name="cap13ConexaoBancoFiltroPU" transactiontype="RESOURCE_LOCAL">
<provider>org.hibernate.ejb.HibernatePersistence</provider>
<properties>
<property name="hibernate.hbm2ddl.auto"
value="update"/>
<property name ="hibernate.dialect"
value ="org.hibernate.dialect.MySQLDialect"/>
<property name ="javax.persistence.jdbc.driver"
value ="com.mysql.jdbc.Driver"/>
<property name ="javax.persistence.jdbc.user"
164
Rosiclia Frasson
value ="root"/>
<property name ="javax.persistence.jdbc.password"
value =""/>
<property name ="javax.persistence.jdbc.url"
value
="jdbc:mysql://localhost:3306/cap13ConexaoBancoFiltro"/>
</properties>
</persistence-unit>
</persistence>
2. Com o persistence.xml criado, necessrio criar uma classe, neste exemplo, com o nome de
JPAFilter dentro do pacote filter. Essa classe deve implementar a interface javax.servlet.Filter.
import javax.servlet.Filter;
public class JPAFilter implements Filter{
}
3. A interface Filter exige que sejam implementados os mtodos init, destroy e doFilter.
@Override
}
@Override
public
void
doFilter(ServletRequest
request,
ServletResponse
response,
FilterChain
chain) throws IOException, ServletException {

}
@Override
}
4. A classe EntityManagerFactory descobre quem cria as conexes e necessrio uma varivel para
armazenar uma instncia da mesma.
private EntityManagerFactory factory;
5.
Para
obter
uma
instncia
de
EntityManagerFactory
utilizado
o
mtodo
createEntityManagerFactory indicando qual a persistence-unit que foi definida no persistence.xml,
no nosso caso cap13ConexaoBancoFiltro. Esse procedimento feito no mtodo init.
this.factory = Persistence.createEntityManagerFactory("cap13ConexaoBancoFiltroPU");
}
6. O mtodo destroy responsvel por destruir a instncia de EntityManagerFactory.

165
Rosiclia Frasson
this.factory.close();
}
7. O mtodo doFilter abre a conexo, armazena o gerenciador de entidades no request, inicializa os

recursos da transao com o mtodo begin. O mtodo commit confirma a transao caso no ocorra
algum erro ou rollback caso algum erro ocorrer.
EntityManager manager = this.factory.createEntityManager();
request.setAttribute("EntityManager", manager);
manager.getTransaction().begin();
try {
manager.getTransaction().commit();
manager.getTransaction().rollback();
} finally {
manager.close();
}
}
8. Para funcionar, o filtro tem que ser registrado. A anotao exibida a seguir indica que o filtro ser
aplicado no Faces Servlet, que o servlet do JSF.
@WebFilter(servletNames = "Faces Servlet")
9. Com o intuito de testar o filtro, ser construda a aplicao completa. Sendo assim, o prximo
passo criar os beans da aplicao. Neste caso, ser simulado um software para utilizao de um rh
para controle dos funcionrios. Os beans j esto com as anotaes da JPA.
package br.com.rosicleiafrasson.cap13conexaobancofiltro.model;
import javax.persistence.Lob;
@Entity
public class Cargo {
@Id @GeneratedValue
private int codigo;
166
Rosiclia Frasson
@Lob
//Gets e sets
}
@Entity
public class Endereco {
@Id @GeneratedValue
private int codigo;
private String endereco;
private String bairro;
private String cidade;
private String estado;
private int numero;
private String complemento;
//Gets e sets
}
import javax.persistence.CascadeType;
import javax.persistence.Column;
@Entity
167
Rosiclia Frasson
@Id
@GeneratedValue
private int codigo;
private String cpf;
@ManyToOne
private Cargo cargo;
@OneToOne(cascade = CascadeType.ALL)
}
//Gets e sets
}
10. A camada de persistncia ser construda utilizando um DAO genrico. Dessa forma deve conter
uma interface com todos os mtodos comuns e a implementao desta. importante perceber que
diferente do CRUD apresentado no captulo 2, com a utilizao de filtros a classe DAOJPA no possui
os comandos referentes ao controle de transaes. Este controle est implementado no JPAFilter.
Tambm no necessria a criao de uma classe para servir como fbrica de EntityManager, esta
fbrica tambm est embutida no JPAFilter.
package br.com.rosicleiafrasson.cap13conexaobancofiltro.model.persistencia.dao;
import java.io.Serializable;
public interface DAO<T, I extends Serializable> {
void save(T entity);
void remove(Class<T> classe, I pk);
T getById(Class<T> classe, I pk);
List<T> getAll(Class<T> classe);

}
168
Rosiclia Frasson
package br.com.rosicleiafrasson.cap13conexaobancofiltro.model.persistencia;
import br.com.rosicleiafrasson.cap13conexaobancofiltro.model.persistencia.dao.DAO;
import java.io.Serializable;
import javax.persistence.NoResultException;
import javax.persistence.Query;
public class DAOJPA<T, I extends Serializable> implements DAO<T, I> {
private EntityManager manager;
public DAOJPA(EntityManager manager) {

this.manager = manager;
}
@Override
public void save(T entity) {
this.manager.merge(entity);
}
@Override
public void remove(Class<T> classe, I pk) {
T entity = this.getById(classe, pk);
this.manager.remove(entity);
}
@Override
public T getById(Class<T> classe, I pk) {
try {
return this.manager.find(classe, pk);
} catch (NoResultException e) {
return null;
}
}
@Override
public List<T> getAll(Class<T> classe) {
Query q = this.manager.createQuery("select x from "
+ classe.getSimpleName() + " x");
169
Rosiclia Frasson
return q.getResultList();
}
}
11. Para que as entidades possam utilizar o DAO genrico, necessrio criar a interface e sua
implementao para cada uma delas.
import br.com.rosicleiafrasson.cap13conexaobancofiltro.model.Cargo;
public interface CargoDAO extends DAO<Cargo, Integer> {

}
import br.com.rosicleiafrasson.cap13conexaobancofiltro.model.persistencia.dao.CargoDAO;
public class CargoDAOJPA extends DAOJPA<Cargo, Integer> implements CargoDAO {
public CargoDAOJPA(EntityManager manager) {

super(manager);
}
}
import br.com.rosicleiafrasson.cap13conexaobancofiltro.model.Endereco;
public interface EnderecoDAO extends DAO<Endereco, Integer> {

}
import br.com.rosicleiafrasson.cap13conexaobancofiltro.model.Endereco;
import br.com.rosicleiafrasson.cap13conexaobancofiltro.model.persistencia.dao.EnderecoDAO;
public class EnderecoDAOJPA extends DAOJPA<Endereco, Integer> implements EnderecoDAO {
170
Rosiclia Frasson
public EnderecoDAOJPA(EntityManager manager) {

super(manager);
}
}
import br.com.rosicleiafrasson.cap13conexaobancofiltro.model.Funcionario;
public interface FuncionarioDAO extends DAO<Funcionario, Integer> {

}
import
br.com.rosicleiafrasson.cap13conexaobancofiltro.model.persistencia.dao.FuncionarioDAO;
public class FuncionarioDAOJPA extends DAOJPA<Funcionario, Integer> implements

FuncionarioDAO {
public FuncionarioDAOJPA(EntityManager manager) {

super(manager);
}
}
12. Aps a construo da camada de persistncia, necessria a construo dos managed beans
para interagir com as telas da aplicao. Segue o cdigo da classe CargoBean.
package br.com.rosicleiafrasson.cap13conexaobancofiltro.controller;
import br.com.rosicleiafrasson.cap13conexaobancofiltro.model.persistencia.CargoDAOJPA;
import br.com.rosicleiafrasson.cap13conexaobancofiltro.model.persistencia.dao.CargoDAO;
import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;
171
Rosiclia Frasson
@ManagedBean
public class CargoBean {

private List<Cargo> listaCargos;
public CargoBean() {
cargo = new Cargo();
}
public String insere() {

EntityManager manager = this.getManager();
CargoDAO dao = new CargoDAOJPA(manager);
dao.save(cargo);
this.cargo = new Cargo();
this.listaCargos = null;
return "/paginas/lista-cargos.xhtml?faces-redirect=true";
}
public String preparaAlteracao() {

this.cargo = dao.getById(Cargo.class, cargo.getCodigo());
return "/paginas/cargo.xhtml";
}
public void remove() {

dao.remove(Cargo.class, cargo.getCodigo());
this.listaCargos = null;
}
private EntityManager getManager() {

FacesContext fc = FacesContext.getCurrentInstance();
ExternalContext ec = fc.getExternalContext();
HttpServletRequest request = (HttpServletRequest) ec.getRequest();
return (EntityManager) request.getAttribute("EntityManager");
}
public Cargo getCargo() {

return cargo;
172
Rosiclia Frasson
public void setCargo(Cargo cargo) {

this.cargo = cargo;
}
public List<Cargo> getListaCargos() {

if (this.listaCargos == null) {
this.listaCargos = dao.getAll(Cargo.class);
}
return listaCargos;
}
}
13. Na classe FuncionarioBean exibida a seguir, importante perceber que efetuada uma busca na
base de dados para que o cargo escolhido seja atribudo ao funcionrio. Uma alternativa a essa busca
seria a criao de um conversor da classe Cargo.
package br.com.rosicleiafrasson.cap13conexaobancofiltro.controller;
import br.com.rosicleiafrasson.cap13conexaobancofiltro.model.persistencia.CargoDAOJPA;
import br.com.rosicleiafrasson.cap13conexaobancofiltro.model.persistencia.FuncionarioDAOJPA;
import br.com.rosicleiafrasson.cap13conexaobancmodel.persistencia.dao.CargoDAO;
import br.com.rosicleiafrasson.cap13conexaobancofiltro.model.persistencia.dao.FuncionarioDAO;
@ManagedBean
public class FuncionarioBean {
private Funcionario funcionario;

private List<Funcionario> listaFuncionarios;
private int cargoId;
public FuncionarioBean() {
173
Rosiclia Frasson
funcionario = new Funcionario();

}
public String insere() {

CargoDAO cargoDao = new CargoDAOJPA(manager);
FuncionarioDAO dao = new FuncionarioDAOJPA(manager);
if (this.cargoId != 0) {
Cargo cargo = cargoDao.getById(Cargo.class, cargoId);
this.funcionario.setCargo(cargo);
}
dao.save(funcionario);
funcionario = new Funcionario();
this.listaFuncionarios = null;
return "/paginas/lista-funcionarios.xhtml?faces-redirect=true";
}
public String preparaAlteracao() {

this.funcionario = dao.getById(Funcionario.class, funcionario.getCodigo());
return "/paginas/funcionario.xhtml";
}
public void remove() {

dao.remove(Funcionario.class, funcionario.getCodigo());
}

}
public Funcionario getFuncionario() {

return funcionario;
}
174
Rosiclia Frasson
public void setFuncionario(Funcionario funcionario) {

this.funcionario = funcionario;
}
public int getCargoId() {

return cargoId;
}
public void setCargoId(int cargoId) {

this.cargoId = cargoId;
}
public List<Funcionario> getListaFuncionarios() {

if (this.listaFuncionarios == null) {
this.listaFuncionarios = dao.getAll(Funcionario.class);
}
return listaFuncionarios;
}
}
14. Dentro da pasta Pginas Web necessrio criar a seguinte estrutura de pastas.
15. A camada de visualizao do aplicativo deve ser iniciada com a criao do arquivo template. A
estrutura das pginas da aplicao deve ser similar a imagem seguinte.
175
Rosiclia Frasson
Sendo assim, o template deve possuir os blocos estticos cabealho, menu lateral e rodap e o bloco
dinmico contedo. Por questes de organizao e para facilitar uma posterior manuteno o menu
lateral ser codificado em uma pgina distinta e incluso no template. A seguir constam os cdigos do
template, menu e da pgina index.
encoding='UTF
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD
//W3C//DTD XHTML 1.0 Transitional//EN"
"http://xmlns.jcp.org/jsf/html"
"http://xmlns.jcp.org/jsf/facelets">
<h:head>
<title>Gesto
Gesto de Recursos Humanos</title>
Humanos
<h:outputStylesheet library="css"
library=
name="style.css"/>
</h:head>
<h:body>
<h1>Gesto
Gesto de Recursos Humanos</h1>
Humanos
<p>Verso 1.0</p>
</div>
<div id="pagina">
<div id="conteudo">
<ui:insert name="conteudo"
"conteudo">
</ui:insert>
</div>
<div id="menuLateral"
"menuLateral">
<ui:include src="../menu.xhtml"
"../menu.xhtml">
176
Rosiclia Frasson
</ui:include>
</div>
</div>
<div style="clear:both"> </div>
<div id="rodape">
<p>©2014 All Rights Reserved • Rosiclia Frasson</p>
</div>
</h:body>
</html>
<ui:composition xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
Menu
</ui:composition>
template="./WEB-INF/templates/template.xhtml"
xmlns ="http://www.w3.org/1999/xhtml">
Pgina inicial
</ui:define>
</ui:composition>
16. Executando o projeto deve ser exibida uma pgina similar a imagem a seguir.
177
Rosiclia Frasson
17. Para melhorar o aspecto da pgina sero inclusas algumas regras no arquivo style.css.
body{
margin: 0;
padding: 0;
background: #F6F6F6;
font-size: 14px;
text-align: justify;
}
body input, textarea, select, option{

color: #83826A;
font-size: 12px;
}
body input{
width: 200px;
}
h1, h2, h3{

color: #666666;
}
178
Rosiclia Frasson
h1 {
letter-spacing: -2px;
font-size: 3em;
}
p,ul{
line-height: 200%;
}
a{
color: #34BA01;
}
a:hover{
color: #34BA01;
}
#cabecalho{
width: 920px;
height: 100px;
margin: 0 auto;
}
#cabecalho h1, p{
margin: 0;
padding: 0;
}
#cabecalho h1{
font-size: 52px;
color: #20A001;
}
#cabecalho p{
margin-top: -15px;
padding: 0px 0px 0px 4px;
font-size: 20px;
color: #86EA66;
text-transform: lowercase;
}
179
Rosiclia Frasson
#pagina{
width: 920px;
margin: 0 auto;
border-radius: 10px;
box-shadow: 0px 0px 10px #cccccc;
position: relative;
}
#conteudo{
width: 660px;
margin: 0;
color: #666666;
float: right;
}
#menuLateral{
background: #86EA66;
width: 200px;
color: #FFFFFF;
border-radius: 10px 0 0 10px;
border: 10px solid #ffffff;
}
#rodape{
width: 800px;
margin: 0 auto;
height: 50px;
text-align: center;
font-size: 11px;
color: #86EA66;
}
18. Ao executar a aplicao possvel perceber que o aspecto da pgina melhorou

consideravelmente.
180
Rosiclia Frasson
19. O prximo passo implementar o menu. Seguem os comandos do arquivo menu.xhtml e as

regras de estilo aplicadas ao menu.
<h:form>
<ul>
<li>
<h2>Cadastros</h2>
<ul>
<li><h:commandLink value="Cargo"
action="/faces/paginas/cargo.xhtml"/></li>
<li><h:commandLink value="Funcionrio"
action="/faces/paginas/funcionario.xhtml"/></li>
</ul>
</li>
<li>
<h2>Listagens</h2>
<ul>
<li><h:commandLink value="Cargo"
action="/faces/paginas/lista-cargos.xhtml"/></li>
<li><h:commandLink value="Funcionrio"
action="/faces/paginas/lista-funcionarios.xhtml"/></li>
</ul>
</li>
<li>
181
Rosiclia Frasson
<h2>Relatrios</h2>
<ul>
<li><h:commandLink value="Cargo" /></li>
<li><h:commandLink value="Funcionrio" /></li>
</ul>
</li>
</ul>
</h:form>
</ui:composition>
#menuLateral ul{
margin: 10px;
padding: 0;
list-style: none;
}
#menuLateral li{
margin: 0;
padding: 0;
}
#menuLateral li ul{
padding: 0 15px;
}
#menuLateral li ul li{
margin: 0;
padding: 0;
line-height: 35px;
border-bottom: 1px #A3F389 dashed;
}
#menuLateral h2{
width: 180px;
height: 32px;
padding-left: 10px;
background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0,
182
Rosiclia Frasson
#1D9B01),color-stop(1, #35BA01));
background-image: -o-linear-gradient(bottom, #1D9B01 0%, #35BA01 100%);
background-image: -moz-linear-gradient(bottom, #1D9B01 0%, #35BA01 100%);
background-image: -webkit-linear-gradient(bottom, #1D9B01 0%, #35BA01 100%);
background-image: -ms-linear-gradient(bottom, #1D9B01 0%, #35BA01 100%);
background-image: linear-gradient(to bottom, #1D9B01 0%, #35BA01 100%);
font-size: 18px;
color: #FFFFFF;
}
#menuLateral a{
color: #FFFFFF;
font-weight: bold;
}
#menuLateral a:hover{
}
20. Ao executar a aplicao, possvel observar o menu criado.
21. Criado o menu, necessrio construir as pginas correspondentes a manuteno dos cargos e
183
Rosiclia Frasson
funcionrios do aplicativo. Inicialmente ser construdo a pgina referente ao cadastro de cargo.

Segue o cdigo correspondente.
template="../WEB-INF/templates/template.xhtml"
<h:messages errorStyle="color:red" layout="table"/>
<h:inputHidden value="#{cargoBean.cargo.codigo}"/>
<fieldset>
<legend>Cadastro de Cargo</legend>

<h:inputText id="nome"
value="#{cargoBean.cargo.nome}" size="63"
required="true"
requiredMessage=" necessrio informar o nome do cargo."/>
<h:message for="nome" errorStyle="color:red; display:block"/>
<h:outputLabel value="Descrio: " for="descricao"/>

<h:inputTextarea id="descricao"
value="#{cargoBean.cargo.descricao}"
cols="50" rows="10"/>
<h:outputLabel/>
</h:panelGrid>
</fieldset>
<br />
<h:panelGroup>
<h:commandButton value="Salvar"
action="#{cargoBean.insere}" accesskey="S"
styleClass="botao"/>
184
Rosiclia Frasson
<h:commandButton value="Cancelar" type="reset" styleClass="botao"/>

</h:panelGroup>
</h:form>
</ui:define>
</ui:composition>
.
22. Ao executar a aplicao e acessar o menu cadastro cargo deve ser exibido na rea reservada ao
contedo um formulrio similar ao apresentado na figura a seguir.
23. Com o intuito de melhorar a aparncia deste sero inclusas algumas regras CSS.
.botao{
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #108c00),
color-stop(1, #37bf01) );
background:-moz-linear-gradient( center top, #108c00 5%, #37bf01 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#108c00',
endColorstr='#37bf01');
background-color:#108c00;
-webkit-border-top-left-radius:6px;
-moz-border-radius-topleft:6px;
border-top-left-radius:6px;
-webkit-border-top-right-radius:6px;
-moz-border-radius-topright:6px;
border-top-right-radius:6px;
-webkit-border-bottom-right-radius:6px;
-moz-border-radius-bottomright:6px;
border-bottom-right-radius:6px;
185
Rosiclia Frasson
-webkit-border-bottom-left-radius:6px;
-moz-border-radius-bottomleft:6px;
border-bottom-left-radius:6px;
text-indent:0;
border:1px solid #dcdcdc;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:13px;
font-weight:normal;
font-style:normal;
height:30px;
line-height:50px;
width:80px;
text-decoration:none;
text-align:center;
}
.botao:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #37bf01),
color-stop(1, #108c00) );
background:-moz-linear-gradient( center top, #37bf01 5%, #108c00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#37bf01',
endColorstr='#108c00');
background-color:#37bf01;
}.botao:active {
position:relative;
top:1px;
}
#conteudo{
padding: 20px;
}
fieldset{
border-radius: 5px;
}
24. Ao executar a aplicao possvel perceber que o formulrio ficou com aspecto melhor.
186
Rosiclia Frasson
25. Neste momento, possvel testar se os dados inseridos no formulrio esto sendo persistidos na
base de dados.
26. Alm da insero, importante que os dados cadastrados possam ser visualizados no aplicativo.
Tambm so necessrias as opes de edio e remoo de dados cadastrados. Neste exemplo, as
funcionalidades citadas esto implementadas na pgina lista-cargos.
No cdigo a seguir merece destaque a tag f:setPropertyActionListener que passa a classe CargoBean
o cargo selecionado.
187
Rosiclia Frasson
<h:dataTable value="#{cargoBean.listaCargos}"
var="cargo"
styleClass="tabela"
headerClass="cabecalho"
cellpadding ="10">
<h:outputText value="Cargos" />
</f:facet>
<h:column>
<h:outputText value="Cdigo" />
</f:facet>
<h:outputText value="#{cargo.codigo}"/>
</h:column>
<h:column>
<h:outputText value="Cargo" />
</f:facet>
<h:outputText value="#{cargo.nome}"/>
</h:column>
<h:column>
<h:commandLink action="/faces/paginas/cargo.xhtml">
<h:graphicImage library="imagens" name="add.png" />
</h:commandLink>
</f:facet>
<h:commandLink
action="#{cargoBean.preparaAlteracao}">
<f:setPropertyActionListener value="#{cargo}"
target="#{cargoBean.cargo}"/>
188
Rosiclia Frasson
<h:graphicImage library="imagens" name="edit.png"/>

</h:commandLink>
<h:commandLink
action="#{cargoBean.remove}">
<h:graphicImage library="imagens" name="delete.png"/>

</h:commandLink>
</h:column>
</h:dataTable>
</h:form>
</ui:define>
</ui:composition>
27. Para melhorar o aspecto da tabela devem ser inclusas algumas imagens - add, delete e edit - e
regras CSS para formatao da tabela.
.tabela{
margin:0px;padding:0px;
width:100%;
box-shadow: 5px 5px 2px #888888;
border:1px solid #3f7f00;
}
.tabela table{
border-collapse: collapse;
border-spacing: 0;
width:100%;
height:100%;
margin:0px;
padding:0px;
.tabela tr:nth-child(odd){ background-color:#d4ffaa; }

.tabela tr:nth-child(even)
{ background-color:#ffffff; }
.tabela td{
vertical-align:middle;
189
Rosiclia Frasson

border-width:0px 1px 1px 0px;
text-align:center;
padding:7px;
font-size:12px;
font-family:Arial;
font-weight:normal;
color:#000000;
}.tabela tr:last-child td{
}.tabela tr td:last-child{
}.tabela tr:last-child td:last-child{
}
.tabela .cabecalho{
background:-o-linear-gradient(bottom, #5fbf00 5%, #3f7f00 100%);
background:-webkit-
gradient( linear, left top, left bottom, color-stop(0.05, #5fbf00), color-stop(1, #3f7f00) );
background:-moz-linear-gradient( center top, #5fbf00 5%, #3f7f00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#5fbf00",
endColorstr="#3f7f00");
background: -o-linear-gradient(top,#5fbf00,3f7f00);
background-color:#5fbf00;
text-align:center;
font-size:14px;
font-family:Arial;
font-weight:bold;
color:#ffffff;
}
.tabela tr:first-child td:first-child{

}
.tabela tr:first-child td:last-child{
}
28. Ao executar a aplicao possvel verificar os cargos cadastrados e testar a edio e remoo
dos dados.
190
Rosiclia Frasson
29. As telas de cadastro e listagem tambm devem ser codificadas para o funcionrio.
<h:messages errorStyle="color:red" layout="table"/>
<h:inputHidden value="#{funcionarioBean.funcionario.codigo}"/>
<fieldset>
<legend>Cadastro de Funcionrio</legend>

<h:panelGroup>
<h:inputText id="nome"
value="#{funcionarioBean.funcionario.nome}"
required="true"
requiredMessage=" necessrio informar o nome do
funcionrio. "/>
<h:message for="nome" errorStyle="color:red"/>
</h:panelGroup>
191
Rosiclia Frasson
<h:panelGroup>
<h:inputText id="cpf"
value="#{funcionarioBean.funcionario.cpf}"
required="true"
requiredMessage=" necessrio informar o CPF."/>
<h:message for="cpf" errorStyle="color:red"/>
</h:panelGroup>
<h:outputLabel value="Data de Nascimento: " for="dtNascimento"/>

<h:panelGroup>
<h:inputText id="dtNascimento"
value="#{funcionarioBean.funcionario.dataNascimento}"
required="true"
requiredMessage=" necessrio informar a data de
nascimento."
converterMessage="Data no formato invlido. Utilize
dd/mm/aaaa">
</h:inputText>
<h:message for="dtNascimento" errorStyle="color:red"/>
</h:panelGroup>
<h:outputLabel value="Cargo: " for="cargo"/>

<h:selectOneMenu id="cargo"
value="#{funcionarioBean.cargoId}">
<f:selectItems value="#{cargoBean.listaCargos}" var="cargo"
itemLabel="#{cargo.nome}" itemValue="#{cargo.codigo}"/>
</h:selectOneMenu>

<h:inputText id="telefone"
value="#{funcionarioBean.funcionario.telefone}"/>
<h:outputLabel value="Email: " for="email"/>

<h:inputText id="email"
value="#{funcionarioBean.funcionario.email}"/>
</h:panelGrid>
<hr />
<h:outputText value="Endereo"/>
192
Rosiclia Frasson

<h:inputText id="endereco"
value="#{funcionarioBean.funcionario.endereco.endereco}"/>
<h:outputLabel value="Nmero: " for="numero"/>

<h:panelGroup>
<h:inputText id="numero"
value="#{funcionarioBean.funcionario.endereco.numero}"
validatorMessage="O nmero no pode ser negativo.">
<f:validateLongRange minimum="0"/>
</h:inputText>
<h:message for="numero"/>
</h:panelGroup>

<h:inputText id="complemento"
value="#{funcionarioBean.funcionario.endereco.complemento}"/>

<h:inputText id="bairro"
value="#{funcionarioBean.funcionario.endereco.bairro}"/>

<h:inputText id="estado"
value="#{funcionarioBean.funcionario.endereco.estado}"/>
<h:outputLabel value="Cidade: " for="cidade"/>
<h:inputText id="cidade"
value="#{funcionarioBean.funcionario.endereco.cidade}"/>
</h:panelGrid>
</fieldset>
<br />
<h:panelGroup>
<h:commandButton value="Salvar"
action="#{funcionarioBean.insere}"
styleClass="botao"/>
<h:commandButton value="Cancelar" type="reset" styleClass="botao"/>
193
Rosiclia Frasson
</h:panelGroup>
</h:form>
</ui:define>
</ui:composition>
<h:dataTable value="#{funcionarioBean.listaFuncionarios}"
var="funcionario"
styleClass="tabela"
headerClass="cabecalho">
<h:outputText value="Funcionrios"/>
</f:facet>
<h:column>
</f:facet>
<h:outputText value="#{funcionario.codigo}"/>
</h:column>
<h:column>
<h:outputText value="Nome" />
</f:facet>
<h:outputText value="#{funcionario.nome}"/>
</h:column>
<h:column>
<h:outputText value="Data de nascimento" />
</f:facet>
194
Rosiclia Frasson
<h:outputText value="#{funcionario.dataNascimento}">
</h:outputText>
</h:column>
<h:column>
</f:facet>
<h:outputText value="#{funcionario.cargo.nome}"/>
</h:column>
<h:column>
<h:commandLink action="/faces/paginas/funcionario.xhtml">
<h:graphicImage library="imagens" name="add.png" />
</h:commandLink>
</f:facet>
<h:commandLink
action="#{funcionarioBean.preparaAlteracao}">
<f:setPropertyActionListener value="#{funcionario}"
target="#{funcionarioBean.funcionario}"/>
<h:graphicImage library="imagens" name="edit.png"/>

</h:commandLink>
<h:commandLink
action="#{funcionarioBean.remove}">
<h:graphicImage library="imagens" name="delete.png"/>

</h:commandLink>
</h:column>
</h:dataTable>
</h:form>
</ui:define>
</ui:composition>
30. A aparncia das telas responsveis pela manuteno dos funcionrios devem ser similares as
imagens a seguir.
195
Rosiclia Frasson
PASSO-A-PASSO
Mecanismo de Autenticao
Em aplicaes comerciais necessrio que o aplicativo possua um mecanismo de
autenticao de usurios. Com JSF existem diversas maneiras de efetuar a autenticao. No
exemplo apresentado a seguir utilizado o Filter para este controle.
1. Algumas alteraes no projeto criado anteriormente devem ser efetuadas. Primeiramente
necessria a insero dos campos login e senha na classe Funcionario.
package br.com.rosicleiafrasson.cap13autenticacaofiltro.model;
import javax.persistence.CascadeType;
import javax.persistence.Column;
196
Rosiclia Frasson
@Entity
@Id
@GeneratedValue
private int codigo;
private String cpf;
@ManyToOne
@OneToOne(cascade = CascadeType.ALL)
@Column(unique = true)
private String login;
}
//Gets e sets
}
2. Os campos login e senha devem ser inclusos na pgina de cadastro de funcionrios.

<hr />
<h:panelGroup id="dadosLogin">
<h:panelGrid
columns="4">

<h:inputText id="login" value="#{funcionarioBean.funcionario.login}" />

<h:inputText id="senha" value="#{funcionarioBean.funcionario.senha}"/>
</h:panelGrid>
197
Rosiclia Frasson
</h:panelGroup>
3. Um filtro para o controle de acesso deve ser criado.

package br.com.rosicleiafrasson.cap13autenticacaofiltro.filter;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpSession;
public class ControleAcessoFilter implements Filter {
@Override
}
@Override
try {
HttpServletRequest httpReq = (HttpServletRequest) request;
HttpServletResponse httpRes = (HttpServletResponse) response;
HttpSession session = httpReq.getSession(true);
String url = httpReq.getRequestURL().toString();
if (session.getAttribute("usuarioLogado") == null && precisaAutenticar(url)) {
httpRes.sendRedirect(httpReq.getContextPath() + "/faces/login.xhtml");
} else {
}
e.printStackTrace();
}
}
@Override
198
Rosiclia Frasson
private boolean precisaAutenticar(String url) {

return !url.contains("login.xhtml") && !url.contains("javax.faces.resource");
}
}
4. Na existncia de mais de um filtro em uma aplicao, recomendado que o registro dos filtros seja
feito no web.xml ao invs de utilizar anotaes.
<filter>
<filter-name>ControleAcesso</filter-name>
<filter-class>br.com.rosicleiafrasson.rh.filter.ControleAcesso</filter-class>
</filter>
<filter-mapping>
<filter-name>ControleAcesso</filter-name>
</filter-mapping>
<filter>
<filter-name>JPAFilter</filter-name>
<filter-class>br.com.rosicleiafrasson.rh.filter.JPAFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>JPAFilter</filter-name>
</filter-mapping>
5. Para verificar se o usurio que est tentando se autenticar est cadastrado, necessrio efetuar
uma busca na base de dados. Deste modo, as classes FuncionarioDAO e FuncionarioDAOJPA
devem ser alteradas.
package br.com.rosicleiafrasson.cap13autenticacaofiltro.model.persistencia.dao;
import br.com.rosicleiafrasson.cap13autenticacaofiltro.model.Funcionario;
public interface FuncionarioDAO extends DAO<Funcionario, Integer> {
boolean login(String usuario, String senha);

}
package br.com.rosicleiafrasson.cap13autenticacaofiltro.model.persistencia;
import br.com.rosicleiafrasson.cap13autenticacaofiltro.model.Funcionario;
import br.com.rosicleiafrasson.cap13autenticacaofiltro.model.persistencia.dao.FuncionarioDAO;
199
Rosiclia Frasson
import javax.persistence.Query;
public class FuncionarioDAOJPA extends DAOJPA<Funcionario, Integer> implements FuncionarioDAO {
private EntityManager manager;
public FuncionarioDAOJPA(EntityManager manager) {

super(manager);
this.manager = manager;
}
@Override
public boolean login(String login, String senha) {
Query q = this.manager.createQuery("select f from Funcionario f where f.login = :login and
f.senha = :senha", Funcionario.class);
q.setParameter("senha", senha);
q.setParameter("login", login);
if (q.getResultList().size() > 0) {
return true;
}
return false;
}
}
6. O passo seguinte a construo de um managed bean para controlar a autenticao do usurio.

package br.com.rosicleiafrasson.cap13autenticacaofiltro.controller;
import br.com.rosicleiafrasson.cap13autenticacaofiltro.model.persistencia.FuncionarioDAOJPA;
import
br.com.rosicleiafrasson.cap13autenticacaofiltro.model.persistencia.dao.FuncionarioDAO;
import javax.faces.application.FacesMessage;
import javax.servlet.http.HttpSession;
@ManagedBean
@SessionScoped
200
Rosiclia Frasson
public class LoginBean {
private String usuario;

public String autentica() {

if (dao.login(usuario, senha)) {
HttpSession session = (HttpSession) ec.getSession(false);
session.setAttribute("usuarioLogado", true);
return "/paginas/cargo.xhtml";
} else {
FacesMessage fm = new FacesMessage("Usuario e/ou senha invlidos");
fm.setSeverity(FacesMessage.SEVERITY_ERROR);
fc.addMessage(null, fm);
return "/login";
}
}
public String registraSaida() {

HttpSession session = (HttpSession) ec.getSession(false);
session.removeAttribute("usuario");
return "/login";
}

}
public String getUsuario() {

return usuario;
}
public void setUsuario(String usuario) {
201
Rosiclia Frasson
this.usuario = usuario;
}
public String getSenha() {

return senha;
}
public void setSenha(String senha) {

this.senha = senha;
}
}
7. Para que o usurio possa efetuar a autenticao necessria a pgina de login, exibida a seguir.
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">
<h:head>
<title>Gesto de Recursos Humanos</title>
</h:head>
<h:body>
<div id="paginaLogin">
<h2>LOGIN </h2>
<h:form>
<h:inputText value="#{loginBean.usuario}" id="usuario"

pt:placeholder="Usurio" />
<br />
<h:inputSecret value="#{loginBean.senha}" id="senha"

pt:placeholder="Senha"/>
<br />
202
Rosiclia Frasson
<h:commandButton value="OK" action="#{loginBean.autentica}"

styleClass="botaoLogin"/>
</h:panelGrid>
</h:form>
<h:messages />
</div>
</h:body>
</html>
8. Com o intuito de melhorar a aparncia da pgina de login, devem ser aplicadas algumas regras
CSS.
#paginaLogin{
position:absolute;
left:50%;
top:50%;
margin-left:-105px;
margin-top:-100px;
width: 210px;
border-radius: 10px;
box-shadow: 0px 0px 10px #cccccc;
padding: 20px;
}
#paginaLogin .botaoLogin{
font:bold 18px Arial, Helvetica, sans-serif;
font-style:normal;
color:#ffffff;
background:#5e5e54;
border:0px solid #ffffff;
text-shadow:-1px -1px 1px #222222;
box-shadow:2px 2px 5px #000000;
-moz-box-shadow:2px 2px 5px #000000;
-webkit-box-shadow:2px 2px 5px #000000;
border-radius:0px 10px 10px 10px;
-moz-border-radius:0px 10px 10px 10px;
-webkit-border-radius:0px 10px 10px 10px;
width:77px;
height: 40px;
203
Rosiclia Frasson
padding:10px 20px;
cursor:pointer;
margin:0 auto;
}
#paginaLogin input{
height: 20px;
}
9. importante acrescentar no template um link para que o usurio possa fazer o logout. Dessa
forma, dentro do cabealho deve existir a div seo exibida a seguir.
<div id="secao">
<h:form>
<h:outputFormat value="Ol {0}">
<f:param value="#{loginBean.usuario}" />
</h:outputFormat>
<br />
<h:commandLink value="Logout" action="#{loginBean.registraSaida}" />
</h:form>
</div>
10. Para alinhar corretamente a div seo algumas regras CSS.

#cabecalho #secao{
margin-top: -20px;
float: right;
}
#cabecalho #secao a{
}
#cabecalho #secao a:hover{

text-decoration:
underline;
204
Captulo 14 - Bibliotecas de componentes
Rosiclia Frasson
Bibliotecas de componentes
O JSF possui em sua implementao padro todos os componentes bsicos da HTML. Em
muitos casos esses componentes so suficientes, embora a tecnologia permite que os desenvolvedores
criem seus prprios componentes que podem ser utilizados em diversos projetos. O uso de
componentes prontos melhora a qualidade visual da aplicao alm de aumentar a produtividade.
Devido a grande demanda por componentes mais robustos surgiram diversas bibliotecas prontas
para uso em projetos JSF. Entre as bibliotecas mais utilizadas pelos desenvolvedores podem ser
citadas: ADF Faces, IceFaces, Primefaces e RichFaces.
RichFaces
O RichFaces uma biblioteca de responsabilidade da JBoss que pertence ao grupo Red Hat.
Possui cdigo aberto, suporte a ajax e em torno de 60 componentes prontos para utilizao. O
desenvolvedor tambm pode criar seus prprios componentes. No showcase, os componentes so
exibidos juntamente com o cdigo necessrio para a sua utilizao.
Dentre os componentes mais importantes podem ser citados calendrio, auto complete, tabela
com paginao e o menu dropdow.
O esquema de cores apresentadas pelos componentes da biblioteca pode ser alterado com a
utilizao de temas. Atualmente no showcase do primefaces existem 7 temas definidos.
A documentao do framework bastante diversificada contendo alm do guia do
desenvolvedor, FAQ e screeencasts. Tambm contm um frum para esclarecimento de dvidas.
205
Rosiclia Frasson
Icefaces
O Icefaces uma biblioteca de componentes open source desenvolvida pela IceSoft

(http://www.icesoft.org/java/projects/ICEfaces/overview.jsf). Possui como finalidade a integrao entre
as tecnologias JSF e ajax de forma nativa. Sendo assim, todos os componentes do icefaces do
suporte a ajax.
Possui em torno de 40 componentes dentre os quais podem ser citados tabela com paginao,
calendrio, campos de texto com mscara, barra de progresso e gerao de grficos estatsticos. O
show case pode ser acessado em: http://icefaces-showcase.icesoft.org e possui a descrio do
componente, ilustrao, cdigo fonte para utilizao e um link para a documentao.
A documentao extensa contendo tutoriais, vdeos e documentao no formato wiki. Alm de
disponibilizar frum e chat para apoio.
Primefaces
O primefaces desenvolvido pela Prime Teknoloji (Turquia) e pode ser acessado em:
http://www.primefaces.org. um framework open source. Possui suporte nativo a ajax e em torno de
150 componentes em seu showcase, sendo considerada a biblioteca de componentes mais avanada
do mercado.
O framework prov uma verso melhorada de praticamente todos os componentes JSF entrada e sada de textos, menus de seleo e botes. Alm disso, o primefaces possui uma ampla
gama de recursos diferenciados como captcha, gerador de grficos estatsticos, galeria de imagens,
barra de progresso, entre outros. Um detalhe importante que no showcase todos os componentes so
apresentados juntamente com as linhas de cdigo necessrias para a sua utilizao. O primefaces
possui tambm cerca de 30 temas pr-definidos que alteram a aparncia dos componentes. O
framework ainda disponibiliza uma verso para dispositivos mveis.
206
Rosiclia Frasson
A documentao do primefaces de fcil acesso contendo a demonstrao de todos os

componentes. O framework conta ainda com frum e extensa comunidade com ativa participao e
colaborao.
Uma grande vantagem da utilizao do primefaces a sua facilidade de configurao. Para
utiliz-lo apenas um nico arquivo jar necessrio. No necessrio nenhum arquivo xml de
configurao e no h dependncias.
207
Captulo 15 - Primefaces
Rosiclia Frasson
Primefaces
Como descrito no captulo anterior, o primefaces atualmente uma boa escolha para uma
biblioteca de componentes. Embora dentre os frameworks de componentes utilizados, o primefaces seja
o mais recente, a sua utilizao cresceu drasticamente nos ltimos anos. A seguir est ilustrada uma
pesquisa feita por meio do Google Trends que indica a popularidade do framework.
Pelos motivos citados, o primefaces ser a biblioteca de componentes utilizada neste material.
Componentes
O rico conjunto de componentes presente na biblioteca do primefaces um dos principais
motivos de sua ascenso. Em virtude da quantidade de componentes nem todos sero citados neste
material. Porm, todo o conjunto pode ser consultado no showcase da biblioteca:
http://www.primefaces.org/showcase/ui/home.jsf.
Alguns componentes citados existem no JSF puro. No entanto, utilizando os componentes do
primefaces, podem ser aproveitados os conjuntos de skins que a biblioteca oferece. Para utilizar os
componentes do primefaces necessrio incluir o namespace:
xmlns:p="http://primefaces.org/ui">
A seguir, alguns componentes do primefaces:

Componente
Descrio
p:panel
Painel onde podem ser alocados outros componentes. O painel pode

conter um cabealho.
<p:panel header="Cadastro de Cargo">
</p:panel>
208
p:inputText
Rosiclia Frasson
Campo de entrada de dados com apenas uma linha.

<p:inputText id="nome" size="50"
value="#{cargoBean.cargo.nome}"
required="true"
cargo."/>
p:selectOneMenu
Componente conhecido como combo box.

<p:selectOneMenu id="cargo" value="#{funcionarioBean.cargoId}"
style="width:150px;">
<f:selectItem itemLabel="Selecione" itemValue="" />
</p:selectOneMenu>
p:calendar
Componente de entrada usado para selecionar uma data.

<p:calendar id="dtNascimento"
required="true"
nascimento."
dd/mm/aaaa"
pattern="dd/MM/yyyy">
</p:calendar>
209
p:inputMask
Rosiclia Frasson
Campo de entrada de texto que permite a adio de uma mscara.

<p:inputMask id="telefone"
value="#{funcionarioBean.funcionario.telefone}"
mask="(99) 9999-9999"/>
p:inputTextarea
Campo de entrada de texto composto por mais de uma linha.

<p:inputTextarea id="descricao"
cols="50" rows="10"/>
p:password
Campo de senha.
<p:password id="senha"
value="#{funcionarioBean.funcionario.senh
a}" feedback="true"/>
p:commandButton
Boto utilizado para envio de dados em um formulrio.

<p:commandButton
action="#{cargoBean.remove}" icon="ui-icon-close">
210
Rosiclia Frasson
</p:commandButton>
p:dataTable
Tabela. Neste componente podem ser includas informaes como

quantidade de linhas, paginao, ordenao de elementos, pesquisa,
entre outros.
<p:dataTable id="tabela" var="cargo" value="#{cargoBean.listaCargos}"
sortMode="multiple" rows="8" paginator="true">
Cargos
</f:facet>
<p:column sortBy="codigo" headerText="Cdigo">

<h:outputText value="#{cargo.codigo}" />
</p:column>
<p:column sortBy="nome" headerText="Nome">

<h:outputText value="#{cargo.nome}" />
</p:column>
<p:column>
<p:commandButton action="/faces/paginas/cargo.xhtml"
icon="ui-icon-plus">
</p:commandButton>
</f:facet>
<p:commandButton
action="#{cargoBean.preparaAlteracao}" icon="ui-iconpencil">
</p:commandButton>
<p:commandButton
211
Rosiclia Frasson
</p:commandButton>
</p:column>
</p:dataTable>
p:layout
Componente utilizado para a montagem de layouts. O componente

layoutUnit permite a diviso da pgina em blocos.
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" header="Gesto de

Recursos Humanos" >
<h:graphicImage library="imagens" name="logo.png" />
</p:layoutUnit>
<p:layoutUnit
Todos
os
position="south"
direitos
reservados
size="35"
header="©2014
•
Rosiclia
Frasson" style="text-align: center">
</p:layoutUnit>
<p:layoutUnit
position="west"
size="200"
resizable="true"
closable="true" collapsible="true">
<ui:include src="../menu.xhtml"/>
</p:layoutUnit>
<p:layoutUnit position="center">
<div id="conteudo">
<ui:insert name="conteudo">
</ui:insert>
</div>
</p:layoutUnit>
212
Rosiclia Frasson
</p:layout>
Icons
O jquery possui uma srie de cones que podem ser utilizados com o primefaces. Esses cones
podem ser obtidos em: http://jqueryui.com/themeroller/.
interessante optar por estes cones j que a aparncia dos mesmos alterada conforme o
tema da pgina.
Skins
O primefaces possui integrao com o framework ThemeRoller do JQuery. Atualmente existem
24 temas disponveis para serem utilizados nas aplicaes.
213
Rosiclia Frasson
Alm dos temas existentes na pgina do primefaces, possvel criar novos temas na pgina:
http://jqueryui.com/themeroller/.
PASSO-A-PASSO
Configurao
1. Para utilizar o primefaces necessrio efetuar o download da biblioteca no site do projeto:
http://primefaces.org/downloads. interessante fazer o download da verso 4.0.
2. O projeto criado da mesma forma que um projeto JSF puro. No entanto, na aba frameworks
necessrio apontar como framework de componentes o primefaces. Vale lembrar que durante a
criao do primeiro projeto utilizando o primefaces necessrio acionar o boto Mais e apontar para a
biblioteca que foi efetuado o download.
214
Rosiclia Frasson
3. importante perceber que o Netbeans cria automaticamente as pginas

welcomePrimefaces. O arquivo welcomePrimefaces possui algumas tags da biblioteca.
index
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<title>PrimeFaces</title>
</f:facet>
</h:head>
<h:body>
215
Rosiclia Frasson
<p:layoutUnit position="north" size="100" resizable="true" closable="true"

collapsible="true">
Header
</p:layoutUnit>
<p:layoutUnit position="south" size="100" closable="true" collapsible="true">

Footer
</p:layoutUnit>
<p:layoutUnit position="west" size="175" header="Left" collapsible="true">

<p:menu>
<p:submenu label="Resources">
<p:menuitem value="Demo" url="http://www.primefaces.org/showcaselabs/ui/home.jsf" />
<p:menuitem value="Documentation"
url="http://www.primefaces.org/documentation.html" />
<p:menuitem value="Forum" url="http://forum.primefaces.org/" />
<p:menuitem value="Themes" url="http://www.primefaces.org/themes.html"
/>
</p:submenu>
</p:menu>
</p:layoutUnit>
Welcome to PrimeFaces
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>
4. Ao executar o projeto a pgina renderizada deve ser similar a imagem seguinte.
216
Rosiclia Frasson
5. A pgina apresentada possui o tema padro do primefaces. Para alterar o mesmo necessrio
efetuar
o
download
do
jar
na
pgina
do
primefaces:
http://repository.primefaces.org/org/primefaces/themes/. Neste exemplo, ser utilizada a biblioteca dotluv.
6. O prximo passo adicionar a biblioteca ao projeto. No menu propriedade, biblioteca, adicionar
jar/pasta, selecione o jar correspondente a biblioteca.
217
Rosiclia Frasson
7. O web.xml tambm deve ser alterado para indicar que o tema deve ser alterado.
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>dot-luv</param-value>
</context-param>
8. Ao executar o projeto possvel perceber a alterao feita na pgina.
218
Rosiclia Frasson
PASSO-A-PASSO
Aplicativo RH
Como o intuito apenas demonstrar os componentes da biblioteca, este projeto ter as
mesmas funcionalidades do projeto apresentado no captulo anterior. Dessa forma, apenas a
codificao referente a visualizao deve ser alterada. As demais camadas do projeto continuam as
mesmas.
1. Como j mencionado, as alteraes sero efetuadas apenas na camada de visualizao. O
primeiro arquivo a ser modificado o template, que a base para outras pginas. importante
perceber que as divs foram substitudas pelo componente layoutUnit.
<h:head>
<title>Gesto de Recursos Humanos</title>
219
Rosiclia Frasson
</h:head>
<h:body>
<p:layoutUnit position="north" size="100" header="Gesto de Recursos Humanos" >
<h:graphicImage library="imagens" name="logo.png" />
</p:layoutUnit>
<p:layoutUnit position="south" size="35" header="©2014 Todos os direitos

reservados • Rosiclia Frasson" style="text-align: center">
</p:layoutUnit>
<p:layoutUnit position="west" size="200" resizable="true" closable="true"

collapsible="true">
<ui:include src="../menu.xhtml"/>
</p:layoutUnit>
<div id="conteudo">
<ui:insert name="conteudo">
</ui:insert>
</div>
</p:layoutUnit>
</p:layout>
</h:body>
</html>
2. O arquivo menu.xhtml deve ser alterado para a utilizao de um menu do primefaces.

<h:form>
220
Rosiclia Frasson
<p:panelMenu style="width: 193px;">

<p:submenu label="Administrao">
<p:menuitem value="Cargos" url="/faces/paginas/lista-cargos.xhtml"/>
<p:menuitem value="Funcionrios" url="/faces/paginas/listafuncionarios.xhtml"/>
</p:submenu>
<p:submenu label="Recrutamento e Seleo">

<p:menuitem value="Banco de Currculos" url="#" />
<p:menuitem value="Avaliaoes" url="#" />
<p:menuitem value="Processos Seletivos" url="#" />
</p:submenu>
<p:submenu label="Servios">
<p:menuitem value="Treinamento e Desenvolvimento" url="#" />
<p:menuitem value="Folha de Pagamento" url="#" />
<p:menuitem value="Ponto Eletrnico" url="#" />
<p:menuitem value="Gesto de Benefcios" url="#" />
</p:submenu>
<p:submenu label="Relatrios Gerenciais">

<p:menuitem value="Rotatividade" url="#" />
<p:menuitem value="Produtividade" url="#" />
<p:menuitem value="Custo" url="#" />
</p:submenu>
</p:panelMenu>
</h:form>
</ui:composition>
3. Para melhorar a aparncia das pginas, deve ser alterado o tema das pginas. Vale lembrar que a
biblioteca correspondente ao tema escolhido deve estar adicionada ao projeto. Neste exemplo, est
sendo utilizado o skin rocket.
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>rocket</param-value>
</context-param>
4. Executando o projeto a pgina apresentada deve ser similar a imagem a seguir.
221
Rosiclia Frasson
5. As pginas de cadastro e listagem de cargos e funcionrios tambm devem ser alteradas. Seguem
a codificao e a aparncia das pginas.
<p:messages id="messages" closable="true"/>
<h:inputHidden value="#{cargoBean.cargo.codigo}"/>
<p:panel header="Cadastro de Cargo">

value="#{cargoBean.cargo.nome}"
required="true"
requiredMessage="
necessrio
informar
222
Rosiclia Frasson
nome do cargo."/>
<h:outputLabel value="Descrio: " for="descricao"/>

<p:inputTextarea id="descricao"
cols="50" rows="10"/>
<h:outputLabel/>
<p:panel>
<p:commandButton ajax="false"
value="Salvar"
action="#{cargoBean.insere}"/>
<p:commandButton value="Cancelar"
type="reset"/>
</p:panel>
</h:panelGrid>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
xmlns:f="http://xmlns.jcp.org/jsf/core"
223
Rosiclia Frasson
<h:form acceptcharset="ISO-8859-1" id="form">
<p:dataTable id="tabela" var="cargo" value="#{cargoBean.listaCargos}"

sortMode="multiple" rows="8" paginator="true">
Cargos
</f:facet>
<p:column sortBy="codigo" headerText="Cdigo">

<h:outputText value="#{cargo.codigo}" />
</p:column>
<p:column sortBy="nome" headerText="Nome">

<h:outputText value="#{cargo.nome}" />
</p:column>
<p:column>
<p:commandButton action="/faces/paginas/cargo.xhtml" icon="ui-icon-plus">
</p:commandButton>
</f:facet>
<p:commandButton
action="#{cargoBean.preparaAlteracao}" icon="ui-icon-pencil">
</p:commandButton>
<p:commandButton
</p:commandButton>
</p:column>
</p:dataTable>
</h:form>
224
Rosiclia Frasson
</ui:define>
</ui:composition>
<p:panel header="Cadastro de Funcionrio">
<p:messages id="messages" closable="true"/>
<h:inputHidden value="#{funcionarioBean.funcionario.codigo}"/>
<p:fieldset legend="Dados Pessoais" toggleable="true">

<h:panelGrid columns="4" width="100%">

value="#{funcionarioBean.funcionario.nome}"
required="true"
funcionrio."/>

<p:inputMask id="cpf"
value="#{funcionarioBean.funcionario.cpf}"
225
Rosiclia Frasson
required="true"
requiredMessage=" necessrio informar o CPF."
mask="999.999.999-99"/>
<h:outputLabel value="Data de Nascimento: "

for="dtNascimento"/>
<p:calendar id="dtNascimento"
required="true"
nascimento."
dd/mm/aaaa"
pattern="dd/MM/yyyy">
</p:calendar>
<h:outputLabel value="Cargo: " for="cargo"/>

<p:selectOneMenu id="cargo" value="#{funcionarioBean.cargoId}"
style="width:150px;">
<f:selectItem itemLabel="Selecione" itemValue="" />
</p:selectOneMenu>

<p:inputMask id="telefone"
value="#{funcionarioBean.funcionario.telefone}"
mask="(99) 9999-9999"/>
<h:outputLabel value="Email: " for="email"/>

<p:inputText id="email" size="50"
value="#{funcionarioBean.funcionario.email}"/>
</h:panelGrid>
</p:fieldset>
<p:fieldset legend="Endereo" toggleable="true" >
226
Rosiclia Frasson
<h:panelGrid columns="4" width="100%">

<p:inputText id="endereco"
value="#{funcionarioBean.funcionario.endereco.endereco}" size="55"/>
<h:outputLabel value="Nmero: " for="numero"/>
<p:inputMask id="numero"
value="#{funcionarioBean.funcionario.endereco.numero}"
validatorMessage="O nmero no pode ser negativo."
mask="9?9999999">
<f:validateLongRange minimum="0"/>
</p:inputMask>

<p:inputText id="complemento"
value="#{funcionarioBean.funcionario.endereco.complemento}" size="55"/>

<p:inputText id="bairro"
value="#{funcionarioBean.funcionario.endereco.bairro}" size="55"/>

<p:inputText id="estado"
value="#{funcionarioBean.funcionario.endereco.estado}" size="55"/>
<h:outputLabel value="Cidade: " for="cidade"/>

<p:inputText id="cidade"
value="#{funcionarioBean.funcionario.endereco.cidade}" size="55"/>
</h:panelGrid>
</p:fieldset>
<p:fieldset legend="Dados de Acesso" toggleable="true">
<h:panelGrid
columns="4">

<p:inputText id="login"
value="#{funcionarioBean.funcionario.login}" />
227
Rosiclia Frasson

<p:password id="senha"
value="#{funcionarioBean.funcionario.senha}" feedback="true"/>
</h:panelGrid>
</p:fieldset>
<p:panel>
<p:commandButton ajax="false"
value="Salvar"
action="#{funcionarioBean.insere}"/>
<p:commandButton value="Cancelar"
type="reset"/>
</p:panel>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
228
Rosiclia Frasson
<p:dataTable value="#{funcionarioBean.listaFuncionarios}"
sortMode="multiple" rows="25" paginator="true"
var="funcionario">
<h:outputText value="Funcionrios"/>
</f:facet>
<p:column>
</f:facet>
<h:outputText value="#{funcionario.codigo}"/>
</p:column>
<p:column>
<h:outputText value="Nome" />
</f:facet>
<h:outputText value="#{funcionario.nome}"/>
</p:column>
<p:column>
<h:outputText value="Data de nascimento" />
</f:facet>
<h:outputText value="#{funcionario.dataNascimento}">
</h:outputText>
</p:column>
<p:column>
</f:facet>
<h:outputText value="#{funcionario.cargo.nome}"/>
</p:column>
<p:column>
229
Rosiclia Frasson
<p:commandButton action="/faces/paginas/funcionario.xhtml"
icon="ui-icon-plus">
</p:commandButton>
</f:facet>
<p:commandButton
action="#{funcionarioBean.preparaAlteracao}" icon="ui-iconpencil">
</p:commandButton>
<p:commandButton
action="#{funcionarioBean.remove}" icon="ui-icon-close">
</p:commandButton>
</p:column>
</p:dataTable>
</h:form>
</ui:define>
</ui:composition>
230
Bibliografia
Core Java Server Faces
Autor: Geary, David / Horstmann, Cay
Editora:Prentice Hall
Publicao:2010
Edio: 3
Beginning JSF 2 APIs and JBoss Seam

Autor: TONG, Kent Ka Iok
Editora: Apress
Publicao: 2009
Pro JSF e Ajax

Autor: JACOBI, Jonas/ FALLOWS, John R.
Editora: Cincia Moderna
Publicao: 2006
231
JSF 2.0 Cookbook

Autor: LEONARD, Anghel
Editora: Packt
Publicao: 2010
W3 Schools
http://www.w3schools.com/
232

Apostila 140214171846 Phpapp02

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Apostila 140214171846 Phpapp02

Hochgeladen von

Copyright:

Verfügbare Formate

Java para Web

Cricima, julho de 2014.

Java Persistence API e Ferramentas ORM

Com a aceitao dos frameworks ORM pela comunidade de programadores e prevendo o

public int getMatricula() {

public void setMatricula(int matricula) {

public String getNome() {

public void setNome(String nome) {

public double getSalario() {

public void setSalario(double salario) {

3. Na caixa de dilogo aberta, necessrio acessar a opo Criar.

4. Aps dar um nome para a biblioteca e clicar

5. Aps serr criada, necessrio que a biblioteca seja adicionada ao projeto.

public int getMatricula() {

public void setMatricula(int matricula) {

public String getNome() {

public void setNome(String nome) {

public double getSalario() {

public void setSalario(double salario) {

2. Na tela provedor e banco de dados necessrio

5. Aps a finalizao, criado um arquivo persistence.xml dentro da pasta META-INF

A propriedade hibernate.hbm2ddl.auto permite que tabelas sejam criadas ou tenham suas

informaes da aplicao sejam pesistidas na base de dados.

Com a instncia de EntityManagerFactory necessrio invocar o mtodo

importante mencionar que EntityManagerFactory uma fbrica para criar EntityManager.

public class JPAUtil {

private static final EntityManagerFactory emf = Persistence.

public static EntityManager getEntityManager() {

Com a existncia de uma fbrica de conexes centralizada, necessrio alterar a classe

Query q = em.createQuery("select f from Funcionario f", Funcionario.class);

List<Funcionario> funcionarios = q.getResultList();

for (Funcionario f : funcionarios) {

+ "\nSalrio: " + f.getSalario() + "\n");

Funcionario f = em.getReference(Funcionario.class, 1);

Os tipos java.util.Date e java.util.Calendar necessitam da anotao @Temporal para serem

public int getId() {

public String getNome() {

public void setNome(String nome) {

public Date getDataNascimento() {

public void setDataNascimento(Date dataNascimento) {

public Date getDataAdmissao() {

public void setDataAdmissao(Date dataAdmissao) {

public Date getDataCadastro() {

public void setDataCadastro(Date dataCadastro) {

A base de dados apresentada a seguir corresponde ao mapeamento citado.

Para efetuar o relacionamento utilizada a anotao @OneToOne. importante perceber que

Na JPA, para efetuar o mapeamento do relacionamento um para muitos, utilizada a anotao

A anotao @ManyToOne responsvel por efetuar este mapeamento na JPA. O cdigo a

Na JPA, existe a anotao @ManyToMany para indicar esse relacionamento. Um exemplo de

Na declarao de classe, necessrio colocar aps o nome da classe, o indicador genrico. O

ExemploGenerico<ExemploObjeto> eg = new ExemploGenerico<ExemploObjeto>();

public interface DAO <T, I> {

boolean remove(Class <T> classe, I pk);

T getById(Class<T> classe, I pk);

List<T> getAll(Class<T> classe);

public abstract class DAOJPA<T, I> implements DAO<T, I> {

private JPAUtil conexao;

public EntityManager getEntityManager() {

O DAOJPA responsvel pelas principais aes de movimentao dos dados de todas as

public interface PessoaDAO extends DAO <Pessoa, Integer>{

public class PessoaDAOJPA extends DAOJPA<Pessoa, Integer> implements PessoaDAO{

A utilizao de tipos genricos no exclui a necessidade de uma fbrica de entityManager, a

public class JPAUtil {