sábado, 6 de agosto de 2011

Primeira aplicação PrimeFaces 2.2.1 e seus temas


Enfim vamos começar com as postagens sobre o PrimeFaces, que atualmente se encontra na versão 3.0M1 (veja os componentes aqui)... mas como essa versão foi lançada a pouco tempo, prefiro aguardar pela versão final para usá-la, vamos usar a versão anterior: 2.2.1 (componentes aqui), inicialmente teremos sete postagens mostrando alguns componentes (vários componentes em uma postagem).

Para esta postagem vamos fazer alguma coisa mais tranqüila, mas que muitas pessoas acham interessantes, a mudança de temas: vou mostrar como usar os temas já disponíveis no site do PrimeFaces e a possibilidade de fazer seu próprio tema personalizado.
Para começar baixe a versão 2.2.1 do PrimeFaces: Clique aqui para baixar
Agora sim vamos começar, no NetBeans crie um novo projeto web, para quem não se lembra: Arquivo - Novo Projeto... - Java Web - Aplicação Web...
Depois de ter o projeto criado, vamos colocar a biblioteca do PrimeFaces junto com as bibliotecas do nosso projeto, para isso: clique com o botão direito nas Bibliotecas e Adicionar JAR/pasta e selecionar o jar. Ficando com essa estrutura:

Para usar o PrimeFaces precisamos adicionar a seguinte namespace às páginas:

Para fazer um teste de que o PrimeFaces esteja funcionando, vamos usar a página index.xhtml:
1
2
3
4
5
6
7
8
9
10
      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:fieldset legend="Meu teste!!!" />
    </h:body>
</html>

Importante saber que para o PrimeFaces funcionar é necessário a tag h:head. O resultado da nossa página é esse:
Esse é o tema padrão do PrimeFaces, eu particularmente, acho que a fonte dele fica muito grande em um sistema, então é por isso que altero o tema.

Temas pré-definidos
O PrimeFaces já disponibiliza alguns temas, você pode encontrá-los aqui. Desses eu selecionei o tema bluesky (richfaces), o arquivo baixado é um .jar (bluesky-1.0.1.jar).
Para usar ele é necessário adicioná-lo ao projeto, assim como fizemos com o jar do PrimeFaces... Mas apenas isso não basta, temos que informar ao web.xml que tema ele deve usar. Assim acrescente o código abaixo no WEB-INF/web.xml:
1
2
3
4
<context-param
        <param-name>primefaces.THEME</param-name
        <param-value>bluesky</param-value
    </context-param>

Só tome cuidado que o param-value deve ser o nome do tema que você baixou...
Execute novamente o projeto, e veja o resultado:

Bom, acabamos de ver como faz pra incluir um tema pré-definido a um projeto.

Faça seu próprio tema!
Como alguns já sabem, o PrimeFaces é feito com a biblioteca JQuery, por isso é possível gerar o seu próprio tema a partir deste ThemeRoller do JQuery.
Essa é a página para criação do seu tema:


Bom, pra não ficar um post enorme, vou deixar que vocês mesmo explorem aquele menu lateral esquerdo para definir o tema como quiser, depois de editado, basta clicar no botão logo acima do menu:Download theme. A seguinte página aparecerá:

Eu sempre baixo com o que está marcado por padrão, então é só clicar no botão Download, um arquivo .zip será baixado, depois é só extraí-lo.
Os arquivos que nos interessam está dentro de: jquery-ui-1.8.12.custom - css - custom-theme, neste pasta precisamos do arquivo css e a pasta de imagens, copie estes e coloque dentro de Páginas webdo seu projeto, ficando assim:
Mas novamente, apenas jogando esses arquivos no projeto não fará funcionar, para isso é necessário que a sua página se referencie ao arquivo css, isso sim é suficiente, adicione a tag link dentro da tag h:head, ficando assim:
1
2
3
4
<h:head>
    <title>PrimeFaces 2.2.1</title>
    <link type="text/css" rel="stylesheet" href="jquery-ui-1.8.12.custom.css" />
</h:head>

O resultado será:

2 comentários:

  1. Olá! fico feliz em saber que o que eu escrevo é divulgado por outros blogs também! Obrigada :)

    ResponderExcluir
  2. Claro minha Amiga Andii,

    Tudo que é relevante e interessante saber sobre nossa tecnologia é importante ser passado para frente e divulgado...

    ResponderExcluir

Admin: Bruno

Olá Galera! muito grato por estarem acessando nosso blog. Espero que seja possível transmitir de forma compreensível um pouco de meus conhecimentos em programação, para esta comunidade de desenvolvedores que cresce cada vez mais! Espero que Gostem! Abraço! E meu enorme obrigado à Renato Simões, Átila Soares,Wanderson Quinto, Emerson e a toda galera que sempre ajudou meu sincero obrigado....
Especialmente a Natalia Failache e Rita de Cassia que sempre apoiaram este sonho....

De seu amigo Bruno Rafael.