Pular para o conteúdo principal

PrimeFaces com JSF2 no ScrumToys

O JSF traz um grupo de componentes visuais prontos, a partir da versão 2.0 com suporte a Ajax nativo! Melhor que isso é a possibilidade de customizar ou utilizar uma suíte de componentes prontos para "turbinar" o projeto com o minimo de esforço.

PrimeFaces é uma suite de componentes JSF customizados, a maioria com suporte a ajax, conta com um Kit para desenvolvimento mobile, é open source, a documentação é razoável, facíl de instalar e usar. Nesse exemplo utilizo o PrimeFaces 2.0.0, versão com suporte a JSF 2, no ScrumToys.

Conheçe o ScrumToys? ScrumToys é um Projeto Exemplo para JavaServer Faces 2.0 dentro do NetBeans 6.8, criado e mantido pelo time da Globalcode.

É interessante que você tenha o NetBeans 6.8 para fazer esse exemplo, senão tiver baixe aqui. Baixe também, aqui, o PrimeFaces e o configure no NetBeans como biblioteca para o ScrumToys. Inicialmente o PrimeFaces requer a runtime JSF, mas isso pode variar dependendo de quais componentes você utilize, mais informações leia a documentação da suite.

Vamos fazer duas customizações no ScrumToys, no mesmo ponto: a listagem de Projetos (nas páginas web: /project/show.xhtml).

