MÓDULO Programação para Web 2

MÓDULO Programação para Web 2 Introdução ao JSF Java Server Faces

Introdução Framework para desenvolvimento de aplicações web em Java Fortemente baseado nos padrões MVC e Front Controller MVC (model-view-controller): padrão de arquitetura que tem por objetivo isolar a lógica de negócio da lógica de apresentação de uma aplicação Modelo: encapsula os dados e as funcionalidades da aplicação. Visão: é responsável pela exibição de informações, cujos dados são obtidos do modelo. Controlador: recebe as requisições do usuário e aciona o modelo e/ou a visão. 2

MVC 3

OVERVIEW DA TECNOLOGIA 4

Conceitos chaves do JSF Componentes Renderers Managed-beans Converters / Validators Navegação Eventos Ciclo de vida (Request Lifecycle) 5

Componentes (1) Separa a lógica de negócio da apresentação Cada view é composta por uma hierarquia de componentes 6

Componentes (2) Componentes podem ser adicionados na view programaticamente ou via template (JSP por default, ou Facelets para melhor desempenho e fácil desenvolvimento) Componentes são expressos em tags em uma página JSP e em sua maioria são de interface com o usuário Os componentes padrões são divididos em dois grupos Faces Core <f:view>, <f:loadbundle>, <f:param> HTML wrappers <h:datatable>, <h:selectonemenu> Componente = class + [renderer] + tag handler (JSP) 7

Renderers Responsável por exibir o componente no cliente São agrupados em render kits Render kit padrão é o HTML, mas podemos ter WML, SVG etc. Efetua o encode (gera HTML do componente) Efetua o decode (seta o componente com os dados da URL query string e do formulário) Resumindo <h:inputtext id= login size= 16 /> <input type= text id= myform:login name= myform:login size= 16 /> 8

Managed beans POJO Plain Old Java Objects Podem ser definidos nos escopos: Application, Session, Request e None 9

Managed beans 10

JSF Value Binding Binda o valor do componente ao managed-bean O binding ocorre através de JSF Expression Language (EL) Semelhante a JSTL, porém usa-se #{} no lugar de ${} Pode-se executar métodos no modelo através de expressões Não é processada imediatamente como na JSTL A partir da JSF 1.2 utiliza-se a Unified Expression Language (JSP 2.1) que resolve problemas de incompatibilidade entre a JSF-EL e JSP-EL 11

JSF Value Binding Exemplo (1) login.jsp Objeto meumanagedbean 12

JSF Value Binding Exemplo (2) login.jsp Managed-beans são registrados dentro do faces-config.xml 13

Converters (1) Tem por finalidade converter e/ou formatar objetos do tipo Java para String e vice-versa Converters são bi-direcionais Managed-bean faz: getasobject() JSP faz: getasstring() JSF já fornece converters padrões para date / time, numbers, etc Você pode implementar seu próprio converter Basta implementar a interface javax.faces.convert.converter Registrar o converter no faces-config.xml O converter pode atuar de forma explícita(id) ou implícita(class) de acordo com a sua configuração no faces-config.xml 14

Converters (2) 15

Converters (3) Converter é registrado dentro faces-config.xml. Exemplo: registrando um converter para que toda propriedade do tipo org.cejug.model.cpf de qualquer bean use este converter 16

Converters (4) - Exemplo Converter declarado explicitamente Ou implicitamente (converter mapeado para objetos do tipo CPF) 17

Validators (1) Tem por responsabilidade garantir que o valor informado pelo usuário seja válido Validator trabalha com objetos, não somente com Strings JSF já fornece validators padrões como required, length, range etc Você pode implementar seu próprio validator Basta implementar a interface javax.faces.validator.validator Registrar o validator no faces-config.xml Você pode associar um ou mais validators à um componente 18

Validators (2) javax.faces.validator.validator Validators são registrados no faces-config.xml 19

Validators (3) - Exemplo Validação para obrigatoriedade e comprimento do campo 20

