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> <from-outcome>usuarioInvalido</from-outcome> <to-view-id>/UsuarioInvalido.jsp</to-view-id> </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> <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.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 Encoding – padrão de caracteres utilizados na página. É um padrão internacional. Tipo de documento. Biblioteca de tags do JSF Biblioteca de tags HTML do JSF 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 View: Início da página JSF. loadBundle: Arquivo de mensagens. Form: Tag de abertura do formulário. Todos os componentes devem ficar dentro dele. panelGrid: Tabela com 2 colunas. Facet: Cabeçalho (header) ou rodapé (footer) da tabela. 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 commandLink: cria um “a href” para “paginaDeLogin”, ou seja, abre de novo a tela de login. 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:outputText value="Razão Social" /> <h:outputText value="#{umaEmpresa.razaoSocial}"></h:outputText> </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> <from-outcome>paginaPrincipal</from-outcome> <to-view-id>/PaginaPrincipal.jsp</to-view-id> <from-outcome>paginaDeLogin</from-outcome> <to-view-id>/Login.jsp</to-view-id> <to-view-id>/ListaDeEmpresas.jsp</to-view-id>
Próximos passos Como desafio, implemente a inclusão e exclusão.