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

Postagens mais visitadas deste blog

Compilador GWT, não se preocupe com JavaScript!

Nesse post vou escrever um pouco sobre o Compilador do Google Web Toolkit , qual é o seu papel no kit, além de algumas dicas para o dia-a-dia no desenvolvimento com a tecnologia. Como exemplo vou usar um novo Projeto Web no Eclipse criado a partir do Google Plugin   para desenvolvimento GWT e/ou App Engine, acesse aqui mais informações e download. Depois de instalar o plugin, dentro do Eclipse siga a sequência para criar o projeto: New - Others - Google - Web Application Project - Defina o nome do projeto e a estrutura raiz de pacotes - Finish. Vou adotar como nome do projeto appGWT e pacote br.com.globalcode . O plugin gera uma aplicativo pronto que permite ao usuário preencher um campo e realizar o envio ao servidor de forma assíncrona (Ajax), quando o servidor responde um Dialog é apresentado com a mensagem de retorno. Para testar a aplicação é só executar o projeto com a opção Wep Application . Veja: O GWT, como já foi comentado , adota um conceito bem interess

O que é Lógica de programação?

Este é o segundo de uma série de posts voltados aos leitores do blog que estão dando início à carreira de desenvolvimento de software. O assunto de hoje é a lógica de programação. Para ler antes: Entendendo como funciona a programação de computadores: linguagens de programação, lógica, banco de dados A lógica de programação é um pré-requisito para quem quer se tornar um desenvolvedor de software, independente da linguagem de programação que se pretende utilizar. Mas o que é de fato a Lógica de Programação e como saber se eu tenho esse pré-requisito? A lógica de programação nada mais é do que a organização coerente das instruções do programa para que seu objetivo seja alcançado. Para criar essa organização, instruções simples do programa, como mudar o valor de uma variável ou desenhar uma imagem na tela do computador, são interconectadas a estruturas lógicas que guiam o fluxo da execução do programa. Isso é muito próximo ao que usamos em nosso cotidiano para realizar atividad

JavaMail: Enviando mensagem HTML com anexos

Introdução Depois do post "JavaMail: Enviando e-mail com Java" , que apresentava como enviar um e-mail com Java, resolvi complementar a assunto apresentando como enviar uma mensagem formatada, em HTML , e também como realizar o envio de anexos. Bibliotecas Além da biblioteca JavaMail, veja mais no post anterior , é necessário incluir o JavaBeans Activation Framework (JAF), apenas se a versão utilizada for anterior ao JSE 6.0 , que já tem o JAF incluso. O JAF está disponível em http://www.oracle.com/technetwork/java/javase/downloads/index-135046.html , e neste download encontramos, alguns exemplos na pasta demo , documentação, incluindo javadocs, na pasta docs e a biblioteca activation.jar , que deve ser acrescentada no classpath da aplicação para versões anteriores ao JSE 6.0. Exemplo Primeiramente devemos realizar a configuração da javax.mail.Session e da javax.mail.internet.MimeMessage , estes passos podem ser vistos no post anterior . Agora vamos montar um

Dica rápida: Apagando registros duplicados no MySQL

Ola pessoal, Sei que vocês estão acostumados a ver posts meus sobre tecnologia móvel ou algo relacionado, mas hoje vou falar sobre um pequeno "truque" que usei esse final de semana com o MySQL. Eu estava desenvolvendo o lado servidor de uma nova aplicação mobile (ahh, então "tem a ver" com mobile hehe), e quando fui fazer alguns testes percebi que tinha quase 7 mil registros duplicados (!!!) na minha base de dados! Bom, o meu primeiro reflexo como programador foi pensar em fazer um "programinha" Java para buscar e deletar todos esses registros duplicados. Mas ai, resolvi tirar as teias de aranha dos neurônios e usar os vários anos de experiência que passei com SQL e criar uma query que fizesse esse trabalho todo de uma vez!! E a query ficou assim: delete from TABLE_NAME USING  TABLE_NAME, TABLE_NAME  AS  auxtable WHERE   ( NOT  TABLE_NAME.id  =  auxtable.id ) AND   ( TABLE_NAME.name  =  auxtable.name ) Explicação direta: TABLE_NAME

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

Lançamento do JDK 7 no TDC2011 em São Paulo

O The Developer's Conference foi realmente um grande momento para toda comunidade de desenvolvedores, um encontro de comunidades de TI onde foi possível interagir com pessoas incríveis das comunidades .NET, PHP, Python, Cloud, Games e tantas outras. Com mais de 200 palestrantes e 25 coordenadores é difícil até citar nomes sem ser injusta. Neste post gostaria de falar um pouco sobre um acontecimento muito especial para a comunidade Java, o Lançamento mundial do JDK 7! A história toda começou há muito tempo atrás, num relacionamento construído ao longo de vários anos de atuação dos membros do SouJava, participando do JavaOne, das JSRs e muito networking. Mas, durante o último JustJava conversamos com Roger Brinkley e Bruno Souza, e tivemos a felicidade de ter o TDC2011 exatamente no dia planejado para o Lançamento Mundial do JDK7. O grande mérito foi do SouJava e do amigo Bruno Souza (JavaMan). Com a participação formal no Executive Committeé do JCP estamos ficando cada vez ma