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