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}" /> |
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 | < 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
Postar um comentário