Académique Documents
Professionnel Documents
Culture Documents
Engenharia da Web
- Componentes Visuais do JavaServer Faces 2.0
Prof. Cludio Martins claudiomartins2000@gmail.com
1
Tpicos
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
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
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
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
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
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
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
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
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
@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;
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
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
25
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
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