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:
- JSF 2.0 Scrum Demo
- O projeto ScrumToys no site do NetBeans
- JSF 2.0 e ScrumToys
- JSF 2.0 Scrum Whiteboard, por Eder Magalhães
- JSF 2.0, por Vinicius Nunes
Mais sobre o PrimeFaces:
[]'s
Eder Magalhães
www.yaw.com.br
twitter.com/youandwe
twitter.com/edermag
Postagens
4 comentários:
Bacana o post... Já estou fazendo alguns testes com a versão para JSF 1.2.
Abcs!
Bacana ! Vou tentar executar. Abraços,
bem demais isso... só vem agregar mais. valeu
bem que poderia disponibilizar o codigo pronto com postgresql e relatorio ajjajajaj seria tudo.
Postar um comentário