Introdução a JSF Marco Antonio. Agenda ManagedBean Página JSP Faces-config DataTable.
41
Introdução a JSF Marco Antonio
Transcript of Introdução a JSF Marco Antonio. Agenda ManagedBean Página JSP Faces-config DataTable.
Introdução a JSFMarco 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.
LoginBeanpackage 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>
</servlet-mapping>
</web-app>
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.propertiestitulo.pagina.login=Página de Loginatributo.id=Códigonome.fantasia=Nome Fantasiarazao.social=Razão Socialnome=Nome:senha=Senha:botao.login=Efetuar Loginusuario.invalido=Usuário Inválidomensagem.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>
Detalhamento1. 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>
Detalhamento1. 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.nome8. inputText: associa essa caixa de texto com a propriedade
nome do loginBean9. outputText:...10. inputSecret: associa essa caixa de texto (senha) com a
respectiva propriedade senha no loginBean11. 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>
Detalhamento1. commandLink: cria um “a href” para
“paginaDeLogin”, ou seja, abre de novo a tela de login.
2. Texto do link.
EmpresaAereaBeanpackage 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.