É necessário configurar o PrimeFaces Resource Servlet no web.xml, conforme trecho a seguir:
  ...
  <servlet>
    <servlet-name>Resource Servlet</servlet-name>
    <servlet-class>
      org.primefaces.resource.ResourceServlet
    </servlet-class>
  </servlet>
  
  <servlet-mapping>
    <servlet-name>Resource Servlet</servlet-name>
    <url-pattern>/primefaces_resource/*</url-pattern>
  </servlet-mapping>
  ...


A primeira customização no ScrumToys é permitir ao usuário redimensionar as colunas da listagem de Projetos, para isso vamos usar o datatable e column redimensionável do PrimeFaces. Adicione o xmlns do PrimeFaces na tag html do página /project/show.xhtml para acessar os componentes, como esse exemplo:
  ...
  <html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.prime.com.tr/ui">
  ...


Agora vamos substituir o componente datatable e columns atual pelo seguinte:
  ...
  <p:dataTable value="#{projectManager.projects}" var="project"
      rendered="#{projectManager.projects.rowCount > 0}"
      id="dtProjects">
    <p:column>
      <f:facet name="header">
        <h:outputText value="#" />
      </f:facet>
      <h:outputText value="#{projectManager.projects.rowIndex + 1}" />
    </p:column>

    <p:column resizable="true">
      <f:facet name="header">
        <h:outputText value="#{i18n['project.show.table.header.name']}" />
      </f:facet>
      <h:outputText value="#{project.name}" />
    </p:column>

    <p:column resizable="true">
      <f:facet name="header">
        <h:outputText value="#{i18n['project.show.table.header.startDate']}"/>
      </f:facet>
      <h:outputText value="#{project.startDate}">
        <f:convertDateTime pattern="#{i18n['project.show.table.header.startDate.pattern']}" />
      </h:outputText>
    </p:column>

    <p:column>
      <f:facet name="header">
        <h:outputText value="#{i18n['project.show.table.header.endDate']}"/>
      </f:facet>
      <h:outputText value="#{project.endDate}">
        <f:convertDateTime pattern="#{i18n['project.show.table.header.endDate.pattern']}" />
      </h:outputText>
    </p:column>

    <p:column>
      <f:facet name="header">
        <h:outputText value="#{i18n['project.show.table.header.actions']}"/>
      </f:facet>
      <h:commandButton styleClass="botaoPostIt" action="#{projectManager.edit}"
        value="#{i18n['project.show.button.edit']}" />
      <h:commandButton styleClass="botaoPostIt" action="#{projectManager.remove}" 
        value="#{i18n['project.show.button.delete']}" />
      <h:commandButton styleClass="botaoPostIt" action="#{projectManager.showSprints}"
        value="#{i18n['project.show.button.showSprints']}" />
    </p:column>
  </p:dataTable>
  ...


Pronto, é só executar o projeto! Veja que as colunas de Nome e Data Início do Projeto podem ser redimensionadas!

A segunda customização envolve o mesmo componente, vamos habilitar ordenação na coluna do Nome do Projeto e ativar paginação via Ajax no na lista de Projetos.
Na segunda tag colunm defina a propriedade sortBy="#{project.name}", veja:
  ...
  <p:column resizable="true" sortBy="#{project.name}"><f:facet name="header">
      <h:outputText value="#{i18n['project.show.table.header.name']}" />
    </f:facet>
    <h:outputText value="#{project.name}" />
  </p:column>
  ...

No datatable ative a propriedade paginator="true" e rows="5", paginando dessa forma de 5 em 5 registros, segue o trecho de código:
  ...
  <p:dataTable value="#{projectManager.projects}" var="project"
      rendered="#{projectManager.projects.rowCount > 0}"
      id="dtProjects" paginator="true" rows="5">
  ...

Execute o projeto novamente.

Simples assim! Novas funcionalidades, sem perder ou quebrar o que está funcionando, fácil e rápido.

Desenvolvimento web baseado em componentes visuais (interface gráfica), foi o que mais me chamou a atenção no meu primeiro contato com JSF. Hoje, depois de 6 anos e alguns projetos utilizando a tecnologia, isso continua me motivando.

Explore o ScrumToys, aprenda os recursos do JavaServer Faces, teste, modifique, participe. Essa é a proposta do projeto!


Mais sobre o ScrumToys:

Mais sobre o PrimeFaces:

[]'s
Eder Magalhães
www.yaw.com.br
twitter.com/youandwe
twitter.com/edermag

Comentários

Ricardo Longa disse…
Bacana o post... Já estou fazendo alguns testes com a versão para JSF 1.2.

Abcs!
Amiguinho disse…
Bacana ! Vou tentar executar. Abraços,
Anônimo disse…
bem demais isso... só vem agregar mais. valeu
Junior Osho disse…
bem que poderia disponibilizar o codigo pronto com postgresql e relatorio ajjajajaj seria tudo.

Postagens mais visitadas deste blog

Saiba como programar para Arduino sem ter nenhum hardware disponível

O Arduino já é uma tecnologia muito difundida entre os amantes de tecnologia. É difícil encontrar um profissional da computação que não brincou um pouco com esta ferramenta de prototipagem ou, que gostaria de fazer isso. Porém, em alguns casos, o programador quer conhecer o arduino mas não dispõe de nenhum hardware, nem mesmo da placa. Como isso poderia ser resolvido? A primeira resposta seria aquela mais simples e direta: ir as compras. Isso pode ser feito em uma loja física ou pela internet. No meu caso, por exemplo, tive a felicidade de encontrar em um site (não me lembro qual) um kit arduino, com um conjunto de sensores e um DVD com 41 vídeo aulas. Mas digamos que o profissional não esteja passando por um bom momento financeiro, ou ainda, simplesmente não queira comprar o Arduino sem antes conhecê-lo um pouco melhor. Para a última situação também já existe uma resposta, e diga-se de passagem, uma excelente resposta. Trata-se do site 123D Circuits.io . Depois de criar seu u

Entendendo como funciona a programação de computadores: linguagens de programação, lógica, banco de dados

Nesse post, diferente dos últimos que foram mais enfáticos nas experiências com tecnologias, vou focar um pouco mais nos profissionais que estão começando, ou pretendem ingressar na área de desenvolvimento de software, falando sobre conceitos fundamentais relacionados a programação em geral . Mercado de trabalho para programação Conforme já sabemos, o mercado de desenvolvimento de software, especialmente no Brasil, continua em franca expansão, sendo que cada vez mais as empresas buscam desenvolver seus próprios sistemas usando as mais diferentes e novas tecnologias. Algumas matérias interessantes: As seis profissões mais valorizadas em 2010 no IDG Now! Muitas vagas e sensação de reaquecimento da economia Por isso, a área de desenvolvimento de software tem despertado interesse em muitos profissionais de outras áreas que desejam mudar de profissão, já que as oportunidades de trabalho tendem a ser maiores. Esse é um perfil presente em muitos dos clientes da Globalcode que acabou m

JSON fácil em Java com GSon !

Ola pessoal ! O formato JSON ( J ava S cript O bject N otation) vem se consagrando cada vez mais na comunicação de dados, principalmente nos dispositivos móveis devido a esse formato ser mais leve que o XML e também mais legível. Uma prova disso são as inúmeras bibliotecas que existem para manipular esse formato, e no caso do Android, o suporte ao JSON é nativo. Mas apesar de ter esse suporte nativo, algumas operações devem ser feitas manualmente e o código acaba ficando um pouco verboso e repetitivo, já que para cada objeto que se deseja transmitir é necessário fazer um método que lê as propriedades do JSON e faz as devidas atribuições no seu objeto Java. Vamos supor o seguinte objeto sendo transmitido em JSON: {   user: {     id: 123456,     name: "Neto Marin",     username: "netomarin",     email: "netomarin@globalcode.com.br"   } } Se você fosse tratar um Webservice que envia esse JSON para o seu aplicativo Android, além de criar a o