Desenvolvimento de Software para WEB

Prévia do material em texto

Desenvolvimento de Software 
para WEB 
 
JSF (JavaServer Faces) – Parte 2 
Prof. Regis Pires Magalhães 
regispires@lia.ufc.br 
Agradecimentos 
• Agradecemos ao Prof. Fábio Dias (UFC Quixadá) 
por ter gentilmente cedido seus slides para 
adaptação e uso nesta disciplina. 
• Managed Beans representam classes java que são 
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 código 
▫ Inicializar um bean com Value Binding Expressions 
▫ Acessar um bean utilizando simples expressões da JSF 
EL 
Introdução 
Managed Beans 
package br.ufc.dsweb.controller; 
@ManagedBean(name="loginController") 
@RequestScoped 
public class LoginController { 
private Login login = new Login(); 
//Metodos gets e sets 
} 
<h:inputText value="#{loginControler.login.nome}"/> 
annotations 
O bean pode ser acessado na 
página através de uma value-
binding expression 
index.xhtml 
Managed Beans 
<managed-bean> 
 <managed-bean-name>loginController</managed-bean-name> 
 <managed-bean-
class>br.ufc.dsweb.controller.LoginController</managed-bean-
class> 
 <managed-bean-scope>request</managed-bean-scope> 
</managed-bean> 
<h:inputText value="#{loginControler.login.nome}"/> 
faces-config.xml 
O bean pode ser acessado na 
página através de uma value-
binding expression 
login.jsp 
• A configuração de um bean pode ser feita no 
faces-config.xml através do elemento managed-
bean: 
 
Configuração 
Descrição do bean 
Nome utilizado por ferramentas GUI 
Ícone utilizado por ferramentas GUI 
Nome lógico para acessar o bean 
Nome da classe que representa o bean 
Escopo onde o bean será armazenado 
• Existem 4 escopos a partir do JSF 2: 
▫ @RequestScoped: os beans gerenciáveis de escopo 
request são instanciados e permanecem disponíveis 
durante uma mesma requisição HTTP. 
▫ @ViewScoped: os beans gerenciáveis de escopo view 
permanecem disponíveis enquanto o usuário permanecer 
em uma mesma página de uma aplicação. 
▫ @SessionScoped: os beans gerenciáveis de escopo 
session são salvos na sessão HTTP de um usuário. 
▫ @ApplicationScoped: os beans gerenciáveis de escopo 
application permanecem disponíveis enquanto a aplicação 
estiver no ar, e podem ser acessados por todos os usuários 
da aplicação. 
Escopos do Managed-Bean 
• Diversos componentes de interface possuem um 
atributo chamado value, que permite especificar: 
▫ Um valor diretamente: 
 
 
▫ Uma ligação com uma propriedade de um bean(value-
binding): 
 
Value-Binding Expressions 
<h:outputText value=“Olá Pessoal"/> 
<h:outputText value=“#{loginBean.nome}"/> 
• 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 usuário 
é processada. 
Value-Binding Expressions 
• Inclusive, é possível efetuar um encadeamento 
acessando beans contidos dentro de outros beans 
• Utiliza-se o ponto como separador 
 
 
• No exemplo acima, um bean pessoa possui um bean 
como propriedade chamado endereco, que possui 
uma propriedade chamada cidade. 
 
 
Value-Binding Expressions 
<h:outputText value=“#{pessoa.endereco.cidade}"/> 
Java Server Faces 
 
Navegação 
• Páginas são associadas a nomes lógicos 
 
• Os nomes lógicos são utilizados para efetuar um 
redirecionamento para as páginas 
 
