Introdução a JSF
Marco Antonio
Agenda
•
•
•
•
ManagedBean
Página JSP
Faces-config
DataTable
Lista de diretórios/arquivos
• Na figura ao lado
podemos conferir a lista
dos arquivos no final do
projeto.
• Use como referência.
ManagedBeans
• Para cada página JSP teremos um bean
(classe java com get/set) correspondentes.
• Essa classe é chamada ManagedBean e
deve ter um atributo para cada campo da
página.
– Ex: Uma página de login, com nome e senha,
deve ter um managedbean com os atributos
nome e senha correspondentes.
LoginBean
package net.sca.controle;
public class LoginBean {
private String nome;
private String senha;
public String getNome() {
return nome;
}
public void setNome(String nome) {
this.nome = nome;
}
public String getSenha() {
return senha;
}
public void setSenha(String senha) {
this.senha = senha;
}
LoginBean
public String validarUsuario() {
if (getSenha().equals("123456")) {
return "usuarioValido";
}
return "usuarioInvalido";
}
}
faces-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE faces-config PUBLIC
"-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"
"http://java.sun.com/dtd/web-facesconfig_1_1.dtd">
<faces-config>
<managed-bean>
<managed-bean-name>loginBean</managed-bean-name>
<managed-bean-class>
net.sca.controle.LoginBean
</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
faces-config.xml
<navigation-rule>
<from-view-id>/Login.jsp</from-view-id>
<navigation-case>
<from-outcome>usuarioValido</from-outcome>
<to-view-id>/PaginaPrincipal.jsp</to-view-id>
</navigation-case>
</navigation-rule>
<navigation-rule>
<from-view-id>/Login.jsp</from-view-id>
<navigation-case>
<from-outcome>usuarioInvalido</from-outcome>
<to-view-id>/UsuarioInvalido.jsp</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>
web.xml
• Arquivo que define o servlet do JSF.
• Deve estar dentro do WebContent/WEB-INF.
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>SistemaDeControleAereo</display-name>
<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>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.faces</url-pattern>
Métodos de comando
• Os managedbeans também têm os métodos
executados em cada página.
• Mais uma vez, imaginando o login, teremos um
método validarUsuario.
• Essa validação usa os valores dos atributos nome e
senha, que foram carregados automaticamente pelo
JSF.
• Cada uma das ações (usuarioValido e
usuarioInvalido) redireciona a aplicação para uma
página diferente.
Arquivo de mensagens
• Crie o arquivo no diretório informado
anteriormente.
mensagens.properties
titulo.pagina.login=Página de Login
atributo.id=Código
nome.fantasia=Nome Fantasia
razao.social=Razão Social
nome=Nome:
senha=Senha:
botao.login=Efetuar Login
usuario.invalido=Usuário Inválido
mensagem.boasvindas=Bem-Vindo ao SCA
Primeira página web
• Ctrl + “N” ou menu File
-> new...
Login.jsp
• Atençao: as páginas
ficam na pasta
WebContent.
• Essa é apenas uma
definição do plugin do
eclipse.
Login.jsp (1ª. Parte)
(1)
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
(2)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
(3)
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
(4)
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<html>
(5)
<link rel="stylesheet" href="css/Estilo.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Página de login</title>
Detalhamento
1. Encoding – padrão de caracteres utilizados
na página. É um padrão internacional.
2. Tipo de documento.
3. Biblioteca de tags do JSF
4. Biblioteca de tags HTML do JSF
5. Folha de estilo
Login.jsp
(1) <f:view>
(2) <f:loadBundle basename="resources.mensagens" var="msgs" />
<body>
(3) <h:form>
(4) <h:panelGrid columns="2">
(5) <f:facet name="header">
(6) <h:outputText value="#{msgs['titulo.pagina.login']}" />
</f:facet>
(7) <h:outputText value="#{msgs.nome}" />
(8) <h:inputText value="#{loginBean.nome}" />
(9) <h:outputText value="#{msgs.senha}" />
(10) <h:inputSecret value="#{loginBean.senha}" />
(11) <h:commandButton value="#{msgs['botao.login']}“ action="#{loginBean.validarUsuario}" />
(12) <h:commandButton type="reset" value="Limpar***" />
</h:panelGrid>
</h:form>
</body>
</f:view>
</html>
Detalhamento
1. View: Início da página JSF.
2. loadBundle: Arquivo de mensagens.
3. Form: Tag de abertura do formulário. Todos os
componentes devem ficar dentro dele.
4. panelGrid: Tabela com 2 colunas.
5. Facet: Cabeçalho (header) ou rodapé (footer) da
tabela.
6. outputText: texto puro, recuperado da respectiva
chave no arquivo de mensagens.
Cont...
7. outputText: recupera o texto associado com a chave
msgs.nome
8. inputText: associa essa caixa de texto com a propriedade nome
do loginBean
9. outputText:...
10. inputSecret: associa essa caixa de texto (senha) com a
respectiva propriedade senha no loginBean
11. commandButton: botão para acessar o sistema. Esse botão
executa o método validarUsuario do loginBean.
12. Botão de reset, com um texto explícito (sem recuperar do
arquivo de mensagens).
Menu.jsp
<a href="PaginaPrincipal.faces">Início</a>
|
<a href="ListaDeEmpresas.faces">Empresa Aérea</a>
|
<a href="">Funcionários</a>
|
<a href="">Aeronave</a>
|
<a href="">Vôo</a>
Detalhamento
•
•
Abre a página associada a
PaginaPrincipal.jsp ou
ListaDeEmpresas.jsp (visto depois no
arquivo faces-config.xml).
O JSF troca a extensão “jsp” por “faces” no
browser.
PaginaPrincipal.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<html>
<link rel="stylesheet" href="css/Estilo.css" type="text/css">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Página Principal</title>
</head>
<f:view>
<f:loadBundle basename="resources.mensagens" var="msgs" />
<h:form>
<jsp:include page="Menu.jsp" />
<h3><h:outputText value="#{msgs['mensagem.boasvindas']}" /></h3>
</h:form>
</f:view>
</html>
UsuarioInvalido.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<html>
<link rel="stylesheet" href="css/Estilo.css" type="text/css">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Erro</title>
</head>
<f:view>
<f:loadBundle basename="resources.mensagens" var="msgs" />
UsuarioInvalido.jsp
<h:form>
<h:panelGrid columns="1">
<h:outputText value="#{msgs['usuario.invalido']}" />
(1) <h:commandLink action=“paginaDeLogin">
(2) <h:outputText value="Voltar" />
</h:commandLink>
</h:panelGrid>
</h:form>
</f:view>
</html>
Detalhamento
1. commandLink: cria um “a href” para
“paginaDeLogin”, ou seja, abre de novo a
tela de login.
2. Texto do link.
EmpresaAereaBean
package net.sca.controle;
import javax.faces.model.*;
import net.sca.entidades.*;
import net.sca.persistencia.*;
public class EmpresaAereaBean {
private DAOEmpresaAerea daoEmpresaAerea; //DAO correspondente
private EmpresaAerea empresaAerea; //Objeto para a persistência
private DataModel modelo; //Modelo para o DataTable
public DAOEmpresaAerea getDaoEmpresaAerea() {
if (daoEmpresaAerea == null) { //Inicialização tardia (lazy inicialization)
daoEmpresaAerea = new DAOEmpresaAerea();
}
return daoEmpresaAerea;
}
EmpresaAereaBean
//Componente do JSF para criação de telas de consulta
public DataModel getEmpresas() {
modelo = new ListDataModel(getDaoEmpresaAerea().listaTodos());
return modelo;
}
//Objeto para persistência
public EmpresaAerea getEmpresaAerea() {
if (empresaAerea == null) {
empresaAerea = new EmpresaAerea();
}
return empresaAerea;
}
public void setEmpresaAerea(EmpresaAerea empresaAerea) {
this.empresaAerea = empresaAerea;
}
EmpresaAereaBean
//Utilizado na edição
//Recupera o objeto selecionado na tabela
public String mostraDados() {
Object objetoSelecionado = modelo.getRowData();
setEmpresaAerea((EmpresaAerea) objetoSelecionado);
return "editar";
}
//Persistência do objeto
public String gravar() {
getDaoEmpresaAerea().atualizar(getEmpresaAerea());
return "paginaPrincipal";
}
}
DAOGenerico
• Crie o método a seguir no DAOGenerico:
public List<T> listaTodos() {
String sql = "FROM " + getClasse().getName();
Query query = sessao.createQuery(sql);
return query.list();
}
– O hibernate trabalha com a classe List para coleção de
objetos
Lista de empresas
• Para listar as
empresas iremos
usar o componente
DataTable,
recuperando os
dados da coleção e
mostrando direto na
tabela.
ListaDeEmpresas.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<html>
<link rel="stylesheet" href="css/Estilo.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Lista de Empresas</title>
<f:view>
<f:loadBundle basename="resources.mensagens" var="msgs" />
<h:form>
<jsp:include page="Menu.jsp" />
ListaDeEmpresas.jsp
<h1>Lista de Empresas</h1>
<h:dataTable value="#{empresaAereaBean.empresas}"
var="umaEmpresa“ border="1">
<h:column>
<f:facet name="header">
<h:outputText value="Código" />
</f:facet>
<h:outputText value="#{umaEmpresa.id}"></h:outputText>
</h:column>
ListaDeEmpresas.jsp
<h:column>
<f:facet name="header">
<h:outputText value="Nome Fantasia" />
</f:facet>
<h:outputText value="#{umaEmpresa.nomeFantasia}"></h:outputText>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Razão Social" />
</f:facet>
<h:outputText value="#{umaEmpresa.razaoSocial}"></h:outputText>
</h:column>
</h:dataTable>
</h:form>
</f:view>
</html>
Tela de cadastro
• No cadastro, o managedbean
EmpresaAereaBean associa
os valores das caixas de texto
com as propriedades do
atributo EmpresaAerea.
• O id deve ficar guardado em
um campo hidden.
• Quando o usuário pressionar o
botão Gravar, será executado
o método “gravar” no MB.
CadastroDeEmpresa.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<html>
<link rel="stylesheet" href="css/Estilo.css" type="text/css">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Cadastro de Empresa</title>
</head>
<f:view>
<f:loadBundle basename="resources.mensagens" var="msgs" />
<h:form>
<jsp:include page="Menu.jsp" />
CadastroDeEmpresa.jsp
<h1>Dados da Empresa</h1>
<h:inputHidden value="#{empresaAereaBean.empresaAerea.id}" />
<h:panelGrid columns="2" border="1">
<h:outputText value="#{msgs['atributo.id']}" />
<h:outputText value="#{empresaAereaBean.empresaAerea.id}" />
<h:outputText value="#{msgs['nome.fantasia']}" />
<h:inputText value="#{empresaAereaBean.empresaAerea.nomeFantasia}“ size="50" />
<h:outputText value="#{msgs['razao.social']}" />
<h:inputText value="#{empresaAereaBean.empresaAerea.razaoSocial}“ size="50" />
<h:commandButton action="#{empresaAereaBean.gravar}" value="Gravar" />
<h:commandButton type="reset" value="Reset" />
</h:panelGrid>
</h:form>
</f:view>
</html>
faces-config.xml
• É o momento de acrescentar os novos MB’s
e regras de navegação no arquivo de
configuração.
Registro do bean
<managed-bean>
<managed-bean-name>empresaAereaBean</managed-bean-name>
<managed-bean-class>
net.sca.controle.EmpresaAereaBean
</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
Regras de navegação
<navigation-rule>
<from-view-id>/ListaDeEmpresas.jsp</from-view-id>
<navigation-case>
<from-outcome>editar</from-outcome>
<to-view-id>/CadastroDeEmpresa.jsp</to-view-id>
</navigation-case>
</navigation-rule>
<navigation-rule>
<navigation-case>
<from-outcome>paginaPrincipal</from-outcome>
<to-view-id>/PaginaPrincipal.jsp</to-view-id>
</navigation-case>
</navigation-rule>
<navigation-rule>
<navigation-case>
<from-outcome>paginaDeLogin</from-outcome>
<to-view-id>/Login.jsp</to-view-id>
</navigation-case>
</navigation-rule>
<navigation-rule>
<navigation-case>
<to-view-id>/ListaDeEmpresas.jsp</to-view-id>
</navigation-case>
</navigation-rule>
Próximos passos
• Como desafio, implemente a inclusão e
exclusão.
Download
  1. No category

public - Marco Reis

UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas

UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas

Web Aplicações Web Marco Antonio, Arquiteto de Software – TJDF

Web Aplicações Web Marco Antonio, Arquiteto de Software – TJDF

Aula 7 (07/05/2015)

Aula 7 (07/05/2015)

Document

Document

Material de Renata

Material de Renata

Aula 8 (28/05/2015)

Aula 8 (28/05/2015)

Exercícios de JSP

Exercícios de JSP

Aula 0 (24/02/2015) - Orientações e Plano de Ensino

Aula 0 (24/02/2015) - Orientações e Plano de Ensino

Curso de JSP Básico

Curso de JSP Básico