PrimeFaces 2.2.1 e JSF 2.0

Fala galera!!!
Hoje vamos falar de algo mais interessante para quem é desenvolvedor java web,
Falaremos de um facelets da vida chamado de primefaces. Ele, melhora consideravelmente a interface gráfica de sua aplicação, além de, otimizar seu processo de desenvolvimento.

Vamos lá
 
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 é:
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@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:



1
2
<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:

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

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

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

1
2
<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:

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

1
2
<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:

1
2
<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:

1
2
3
4
<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:

1
2
<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:

1
2
<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:

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
      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>
 
 
 
Como vimos, primefaces para quem programa para j2EE é uma mão na roda, principalmente para quem utiliza u JSF. Simples e completo.
 
Abraços e até a próxima! 
 

Comentários

Postagens mais visitadas deste blog

E Esse Tal de Nano Service?

Executar Audio em Java Swing

Validando Email em Java Com e Sem expressão Regular