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!

21 comentários:

  1. legal andi, qual sera o projeto que iremos desenvolver aqui?

    ResponderExcluir
  2. Como havia falado pelo grupo, não teremos um foco em um projeto, apenas componentes tipo fileupload, schedule... e assim por diante.

    ResponderExcluir
  3. Olá andii tudo bem ?

    Leio seu blog a bastante tempo e tem me sido muito util principalmente em tirar algumas duvidas sobre o primefaces.

    Espero que você faça um post relacionado ao uso do Schedule do Prime...

    Abraços.

    ResponderExcluir
    Respostas
    1. Olá Sir. Gates!
      Schedule é um dos próximos posts sim, acho ele um componente fantástico, mas já adianto que não está fácil "desvendar" tudo sobre ele, mas se eu não conseguir, passo apenas o básico sobre ele!

      Excluir
    2. Olá anddii,

      Bom para mim foi dificil lidar com este componente, tanto que acabei desistindo dele.Mas vou aguardar ancioso pelo seu post.

      Abraços

      Excluir
  4. ola, sou novo por aqui e ja estou encontrando dificuldades pois o poste é para netbeans e eu uso linux com eclipse, tem como fazer um poste ou me indicar um que seja para eclipse, gostaria de rodar jsf, primefaces e hibernate no eclipse, porem as tags p: e h: nao tem o autocomplete. e de tanto ler acabou confundindo minha mente pois cada hora um diz uma coisa, web.xml, é para adicionar as libs, é para mexer no tomcat, e por ai vai... obrigado!

    ResponderExcluir
    Respostas
    1. Olá Lettus... olha, faz muito tempo que eu não mecho com o eclipse, mas acabei escolhendo o Netbeans por ser bemmm mais prático, e por conta do GlassFish, até tentei usar o eclipse, mas também tive muita dificuldade no começo e parti para o netbeans.

      Excluir
  5. Olá, Anddiii. Tudo bem? Ve se você pode me ajudar estou tentando exibir imagem em um p:datagrid com p:graphicimagem e não aparece nada, sequi as indicações do pobrecomputeiro. http://pobrecomputeiro.wordpress.com/2010/11/10/datatable-com-imagem-em-primefaces-e-jsf/ e a minha situação é semelhante a sua, o meu f:attribut chega no método mas continua sem mostrar, na época qual foi a sua resolução? Conseguiu? Pode me ajudar?

    ResponderExcluir
    Respostas
    1. Olá, tive que usar uma solução diferente, dessa forma eu não consegui resolver... mas consegui assim:
      private void carregarImagem(Pessoa p) {
      try {
      FacesContext facesContext = FacesContext.getCurrentInstance();
      ServletContext scontext = (ServletContext) facesContext.getExternalContext().getContext();
      if (p.getFoto() != null) {
      String nomeArquivo = p.getCodigo().toString() + ".jpg";
      String arquivo = scontext.getRealPath("/temp/pessoas/" + nomeArquivo);
      FileOutputStream fos;
      fos = new FileOutputStream(arquivo);
      fos.write(p.getFoto());
      fos.close();
      }
      } catch (IOException e) {
      e.printStackTrace();
      }
      }

      e chama assim:
      p:graphicImage value="/temp/pessoas/#{pessoaBean.pessoa.codigo}.jpg"


      Obs: você vai ter que passar a lista que preenche o dataGrid por um for, e chamar esse método.

      Excluir
  6. Andiii, obrigado. Consegui graças a sua ajuda. Valeu.

    ResponderExcluir
  7. Respostas
    1. Calma frioli, a partir dessa semana devo voltar a escrever, não estou mais trabalhando durante o dia, agora eu tenho tempo!!

      Excluir
  8. Faz um post sobre o datatable do prime 3, a implementação dele é diferente do 2.0 principalmente quando usa o selecition mode

    ResponderExcluir
  9. Ola Andii ... baixei o tema no caso bluesky-1.0.8.jar coloquei na pasta lib ... adicionei o jar no projeto ... inseri a linha no web.xml porem aparece o seguinte erro :

    javax.faces.FacesException: Error loading theme, cannot find "theme.css" resource of "primefaces-bluesky" library

    Poderia me ajudar com isso?

    Muito obrigado.

    []s

    ResponderExcluir
    Respostas
    1. Desculpa a demora pra responder, mas acredito que vc esteja colocando o param-value como primefaces-bluesky e não apenas bluesky que é o correto.

      Excluir
  10. Tentei seguir o tutorial, pois preciso apresentar um trabalho na terça feira sobre o primefaces. Quero mostrar a codificação, mas tá dando erro. Aparece simplesmente erro 404 e as mensagens:

    HTTP Status 404 -

    type Status report

    message

    descriptionThe requested resource () is not available.

    GlassFish Server Open Source Edition 3.1.2.2

    O que pode estar acontecendo. Se puder me ajudar, ficarei grato! :D

    ResponderExcluir
    Respostas
    1. Pedro, como vc está chamado a página no navegador? pois o erro 404 é de página não encontrada

      Excluir
  11. Olá amigo, gostaria uma opinião.


    Desenvolvo em Java e Flex,

    Gostaria de aprender algo novo se tratando de RIA.

    O PrimeFaces seria uma boa escolha?
    Poderia opinar?

    Origado.

    ResponderExcluir
    Respostas
    1. Olá Tiamati, então eu sou suspeita para falar sobre o primefaces rsrs pois pra mim ele sempre foi super útil, mas já trabalhei com richfaces e não gostei, por isso entrei nessa do primefaces.

      Excluir

Deixe seu comentário... ;)