JSF 2.0 tirando proveito dos componentes: PrimeFaces + RichFaces + ICEfaces, com demos no ScrumToys

1. JSF2 tirando proveito dos componentes:
RichFaces / IceFaces / PrimeFaces
Yara Senger Eder Magalhães
@yarasenger @edermag
Globalcode – Open4education

2. Agenda
Introdução ao JavaServer Faces
Extensões de componentes JSF
Novidades do RichFaces
Um pouco mais sobre o PrimeFaces
Uma visão do ICEFaces
Links e Twitters
Globalcode – Open4education

3. O que é o JSF
Um dos principais frameworks Java p/ web;
Desenvolvimento baseado em componentes UI;
Permite criação e extensão de componentes;
Implementa um modelo de eventos simulando um
aplicativo Desktop;
Adota o MVC encapsulando a infra-estrutura do
ambiente web;
Fácil de aprender e usar;
Especificação Java EE;
Globalcode – Open4education

4. Nada é perfeito, JSF 2!
Suporte nativo a Ajax e Annotations;
Templates baseado no Facelets;
Criação de componentes UI através de xhtml;
Navegação implícita;
Melhorias no mecanismo de eventos;
Evolução na gestão de recursos (contexto);
Suporte a requisição via GET, Bookmarkable;
Ufa, ainda tem mais...
Globalcode – Open4education

5. Produtividade
Extensão de componentes, um dos pontos mais
fortes do JSF:
RichFaces
ICEfaces
PrimeFaces
MyFaces Tomahawk / Trinidad
PrettyFaces
Woodstock
WebGalileo Faces
Globalcode – Open4education

6. Aproveite é “Di Gratis”
Globalcode – Open4education

7. ScrumToys, oportunidade!
Aplicação para gestão de Projetos, Sprints,
Estórias e Tarefas;
Implementa vários recursos do JSF;
JSF 2, JPA, Maven, Glassfish, JavaDB;
Open Source, criado e mantido pela comunidade
brasileira;
Projeto Referencia do Glassfish;
Projeto Exemplo no Netbeans;
Nossa “cobaia”;
Globalcode – Open4education

8. RichFaces
Versão: 4.0.0 M1;
Melhora o controle de requisições Ajax do JSF 2;
Performance otimizada client e server-side;
Todo código JavaScript baseado em Jquery;
Revisão e refactoring (html) em alguns
componentes;
Revisão simplificando o uso do CDK;
Muitos componentes;
Globalcode – Open4education

9. RichFaces e o render
Valores aceitos no render conforme JSF2:
@all @none @this @form, ids, coleção ou via EL
Mais opções na renderização Ajax
<a4j:ajax render="tabelaId:@body" />
<rich:column>
<a4j:commandButton render="@row" />
</rich:column>
Globalcode – Open4education

10. RichFaces submit Ajax
Granularidade no envio de dados por Ajax
<a4j:region>
<h:output value="Nome" />
<h:input id="itName" value="#{spMng.sprint.name}" />
<h:output value="Objetivo" />
<h:inputTextarea id="itGoals" value="#{spMng.sprint.goals}"/>
<h:commandButton action="#{spMng.checkSprint}" >
<a4j:ajax/>
</h:commandButton>
<a4j:region>
<!-- <f:ajax execute="@this itName itGoals“ /> -->
Globalcode – Open4education

11. RichFaces e a JSR 303
Validação também no client-side / JavaScript
<h:input id="itName" value="sprint.name">
<rich:clientValidator />
</h:input>
<h:message for="itName" />
http://community.jboss.org/message/545862
Globalcode – Open4education

12. Demo I
RichFaces no ScrumToys!
Um datatable com refresh ajax no @body da table;
+
Globalcode – Open4education

13. PrimeFaces
Versão 2.0.2 (production);
+ 90 componentes;
Componentes leves, simples de usar;
TouchFaces para mobile;
Componentes para Ajax push;
Globalcode – Open4education

14. PrimeFaces components
<p:dataTable
var=“p" value="#{projectManager.projects}" paginator="true" rows="5">
<p:column> ... </p:column>
</p:dataTable>
<p:carousel value="#{dashboardManager.stories}" var="story" rows="1">
<h:panelGrid columns="1" cellpadding="5">
<h:outputText value="Estoria: #{story.name}" />
</h:panelGrid>
</p:carousel>
E vários outros...
http://www.primefaces.org/showcase/ui/home.jsf
Globalcode – Open4education

15. Demo II
Agora PrimeFaces no ScrumToys.
DataTable com paginação e sort
BreadCrum p/ barra de navegação
Carousel na tela de dashboard de tarefas
+
Globalcode – Open4education

16. ICEfaces
Versão: 2.0.0 Beta1;
Compatível com JSF 2;
Implementa um novo escopo: @WindowScope;
Continua replicando a estrutura DOM no server-
side;
Implementa um API especifica para Push:
icepush.jar
Globalcode – Open4education

17. Demo III
E pra fechar o ICEFaces!
Um Chat no ScrumToys.
+
Globalcode – Open4education

18. Alguns detalhes...
Todas as tecnologias são Open Source;
O mais maduro
PrimeFaces
Suporte ao Google App Engine:
PrimeFaces
PrimeFaces em constante evolução;
RichFaces mais maduro que o ICEfaces;
API paralela para o legado (JSF 1.2);
Globalcode – Open4education

19. Links
http://jboss.org/richfaces
http://mkblog.exadel.com/tag/richfaces/
http:///relation.to/14509.lace
http://www.primefaces.org
http://www.icefaces.org/pages/ICEfaces-2.0-roadmap-jsf-
2.0-update.html
http://wiki.icefaces.org/display/ICE/ICEfaces+2+Overview
http://blog.globalcode.com.br/search/label/JSF
Globalcode – Open4education

20. Follow
#JSF no twitter:
@edburns
@maxkatz
@cagataycivici
@kito99
@jasondlee
@richfaces
@primefaces
Globalcode – Open4education

21. É isso!
Obrigado 
yara@globalcode.com.br eder@yaw.com.br
@yarasenger @edermag
Globalcode – Open4education