Post on 31-Jul-2015
description
1
IFPACurso de Tecnologia em Análise e Desenvolvimento de Sistemas
Engenharia da Web
- Componentes Visuais do JavaServer Faces 2.0
Prof. Cláudio Martinsclaudiomartins2000@gmail.com
2
Tópicos Componente para construção de Formulários DataTable Atividades práticas
3
Visão Geral sobre Componentes Visuais JavaServer Faces é uma de especificação Java que
padroniza um framework MVC voltado para o desenvolvimento de aplicações Web.
As principais características de JSF são:
– Permite criar Uis (interface com usuário) através de um conjunto de componentes visuais pré-definidos;
– Modelo de programação dirigido a eventos entre as camadas de visão (browser) e o servidor web;
– Modelo de componentes que permite desenvolvimento independente para construir componentes adicionais;
– Validação e conversão de dados;
– Internacionalização;
– Manipulação de erros.
4
Exemplos de Kits de Componentes Apache Tomahawk - Componentes da Apache Software
Fundation.
Mojarra UI - A implementação da SUN tem vários componentes extras interessantes.
JBoss Ajax4JSF - Componentes que acrescentam funcionalidades AJAX nos componentes padrão da especificação implementado pela JBoss.
RichFaces - componentes fornecidos pela Jboss.
GMaps4JSF - Componentes da Google integrando o GoogleMaps com o modelo de JSF.
PrimeFaces
– E muito mais!
5
Formulários O componente visual <h:form> define um formulário
para utilizar os componentes visuais.
<h:form><h:outputLabel value="Nome: " for="input-nome" /><h:inputText id="input-nome" /><br /><h:outputLabel value="Sobre: " for="input-sobre" /><h:inputTextarea id="input-sobre" /><br /><h:outputLabel value="Sexo: " /><h:selectOneRadio><f:selectItem itemLabel="Masculino" itemValue="M" /><f:selectItem itemLabel="Feminino" itemValue="F" /></h:selectOneRadio><br /><h:outputLabel value="País: " /><h:selectOneMenu><f:selectItem itemLabel="Argertina" itemValue="ar" /><f:selectItem itemLabel="Brasil" itemValue="br" /><f:selectItem itemLabel="Espanha" itemValue="es" /></h:selectOneMenu><br /><h:outputLabel value="Escolha uma senha: " for="input-senha" /><h:inputSecret id="input-senha" /><br /><h:outputLabel value="Li e estou de acordo com os termos de uso."for="checkbox-termo" /><h:selectBooleanCheckbox id="checkbox-termo" /><br /><h:commandButton value="Cadastrar" /> </h:form>
6
Formulário renderizado
7
Associando um componente ao ManagedBean
Em JSF, um componentes visuais pode se ligar a um atributo declarado no Managed Bean, bastando indicar a expressão no parâmetro value.
Ex:– Define um inputText associado a atributo nome
do managed bean declarado como cad:
<h:inputText id="input-nome" value="#{cad.nome}" />
8
Componente h:outputLabel
<h:outputLabel value="Nome: " for="input-nome" />
h:outputLabel - cria um rótulo para o campo no qual deve ser digitado o nome da pessoa que se cadastra.
– Observe que o atributo “for” conecta o rótulo ao id do campo do nome. Dessa forma, se o usuário clicar no rótulo o cursor de digitação aparecerá nesse campo.
9
h:inputText e h:inputTextarea
h:inputText– cria o campo de entrada com o nome.
– Definimos o atributo id para que o campo pudesse ser conectado ao rótulo loga acima.
–
<h:inputTextarea id="input-sobre" />
h:inputTextarea– O funcionamento é muito semelhante ao do
h:inputText. A diferença básica é que a área de digitação do h:inputTextarea é maior.
<h:inputText id="input-nome" />
10
h:selecOneRadio e f:selectItem
h:selecOneRadio– cria um radio button que permite o usuário
escolher o sexo (masculino e feminino). As opções do radio button são definidas pelo componente f:selectItem
–
<h:outputLabel value="Sexo: " /><h:selectOneRadio><f:selectItem itemLabel="Masculino" itemValue="M" /><f:selectItem itemLabel="Feminino" itemValue="F" /></h:selectOneRadio>
11
h:selectOneMenu
h:selectOneMenu– criamos um combo box para que o usuário
escolha qual é o país de origem da pessoa que será cadastrada. Assim como no radio button, as opções do combo box são definidas com o componente f:selectItem.
<h:selectOneMenu><f:selectItem itemLabel="Argertina" itemValue="ar" /><f:selectItem itemLabel="Brasil" itemValue="br" /><f:selectItem itemLabel="Espanha" itemValue="es" /></h:selectOneMenu>
12
●h:inputSecret
h:inputSecret – cria um campo de texto que não mostra na tela
o valor que já foi digitado. Esse componente é útil para senhas.
<h:inputSecret id="input-senha" />
13
h:selectBooleanCheckbox
h:selectBooleanCheckbox– Representa um check box para saber se o
usuário aceita ou não os termos de cadastro
–
<h:outputLabel value="Li e estou de acordo com os termos de uso."for="checkbox-termo" /><h:selectBooleanCheckbox id="checkbox-termo" value="aceito" /><br />
14
h:commandButton
h:commandButton– botão para o usuário confirmar o cadastro
– O parâmetro “action” permite associar com um método (no managed bean) para tratar o evento do clique do botão. Ex:
<h:commandButton value="Cadastrar" action="#{cad.cadastrar()}" />
<h:commandButton value="Cadastrar" />
15
Panel Grid
Panel Grid– O componente h:panelGrid é utilizado para
organizar outros componentes em tabelas de uma forma prática.
– Basicamente, para utilizar este componente, devemos definir quantas colunas queremos e ele automaticamente distribui os componentes em um número suficiente de linhas.
16
Exemplo de h:panelGrid com 2 colunas
17
Panel Group
h:panelGroup– Permite inserir dois ou mais componentes em
um painel agrupado dentro de um um outro painel.
–
<h:panelGroup><h:outputLabel value="Li e estou de acordo com os termos de uso."for="checkbox-termo" /><h:selectBooleanCheckbox id="checkbox-termo" value="aceito" /></h:panelGroup>
18
Tabela com h:dataTable
Podemos criar tabelas utilizando o componente h:dataTable com dados de alguma coleção.
Basicamente, a diferença dos Data Tables e dos Panel Grids é que os Data Tables iteram diretamente nos objetos da coleção.
– O componente h:column é utilizado para adicionar uma coluna na tabela definida com o h:dataTable
– O componente f:facet para adicionar um cabeçalho na coluna correspondente.
19
Exemplo: listando nomes de uma coleção
@ManagedBean (name="bean")@SessionScopedpublic class CadastroBean {private String nome;private String sobrenome;private List<CadastroBean> lista = new ArrayList<CadastroBean>();
public List<CadastroBean> getLista() {
lista.add(new CadastroBean("JOAO", "MENDES"));lista.add(new CadastroBean("MARIA", "ANTONIA"));lista.add(new CadastroBean("CARLOS", "SILVA"));lista.add(new CadastroBean("ANTONIO", "DE JESUS"));return lista;
}// continua com gets e setters
20
Exemplo: listando nomes de uma coleção
<f:view>
<h:dataTable value="#{bean.lista}" var="cadastro" border="1"> <h:column> <f:facet name="header"> <h:outputText value="Cadastro de Pessoas"></h:outputText> </f:facet> <h:outputText value="#{cadastro.nome}"></h:outputText> </h:column> </h:dataTable>
</f:view>
21
● Atividades práticas
Crie um projeto do tipo Web, usando o framework JSF (versão 2 ou maior) .
Na pasta src crie um pacote chamado managedbeans. Nesse pacote, adicione as classes do tipo Managed Beans.
22
Atividade 1
Defina no pacote managedbeans a classe Managed Bean Cadastro, a seguir, representando os dados de um cadastro. Chame o bean de “cad”, e não esqueça de gerar os gets e sets):
23
Ativ 1: Páginas JSF Construa as páginas seguindo a formatação e
associando os dados ao Managed Bean “cad”:
As páginas JSF são denominadas: form1 e confirma
24
Atividade 2
No pacote chamado managedbeans, adicione uma classe com o seguinte conteúdo para modelar um simples Managed Bean que gera palavras.
A classe é denominada PalavrasBean e o bean, por padrão, será palavrasBean.
25
Classe bean: PalavrasBean @ManagedBeanpublic class PalavrasBean { private List<String> palavras = new ArrayList<String>();
public PalavraBean() {this.palavras.add("Casa da Mãe Joana");this.palavras.add("Carlos dos Santos");this.palavras.add("ABC Treinamentos");this.palavras.add("Aprendendo JSF2");
}
public List<String> getPalavras() { return this.palavras; }
public void setPalavras(List<String> palavras) { this.palavras = palavras;
}} // fim da classe
26
Atividades práticas com JSF2
Crie uma página JSF aplicando o componente h:dataTable para apresentar as palavras geradas pelo Managed Bean ( o PalavraBean) do exercício anterior.
Veja a tabela acessando a url correspondente.
27
Atividade Prática (2)
Crie um formulário para receber uma palavra e submeta para a coleção “PalavraBean”.
Crie um link na página do formulário para exibir a página da atividade anterior (que exibe a tabela de palavras).