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:
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á:
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).
ResponderExcluirBem 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.
Olá Mesias! Obrigada por compartilhar essas informações =)
ResponderExcluirTudo que é importante e relevante sobre tecnologia deve ser divulgado e repassado...por isso meus parabéns...
ResponderExcluirassim 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
Olá Brurei! Obrigada, assim que eu arrumar um tempinho volto a escrever! :)
ResponderExcluirAqui apenas alterei o parm-value do web.xml para none.
ResponderExcluirSabe qual o impacto disso? alem de ter que definir classes em cada elemento
Valeu!
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.
ResponderExcluirEstou usando Prime 3, JSF 2.1.4 e Eclipse Indingo.
Olá Dionata! Também tenho o problema com fontes mesmo usando o .jar... aí só defino a fonte no template.
ResponderExcluirDaniel 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)
ResponderExcluiro link de adicionar o primefaces mudou
ResponderExcluiré
xmlns:p="http://primefaces.org/ui"
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 :)
Excluirnão sabia que o do 3.0 mudava rsrs... comecei direto nele rsrs
Excluirvlws =D novato eu .. inocente kkkk
Parabéns , mto bom tutorial, me ajudou mto. Obrigado
ResponderExcluirMe ajudou muito! não conhecia esse recurso, obrigado
ResponderExcluir