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

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

Postar um comentário

Postagens mais visitadas deste blog

Algorítimo Para Validar Cpf Segundo Receita Federal em Java

Executar Audio em Java Swing

Gerenciamento de projetos: Introdução, Experiência e Estudo - Parte I