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