8 de maio de 2011

JSF 2.0: Utilizando 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:
xmlns:p="http://primefaces.prime.com.tr/ui" 

Para fazer um teste de que o PrimeFaces esteja funcionando, vamos usar a 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: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:
<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 web do 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:
<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á:


13 comentários:

  1. Primefaces é uma ótima ferramenta, além de usar recursos do Jquery, também tem algo de Scripts do Yahoo (como o Paginador do DataTable por exemplo).
    Bem leve e bem prático. Mas deixou a desejar na entre ExtendedDataTable do Richfaces e o DataTable do Prime, assim, em recursos de controle de paginação e colunas.

    ResponderExcluir
  2. Olá Mesias! Obrigada por compartilhar essas informações =)

    ResponderExcluir
  3. Tudo que é importante e relevante sobre tecnologia deve ser divulgado e repassado...por isso meus parabéns...
    assim como compartilho seus posts em meu blog...se achar algo interessante pode compartilhar os do meu também...

    Abraços!

    link: http://javanamente.blogspot.com

    ResponderExcluir
  4. Olá Brurei! Obrigada, assim que eu arrumar um tempinho volto a escrever! :)

    ResponderExcluir
  5. Aqui apenas alterei o parm-value do web.xml para none.
    Sabe qual o impacto disso? alem de ter que definir classes em cada elemento

    Valeu!

    ResponderExcluir
  6. Parabéns pelo post, ajudou bastante. Porem, usando o css envés do .jar tive problemas com o tema (ficou quase tudo desconfigurado). Mas alterei o tamanho da fonte do css de um .jar e usei em meu projeto, ae funcionou blz.
    Estou usando Prime 3, JSF 2.1.4 e Eclipse Indingo.

    ResponderExcluir
  7. Olá Dionata! Também tenho o problema com fontes mesmo usando o .jar... aí só defino a fonte no template.

    ResponderExcluir
  8. Daniel Zilli, o param-value alí serve para vc dizer que tema vai querer usar, provavelmente ao usar o none ele não defina nenhum tema, só o padrão do primefaces mesmo, o se vc tiver um tema do prime com o nome de none.jar é bem provavel que ele pegue ele (não sei se o prime tem alguma restrição com o none)

    ResponderExcluir
  9. o link de adicionar o primefaces mudou

    é

    xmlns:p="http://primefaces.org/ui"

    ResponderExcluir
    Respostas
    1. Olá Otávio! Para a versão 3.0 é esse link mesmo que vc passou, mas não considero minhas postagens para o 3.0 ainda pois tem muita diferença... pretendo começar uma nova série, aí sim será do prime 3.0 :)

      Excluir
    2. não sabia que o do 3.0 mudava rsrs... comecei direto nele rsrs
      vlws =D novato eu .. inocente kkkk

      Excluir
  10. Parabéns , mto bom tutorial, me ajudou mto. Obrigado

    ResponderExcluir
  11. Me ajudou muito! não conhecia esse recurso, obrigado

    ResponderExcluir

Deixe seu comentário... ;)