Introdução 
• O exemplo abaixo mostra uma navegação de uma 
página de origem (login.xhtml) para dois possíveis 
destinos (error.xhtml ou saudacao.xhtml). 
Introdução 
Nomes lógicos das páginas de destino 
Página de origem 
Possíveis páginas de destino 
• A navegação opera de acordo com eventos de 
ação disparados por fontes de ação. 
• Fontes de ação capturam uma ação do usuário 
▫ Exemplos de fontes: botões, links 
• Uma fonte de ação é associada a um: 
▫ Método de ação, que executa a lógica de aplicação e 
retorna o nome lógico da página a ser exibida. 
▫ Nome lógico, que pode ser especificado diretamente 
na fonte de ação 
Navegação 
• Exemplo de nome lógico em método de ação: 
Navegação 
<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 lógico hard-coded na página. 
<h:commandButton type="submit" value="Enviar“ action=“sauda"/> 
• A navegação do JSF opera com base em um 
conjunto de regras de navegação (elemento 
navigation-rule do faces-config.xml) 
▫ Regras de navegação definem que páginas podem 
ser alcançadas a partir de outras páginas 
• Cada caminho para uma página é representado por 
um elemento navigation-case do faces-config.xml 
▫ O navigation geralmente é selecionado com base no 
nome lógico solicitado. 
Regras de Navegação 
Regras de Navegação 
Configuração 
Define uma regra de navegação 
Opcionalmente especifica a página de origem à 
qual a regra se aplica 
Define qual método de ação pode chamar 
esta página 
Nome lógico dado ao recurso 
Página seguinte a ser carregada 
• Com base nas configurações que podem ser 
efetuadas, os redirecionamentos podem ser de dois 
tipos: 
▫ Redirecionamento local 
 Busca as páginas de redirecionamento a partir de uma 
página específica, definida no elemento from-view-id 
▫ Redirecionamento global 
 Busca páginas de redirecionamento definidas 
globalmente, ou seja, não associadas a uma página de 
origem em específico 
Redirecionamento Global e Local 
• Para o redirecionamento local, três situações 
podem ser definidas: 
1. Apenas usando um nome lógico específico 
2. Usando um nome lógico e vindo de um método de 
ação 
3. Apenas vindo de um método de ação especificado 
Redirecionamento Local 
• O esquema mais simples é definir um nome lógico para 
redirecionamento a partir de uma página. 
• Para isso, basta incluir: 
▫ No from-view-id: a página de onde se está 
redirecionando 
▫ No from-outcome: o nome lógico da próxima página 
Redirecionamento Local 
Nome Lógico Específico 
<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> 
• Para garantir que o nome lógico foi chamado a 
partir de um método de ação específico, deve-se 
utilizar o elemento from-action. 
▫ Útil quando deseja-se diferenciar dois métodos de 
ação que produzem um mesmo nome lógico 
Redirecionamento Local 
Nome Lógico + Ação 
<navigation-rule> 
 <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> 
