Managed Beans e Tags JSF Passos iniciais no Projeto Paulo Ricardo Lisboa de Almeida 1
Instanciando a aplicação Clone o projeto da aula com o Git (disponível no site da disciplina) Suba o banco de dados Crie as tabelas e rode o script de inserts Utilize o tutorial disponível no site da disciplina Inicialize o Eclipse e importe o Projeto Utilize o tutorial disponível no site da disciplina 2
Managed Beans São beans gerenciados pelo Frameworks JSF Beans padrão, com getters e setters Representam as informações renderizadas na tela (página xhtml) Precisam ser registrados no faces-config.xml Formato <managed-bean> <managed-bean-name>nomedainstânciadobean</managed-bean-name> <managed-bean-class>classe com nome completo</managed-bean-class> <managed-bean-scope>escopo</managed-bean-scope> </managed-bean> 3
Escopo dos beans request none view session application custom O bean existe somente durante uma requisição http O bean existe somente durante a avaliação de uma tag EL O bean existe durante a visualização de uma view (enquanto o usuário estiver em uma página) Existe enquanto o usuário tiver uma sessão válida. No nosso caso, será enquanto o usuário estiver logado Existe enquanto a aplicação estiver rodando (criado quando o servidor sobe, destruído quando o servidor é desligado) Podemos criar escopos customizados 4
Tags Componentes que são interpretados pelo framework JSF e são renderizados como html para o usuário Ideia semelhante ao PHP, como discutido na aula anterior Expression language EL Exemplo: <h:outputlabel value="hello World"></h:outputLabel> Renderiza um label no html com a String Hello World Veja o index.xhtml e compare com o html gerado 5
Primefaces Além das tags padrão, vamos utilizar o Primefaces Suíte de componentes Open Source Em casa, baixe a documentação e aprenda a utilizá-lo https://www.primefaces.org/documentation/ Veja alguns exemplos no demo https://www.primefaces.org/showcase/ 10 minutos para a turma visualizar o demo! 6
Primefaces - Dependências Adicione no pom.xml do projeto <dependency> <groupid>org.primefaces</groupid> <artifactid>primefaces</artifactid> <version>6.1</version> </dependency> 7
Formato das Páginas Toda página na nossa aplicação terá o seguinte formato: Note que como estamos utilizando o primefaces, definimos uma tag p para seus componentes <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jsf/core" xmlns:ui = "http://java.sun.com/jsf/facelets" xmlns:h = "http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui"> <h:head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>título</title> </h:head> <h:body> CORPO DA PÁGINA </h:body> </html> 8
Criando uma tela de Login A tela de login não tem restrições de acesso, portanto qualquer pessoa pode ter acesso a ela Crie um xhtml no diretório pages chamado login.xhtml <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jsf/core" xmlns:ui = "http://java.sun.com/jsf/facelets" xmlns:h = "http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui"> <h:head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>login</title> </h:head> <h:body> <h:panelgrid columns="2"><!-- definimos um grid de duas colunas --> <h:outputlabel value="cpf: " /> <!-- escreve na tela --> </h:panelgrid> </h:body> </html> 9
Tela inicial Definindo o login como a tela inicial da aplicação No web.xml <welcome-file-list> <welcome-file>./pages/login.xhtml</welcome-file> </welcome-file-list> Feito isso rode a aplicação A aplicação estará disponível em http://localhost:8080/clinicavet/ 10
ManagedBean Vamos criar um bean para conter as informações da tela de login Crie um pacote com.up.clinicaveterinaria.mb Todos nossos beans ficarão nesse pacote Regra de nomenclatura: <nome_bean>mb Exemplo: TelaInicialMB 11
Bean LoginMB package com.up.clinicaveterinaria.mb; public class LoginMB { private Long cpf; public Long getcpf() { return cpf; public void setcpf(long cpf) { this.cpf = cpf; 12
Registrando o Bean Precisamos registrar o bean no faces-config O bean de login simplesmente avalia se o login é válido, e cria uma nova sessão. O bean de login deve ser destruído o mais rápido possível depois que o usuário tiver feito seu login Qual escopo devemos usar? 13
<?xml version="1.0" encoding="utf-8"?> <faces-config xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xsi:schemalocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd" version="2.2"> <!-- ManagedBeans --> <managed-bean> <managed-bean-name>loginmb</managed-bean-name> <managed-bean-class>com.up.clinicaveterinaria.mb.loginmb</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> <!-- Fim ManagedBeans --> </faces-config> 14
Conectando os campos Vamos conectar os campos da página ao nosso managed bean O usuário vai digitar o seu CPF, e o valor deve ir para o campo cpf do bean LoginMB Modifique a página de login <h:panelgrid columns="2"><!-- definimos um grid de duas colunas --> <h:outputlabel value="cpf: " /> <!-- escreve na tela --> <h:inputtext value="#{loginmb.cpf" label="cpf" id="cpf" required="true" /> </h:panelgrid> 15
Conectando os campos Note o #{ Isso significa que o valor vai ser referente a um ManagedBean A instância do bean é o loginmb O campo do bean é e-mail Logo temos #{loginmb.email Esse raciocínio é váido para qualquer propriedade da tag, não só para o campo value <h:inputtext value="#{loginmb.cpf" label="cpf" id="cpf" required="true" /> 16
Submeter o login Adicione um botão para submeter as informações de login <h:form> <h:panelgrid columns="2"><!-- definimos um grid de duas colunas --> <h:outputlabel value="cpf: " /> <!-- escreve na tela --> <h:inputtext value="#{loginmb.cpf" label="cpf" id="cpf" required="true" /> </h:panelgrid> <h:commandbutton value="entrar" type="submit" action="#{loginmb.login()" id="btnsubmit"/> </h:form> Note que em action, inserimos um método que será chamado em loginmb quando realizarmos o login Precisamos criar esse método Note os parênteses Indicam que estamos chamando um método, não uma propriedade Note também a necessidade das tags de form 17
No LoginMB package com.up.clinicaveterinaria.mb; public class LoginMB { private Long cpf; public Long getcpf() { return cpf; public void setcpf(long cpf) { this.cpf = cpf; public void login() { System.out.println("Realizando o login com o CPF: " + cpf); 18
Criando uma seção Toda vez que o usuário logar com um cpf válido, vamos criar um bean que representa sua seção Vamos chamar de UserMB Note que estamos digitando somente o cpf para logar Nossa aplicação vai funcionar assim no momento Senhas são um tópico complexo que será tratado a parte (caso tenhamos tempo) Envolve pelo menos: criação de hashes seguras e eliminação dos componentes da memória pela pilha (sem depender do coletor de lixo) 19
UserMB Em nossa aplicação, todo funcionário pode logar, e tem uma visão completa da aplicaçao Qual será o escopo do UserMB? package com.up.clinicaveterinaria.mb; import com.up.clinicaveterinaria.model.funcionario; public class UserMB { private Funcionario funcionario; public Funcionario getfuncionario() { return funcionario; public void setfuncionario(funcionario funcionario) { this.funcionario = funcionario; 20
No faces-config <managed-bean> <managed-bean-name>loginmb</managed-bean-name> <managed-bean-class>com.up.clinicaveterinaria.mb.loginmb</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> <managed-property> <property-name>usermb</property-name><!-- injetar o bean usermb na propriedade usermb do bean loginmb --> <property-class>com.up.clinicaveterinaria.mb.usermb</property-class> <value>#{usermb</value> </managed-property> </managed-bean> <managed-bean> <managed-bean-name>usermb</managed-bean-name> <managed-bean-class>com.up.clinicaveterinaria.mb.usermb</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean> 21
Adiciondo mensagens push Adicione no seu projeto o JSFMessageUtil.java disponível no site da discipina Cuidado com o pacote! Essa classe serve para enviar mensagens para a tela 22
LoginMB package com.up.clinicaveterinaria.mb; import java.util.date; public class LoginMB { private Long cpf; private UserMB usermb; //... public void login() { try{ if(cpf == 1) {//loga somente se digitarmos 1 Funcionario f = new Funcionario(); f.setcpf(cpf); // esse funcionário não existe no banco! Esse é somente um teste f.setdataadmissao(new Date()); f.setid(1l); f.setnascimento(new Date()); f.setnome("funcionário teste"); f.settipofuncionario(new TipoFuncionario()); //... usermb.setfuncionario(f); else { JSFMessageUtil.sendWarningMessageToUser("Login incorreto!"); catch(exception e){ e.printstacktrace();//logar! JSFMessageUtil.sendWarningMessageToUser("Ocorreu um erro na aplicação!"); 23
Renderizando mensagens na tela Podemos utilizar o componente p:growl <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jsf/core" xmlns:ui = "http://java.sun.com/jsf/facelets" xmlns:h = "http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui"> <h:head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>login</title> </h:head> <h:body> <h:form> <p:growl id="messages" showdetail="true" autoupdate="true" closable="true" /> <h:panelgrid columns="3"><!-- definimos um grid de duas colunas --> <h:outputlabel value="cpf: " /> <!-- escreve na tela --> <h:inputtext value="#{loginmb.cpf" label="cpf" id="cpf" required="true" /> </h:panelgrid> <p:commandbutton value="entrar" type="submit" action="#{loginmb.login()" id="btnsubmit" ajax="false" update="growl"/> </h:form> </h:body> </html> 24
Rode a aplicação Rode a aplicação. Um login diferente de 1 gerará um erro exibido na tela Um login correto irá injetar o funcionário (fictício até o momento) em usermb 25
Referências MANN, K. Java Server Faces In Action. Dreamtech Press, 2005. ISBN 9788177224191. ZAMBON, G. Beginning JSP, JSF and Tomcat: Java Web Development. Apress, 2012. (Expert s voice in Java). ISBN 9781430246237. Documentação Oracle Documentação Primefaces 26