JSF 2.0: Componentes PrimeFaces 2.2.1 - Parte 1

Nessa postagem vamos começar com alguns componentes mais simples do PrimeFaces, caso não saiba por onde começar, recomendo ver essa postagem antes.

Estrutura do projeto

Para começar precisamos de um projeto web que já contenha o .jar do PrimeFaces (ver o link acima). Depois disso, dentro de pacotes de código-fonte crie um pacote com o nome de controle e dentro dele uma classe com o nome de TesteBean.java, essa classe não terá nada de mais, será apenas para auxiliar os componentes e testar outros, o código da mesma é:

@Named
@RequestScoped
public class TesteBean {

    private String nome;
    private String descricao;
    private String telefone;
    private String cpf;
    private String observacao;
    private Date dataCadastro;
    private String senha;

    public void testar(){
        FacesContext context = FacesContext.getCurrentInstance();
        context.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Aviso", "Testado com sucesso!"));
    }
    
    //Gerar os getters e setters
}

Como podemos ver, o método testar não faz praticamente nada além de mandar uma mensagem para o JSF. O projeto fica assim:

Tudo o que vamos fazer a partir de agora é dentro do index.xhtml. Os componentes que serão apresentados nessa postagens são mais simples, mais utilizados para telas de cadastro.

Começando...
Nossa tela ficará assim:

Aparentemente não tem nada de mais, todos os campos parecem ser apenas inputText normais... mas não são!
Vou começar falando sobre os componente e mostrando os mesmo tempo, ao final eu posto o código inteiro, para mais informações e exemplos aconselho acessar os links disponíveis nos componentes, é do próprio site do PrimeFaces.
Dentro do h:body do index eu vou criar um p:fieldset, o mesmo que usamos na postagem anterior para testar se o prime estava funcionando:

Código-fonte do componente:

<p:fieldset legend="Meu Cadastro" toggleable="true">
</p:fieldset>

Agora dentro desse fieldset eu preciso de um h:form para poder usar p:commandButton, esse meu botão vai chamar o método feito no TesteBean:

Código-fonte do componente:

<p:commandButton value="Testar" actionListener="#{testeBean.testar}" />

Se clicar no botão nesse ponto, ele vai chamar o método do bean normalmente mas não vai aparecer nada, primeiramente porque não temos um componente para receber a mensagem enviada pelo método e além de ter esse componente precisamos mandar atualizar ele...

Para mostrar essa mensagem, o PrimeFaces tem duas opções: p:growl e p:messages, lembrando que você não precisa usar os dois juntos, apenas estou fazendo isso para exemplo, primeiro o growl:

Código-fonte do componente:

<p:growl id="avisos" showDetail="true" life="3000" />

Lembre-se de adicionar a propriedade update no p:commnadButton, e mandar atualizar o growl pelo id, ficando assim: update="avisos"

Agora vamos ver o messages:

Código-fonte do componente:

<p:messages id="mensagens" showDetail="true" />

Quanto ao update do commandButton, isso funciona da mesma forma para o messages, ficando assim update="mensagens"

Agora chega de frescuras e vamos começar os componentes de texto e datas... entre outros!

Para começar vamos usar o p:inputText, este componente serve mais para acompanhar o tema do PrimeFaces, mas pra quem gosta de tudo estilizado, ele ajuda muito!

Código-fonte do componente:

<h:outputText value="Nome:" />
<p:inputText id="nome" value="#{testeBean.nome}" />

O próximo componente acredito que seja bem útil, é o p:focus, ele é responsável por setar o foco em um campo ao abrir a página, nesse exemplo eu estou setando ele no campo anterior que tem o id nome. 

Obs: este componente deve ficar dentro do mesmo form que o componente que se deseja que tenha o foco, ao abrir a página ele fica assim:

Código-fonte do componente:

<p:focus for="nome" />

O p:inputTextarea, tem um efeito bem legal quando é clicado, e ele se expande de acordo com a quantidade de texto, e assim como o p:inputText serve mais pra manter o padrão do tema:

Código-fonte do componente:

<h:outputText value="Observações:" />
<p:inputTextarea value="#{testeBean.observacao}" />

