22 de julho de 2012

PrimeFaces 3.3: Começando...

Vamos começar criando um projeto básico do básico. Para os exemplos futuros, estarei usando o NetBeans 7.1 e o GlassFish 3.1.1. Então crie uma Aplicação Web no netBeans, caso não saiba como fazer isso, veja aqui
Para baixar o PrimeFaces, clique aqui, basta selecionar a versão que quer utilizar, estarei usando a versão 3.3, irei aguardar um pouco para testar a 3.3.1.

A estrutura do projeto será a seguinte:

Depois de criado o projeto, adicione a biblioteca do PrimeFaces no projeto (para fazer isso, botão direito em Bibliotecas e Add jar/pasta, e encontre a biblioteca que foi baixada).

Aproveitando a página index.xhtml (criada automaticamente ao criar o projeto), vamos adicionar a namespace do PrimeFaces na tag html: 

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

A página deverá ficar dessa forma:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Start com PrimeFaces 3.3</title>
    </h:head>
    <h:body>
        <h:form>
            <p:editor />
        </h:form>
    </h:body>
</html>

Lembrando que para o PrimeFaces funcionar, é extremamente necessário que haja a tag head. para este exemplo, apenas utilizei o componente p:editor, o resultado é o seguinte:


Como eu falei, esse é só o começo de como usar o PrimeFaces...


Temas


Quanto aos temas, podem ser visualizados aqui: Temas PrimeFaces. e podem ser baixados pelo repositório do próprio Prime, aqui. Para baixar um tema escolha-o pelo nome na galeria de temas, e o procure no repositório, aconselho utilizar a ultima versão, a maioria dos temas se encontram (até o momento da postagem) na versão 1.0.6.
Depois e escolhido o tema, adicione às bibliotecas juntamente com a biblioteca do PrimeFaces, e no WEB-INF/web.xml, adicione as seguintes tags:
<context-param>  
    <param-name>primefaces.THEME</param-name>  
    <param-value>bluesky</param-value>  
</context-param> 

Para este exemplo, escolhi a biblioteca Bluesky, por isso dentro da tag param-value deve ser colocado o nome do tema, sem a versão.
Para quem deseja ter seu próprio tema, use o JQuery UI - ThemeRoller, para saber como utilizar seu próprio tema, veja o final desta postagem.

Até mais!