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

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...

TDC ONLINE: SUA PLATAFORMA DE PALESTRAS GRAVADAS DO TDC DISPONÍVEL

Além do conteúdo ao vivo transmitido online nas edições do TDC, agora você pode ter acesso à centenas de palestras gravadas, através da nossa nova plataforma de vídeos - o TDC Online, que reúne todas as Trilhas premium, Stadium e Salas dos Patrocinadores das edições anteriores de 2022, TDC Innovation e TDC Connections.  Para acessar, basta clicar na edição em que você participou ( TDC Innovation ou TDC Connections ); Fazer o mesmo login (com e-mail e senha) cadastrados na hora de adquirir ou resgatar o seu ingresso no TDC; E clicar na Trilha de sua opção, e de acordo com a modalidade do seu ingresso. Logo em seguida, você será direcionado para a seguinte página com a lista de todas as palestras por Trilha: Pronto! Agora você tem acesso à centenas de palestras gravadas da sua área de interesse, para assistir como e quando quiser! Caso tenha esquecido a senha, clique na opção "Esqueci a senha" , insira o e-mail que você realizou para o cadastro no evento, e aparecerá a op...

TDC BUSINESS, chega a São Paulo com novas trilhas de Inteligência Artificial e Inovação

Maior conferência de profissionais de tecnologia do Brasil abordará temas em alta no momento como, por exemplo, Inteligência Artificial, Segurança, Ciência de Dados e Inovação O TDC BUSINESS, a 17° edição do The Developer's Conference na cidade de São Paulo, que acontece entre os dias 19 e 21 de Setembro, reunirá profissionais e especialistas da área para troca de experiência, compartilhamento de conteúdos e networking. Com o tema central: “Tecnologia para negócios transformadores”, o evento será totalmente híbrido, ocorrendo presencialmente no espaço Pro Magno, e com transmissão simultânea e atividades de network pela internet. A expectativa é reunir mais de 14.000 pessoas, somando a participação presencial e online.   Segundo Yara Mascarenhas, Fundadora e Host do Evento, “nosso objetivo com o TDC é inspirar a colaboração entre os profissionais e empresas para construir uma nova realidade para o mercado de TI.  Vamos juntar tecnologia e negócios com as trilhas técnicas...

12 ESQUENTAS TDC ESPERANDO POR VOCÊ

O TDC nasceu do sonho de profissionais que valorizam o compartilhamento de conhecimento, experiências e oportunidades entre as comunidades de desenvolvedores.  Por isso, o crescimento do TDC nunca poderia ficar longe do crescimento das comunidades! Pensando nessa união, criamos um projeto quente: O ESQUENTA TDC ! Visando divulgar os meetups de comunidades que querem transformar e inspirar carreiras, foi co-criado este projeto lindo e cheio de apoio, onde o TDC abraça meetups de diversas comunidades espalhadas pelo Brasil e elas contribuem com a divulgação da edição regente.  O TDC Innovation vai rolar de 14 a 16 de JUNHO, mas até lá vão acontecer muitos encontros incríveis!  Fique por dentro das comunidades que vão participar, quais temas irão abordar e claro as datas e locais para você participar. 💥Esquentas TDC Innovation 2023: 24/05 - Esquenta TDC: Carreira e Desenvolvimento Presencial em Floripa das 19:00 as 21:30 com inscrição AQUI Comunidade: Google Developer...

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...

JavaOne Brasil, dicas para submissão de palestras

Não quero parecer pretensiosa dando dicas para submissão de palestras para o JavaOne Brasil, mas sim repassar os tantos conselhos e sugestões recebidas pelos vetaranos do JavaOne: Bruno Souza e Leonardo Galvão que revisaram dezenas de submissões para o JavaOne e ajudaram a aprovar tantas palestras, e também misturar um pouco da minha experiência na seleção de palestras nos eventos realizados pela Globalcode e SouJava . 10 anos de JavaOne: http://www.globalcode.com.br/noticias/Globalcode10AnosNoJavaOne Os palestrantes ganham a entrada! A submissão pode ser feita em português! O passo mais importante para ser aprovado como palestrante no JavaOne é sem dúvida nenhuma submeter pelo menos uma palestra. Então, independente de qualquer coisa, participe, arrisque, divulgue.  Mas, se quiser aumentar as suas chances...   1) Leve a sério: peça para amigos fazerem uma leitura crítica do texto, e claro uma boa revisão ortográfica. 2) Submissão de várias palestras ou variações do ...