• Pode-se ainda definir que sempre que um 
método de ação seja executado, ele irá chamar 
uma determinada página. 
▫ Para isso, define-se apenas o elemento from-
action, sem o from-outcome. 
Redirecionamento Local 
Ação Específica 
<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> 
• Para o redirecionamento global, duas situações 
podem ser definidas: 
1. O redirecionamento vir de qualquer página 
2. O redirecionamento vir de um grupo de páginas 
Redirecionamento Global 
• As regras de navegação podem ser definidas de 
forma que um nome lógico pode ser utilizado por 
qualquer página 
▫ Para isso, deve-se utilizar o wildcard (*) no elemento 
from-view-id ou simplesmente não definir este 
elemento 
Redirecionamento Global 
Qualquer Página 
Redirecionamento Global 
Qualquer Página 
<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> 
Pode-se usar o * 
Ou não definir o elemento 
from-view-id 
• As regras de navegação podem definidas de 
forma que um nome lógico pode ser utilizado por 
um grupo de páginas 
▫ Para isso, deve-se utilizar o wildcard (*) no 
elemento from-view-id sempre como sufixo 
Redirecionamento Global 
Grupo de Páginas 
Redirecionamento Global 
Grupo de Páginas 
<navigation-rule> 
 <from-view-id>/funcionario/*</from-view-id> 
 <navigation-case> 
 <from-outcome>sucesso</from-outcome> 
 <to-view-id>/sucesso.xhtml</to-view-id> 
 </navigation-case> 
</navigation-rule> 
<navigation-rule> 
 <from-view-id>/cadastro*</from-view-id> 
 <navigation-case> 
 <from-outcome>erroCadastro</from-outcome> 
 <to-view-id>/erro.xhtml</to-view-id> 
 </navigation-case> 
</navigation-rule> 
Pode-se aplicar o * 
para referenciar 
páginas em um 
diretório 
Pode-se aplicar o * para 
um conjunto de recursos 
que iniciam com um 
prefixo qualquer 
• Não precisamos definir um nome lógico para as 
páginas, apenas retornar o nome absoluto da 
página. 
Navegação Implícita 
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 Padrão da JSF 
Parte 1 
• O desenvolvimento de aplicações que utilizem a 
tecnologia JSF requer um bom conhecimento das 
bibliotecas de tags da JSF 
• As bibliotecas padrão da JSF possuem um total de 
43 tags e são divididas em duas bibliotecas: 
▫ Core 
 Representam tags genéricas independentes da forma 
de renderização (visualização) dos dados 
▫ HTML 
 Representam tags específicas para renderização de 
páginas HTML 
Introdução 
• Assim como outras bibliotecas de tags, as Tags JSF 
precisam ser declaradas na página para poderem 
ser utilizadas 
▫ O prefixo padrão das tags Core é f 
▫ O prefixo padrão das tags HTML é h 
• Sintaxe: 
Introdução 
• As tags core são abordadas aos poucos durante o 
desenvolvimento das aplicações, sendo assim, 
focaremos nas tags html 
 xmlns:f="http://java.sun.com/jsf/core" 
 xmlns:h="http://java.sun.com/jsf/html 
• As tags HTML servem para representar diversos 
tipos de componentes apresentados em uma 
página: 
▫ Inputs 
▫ Outputs 
▫ Comandos 
▫ Seleção 
▫ Outros 
Tags JSF –HTML 
Tags JSF –HTML 
Categoria Tags 
Entrada de dados inputText, inputTextArea, inputSecret, inputHidden 
Saída de dados outputLabel, outputLink, outputFormat, outputText 
Comandos commandButton, commandLink 
Seleções selectOneListbox, selectOneMenu, selectOneRadio, 
selectBooleanCheckbox, selectManyCheckbox, 
selectManyListbox, selectManyMenu 
Layout panelGrid, panelGroup 
Tabela de dados dataTable, column 
Outras form, graphicImage 
Tags JSF - HTMl 
• h:form 
▫ <h:form> ... </h:form> 
 
• JSF possui suporte para três tipos de campos 
textuais (campos de entrada de dados): 
▫ h:inputText 
▫ h:inputSecret 
▫ h:inputTextArea 
Tags JSF – HTML 
Componentes – Campos Textuais 
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"/> 
• JSF possui suporte três tipos de campos de exibição 
de textos e imagens: 
▫ h:outputText 
▫ h:outputFormat 
▫ h:graphicImage 
 
Tags JSF – HTML 
Componentes – Exibindo Textos e Imagens 
h:outputText 
• Considerado um elemento a ser contado para 
uso de h:panelGrid. 
• Mais seguro. 
• Permite o uso de CSS específico. 
• Permite o uso de conversores. 
<h:outputText value="#{automovel.preco}"> 
 <f:convertNumber type="currency" /> 
</h:outputText> 
h:outputText 
• Isso dá erro em uma página .xhtml processada 
pelo JSF: 
▫ <p>a&ccedil;&atilde;o</p> 
 Error Parsing /login.xhtml: Error Traced[line: 47] A 
entidade "ccedil" foi referenciada, mas não declarada. 
 Ele interpreta como uma entidade xml. 
• Solução: 
<p> 
<h:outputText value="a&amp;ccedil;&amp;atilde;o" escape="false" /> 
</p> 
• Resultado: 
▫ ação 
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 
<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" /> 
JSF – Textos e Imagens 
• JSF possui suporte para o campo hidden através da 
tag: 
▫ h:inputHidden 
• Ela possui os mesmos atributos básicos das outras 
sendo o mais importante o value 
Tags JSF – HTML 
Componentes – Campos Hidden 
JSF – Botões e Links 
• JSF possui suporte cinco tipos de botões e/ou links: 
▫ h:commandButton 
▫ h:commandLink 
▫ h:outputLink 
▫ h:link 
▫ h:button 
• Os dois primeiros representam componentes de 
comando: 
▫ Disparam ações quando clicados/selecionados 
• O 3º é útil para a inclusão de links simples na página: 
▫ Apontam para recursos sem envolver JSF. 
▫ Usa método GET do HTTP. 
▫ A URL da requisição é definida explicitamente e não é 
tratada pelo JSF. 
▫ Útil para acesso a páginas externas à aplicação. 
JSF – Botões e Links 
• JSF possui suporte cinco tipos de botões e/ou links: 
▫ h:commandButton 
▫ h:commandLink 
▫ h:outputLink 
▫ h:link 
▫ h:button 
• Os dois últimos também realizam requisições através do 
método GET do HTTP. 
▫ Usam o atributo outcome para definir a página de 
destino. 
JSF – Botões 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"/> 
• Os componentes de comando possuem alguns 
atributos particulares: 
Tags JSF – HTML 
Componentes – Botões e Links 
Atributo Descrição 
action Nome lógico definido no face-config para 
redirecionamento ou método que executará a ação e 
retornará uma string com o redirecionamento 
actionListener Method-binding especificando o método: void nome(ActionEvent) 
image Caminho para imagem especificada em um 
commandButton (/app/img.gif) 
type Tipo de botão gerado (commandButton):button, submit, 
reset 
value Valor expresso no botão ou link (imagem) 
<h:commandButton value="Clique neste Botão" 
onclick="alert('button clicked')" type="button"/> 
<h:commandButton value="disabled" disabled="#{not 
bean.botaoHabilitado}"/> 
Tags JSF – HTML 
Componentes – Botões e Links 
<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 
parâmetros 
para o link 
• Existem tags JSF que permitem gerar tabelas 
automaticamente e posicionar os componentes 
dentro dessas tabelas 
• h:panelGrid 
▫ Cria tabelas 
• h:panelGroup 
▫ Trata vários componentes como sendo um só 
Tags JSF – Organização 
• No exemplo a abaixo, uma tabela será criada 
contendo 2 colunas 
▫ O número 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 não seja especificado, o número de colunas será 
igual a 1 
Tags JSF – Organização 
<h:panelGrid columns=“2"> 
... 
</h:panelGrid> 
Tags JSF – Organização 
<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=“Endereço:"/> 
 <h:inputText value=“#{...}" required="true"/> 
</h:panelGrid> 
• Alguns outros atributos que podem ser 
especificados na tag panelGrid são descritos 
abaixo: 
Tags JSF – Organização 
Atributo Descrição 
bgcolor Cor de background 
border Espessura da borda 
cellpadding/cellspacing Espaçamento interno/externo das 
células 
columnClasses/rowClasses
 
Classes CSS usadas para definir o estilo 
(no plural indica separação por vírgula)
 
• A tag panelGrid costuma ser utilizada em 
conjunto com a tag panelGroup 
• Agrupar componentes faz com que sejam 
colocados em uma mesma célula da tabela 
Tags JSF – Organização 
<h:panelGrid columns="2"> 
 ... 
 <h:panelGroup> 
 <h:outputText value=“Nome:”/> 
 <h:inputText id="name" value="#{usuarioBean.nome}"> 
 </h:panelGroup> 
 ... 
</h:panelGrid> 
Tags JSF – Organização 
<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 – Organização 
<style type="text/css"> 
.evenRows{ 
background: PowderBlue; 
} 
.oddRows{ 
background: MediumTurquoise; 
} 
</style> 
• Componentes de formulário em JSF não 
apresentam os atributos method e action: 
▫ O método é sempre POST 
▫ O action é definido pelo comando disparado: 
 A navegação pode carregar outra página ou recarregar 
a mesma 
Tags JSF – HTML 
Componentes – Formulários 
Tags JSF – HTML 
Componentes –Formulários 
<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 exceção 
 } 
 } 
} 
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 aplicação. 
Pasta resources 
• Para acessar esses arquivos usa os seguintes 
códigos na sua página: 
<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"/> 
Exercícios 
• Crie uma aplicação que exibe um formulário de 
cadastro de medicamentos de uma farmácia e depois 
exibe em uma página os dados enviados 
• O formulário de cadastro deve conter os seguintes 
campos: 
– Nome de remédio (campo texto) 
– Princípio ativo (campo texto) 
– Observações (área) 
– Botão de submissão para cadastro 
– Link de submissão para cadastro– Na tela inicial tem um link simples para o cadastro 
Data Table 
• Para exibir tabelas de dados em uma página, pode-
se utilizar a tag dataTable. 
• A tag itera sobre uma lista de dados para criar um 
elemento table. 
A tag dataTable 
<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> 
• Atributos: 
• value: lista contendo os dados a serem exibidos 
▫ Pode ser: vetor, List, ResultSet, DataModel 
• var: variável temporária 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 variável 
(var) ou da propriedade presente na variável que 
deseja-se exibir 
A tag dataTable 
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; 
} 
• Para especificar um cabeçalho e/ou um rodapé, é 
necessário utilizar a tag <f:facet ...>. 
Cabeçalhos e Rodapés 
Cabeçalhos e Rodapés 
<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="Número" /> 
 </f:facet> 
 <h:outputText value="#{fone.numero}" /> 
 </h:column> 
</h:dataTable> 
Cabeçalhos e Rodapés 
Exercício 
1) Converta seu sistema de cadastro de pessoa 
utilizando JSF. Deve ter o módulo de cadastro, 
atualização, exclusão e listagem.