O componente de agora é um dos que eu mais gosto, o p:calendar, este dispensa até comentários, vamos vê-lo:

Ao clicar na caixinha de texto, o calendário se abre, claro... tem outras opções de usar ele também, ver o link do p:calendar.

Código-fonte do componente:

<h:outputText value="Data cadastro:" />
<p:calendar value="#{testeBean.dataCadastro}" />

Outro que é bem útil é o p:inputMask, por não haver necessidade de ficar formatando na mão, por exemplo o número de CPF/CNPJ/telefone, entre outras opções, como a máscara é você quem define, serve para o que quiser:

Obs: a máscara só aparece quando o campo estiver em foco.

Código-fonte do componente:

<h:outputText value="Telefone:" />
<p:inputMask mask="(999)9999-9999" value="#{testeBean.telefone}" />
<h:outputText value="CPF:" />
<p:inputMask mask="999.999.999-99" value="#{testeBean.cpf}" />

Veja no link do p:inputMask as possibilidades de usar a propriedade mask, por exemplo, pode-se definir que um determinado campo tenha apenas letras, ou apenas números, ou que o caractere possa ser número ou letra... muito interessante este componente!

Que tal aparecer um teclado virtual ao clicar em um campo? Pois é, este é um componente que eu achei um máximo, mas não consegui aplicar ele em nenhum lugar (por enquanto), estou falando do p:keyboard, é um teclado virutal que tem várias possibilidades de uso (o padrão é um teclado completo com letras e números), aqui vou mostrar duas formas de uso que eu gostei, a primeira, apenas um teclado de letras:

Código-fonte do componente:

<h:outputText value="Descrição:" />
<p:keyboard layout="qwertyBasic" value="#{testeBean.descricao}" />

A outra forma de utilização, é uma configuração das propriedades para transformá-lo em um teclado virtual para senhas:

Código-fonte do componente:

<h:outputText value="Senha:" />
<p:keyboard password="true" keypadOnly="true" value="#{testeBean.descricao}" />

Lembrando que o componente é o mesmo, apenas muda as propriedades.

Agora para finalizar, vamos voltar as frescuras... quer usar um separador? O PrimeFaces, tem também, é o p:separator!!!

Este componente você define a comprimento e largura por css, com o width e height...

Código-fonte do componente:

<p:separator style="width: 80%; height: 5px" />

Para finalizar, o código-fonte completo da página index.xhtml:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui" >
    <h:head>
        <title>PrimeFaces 2.2.1</title>
    </h:head>
    <h:body>
        <p:growl id="avisos" showDetail="true" life="3000" />
        <p:fieldset legend="Meu Cadastro" toggleable="true">
            <h:form>
                <p:focus for="nome" />

                <h:panelGrid columns="2">
                    <h:outputText value="Nome:" />
                    <p:inputText id="nome" value="#{testeBean.nome}" />

                    <h:outputText value="Observações:" />
                    <p:inputTextarea value="#{testeBean.observacao}" />

                    <h:outputText value="Data cadastro:" />
                    <p:calendar value="#{testeBean.dataCadastro}" />

                    <h:outputText value="Telefone:" />
                    <p:inputMask mask="(999)9999-9999" value="#{testeBean.telefone}" />
                    <h:outputText value="CPF:" />
                    <p:inputMask mask="999.999.999-99" value="#{testeBean.cpf}" />

                    <h:outputText value="Descrição:" />
                    <p:keyboard layout="qwertyBasic" value="#{testeBean.descricao}" />
                    <h:outputText value="Senha:" />
                    <p:keyboard password="true" keypadOnly="true" value="#{testeBean.descricao}" />
                </h:panelGrid>
                <p:separator style="width: 80%; height: 5px" />

                <p:commandButton value="Testar" actionListener="#{testeBean.testar}" update="avisos,mensagens" />
            </h:form>
        </p:fieldset>
        <p:messages id="mensagens" showDetail="true" />
    </h:body>
</html>

Por hoje chega... foram componentes simples, mas apenas porque é a primeira postagem sobre isso ainda, a cada postagem vou colocando componentes mais interessantes!