IFPA Curso de Tecnologia em Anlise e Desenvolvimento de Sistemas

Engenharia da Web
- Componentes Visuais do JavaServer Faces 2.0
Prof. Cludio Martins claudiomartins2000@gmail.com
1

Tpicos

Componente para construo de Formulrios DataTable Atividades prticas

Viso Geral sobre Componentes Visuais

JavaServer Faces uma de especificao Java que padroniza um framework MVC voltado para o desenvolvimento de aplicaes Web. As principais caractersticas de JSF so:

Permite criar Uis (interface com usurio) atravs de um conjunto de componentes visuais pr-definidos; Modelo de programao dirigido a eventos entre as camadas de viso (browser) e o servidor web; Modelo de componentes que permite desenvolvimento independente para construir componentes adicionais; Validao e converso de dados; Internacionalizao; Manipulao de erros.
3

Exemplos de Kits de Componentes

Apache Tomahawk - Componentes da Apache Software Fundation. Mojarra UI - A implementao da SUN tem vrios componentes extras interessantes. JBoss Ajax4JSF - Componentes que acrescentam funcionalidades AJAX nos componentes padro da especificao implementado pela JBoss. RichFaces - componentes fornecidos pela Jboss. GMaps4JSF - Componentes da Google integrando o GoogleMaps com o modelo de JSF. PrimeFaces

E muito mais!
4

O componente visual <h:form> define um formulrio para utilizar os componentes visuais.

Formulrios

<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="Pas: " /> <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>

Formulrio renderizado

Associando um componente ao ManagedBean

Em JSF, um componentes visuais pode se ligar a um atributo declarado no Managed Bean, bastando indicar a expresso no parmetro value. Ex:

Define um inputText associado a atributo nome do managed bean declarado como cad:
<h:inputText id="input-nome" value="#{cad.nome}" />

Componente h:outputLabel
<h:outputLabel value="Nome: " for="input-nome" />

h:outputLabel - cria um rtulo para o campo no qual deve ser digitado o nome da pessoa que se cadastra.

Observe que o atributo for conecta o rtulo ao id do campo do nome. Dessa forma, se o usurio clicar no rtulo o cursor de digitao aparecer nesse campo.

h:inputText e h:inputTextarea
<h:inputText id="input-nome" />

h:inputText

cria o campo de entrada com o nome. Definimos o atributo id para que o campo pudesse ser conectado ao rtulo loga acima.

<h:inputTextarea id="input-sobre" />

h:inputTextarea

O funcionamento muito semelhante ao do h:inputText. A diferena bsica que a rea de digitao do h:inputTextarea maior.
9

h:selecOneRadio

f:selectItem

<h:outputLabel value="Sexo: " /> <h:selectOneRadio> <f:selectItem itemLabel="Masculino" itemValue="M" /> <f:selectItem itemLabel="Feminino" itemValue="F" /> </h:selectOneRadio>

h:selecOneRadio

cria um radio button que permite o usurio escolher o sexo (masculino e feminino). As opes do radio button so definidas pelo componente f:selectItem

10

h:selectOneMenu
<h:selectOneMenu> <f:selectItem itemLabel="Argertina" itemValue="ar" /> <f:selectItem itemLabel="Brasil" itemValue="br" /> <f:selectItem itemLabel="Espanha" itemValue="es" /> </h:selectOneMenu>

h:selectOneMenu

criamos um combo box para que o usurio escolha qual o pas de origem da pessoa que ser cadastrada. Assim como no radio button, as opes do combo box so definidas com o componente f:selectItem.
11

h:inputSecret

<h:inputSecret id="input-senha" />

h:inputSecret

cria um campo de texto que no mostra na tela o valor que j foi digitado. Esse componente til para senhas.

12

h:selectBooleanCheckbox
<h:outputLabel value="Li e estou de acordo com os termos de uso." for="checkbox-termo" /> <h:selectBooleanCheckbox id="checkbox-termo" value="aceito" /> <br />

h:selectBooleanCheckbox

Representa um check box para saber se o usurio aceita ou no os termos de cadastro

13

h:commandButton
<h:commandButton value="Cadastrar" />

h:commandButton

boto para o usurio confirmar o cadastro O parmetro action permite associar com um mtodo (no managed bean) para tratar o evento do clique do boto. Ex:
<h:commandButton value="Cadastrar" action="#{cad.cadastrar()}" />
14

Panel Grid

Panel Grid

O componente h:panelGrid utilizado para organizar outros componentes em tabelas de uma forma prtica. Basicamente, para utilizar este componente, devemos definir quantas colunas queremos e ele automaticamente distribui os componentes em um nmero suficiente de linhas.
15

Exemplo de h:panelGrid com 2 colunas

16

Panel Group

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

h:panelGroup

Permite inserir dois ou mais componentes em um painel agrupado dentro de um um outro painel.

17

Tabela com h:dataTable

Podemos criar tabelas utilizando o componente h:dataTable com dados de alguma coleo. Basicamente, a diferena dos Data Tables e dos Panel Grids que os Data Tables iteram diretamente nos objetos da coleo.

O componente h:column utilizado para adicionar uma coluna na tabela definida com o h:dataTable O componente f:facet para adicionar um cabealho na coluna correspondente.

18

Exemplo: listando nomes de uma coleo

@ManagedBean (name="bean") @SessionScoped public class CadastroBean { private String nome; private String sobrenome; private List<CadastroBean> lista = new ArrayList<CadastroBean>(); public

List<CadastroBean> getLista()
lista.add(new lista.add(new lista.add(new lista.add(new return lista;

CadastroBean("JOAO", "MENDES")); CadastroBean("MARIA", "ANTONIA")); CadastroBean("CARLOS", "SILVA")); CadastroBean("ANTONIO", "DE JESUS"));

} // continua com gets e setters

19

Exemplo: listando nomes de uma coleo

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

20

Atividades prticas

Crie um projeto do tipo Web, usando o framework JSF (verso 2 ou maior) . Na pasta src crie um pacote chamado managedbeans. Nesse pacote, adicione as classes do tipo Managed Beans.

21

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 no esquea de gerar os gets e sets):

22

Ativ 1: Pginas JSF

Construa as pginas seguindo a formatao e associando os dados ao Managed Bean cad: As pginas JSF so denominadas: form1 e confirma

23

Atividade 2

No pacote chamado managedbeans, adicione uma classe com o seguinte contedo para modelar um simples Managed Bean que gera palavras. A classe denominada PalavrasBean e o bean, por padro, ser palavrasBean.

24

@ManagedBean public class PalavrasBean { private List<String> palavras = new ArrayList<String>(); public PalavraBean() { this.palavras.add("Casa da Me 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

Classe bean: PalavrasBean

25

Atividades prticas com JSF2

Crie uma pgina JSF aplicando o componente h:dataTable para apresentar as palavras geradas pelo Managed Bean ( o PalavraBean) do exerccio anterior. Veja a tabela acessando a url correspondente.

26

Atividade Prtica (2)

Crie um formulrio para receber uma palavra e submeta para a coleo PalavraBean. Crie um link na pgina do formulrio para exibir a pgina da atividade anterior (que exibe a tabela de palavras).

27