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).