27 de março de 2011

JSF 2.0: Componentes básicos

O nome da postagem se refere ao JSF 2.0, mas os componentes que serão mostrados também funcionam no JSF 1.2.
Para começar crie um projeto com o nome de ComponentesBasicos, dentro de pacotes de código-fonte crie um pacote com o nome de controle. Nossa base será um TesteBean.java que deverá ser criando dentro do pacote controle. Segue o código:
@Named
@javax.enterprise.context.RequestScoped
public class TesteBean {

    private boolean confirma;
    private String tipoPessoa;
    private List<String> cores;
    private List<String> coresSelecionadasCheckbox;
    private List<String> coresSelecionadasManyMenu;
    private String corSelecionadaOneMenu;

    public TesteBean() {
        cores = new ArrayList<String>();
        cores.add("Amarelo");
        cores.add("Azul");
        cores.add("Preto");
        cores.add("Vermelho");
    }
    
    //Gerar getters e setters
}
Veja que usamos o construtor para inicializar nossa lista de cores.

Para fazer esse exemplo vamos aproveitar a pagina index que é criada juntamente com o projeto. Então vamos começar a conhecer os componentes:
SelectBooleanCheckbox
Como o nome já diz, ele retorna um valor booleano (true ou false).
Exemplo:


Codigo:
<h:selectBooleanCheckbox value="#{testeBean.confirma}" />
<h:outputText value="Deseja receber mais informações desse blog?"/>


SelectOneRadio
Quanto a esse componente, entre as várias opções, apenas uma pode ser selecionada
Exemplo:
Codigo:
<h:selectOneRadio value="#{testeBean.tipoPessoa}">
    <f:selectItem itemLabel="Fisica" itemValue="F" />
   <f:selectItem itemLabel="Juridica" itemValue="J" />
</h:selectOneRadio>


SelectOneMenu
Este componente gera algo mais conhecido como um combobox. Mais detalhes...
Exemplo:

Codigo:
<h:selectOneMenu value="#{testeBean.corSelecionadaOneMenu}" >
    <f:selectItems value="#{testeBean.cores}" />
</h:selectOneMenu>


SelectManyCheckbox
Componente que permite selecionar vários objetos de uma vez só, marcando os checkbox.
Exemplo:

Código:
<h:selectManyCheckbox value="#{testeBean.coresSelecionadasCheckbox}" layout="pageDirection" >
    <f:selectItems value="#{testeBean.cores}" />
</h:selectManyCheckbox>


SelectManyMenu
Componente parecido com o SelectOneMenu, com a diferença que este permite selecionar vários objetos de uma vez, basta usar o CTRL e clicar nos objetos que deseja selecionar.
Exemplo:

Código:
<h:selectManyMenu value="#{testeBean.coresSelecionadasManyMenu}" style="height: 100px"  >
    <f:selectItems value="#{testeBean.cores}" />
</h:selectManyMenu>

Diferença entre usar f:selectItem e f:selectItems
f:selectItem - esta tag serve para definir valores estaticamente, ou seja diretamente na página, ele tem as propriedades itemLabel e itemValue, o primeiro é o que deve mostrar na página e o segundo é o valor que deve ser salvo em algum atributo do bean.
f:selectItems - este é mais claro, como está no plural já dá a entender que receberá uma lista de objetos.

Referência: Exadel - JSF tags

4 comentários:

  1. Muito massa me ajudou muito

    Valeu e Parabens

    ResponderExcluir
  2. NOssa muito file esse blog

    Parabens Andii
    Deveria existir mais pessoas como voce

    ResponderExcluir
  3. olá por favor como enviar as escolhas para o banco de dados?

    ResponderExcluir

Deixe seu comentário... ;)