1 / 41

Introdução a JSF

Marco Antonio. Introdução a JSF. 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.

cale
Download Presentation

Introdução a JSF

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Marco Antonio Introdução a JSF

  2. Agenda ManagedBean Página JSP Faces-config DataTable

  3. Lista de diretórios/arquivos Na figura ao lado podemos conferir a lista dos arquivos no final do projeto. Use como referência.

  4. 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.

  5. LoginBean package net.sca.controle; publicclass LoginBean { private String nome; private String senha; public String getNome() { return nome; } publicvoid setNome(String nome) { this.nome = nome; } public String getSenha() { return senha; } publicvoid setSenha(String senha) { this.senha = senha; }

  6. LoginBean public String validarUsuario() { if (getSenha().equals("123456")) { return "usuarioValido"; } return "usuarioInvalido"; } }

  7. 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>

  8. 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>

  9. web.xml Arquivo que define o servlet do JSF. Deve estar dentro do WebContent/WEB-INF.

  10. web.xml <?xmlversion="1.0"encoding="UTF-8"?> <web-appxmlns: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>

  11. 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.

  12. Arquivo de mensagens Crie o arquivo no diretório informado anteriormente.

  13. 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

  14. Primeira página web Ctrl + “N” ou menu File -> new...

  15. Login.jsp Atençao: as páginas ficam na pasta WebContent. Essa é apenas uma definição do plugin do eclipse.

  16. 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>

  17. 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

  18. 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>

  19. 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.

  20. 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).

  21. 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>

  22. 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.

  23. 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>

  24. 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" />

  25. 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>

  26. Detalhamento commandLink: cria um “a href” para “paginaDeLogin”, ou seja, abre de novo a tela de login. Texto do link.

  27. 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; }

  28. 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; }

  29. 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"; } }

  30. 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

  31. Lista de empresas Para listar as empresas iremos usar o componente DataTable, recuperando os dados da coleção e mostrando direto na tabela.

  32. 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" />

  33. 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>

  34. 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>

  35. 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.

  36. 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" />

  37. 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>

  38. faces-config.xml É o momento de acrescentar os novos MB’s e regras de navegação no arquivo de configuração.

  39. 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>

  40. 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>

  41. Próximos passos Como desafio, implemente a inclusão e exclusão.

More Related