Navegação (1) Navegação de uma página para outra Simples e poderoso sistema de navegação O framework seleciona a próxima view baseado Na view anterior Resultado(outcome) de uma action EL de ação (ex.: #{mbean.user.save}) Qualquer combinação acima Permite wildcard ( * ) para páginas de origem (from-viewid) 21

Navegação (2) - Exemplo 22

Eventos (1) Componentes geram determinados eventos que por sua vez disparam ações no servidor (método(s) no managed-bean ou listeners) Você também pode implementar listeners de ação associados a outros componentes do formulário Os listeners mais comuns do JSF são ActionListener ValueChangeListener 23

Eventos (2) - Exemplo Action event para navegação Action event que executa método no managed-bean 24

Eventos (3) - Exemplo Value-change event que executa método após alterar o valor do componente 25

Funcionamento do MVC no JSF 26

Funcionamento do MVC no JSF 27

Configuração JSF A Faces Servlet deve ser configurada no arquivo WEB-INF/web.xml, indicando a classe que a implementa e o padrão de url que será associado a essa servlet. Por exemplo, na configuração abaixo, todas as requisições cujas urls possuam o sufixo.xhtml serão processadas pela Faces Servlet. 28

Configuração JSF Adicionar no diretório WEB-INF um arquivo chamado faces-config.xml. Nesse arquivo, podemos alterar diversas configurações do JSF. Mas, a princípio, podemos deixá-lo apenas com a tag facesconfig. 29

Configuração do JSF Para utilizar os recursos do JSF, é necessário que a aplicação possua uma implementação JSF. pode ser adicionada manualmente no diretório WEB-INF/lib da aplicação. Se um servidor de aplicação Java EE for utilizado, a inclusão de uma implementação JSF manualmente não é necessária, já que esse tipo de servidor possui, por padrão, uma implementação de JSF. 30

Managed Bean Objetos fundamentais de uma aplicação JSF. Suas principais tarefas são: Fornecer dados que serão exibidos nas telas. Receber os dados enviados nas requisições. Executar tarefas de acordo com as ações dos usuários. 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 managed bean com os atributos nome e senha correspondentes. 31

Criando um Managed Beans Pode ser definido de duas maneiras. criar uma classe Java e public class TesteBean {... } registrá-la no arquivo faces-config.xml.... <managed-bean > <managed-bean-name>testebean </managed-bean-name> <managed-bean-class>modelo.testebean</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean>... define o nome, a classe e o escopo do managed bean. 32

Criando um Managed Beans A segunda forma é criar uma classe Java com a anotação @ManagedBean do pacote javax.faces.bean. utilizada a partir da versão 2 do JSF @ManagedBean public class TesteBean {... } JSF assumirá que o nome do managed bean é o nome da classe com a primeira letra minúscula. O escopo request será assumido como padrão. 33

Criando um Managed Beans Para acessar o valor do atributo numero, precisamos definir um método de leitura. Para alterar o valor do atributo numero, precisamos definir um método de escrita. @ManagedBean public class TesteBean { private int numero ; public int setnumero(int numero) { this.numero = numero ; } } public int getnumero() { return numero ; } 34

Exibindo atributos de um Managed Bean Para exibir o valor de um atributo numero utiliza-se expression language (#{}). <!DOCTYPE html PUBLIC"-//W3C//DTDXHTML 1.0 Transitional// EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns ="http://www.w3.org/1999/xhtml" xmlns :h="http://java.sun.com/jsf/html"> <h:head > <title>desenvolvimento Web</title> </h:head > <h:body > Valor : #{testebean.numero} </h:body > </html> 35

Alterando atributos de um Managed Bean Para alterar o valor do atributo numero do managed bean testebean, podemos vinculá-lo, por exemplo, a uma caixa de texto em um formulário <!DOCTYPE html PUBLIC"-//W3C//DTDXHTML 1.0 Transitional// EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns ="http://www.w3.org/1999/xhtml" xmlns :h="http://java.sun.com/jsf/html"> <h:head > <title>desenvolvimento Web</title> </h:head > <h:body > Valor : #{testebean.numero} <h: form > <h: inputtext value ="#{testebean.numero}"/> <h: commandbutton value ="Altera "/> </h: form > </h:body > </html> 36

Alterando atributos de um Managed Bean Importante o vínculo com uma propriedade de um managed bean dá-se por meio dos nomes dos métodos getters e setters, e não pelo nome do atributo. No exemplo, se mantivéssemos o nome do atributo do managed bean mas substituíssemos os nomes dos métodos getnumero() e setnumero() por getvalor() e setvalor(), respectivamente, então os trechos de código XHTML em destaque deveriam ser alterados para Valor : #{testebean.valor} <h: inputtext value ="#{testebean.valor}"/> 37

Ações Para implementar as lógicas que devem ser executadas assim que o usuário clicar em um botão ou link, basta criar métodos nas classes dos managed beans. @ManagedBean public class TesteBean { private int numero ; public void incrementanumero () { this.numero = numero+1; } } // GETTERS E SETTERS 38

Ações Esses métodos de ação podem ser: void: para manter os usuários na mesma tela ou String : para realizar uma navegação entre telas. Exemplo: Para incrementar o valor do atributo numero do managed bean testebean, podemos criar uma página que possui um botão para executar essa ação e associálo ao método incrementanumero() <h:form > <h:commandbutton value ="Incrementa" action="#{testebean.incrementanumero}"/> </h: form > 39

Ações Todo managed bean possui um nome único que é utilizado para acessá-lo dentro dos trechos escritos com expression language. Quando utilizamos a anotação @ManagedBean, por padrão, o JSF assume que o nome do managed bean é o nome da classe com a primeira letra em caixa baixa. Podemos alterar esse nome acrescentado um argumento na anotação. @ManagedBean (name= teste ) public class TesteBean {... // GETTERS E SETTERS } 40

Exemplo Construa TextoBean: import javax.faces.bean.managedbean; @ManagedBean public class TextoBean { private String texto ; public String transformaemcaixaalta() { this.texto = this.texto.touppercase (); return "resposta"; } public String gettexto () { return this.texto ; } } public void settexto ( String texto ) { this.texto = texto ; } 41

Exemplo Faça a página index.xhtml <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1 - transitional.dtd"> <html xmlns ="http://www.w3.org/1999/xhtml" xmlns :ui="http://java.sun.com/jsf/facelets" xmlns :h="http://java.sun.com/jsf/html" xmlns :f="http://java.sun.com/jsf/core"> <h:head> <title>desenvolvimento Web</title > </h:head> <h:body > <h:form > <h:outputlabel value ="Texto : "/> <h:inputtextarea value ="#{textobean.texto}"/> <h:commandbutton value ="Transformar" action="#{textobean.transformaemcaixaalta}"/> </h:form > </h:body > </html > 42

Exemplo Construa o formulário que exibirá o texto formatado resposta.xhtml: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1 - transitional.dtd"> <html xmlns ="http://www.w3.org/1999/xhtml" xmlns :ui="http://java.sun.com/jsf/facelets" xmlns :h="http://java.sun.com/jsf/html" xmlns :f="http://java.sun.com/jsf/core"> <h:head> <title>treinamento JSF</title > </h:head> <h:body > <h:outputtext value ="#{textobean.texto}"/> </h:body > </html > 43

Processamento de uma requisição 44

Processamento de uma requisição Restore View: Na primeira requisição de um usuário, uma nova árvore de componentes que representa a tela desse usuário é gerada. Nas demais requisições (postback) desse mesmo usuário, a árvore de componentes que representa a tela anteriormente enviada a ele é reconstruída. 45

Processamento de uma requisição Apply Request Values: a árvore construída na etapa anterior é percorrida e cada um de seus componentes é decodificado. No processo de decodificação, cada componente extrai da requisição atual os dados associados a essa componente e se atualiza comessas informações. Os eventos de ação (como um clique em um link ou em um botão, por exemplo) são identificados. Por padrão, esses eventos são adicionados às filas correspondentes para serem tratados posteriormente (na fase Invoke Application). 46

Processamento de uma requisição Process Validations: os componentes que possuem valores submetidos pelo usuário através de formulários são convertidos e validados (caso haja algum validador registrado para esse componente). Se ocorrer algum erro de conversão ou validação, mensagens de erro são adicionadas no contexto da requisição atual e o fluxo é redirecionado para a fase Render Response. Caso contrário, processo continua na fase UpdateModel Values. os eventos de mudança de valor são identificados e tratados ao final desta fase. 47

Processamento de uma requisição UpdateModel Values: Os valores contidos em cada componente da árvore, já convertidos e validados na fase anterior, são armazenados em propriedades de objetos definidos pela aplicação (managed beans) 48

Processamento de uma requisição Invoke Application: Uma vez que os dados dos componentes já foram convertidos, validados e armazenados nos objetos do modelo, as tarefas correspondentes ao evento que disparou a requisição (normalmente um clique em um botão ou link) serão executadas. A próxima tela a ser apresentada ao usuário é determinada pelo resultado do método que implementa a lógica de negócio executado nesta fase. 49

Processamento de uma requisição Render Response: Apróxima tela é gerada e enviada ao navegador do usuário. Uma representação desta tela também é armazenada a fim de ser usada na fase Restore View da próxima requisição. 50

Processamento de uma requisição Managed beans estão à disposição da Faces Servlet durante todo o processamento da requisição 51

Processamento de uma requisição Nas etapas Render Response e Restore View, a Faces Servlet aciona os managed beans para recuperar os dados que devem ser usados na construção ou reconstrução da árvore de componentes. 52

Processamento de uma requisição Na etapa Update Model, a Faces Servlet armazena nos managed beans os dados já convertidos e validados. Na etapa Invoke Application, a Faces Servlet dispara um método em um managed bean responsável pelo processamento da regra de negócio correspondente à requisição atual. 53

Processamento de uma requisição Todas as regras de negócio são implementadas no modelo, que também administra os dados da aplicação. Os managed beans acionam o modelo para executar alguma regra de negócio, recuperar ou alterar os dados administrados pelo modelo. 54

Processamento de uma requisição As telas da aplicação são definidas na camada de visão. A Faces Servlet acessa essa camada toda vez que necessita construir ou reconstruir a árvore de componentes de uma determinada tela. Isso ocorre nas etapas Restore View e Render Response. 55

Exemplo 2 Adivinhe o número! 56

Exercício Desenvolva uma aplicação JSF que: receba um número inteiro do usuário, produza um número aleatório entre zero e o número recebido, e exiba esse número na tela do navegador do usuário. 57

Criando o Aplicativo Web Crie um aplicativo Web chamado WebGuess Selecione GlassFish como servidor Use o framework JSF Crie o Bean Gerenciado JSF UserNumberBean Escopo: session Pacote: guessnumber 58

Criando o Bean Complete Bean Gerenciado JSF UserNumberBean Atributos: Integer randomint; Integer usernumber; String response; Métodos get e set para usernumber Construtor padrão Random randomgr = new Random(); randomint = randomgr.nextint(10); 59

Criando o Bean Finalizando o Bean Gerenciado JSF UserNumberBean Faça-o implementar Serializable Informe o nome do Bean @ManagedBean(name="UserNumberBean") @SessionScoped public class UserNumberBean implements Serializable { 60

Criando o Bean Complete Bean Gerenciado JSF UserNumberBean Método getresponse() if ( (usernumber!= null) && (usernumber.compareto(randomint) == 0)) { // Invalidar sessão do usuário FacesContext context = FacesContext.getCurrentInstance(); HttpSession session = (HttpSession) context.getexternalcontext().getsession(false); session.invalidate (); return "É isso aí!"; } return "<p> Desculpe, não é " + usernumber + ". </p> <p> Tente adivinhar de novo... </p>"; 61

Alterando o index.xhtml Altere o arquivo index.xhtml <html> para <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" > 62

Alterando o index.xhtml Construa o corpo 63

Inclua o form para obtenção do número do usuário <h:form> </h:form> <h:inputtext id="usernumber" size="2" maxlength="2" value = "#{UserNumberBean.userNumber}"/> <h:commandbutton id="submit" value="submit" action = "response"/> 64

Coloque uma imagem <div id="right" class="subcontainer"> <h:graphicimage url="/duke.png" alt="duke waving" /> </div> Lembre-se de colocar o recurso da imagem no projeto 65

Crie página JSF resposta.xhtml <body> <div id="maincontainer"> <div id="left" class="subcontainer greybox"> <h4><h:outputtext escape="false" value="#{usernumberbean.response}"/></h4> <h:form prependid="false"> <h:commandbutton id="backbutton" value="back" action="index" /> </h:form> </div> <div id="right" class="subcontainer"> <h:graphicimage url="/duke.png" alt="duke waving" /> </div> </div> </body> 66

COMPONENTES VISUAIS 67

Introdução Telas são definidas em arquivos XHTML. Os componentes visuais que constituem as telas são adicionados por meio de tags. A especificação do JSF define uma grande quantidade de tags e as classifica em bibliotecas. As principais bibliotecas de tags do JSF são: Core (http://java.sun.com/jsf/core) HTML (http://java.sun.com/jsf/html) Facelets (http://java.sun.com/jsf/facelets) 68

Estrutura básica de uma página JSF <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1 - transitional.dtd"> <html xmlns ="http://www.w3.org/1999/xhtml" xmlns :ui="http://java.sun.com/jsf/facelets " xmlns :h="http://java.sun.com/jsf/html " xmlns :f="http://java.sun.com/jsf/core "> <h:head> <title>treinamento JSF </title> </h:head> <h:body> <h:outputtext value ="Estrutura básica de uma tela JSF"/> </h:body> </html> Conteúdo da página definido na tag <html>, dividido em duas partes: o cabeçalho, <h:head> (e não pela tag <head>), e o corpo, tag <h:body> (e não pela tag <body>). 69

Estrutura básica de uma página JSF O uso das tags <h:head> e <h:body> é fundamental para o funcionamento completo das páginas HTML geradas pelo JSF. Ao processar essas tags, na etapa Render Response, o JSF adiciona recursos como scripts e arquivos de estilo na tela HTML que será enviada para o usuário. Esses recursos são necessários para o funcionamento correto dos componentes. 70

Formulários definidos através da tag <h:form> (e não pela tag <form>). composto basicamente por: caixas de texto, caixas de seleção, rótulos, botões e Links Ao ser processado, o componente <h:form> gera um formulário HTML configurado para o método POST do HTTP. 71

Caixas de TExto <h:inputtext> Permite que o usuário digite uma linha de texto. <h:inputtextarea> Permite que o usuário digite várias linhas de texto. <h:inputsecret> Igual ao <h:inputtext> mas não exibe o que foi digitado (usado em senha) Uma caixa de texto pode ser associada a uma propriedade de um managed bean através do atributo value. Esse vínculo é denominado binding. <h: inputtext value ="#{usuariobean.nome}"/> 72

Caixas de TExto Quando o JSF constrói a tela a ser enviada para o usuário, ele recupera o valor da propriedade nome através do método getnome() e guarda esse valor na caixa de texto correspondente. Analogamente, no processamento de uma requisição, o JSF extrai o valor presente na caixa de texto e utiliza o método setnome() para armazenar esse valor na propriedade nome do managed bean UsuarioBean. <h: inputtext value ="#{usuariobean.nome}"/> 73

Rótulos <h:outputlabel>. O texto do rótulo é definido pelo atributo value e pode ser associado a uma caixa de texto através do atributo for. O valor do atributo for deve ser igual ao valor do atributo id da caixa de texto que desejamos associar ao rótulo. <h: outputlabel value ="Nome : "for ="nome"/> <h: inputtext id="nome "/> 74

Exemplos XMTML <h: outputlabel value ="Nome :"for ="nome"/> <h: inputtext value ="Jonas K. Hirata "id="nome"/> HTML GERADO <label for ="j_idt6:nome ">Nome : </label> <input id="j_idt6:nome type="text name="j_idt6:nome" value ="Jonas K. Hirata"/> RESULTADO 75

Exemplos XMTML <h: outputlabel value ="Nome :"for ="nome"/> <h: inputtext value ="#{usuariobean.nome}"id="nome"/> HTML GERADO <label for ="j_idt6:nome ">Nome : </label> <input id="j_idt6:nome type="text name="j_idt6:nome value ="Jonas K. Hirata"/> RESULTADO 76

Exemplos XMTML <h: outputlabel value ="Nome :"for ="nome"/> <h: inputtext value ="#{usuariobean.nome}" readonly ="true ""id="nome"/> HTML GERADO <label for ="j_idt6:nome ">Nome : </label> <input id="j_idt6:nome"type="text"name="j_idt6:nome" value ="Jonas Hirata" readonly="readonly "/> RESULTADO 77

Exemplos XMTML <h:outputlabel value="cep :"for="cep"/> <h:inputtext value="#{usuariobean.cep} maxlength="9"id="cep"/> HTML GERADO <label for ="j_idt6:cep"> Cep:</ label > <input id="j_idt6:cep"type="text"name ="j_idt6:cep" value ="01452-001"maxlength="9"/> RESULTADO 78

Exemplos XMTML <h:outputlabel value="texto :"for="texto"/> <h:inputtextarea value="um texto de várias linhas" HTML GERADO id="texto"/> <label for ="j_idt6:texto">texto :</label> <textarea id="j_idt6:texto"name ="j_idt6:texto">um texto de várias linhas </textarea > RESULTADO 79

Exemplos XMTML <h:outputlabel value="texto :"for="texto"/> <h:inputtextarea value="um texto de várias linhas" cols ="10"rows ="3"id="texto"/> HTML GERADO <label for ="j_idt6:texto">texto :</label> <textarea id="j_idt6:texto"name ="j_idt6:texto" cols="10"rows="3">um texto de várias linhas </textarea > RESULTADO 80

Exemplos XMTML <h:outputlabel value="senha: "for="senha"/> <h:inputsecret value="#{usuariobean.senha}" id="senha"/> HTML GERADO <label for ="j_idt6:senha">senha : </label> <input id="j_idt6:senha "type ="password "name="j_idt6:senha"value=""/> RESULTADO 81

Campos Ocultos Podemos adicionar informações que são submetidas automaticamente quando um formulário é enviado ao servidor. Essas informações podem ser inseridas com o componente <h:inputhidden>. Essa tag possui dois atributos principais: value e id. Podemos vincular um campo oculto a uma propriedade de um managed bean, <h:inputhidden id="curso-id"value="#{cursosbean.curso.id}"/> 82

Caixas de Seleção <h:selectbooleancheckbox> Permite que o usuário faça seleções do tipo sim ou não. <h:selectmanycheckbox> Permite que o usuário faça múltiplas seleções do tipo sim ou não. <h:selectoneradio>, <h:selectonemenu>, <h:selectonelistbox> Permitem a seleção de uma única opção de um conjunto de opções. <h:selectmanylistbox>, <h:selectmanymenu> Possibilita a seleção de diversas opções de um conjunto de opções. 83

Caixas de Seleção Podemos vincular uma caixa de seleção a uma propriedade de um managed bean através do atributo value. exemplo: uma caixa de seleção é associada à propriedade aceito do managed bean ContratoBean. <h:selectbooleancheckbox value="#{contratobean.aceito}"/> Caixas de seleção do tipo <h:selectbooleancheckbox> devem ser vinculadas a propriedades booleanas. 84

Caixas de Seleção Opções de uma caixa de seleção (exceto <h:selectbooleancheckbox>) podem ser definidas estática ou dinamicamente. Estaticamente, cada opção pode ser adicionada através da tag <f:selectitem> <h:selectonemenu value ="#{cursosbean.sigladocursoescolhido }"> <f:selectitem itemvalue="c01" itemlabel="orientação a Objetos em Java"> <f:selectitem itemvalue="c02" itemlabel="desenvolvimento Web com JSF2"> </h:selectonemenu> itemvalue define o que será enviado para a aplicação se a opção correspondente for selecionada. itemlabel define a descrição associada à opção correspondente. Essa descrição é exibida para o usuário. 85

Caixas de Seleção Dinamicamente <h:selectonemenu value="#{cursosbean.sigladocursoescolhido}"> <f:selectitems value ="#{cursosbean.cursos}" var ="curso" itemvalue ="#{curso.sigla}" itemlabel ="#{curso.nome}"> </h:selectonemenu> A atributo value da tag <f:selectitems> deve ser associado a uma coleção de itens. Todos os itens serão percorridos e adicionados como opção na caixa de seleção. O atributo var é utilizado para definir a variável que armazenará, a cada rodada, o item atual. Essa variável permite que o itemvalue e o itemlabel de cada opção sejam definidos. 86

Seleção Única <h:selectonelistbox value="#{cursosbean.sigladocursoescolhido}"> <f:selectitems value ="#{cursosbean.cursos}" var ="curso" itemvalue ="#{curso.sigla}" itemlabel ="#{curso.nome}"> </h:selectonelistbox> @ManagedBean public class CursosBean { private String sigladocursoescolhido; private List <Curso > cursos ; // GETTERS E SETTERS } public class Curso { private String sigla ; private String nome ; } // GETTERS E SETTERS 87

Seleção Múltipla <h:selectmanylistbox value="#{cursosbean.sigladocursoescolhidos}"> <f:selectitems value ="#{cursosbean.cursos}" var ="curso" itemvalue ="#{curso.sigla}" itemlabel ="#{curso.nome}"> </h:selectmanylistbox> @ManagedBean public class CursosBean { private List<String> sigladocursoescolhidos; private List <Curso > cursos ; // GETTERS E SETTERS } public class Curso { private String sigla ; private String nome ; // GETTERS E SETTERS } 88

Seleção com Pseudo-opção Caso seja para não apresentar nenhuma das opções disponíveis selecionada. <h:selectonemenu value="#{cursosbean.sigladocursoescolhido}"> <f:selectitem itemlabel ="Nenhum"noSelectionOption="true> <f:selectitems value ="#{cursosbean.cursos}" var ="curso" itemvalue ="#{curso.sigla}" itemlabel ="#{curso.nome}"> </h:selectonelistbox> Se essa pseudo-opção estiver selecionada no momento em que o formulário for submetido, a propriedade correspondente receberá o valor null. Muitas vezes, a pseudo-opção é utilizada simplesmente para exibir uma mensagem ao usuário, como Escolha uma opção ou Selecione um item. 89

Exemplos XMTML <h:outputlabel value="ex-aluno"for="exaluno"/> <h:selectbooleancheckbox value ="#{cursosbean.exaluno}" id="exaluno"/> HTML GERADO <label for ="j_idt6:exaluno">ex-aluno</ label > <input id="j_idt6:exaluno"type="checkbox" name="j_idt6:exaluno"/> RESULTADO 90

Exemplos XMTML <h:selectmanycheckbox value="#{cursosbean.siglasdoscursosescolhidos}" layout ="pagedirection "> <f:selectitems value ="#{cursosbean.cursos}" var="curso" itemvalue="#{curso.sigla}" itemlabel="#{curso.nome}"/> </h: selectmanycheckbox > 91

Exemplos HTML GERADO <table > <tr > <td > <input name="j_idt6:j_idt27"id="j_idt6:j_idt27:0"value="c01" type="checkbox "/> <label for ="j_idt6:j_idt27:0"class=""> Orientação a Objetos em Java </label > </td > </tr > <tr > <td > <input name ="j_idt6:j_idt27"id="j_idt6:j_idt27:1"value ="C02" type ="checkbox "/> <label for ="j_idt6:j_idt27:1"class =""> Desenvolvimento Web com JSF2 e JPA2</label > </td > </tr > <tr > <td > <input name ="j_idt6:j_idt27"id="j_idt6:j_idt27:2"value ="C03" type ="checkbox"/> <label for="j_idt6:j_idt27:2"class=""> Design Patterns em Java </label> </td> </tr> </table> 92

Exemplos RESULTADO 93

Exemplos XMTML <h:selectoneradio value="#{cursosbean.siglasdoscursosescolhidos}" layout ="linedirection "> <f:selectitems value ="#{cursosbean.cursos}" var="curso" itemvalue="#{curso.sigla}" itemlabel="#{curso.nome}"/> </h:selectoneradio > RESULTADO 94

Exemplos XMTML <h:selectonemenu value="#{cursosbean.siglasdoscursosescolhidos}"> <f:selectitem itemlabel="escolha um curso" noselectionoption="true" <f:selectitems value ="#{cursosbean.cursos}" var="curso" itemvalue="#{curso.sigla}" itemlabel="#{curso.nome}"/> </h:selectonemenu > RESULTADO 95

Exemplos XMTML <h:selectonelistbox value="#{cursosbean.siglasdoscursosescolhidos}"> <f:selectitems value ="#{cursosbean.cursos}" var="curso" itemvalue="#{curso.sigla}" itemlabel="#{curso.nome}"/> </h:selectonelistbox > RESULTADO 96

Exercícios Crie um projeto Web ExercJSF01 Crie uma classe chamada Pessoa, contendo como atributos nome (string) e idade (int). Crie os métodos get/set public class Pessoa { private String nome; private String idade; // get e set Crie uma classe PessoaBean contendo como atributo pessoa e pessoas (lista de Pessoa) além dos métodos get/set. No construtor, crie alguma objetos Pessoa e adicione a pessoas 97

Exercícios Crie a página pessoa.xhtml contendo um formulário para o usuário digitar e enviar o nome e a sua idade. Faça um teste. Acrescente em pessoa.xhtml o trecho de código para exibir os dados do usuário: O nome do usuário é <b>#{pessoabean.pessoa.nome}</b> e sua idade é <b>#{pessoabean.pessoa.idade}</b>. 98

Exercícios Crie o método cadastrarpessoa em PessoaBean que vai adicionar a pessoa na lista de pessoas. 99

Exercícios Crie uma classe ConversorMonetário, contendo três atributos: as String de, para, e o Double valor. Adicione um método para converter e um para armazenar o resultado da conversão. 100

public class ConversorMonetarioBean { private String de; private String para; private Double valor; private Double resultado; private Map<String, Double> taxas = new LinkedHashMap<String, Double>(); /** * Creates a new instance of ConversorMonetarioBean */ public ConversorMonetarioBean() { this.taxas.put("real", 1.0); this.taxas.put("dolar", 1.84); this.taxas.put("euro", 2.33); this.taxas.put("peso", 0.42); } public void converte() { this.resultado = valor * taxas.get(de) / taxas.get(para); } 101

Exercícios Crie o arquivo conversor-monetario.xhtml 102

Botões e Links <h:commandbutton> e <h:commandlink> Enviam os dados de um formulário HTML para o servidor através do método POST do HTTP. <h:button> e <h:link> Realizam requisições HTTP do tipo GET. As URLs das requisições são geradas pelo JSF a partir do atributo outcome. <h:outputlink> Também realiza requisições HTTP do tipo GET, mas exige que a URL de destino seja explicitamente especificada. 103

Botões e Links Os componentes <h:commandbutton> e <h:commandlink> são usados para submeter formulários HTML por meio do método POST do HTTP. Esses dois componentes podem ser associados a métodos de ação de um managed bean através dos atributos action e actionlistener. <h:commandbutton value ="Adiciona curso" action ="#{cursosbean.adicionacurso}"/> <h:commandlink value ="Remove curso" action="#{cursosbean.removecurso }"/> 104

Textos Para inserir textos em uma página, podemos usar os componentes <h:outputtext> e <h:output-format>. O texto exibido por tais componentes é definido pelo atributo value. <h:outputformat> permite diversos tipos de formatação do texto que será exibido. <h:outputformat value="preço do produto {0} : R$ {1} "> <f:param value="#{lojabean.produto.nome }"/> <f:param value="#{lojabean.produto.preco }"/> </h:outputformat> 105

Imagens O componente <h:graphicimage> é usado para inserir imagens. Podemos indicar o caminho da imagem através dos atributos value ou url. Esses dois atributos são exatamente iguais. <h:graphicimage value ="/imagens/teste.png"/> Pode ser usada uma biblioteca de imagens. Criar um diretório na pasta /resources e adicionar as imagens nele. Ex: diretório /resources/imagens <h:graphicimage library="imagens"name ="teste.png"/> 106

Exercício No arquivo conversor-monetario.xhtml, use a tag <h:outputformat> para exibir o resultado do conversormonetário. <h:outputformat value=" {0} em {1} equivale a {2} em {3} " rendered ="#{conversormonetariobean.resultado!= null }"> <f:param value="#{conversormonetariobean.valor }"/> <f:param value="#{conversormonetariobean.de}"/> <f:param value="#{conversormonetariobean.resultado }"/> <f:param value="#{conversormonetariobean.para }"/> </h:outputformat> 107

Componentes de Organização <h:panelgrid> Organiza os elementos em uma grade. <h:panelgroup> Permite que diversos componentes sejam tratados como um único componente. <h:panelgrid> - organiza componentes em forma de uma grade. atributo columns - configura a quantidade de colunas 108

Exemplo <h:panelgrid columns ="2"> <h:outputlabel value ="Nome do curso:"for="nome"/> <h:inputtext value ="#{cursosbean.curso.nome}"id="nome"/> <h:outputlabel value="descrição:"for="descricao"/> <h:inputtextarea value="#{cursosbean.curso.descricao}" id="descricao"/> <h:outputlabel value="carga horária:"for="carga-horaria"/> <h:inputtext value ="#{cursosbean.curso.cargahoraria}" id="carga-horaria "/> <h:commandbutton action ="#{cursosbean.cadastracurso}" value ="Cadastrar"/> </h:panelgrid > 109

PanelGroup Usado para inserir mais de um componente em uma mesma célula de um <h:panelgrid>. Ex: adicionar um ícone de um relógio ao lado do rótulo Carga horária: (imagem e o rótulo na mesma célula) <h:panelgroup> <h:outputlabel value="carga horária:"for="carga-horaria"/> <h:graphicimage library ="imagens"name="relogio.png"/> </h: panelgroup > 110

Tabelas <h:datatable> usado para a criação de tabelas. Associação de uma lista de elementos a um <h:datatable> é feita através do atributo value. O componente gera uma linha para cada item da lista. Os itens da lista podem ser acessados através de uma variável definida pelo atributo var. 111

Exemplo <h:datatable value ="#{cursosbean.cursos}"var ="curso"> <f:facet name ="header">lista de cursos </f:facet > <h:column > <f:facet name ="header">sigla </f:facet > #{curso.sigla} </h:column > <h:column > <f:facet name ="header">nome </f:facet > #{curso.nome } </h:column > <h:column > <f:facet name ="header">descrição </f:facet > #{curso.descricao } </h:column > <h:column > <f:facet name ="header">adicionar turma </f:facet > <h:commandlink value ="Adicionar turma" action ="#{cursosbean.adicionarturma(curso)}"/> </h:column > </h:datatable > 112

Exemplo Resultado 113

Exercício Criar uma relação de pessoas participantes do curso. Criar uma classe para modelar as pessoas (Pessoa) Criar um managed bean que forneça a lista de pessoas para uma tela de listagem de pessoas. (PessoaBean) Criar uma tela parcial para mostrar dados apenas de uma pessoas dentro de um item de uma lista html. (pessoainfo.xhmtl) Criar uma tela principal de listagem de pessoas (listapessoas.xhtml) 114

Pessoa public class Pessoa { private String nome; private String dtnasc; public String getdtnasc() { return dtnasc; } public void setdtnasc(string dtnasc) { this.dtnasc = dtnasc; } public String getnome() { return nome; } } public void setnome(string nome) { this.nome = nome; } 115

PessoaBean @ManagedBean @RequestScoped public class PessoaBean { private List <Pessoa> pessoas = new ArrayList <Pessoa>() ; /** * Creates a new instance * of PessoaBean */ public PessoaBean() { Pessoa p = new Pessoa(); p.setnome("ana Maria"); p.setdtnasc("10/10/10"); this.pessoas.add(p); p = new Pessoa(); p.setnome("jose Maria"); p.setdtnasc("10/10/10"); this.pessoas.add(p); } p = new Pessoa(); p.setnome("maria Jose"); p.setdtnasc("10/10/10"); this.pessoas.add(p); p = new Pessoa(); p.setnome("mariana"); p.setdtnasc("10/10/10"); this.pessoas.add(p); public List<Pessoa> getpessoas() { return pessoas; } public void setpessoas (List<Pessoa> pessoas) { this.pessoas = pessoas; } } 116

pessoainfo.xhtml <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"> <li > <h:outputtext value ="Nome: #{pessoa.nome }"/> <br/> <h:outputtext value ="Data Nascimento: #{pessoa.dtnasc}"/> </li > </ui:composition > 117

listapessoas.xhtml <?xml version='1.0' encoding='utf-8'?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <ui:composition template ="/WEB-INF/TEMPLATES/template.xhtml" xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"> <ui:define name ="conteudo"> <h:outputlabel value="lista de Pessoas" style="color:red" /> <ul> <ui:repeat var ="pessoa" value ="#{pessoabean.pessoas}"> <ui:include src ="pessoainfo.xhtml "> <ui:param name ="pessoa" value ="#{pessoa}"/> </ui:include > </ui:repeat > </ul > </ui:define > </ui:composition > 118

Mensagens Durante o processamento de uma requisição, podemos adicionar mensagens que podem ser exibidas na página de resposta. FacesMessage mensagem = new FacesMessage ("Turma adicionada"); FacesContext.getCurrentInstance().addMessage (null,mensagem ); O primeiro parâmetro do método addmessage() define qual componente será associado à mensagem adicionada. null indica que a mensagem é considerada global, ou seja, ela não será associada a nenhum componente específico 119

Mensagens Na tela, para exibir todas as mensagens geradas no processamento da requisição através do componente <h:messages>. Para exibir apenas as mensagens globais, utilize o atributo globalonly <h:messages globalonly="true" /> 120

JavaScript e CSS Podemos adicionar recursos como scripts e arquivos de estilos (CSS) usando diretamente as tags <script> e <link> do HTML. Porém, o JSF define outra maneira de inserir esses recursos nas páginas da aplicação. Tais recursos podem ser inseridos com as tags <h:outputscript> e <h:outputstylesheet>. A utilização dessas tags facilita a criação de componentes visuais personalizados ou o gerenciamento de recursos que dependem de regionalidade. <h:outputscript name ="tst.js" library ="javascript" target="head" /> <h:outputstylesheet name="tst.css" library ="css" /> 121

Exercício No diretório WebContent, crie um diretório chamado resources. Dentro de resources, crie um diretório chamado css. Crie um arquivo chamado teste.css contendo o estilo desejado e adicione-o ao diretório WebContent/resources/css. 122

Exercício body { font-family : arial, helvetica, sans-serif ; font-size : 14px; } h1 { color : #006699; font-size : 18px; } ul { list-style-type : square ; } input { background-color : #E6E6FA ; border : solid 1px #000000; } 123

Exercício Use a tag <h:outputstylesheet> para incluir o arquivo de estilos na página definida por pessoas.xhtml. Use a tag <ui:repeat> para exibir as pessoas. <h:outputstylesheet name="teste.css" library="css"/> 124

Exercício Considere a página de adição e listagem de pessoas. Modifique sua aplicação de forma que uma mensagem de confirmação seja exibida na tela após o usuário adicionar uma nova pessoa. 125

Outros componentes <ui:remove> comentar (ou excluir) partes de código XHTML de uma aplicação o trecho de código dentro dessa tag é removido durante o processamento de uma página JSF. podemos usar os delimitadores <!-- e --> do XML para comentar o código <ui:remove > <h:outputtext value="sobrenome: #{testebean.sobrenome}" /> </ui:remove > 126

Outros componentes <ui:repeat> iterar sobre coleções. Possui dois atributos obrigatórios: value: associa-se a uma coleção de objetos var: define o nome da variável usada para referenciar cada um dos elementos da coleção. <h:outputtext value =" Alguns cursos: " /> <ul > <ui repeat value ="#{testebean.cursos }" var = curso"> <li > <h:outputtext value ="#{ curso.sigla }: #{ curso.nome }" /> </li > </ui:repeat > </ul > 127