Desenvolvimento de Software para WEB

JSF (JavaServer Faces) Parte 2

Prof. Regis Pires Magalhes regispires@lia.ufc.br

Agradecimentos
Agradecemos ao Prof. Fbio Dias (UFC Quixad) por ter gentilmente cedido seus slides para adaptao e uso nesta disciplina.

Introduo
Managed Beans representam classes java que so automaticamente criadas, inicializadas e armazenadas no escopo apropriado quando solicitados Essa facilidade permite:
Declarar e inicializar as propriedades de um bean em um arquivo central (faces-config) Controlar facilmente o escopo onde o bean armazenado Modificar uma classe ou propriedade do bean sem recompilar cdigo Inicializar um bean com Value Binding Expressions Acessar um bean utilizando simples expresses da JSF EL

Managed Beans
package br.ufc.dsweb.controller; @ManagedBean(name="loginController") @RequestScoped public class LoginController {
private Login login = new Login();

//Metodos gets e sets }

annotations

O bean pode ser acessado na pgina atravs de uma valuebinding expression

index.xhtml

<h:inputText value="#{loginControler.login.nome}"/>

Managed Beans
<managed-bean> <managed-bean-name>loginController</managed-bean-name> <managed-beanclass>br.ufc.dsweb.controller.LoginController</managed-beanclass> <managed-bean-scope>request</managed-bean-scope> </managed-bean> faces-config.xml

O bean pode ser acessado na pgina atravs de uma valuebinding expression

login.jsp

<h:inputText value="#{loginControler.login.nome}"/>

Configurao
A configurao de um bean pode ser feita no faces-config.xml atravs do elemento managedbean:

Descrio do bean Nome utilizado por ferramentas GUI cone utilizado por ferramentas GUI Nome lgico para acessar o bean Nome da classe que representa o bean Escopo onde o bean ser armazenado

Escopos do Managed-Bean
Existem 4 escopos a partir do JSF 2:
@RequestScoped: os beans gerenciveis de escopo request so instanciados e permanecem disponveis durante uma mesma requisio HTTP. @ViewScoped: os beans gerenciveis de escopo view permanecem disponveis enquanto o usurio permanecer em uma mesma pgina de uma aplicao. @SessionScoped: os beans gerenciveis de escopo session so salvos na sesso HTTP de um usurio. @ApplicationScoped: os beans gerenciveis de escopo application permanecem disponveis enquanto a aplicao estiver no ar, e podem ser acessados por todos os usurios da aplicao.

Value-Binding Expressions
Diversos componentes de interface possuem um atributo chamado value, que permite especificar:
Um valor diretamente:
<h:outputText value=Ol Pessoal"/>

Uma ligao com uma propriedade de um bean(valuebinding):

<h:outputText value=#{loginBean.nome}"/>

Value-Binding Expressions
No segundo caso, utilizando JSF EL JSF Expression Language. A JSF EL foi criada para ser utilizada dentro de uma value-binding expression:

Utilizando JSF EL, o valor associado ao atributo pode ser utilizado tanto para leitura, quanto para escrita:
Propriedade get chamada ao desenhar o componente. Propriedade set chamada quando a resposta do usurio processada.

Value-Binding Expressions
Inclusive, possvel efetuar um encadeamento acessando beans contidos dentro de outros beans Utiliza-se o ponto como separador
<h:outputText value=#{pessoa.endereco.cidade}"/>

No exemplo acima, um bean pessoa possui um bean como propriedade chamado endereco, que possui uma propriedade chamada cidade.

Java Server Faces

Navegao

Introduo
Pginas so associadas a nomes lgicos Os nomes lgicos so utilizados para efetuar um redirecionamento para as pginas

Introduo
O exemplo abaixo mostra uma navegao de uma pgina de origem (login.xhtml) para dois possveis destinos (error.xhtml ou saudacao.xhtml).
Nomes lgicos das pginas de destino

Pgina de origem

Possveis pginas de destino

Navegao
A navegao opera de acordo com eventos de ao disparados por fontes de ao. Fontes de ao capturam uma ao do usurio
Exemplos de fontes: botes, links

Uma fonte de ao associada a um:

Mtodo de ao, que executa a lgica de aplicao e retorna o nome lgico da pgina a ser exibida. Nome lgico, que pode ser especificado diretamente na fonte de ao

Navegao
Exemplo de nome lgico em mtodo de ao:
<h:commandButton type="submit" value="Enviar action="#{loginController.efetuarLogin}"/>

public String efetuarLogin(){

if(login.equals("fabio") && senha.equals("12345")) return "sauda"; else

return "falha";
}

Exemplo de nome lgico hard-coded na pgina.

<h:commandButton type="submit" value="Enviar action=sauda"/>

Regras de Navegao
A navegao do JSF opera com base em um conjunto de regras de navegao (elemento navigation-rule do faces-config.xml)
Regras de navegao definem que pginas podem ser alcanadas a partir de outras pginas

Cada caminho para uma pgina representado por um elemento navigation-case do faces-config.xml
O navigation geralmente selecionado com base no nome lgico solicitado.

Regras de Navegao
Configurao
Define uma regra de navegao
Opcionalmente especifica a pgina de origem qual a regra se aplica

Define qual mtodo de ao pode chamar esta pgina Nome lgico dado ao recurso

Pgina seguinte a ser carregada

Redirecionamento Global e Local

Com base nas configuraes que podem ser efetuadas, os redirecionamentos podem ser de dois tipos:
Redirecionamento local
Busca as pginas de redirecionamento a partir de uma pgina especfica, definida no elemento from-view-id

Redirecionamento global
Busca pginas de redirecionamento definidas globalmente, ou seja, no associadas a uma pgina de origem em especfico

Redirecionamento Local
Para o redirecionamento local, trs situaes podem ser definidas:
1. Apenas usando um nome lgico especfico 2. Usando um nome lgico e vindo de um mtodo de ao 3. Apenas vindo de um mtodo de ao especificado

Redirecionamento Local
Nome Lgico Especfico
O esquema mais simples definir um nome lgico para redirecionamento a partir de uma pgina. Para isso, basta incluir: No from-view-id: a pgina de onde se est redirecionando No from-outcome: o nome lgico da prxima pgina
<navigation-rule> <from-view-id>/login.xhtml</from-view-id>

<navigation-case>
<from-outcome>sauda</from-outcome> <to-view-id>/saudacao.xhtml</to-view-id> </navigation-case>

</navigation-rule>

Redirecionamento Local
Nome Lgico + Ao Para garantir que o nome lgico foi chamado a partir de um mtodo de ao especfico, deve-se utilizar o elemento from-action.
til quando deseja-se diferenciar dois mtodos de ao que produzem um mesmo nome lgico
<from-view-id>/login.xhtml</from-view-id> <navigation-case> <from-action>#{loginBean.efetuarLogin}</from-action> <from-outcome>sauda</from-outcome> <to-view-id>/saudacao.xhtml</to-view-id> </navigation-case> </navigation-rule>

<navigation-rule>

Redirecionamento Local
Ao Especfica

Pode-se ainda definir que sempre que um mtodo de ao seja executado, ele ir chamar uma determinada pgina.
Para isso, define-se apenas o elemento fromaction, sem o from-outcome.

<navigation-rule> <from-view-id>/login.xhtml</from-view-id> <navigation-case> <from-action>#{loginBean.efetuarLogin}</from-action> <to-view-id>/saudacao.xhtml</to-view-id> </navigation-case> </navigation-rule>

Redirecionamento Global
Para o redirecionamento global, duas situaes podem ser definidas:
1. O redirecionamento vir de qualquer pgina 2. O redirecionamento vir de um grupo de pginas

Redirecionamento Global
Qualquer Pgina As regras de navegao podem ser definidas de forma que um nome lgico pode ser utilizado por qualquer pgina
Para isso, deve-se utilizar o wildcard (*) no elemento from-view-id ou simplesmente no definir este elemento

Redirecionamento Global
Qualquer Pgina
<navigation-rule> <from-view-id>*</from-view-id> <navigation-case> <from-outcome>login</from-outcome> <to-view-id>/login.xhtml</to-view-id> </navigation-case> </navigation-rule> <navigation-rule> <navigation-case> <from-outcome>logout</from-outcome> <to-view-id>/logout.xhtml</to-view-id> </navigation-case> </navigation-rule> Ou no definir o elemento from-view-id Pode-se usar o *

Redirecionamento Global
Grupo de Pginas

As regras de navegao podem definidas de forma que um nome lgico pode ser utilizado por um grupo de pginas
Para isso, deve-se utilizar o wildcard (*) no elemento from-view-id sempre como sufixo

Redirecionamento Global
Grupo de Pginas
<navigation-rule> <from-view-id>/funcionario/*</from-view-id> <navigation-case> Pode-se aplicar o * para referenciar <to-view-id>/sucesso.xhtml</to-view-id> pginas em um </navigation-case> diretrio </navigation-rule> Pode-se aplicar o * para <navigation-rule> um conjunto de recursos <from-view-id>/cadastro*</from-view-id> que iniciam com um prefixo qualquer <navigation-case> <from-outcome>sucesso</from-outcome> <from-outcome>erroCadastro</from-outcome> <to-view-id>/erro.xhtml</to-view-id> </navigation-case> </navigation-rule>

Navegao Implcita
No precisamos definir um nome lgico para as pginas, apenas retornar o nome absoluto da pgina.
public String efetuarLogin(){ if(login.equals("fabio") && senha.equals("12345"))

return "saudacao.xhtml";
else return "error.xhtml"; } <h:commandButton type="submit" value="Enviar action=saudacao.xhtml"/>

Java Server Faces

Tags Padro da JSF Parte 1

Introduo
O desenvolvimento de aplicaes que utilizem a tecnologia JSF requer um bom conhecimento das bibliotecas de tags da JSF As bibliotecas padro da JSF possuem um total de 43 tags e so divididas em duas bibliotecas:
Core
Representam tags genricas independentes da forma de renderizao (visualizao) dos dados

HTML
Representam tags especficas para renderizao de pginas HTML

Introduo
Assim como outras bibliotecas de tags, as Tags JSF precisam ser declaradas na pgina para poderem ser utilizadas
O prefixo padro das tags Core f O prefixo padro das tags HTML h

Sintaxe:
xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html

As tags core so abordadas aos poucos durante o desenvolvimento das aplicaes, sendo assim, focaremos nas tags html

Tags JSF HTML

As tags HTML servem para representar diversos tipos de componentes apresentados em uma pgina:
Inputs Outputs Comandos Seleo Outros

Tags JSF HTML

Categoria
Entrada de dados Sada de dados Comandos Selees

Tags
inputText, inputTextArea, inputSecret, inputHidden outputLabel, outputLink, outputFormat, outputText commandButton, commandLink selectOneListbox, selectOneMenu, selectOneRadio, selectBooleanCheckbox, selectManyCheckbox, selectManyListbox, selectManyMenu panelGrid, panelGroup dataTable, column form, graphicImage

Layout Tabela de dados Outras

Tags JSF - HTMl

h:form
<h:form> ... </h:form>

Tags JSF HTML

Componentes Campos Textuais JSF possui suporte para trs tipos de campos textuais (campos de entrada de dados):
h:inputText h:inputSecret h:inputTextArea

Tags JSF HTML

Componentes Campos Textuais
<h:inputText value="#{bean.testeString}" readonly="true"/>
<h:inputSecret value="#{bean.testeString}" redisplay="true"/> <h:inputSecret value="#{bean.testeString}" redisplay=false"/> <h:inputText value="inputText" style="color: Yellow; background: Teal;"/>

<h:inputText value="1234567890" maxlength="6" size="10"/>

<h:inputTextarea value="123456789012345" rows="3" cols="10"/>

Tags JSF HTML

Componentes Exibindo Textos e Imagens JSF possui suporte trs tipos de campos de exibio de textos e imagens:
h:outputText h:outputFormat h:graphicImage

h:outputText
Considerado um elemento a ser contado para uso de h:panelGrid. Mais seguro. Permite o uso de CSS especfico. Permite o uso de conversores.

<h:outputText value="#{automovel.preco}"> <f:convertNumber type="currency" /> </h:outputText>

h:outputText
Isso d erro em uma pgina .xhtml processada pelo JSF:
<p>a&ccedil;&atilde;o</p>
Error Parsing /login.xhtml: Error Traced[line: 47] A entidade "ccedil" foi referenciada, mas no declarada. Ele interpreta como uma entidade xml.

Soluo:
<p> <h:outputText value="a&amp;ccedil;&amp;atilde;o" escape="false" /> </p>

Resultado:
ao

Tags JSF HTML

Componentes Exibindo Textos e Imagens
<h:outputText value="Number #{bean.number}"/> <h:outputText value="<input type=text value=hello/>"/>
<h:outputText value="<input type=text value=hello/> escape="true"/> <h:outputFormat value="{0} tem {1} anos"> <f:param value=Carla"/> <f:param value=18"/> </h:outputFormat>
Carla tem 18 anos

JSF Textos e Imagens

<h:outputFormat value="Hoje {0, date, medium}."> <f:param value="#{bean.data}"/> </h:outputFormat><br> <h:outputFormat value="Hoje {0, date, dd-MM-yyyy}."> <f:param value="#{bean.data}"/> </h:outputFormat>
Hoje 17/Set/2010. Hoje 17-09-2010.

<h:graphicImage value="/images/ufc.jpg" />

<h:graphicImage library="images" value="ufc.jpg" />

Tags JSF HTML

Componentes Campos Hidden JSF possui suporte para o campo hidden atravs da tag:
h:inputHidden

Ela possui os mesmos atributos bsicos das outras sendo o mais importante o value

JSF Botes e Links

JSF possui suporte cinco tipos de botes e/ou links: h:commandButton h:commandLink h:outputLink h:link h:button Os dois primeiros representam componentes de comando: Disparam aes quando clicados/selecionados O 3 til para a incluso de links simples na pgina: Apontam para recursos sem envolver JSF. Usa mtodo GET do HTTP. A URL da requisio definida explicitamente e no tratada pelo JSF. til para acesso a pginas externas aplicao.

JSF Botes e Links

JSF possui suporte cinco tipos de botes e/ou links: h:commandButton h:commandLink h:outputLink h:link h:button Os dois ltimos tambm realizam requisies atravs do mtodo GET do HTTP. Usam o atributo outcome para definir a pgina de destino.

JSF Botes e Links

<h:commandButton value="Adiciona curso" action ="#{cursosBean.adicionaCurso}"/> <h:commandLink value="Remove curso" action ="#{cursosBean.removeCurso}"/> <h:button value="Lista de cursos" outcome="lista_cursos" /> <h:link value="Home" outcome="home" />

<h:outputLink value="http://www.ufc.br"/>

Tags JSF HTML

Componentes Botes e Links Os componentes de comando possuem alguns atributos particulares:
Atributo
action

Descrio
Nome lgico definido no face-config para redirecionamento ou mtodo que executar a ao e retornar uma string com o redirecionamento

actionListener

Method-binding especificando o mtodo: void nome(ActionEvent)

image type value

Caminho para imagem especificada em um commandButton (/app/img.gif) Tipo de boto gerado (commandButton):button, submit, reset Valor expresso no boto ou link (imagem)

Tags JSF HTML

Componentes Botes e Links
<h:commandButton value="Clique neste Boto" onclick="alert('button clicked')" type="button"/>

<h:commandButton value="disabled" disabled="#{not bean.botaoHabilitado}"/>

<h:commandLink value=Clique para Entrar" action="#{loginController.efetuarLogin}"/>

<h:commandLink action="#{loginController.efetuarLogin}">
<h:outputText value="Clique para Entrar"/> <f:param name="nome" value="Fabio"/> <f:param name="id" value="#{loginBean.id}"/> </h:commandLink> Passando parmetros para o link

Tags JSF Organizao

Existem tags JSF que permitem gerar tabelas automaticamente e posicionar os componentes dentro dessas tabelas h:panelGrid
Cria tabelas

h:panelGroup
Trata vrios componentes como sendo um s

Tags JSF Organizao

No exemplo a abaixo, uma tabela ser criada contendo 2 colunas
O nmero de linha depende da quantidade de elementos inseridos no corpo da tag Cada elemento inserido da esquerda para a direita e de cima para baixo Caso no seja especificado, o nmero de colunas ser igual a 1
<h:panelGrid columns=2">
... </h:panelGrid>

Tags JSF Organizao

<h:panelGrid columns="2"> <h:outputText value="Nome:"/> <h:inputText value=#{...}" required="true"/> <h:outputText value=Idade:"/> <h:inputText value=#{...}" required="true"/>

<h:outputText value=Endereo:"/> <h:inputText value=#{...}" required="true"/> </h:panelGrid>

Tags JSF Organizao

Alguns outros atributos que podem ser especificados na tag panelGrid so descritos abaixo: Atributo Descrio
bgcolor border cellpadding/cellspacing columnClasses/rowClasses Cor de background Espessura da borda Espaamento interno/externo das clulas Classes CSS usadas para definir o estilo (no plural indica separao por vrgula)

Tags JSF Organizao

A tag panelGrid costuma ser utilizada em conjunto com a tag panelGroup Agrupar componentes faz com que sejam colocados em uma mesma clula da tabela
<h:panelGrid columns="2"> ... <h:panelGroup> <h:outputText value=Nome:/> <h:inputText id="name" value="#{usuarioBean.nome}"> </h:panelGroup> ... </h:panelGrid>

Tags JSF Organizao

<f:view><h:form> <h:panelGrid columns="2" rowClasses="oddRows,evenRows"> <h:outputText value="Nome:"/> <h:inputText id="name" required="true"/> <h:outputText value="CEP:"/> <h:panelGroup> <h:inputText size="6"/> <h:outputText value="-"/> <h:inputText size="3"/> </h:panelGroup> </h:panelGrid> <h:commandButton value="Enviar"/> </h:form></f:view>

Tags JSF Organizao

<style type="text/css"> .evenRows{

background: PowderBlue;
} .oddRows{ background: MediumTurquoise; } </style>

Tags JSF HTML

Componentes Formulrios Componentes de formulrio em JSF no apresentam os atributos method e action:
O mtodo sempre POST O action definido pelo comando disparado:
A navegao pode carregar outra pgina ou recarregar a mesma

Tags JSF HTML

Componentes Formulrios
<h:form> ... <h:inputText id="senha".../> <h:inputText id="confirmeSenha".../> ... <h:commandButton type="button" action=#{loginController.efetuarLogin}/> ... </h:form>

h:selectOneMenu, f:selectItem e f:selectItems

<h:selectOneMenu value="#{modeloBean.modelo.marca}"> <f:selectItem itemLabel="-- Selecione -- noSelectionOption="true"/> <f:selectItems value="#{marcaBean.marcas}" var="marca itemValue="#{marca}" itemLabel="#{marca.nome}"/> </h:selectOneMenu>

h:selectOneRadio
<h:selectOneRadio value="#{modeloBean.modelo.marca}"> <f:selectItems value="#{marcaBean.marcas}" var="marca" itemValue="#{marca}" itemLabel="#{marca.nome}" /> </h:selectOneRadio>

Layout line direction

Layout page direction

h:selectOneListbox
<h:selectOneListbox value="#{modeloBean.modelo.marca}" size="5"> <f:selectItems value="#{marcaBean.marcas}" var="marca" itemValue="#{marca}" itemLabel="#{marca.nome}" /> </h:selectOneListbox>

h:selectManyMenu
<h:selectManyMenu value="#{automovelBean.automovel.acessorios}"> <f:selectItems value="#{acessorioBean.acessorios}" var="acessorio" itemValue="#{acessorio}" itemLabel="#{acessorio.descricao}" /> </h:selectManyMenu>

h:selectManyListbox
<h:selectManyListbox value="#{automovelBean.automovel.acessorios}" size="5"> <f:selectItems value="#{acessorioBean.acessorios}" var="acessorio" itemValue="#{acessorio}" itemLabel="#{acessorio.descricao}" /> </h:selectManyListbox>

h:selectManyCheckbox
<h:selectManyCheckbox value="#{automovelBean.automovel.acessorios}"> <f:selectItems value="#{acessorioBean.acessorios}" var="acessorio" itemValue="#{acessorio}" itemLabel="#{acessorio.descricao}" /> </h:selectManyCheckbox>

Layout line direction

Layout page direction

h:selectBooleanCheckbox
<h:selectBooleanCheckbox value="#{usuarioBean.usuario.inativo}"/>

h:inputFile
<h:form enctype="multipart/form-data"> Imagem: <h:inputFile value="#{automovelBean.uploadedFile}"/> <h:commandButton value="Salvar" action="#{automovelBean.salvar}"/> </h:form>

h:inputFile recebendo o upload

public void class AutomovelBean { private javax.servlet.http.Part uploadedFile; private Automovel automovel; // getters e setters public void salvar(){ try { InputStream is = uploadedFile.getInputStream(); byte[] bytes = IOUtils.toByteArray(is); automovel.setImagem(bytes); em.persist(automovel); } catch (IOException e) { // tratar exceo } } }

Pasta resources
Pasta que ir conter todas as imagens, arquivos CSS e Javascript. Pode tanto estar na raiz do contexto web quanto na pasta META-INF dentro de um jar ou no classpath da aplicao.

Pasta resources
Para acessar esses arquivos usa os seguintes cdigos na sua pgina:
<h:head> <h:outputStylesheet library="css" name="nomeArquivoCSS.css"/> <h:outputScript library="js" name="nomeArquivoJS.js" /> </h:head> <h:graphicImage library="img" name="nomeArquivoImagem.gif"/>

h:outputScript e h:outputStylesheet
<h:outputStylesheet library="css" name="facesmotors.css"/> <h:outputScript library="js" name="facesmotors-commons.js" target="head"/>

Exerccios
Crie uma aplicao que exibe um formulrio de cadastro de medicamentos de uma farmcia e depois exibe em uma pgina os dados enviados O formulrio de cadastro deve conter os seguintes campos:
Nome de remdio (campo texto) Princpio ativo (campo texto) Observaes (rea) Boto de submisso para cadastro Link de submisso para cadastro Na tela inicial tem um link simples para o cadastro

Data Table

A tag dataTable
Para exibir tabelas de dados em uma pgina, podese utilizar a tag dataTable. A tag itera sobre uma lista de dados para criar um elemento table.
<h:dataTable value="#{bean.lista}" var="item"> <h:column>

<h:outputText value="#{item.nome}"/>
</h:column> <h:column> <h:outputText value="#{item.idade}"/> </h:column> </h:dataTable>

A tag dataTable
Atributos: value: lista contendo os dados a serem exibidos
Pode ser: vetor, List, ResultSet, DataModel

var: varivel temporria criada para acessar cada elemento da lista Tag column
A tag column representa uma coluna a ser criada na tabela No corpo da tag, especifica-se o valor da varivel (var) ou da propriedade presente na varivel que deseja-se exibir

A tag dataTable - Exemplo

<h:outputText value="#{pessoaController.nome}" />
<h:dataTable value="#{pessoaController.telefones}" var="fone"> <h:column> <h:outputText value="#{fone.tipo} :" />

</h:column>
<h:column> <h:outputText value="#{fone.numero}" /> </h:column>

</h:dataTable>

A tag dataTable - Exemplo

@ManagedBean
public class PessoaBean { private Pessoa pessoa = new Pessoa(); } public class Telefone{ private String tipo; private String numero; }

Cabealhos e Rodaps
Para especificar um cabealho e/ou um rodap, necessrio utilizar a tag <f:facet ...>.

Cabealhos e Rodaps
<h:dataTable value="#{pessoaController.telefones}" var="fone"> <h:column> <f:facet name="header">

<h:outputText value="Tipo" />

</f:facet> <h:outputText value="#{fone.tipo} :" /> </h:column>

<h:column>
<f:facet name="header"> <h:outputText value="Nmero" /> </f:facet>

<h:outputText value="#{fone.numero}" />

</h:column> </h:dataTable>

Cabealhos e Rodaps

Exerccio
1) Converta seu sistema de cadastro de pessoa utilizando JSF. Deve ter o mdulo de cadastro, atualizao, excluso e listagem.