Introdução a JSF Marco Antonio.

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" " <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=" xmlns=" xmlns:web=" xsi:schemaLocation=" 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 " pageEncoding="ISO "%> (2) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " (3) taglib uri=" prefix="f"%> (4) taglib uri=" prefix="h"%> <html> (5) <link rel="stylesheet" href="css/Estilo.css" type="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=ISO "> <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 " pageEncoding="ISO "%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " taglib uri=" prefix="f"%> taglib uri=" prefix="h"%> <html> <link rel="stylesheet" href="css/Estilo.css" type="text/css"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO "> <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 " pageEncoding="ISO "%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " taglib uri=" prefix="f"%> taglib uri=" prefix="h"%> <html> <link rel="stylesheet" href="css/Estilo.css" type="text/css"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO "> <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 " pageEncoding="ISO "%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " taglib uri=" prefix="f"%> taglib uri=" prefix="h"%> <html> <link rel="stylesheet" href="css/Estilo.css" type="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=ISO "> <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 " pageEncoding="ISO "%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " taglib uri=" prefix="f"%> taglib uri=" prefix="h"%> <html> <link rel="stylesheet" href="css/Estilo.css" type="text/css"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO "> <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.

Introdução a JSF Marco Antonio.

Apresentações semelhantes

Apresentação em tema: "Introdução a JSF Marco Antonio."— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback

Login

Autorizar-se através da rede social:

Introdução a JSF Marco Antonio.

Apresentações semelhantes

Apresentação em tema: "Introdução a JSF Marco Antonio."— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback