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

10 reasons why we love JSF

1. One-slide technology: it's so simple that I can explain basic JSF with one slide. 2. Easy to extend: components, listeners, render kit, Events, Controller, etc. 3. Real-world adoption: JBoss, Exadel, Oracle, IBM, ... 4. Architecture model: you can choose between more than 100 different architecture. 5. Open-mind community: using JSF you are going to meet very interesting people. 6. We are using JSF the last 5 years and we found very good market for JSF in Brazil 7. Progress: look to JSf 1.1 to JSF 1.2, JSF 1.2 to JSF 2.0. People are working really hard! 8. Many professionals now available 9. It's a standard. It's JCP. Before complain, report and help! 10. Ed Burns, spec leader, is an old Globalcode community friend! EXTRA: My wife is specialist in JSF. She's my F1 for JSF :) Nice job JSF community! -Vinicius Senger

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

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

Seja palestrante no TDC!

Os interessados em palestrar na maior plataforma de Inovação Aberta para desenvolvimento do ecossistema de teologia, tem até 25 de setembro para se inscrever A última edição do ano do TDC (The Developer's Conference), maior conferência para profissionais de tecnologia do Brasil, já tem data confirmada. O TDC Future, que acontece nos dias 6 a 8 de dezembro, em formato híbrido, ocorrerá presencialmente na UniRitter de Porto Alegre, e com transmissão simultânea pela plataforma Hopin. O evento traz como tema central: “O papel da tecnologia na construção do amanhã”, e reúne gestores, especialistas e profissionais da área para debater sobre o futuro da tecnologia, o impacto na vida das pessoas e seu papel na transformação da sociedade. A seleção de palestras nacionais e internacionais, ainda está com o Call4Papers aberto até 25 de setembro, os interessados em participar poderão submeter uma proposta por meio do site do evento . O tema deve estar vinculado a uma trilha específica, que é...

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