Managed Beans e Tags JSF

Transcrição

1 Managed Beans e Tags JSF Passos iniciais no Projeto Paulo Ricardo Lisboa de Almeida 1

2 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

3 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

4 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

5 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

6 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 Veja alguns exemplos no demo 10 minutos para a turma visualizar o demo! 6

7 Primefaces - Dependências Adicione no pom.xml do projeto <dependency> <groupid>org.primefaces</groupid> <artifactid>primefaces</artifactid> <version>6.1</version> </dependency> 7

8 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 "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xmlns:c=" xmlns:ui = " xmlns:h = " xmlns:p=" <h:head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>título</title> </h:head> <h:body> CORPO DA PÁGINA </h:body> </html> 8

9 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 "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xmlns:c=" xmlns:ui = " xmlns:h = " xmlns:p=" <h:head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>login</title> </h:head> <h:body> <h:panelgrid columns="2"> <h:outputlabel value="cpf: " />  </h:panelgrid> </h:body> </html> 9

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

11 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

12 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

13 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

14 <?xml version="1.0" encoding="utf-8"?> <faces-config xmlns=" xmlns:xsi=" xsi:schemalocation=" version="2.2">  <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>  </faces-config> 14

15 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"> <h:outputlabel value="cpf: " />  <h:inputtext value="#{loginmb.cpf" label="cpf" id="cpf" required="true" /> </h:panelgrid> 15

16 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 é Logo temos #{loginmb. 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

17 Submeter o login Adicione um botão para submeter as informações de login <h:form> <h:panelgrid columns="2"> <h:outputlabel value="cpf: " />  <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

18 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

19 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

20 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

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

22 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

23 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

24 Renderizando mensagens na tela Podemos utilizar o componente p:growl <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xmlns:c=" xmlns:ui = " xmlns:h = " xmlns:p=" <h:head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>login</title> </h:head> <h:body> <h:form> <p:growl id="messages" showdetail="true" autoupdate="true" closable="true" /> <h:panelgrid columns="3"> <h:outputlabel value="cpf: " />  <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

25 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

26 Referências MANN, K. Java Server Faces In Action. Dreamtech Press, ISBN ZAMBON, G. Beginning JSP, JSF and Tomcat: Java Web Development. Apress, (Expert s voice in Java). ISBN Documentação Oracle Documentação Primefaces 26