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:
1 | 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:
1 2 3 4 5 6 7 8 9 10 | < 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:
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á:
Olá! fico feliz em saber que o que eu escrevo é divulgado por outros blogs também! Obrigada :)
ResponderExcluirClaro minha Amiga Andii,
ResponderExcluirTudo que é relevante e interessante saber sobre nossa tecnologia é importante ser passado para frente e divulgado...