Your SlideShare is downloading. ×



Published on

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. PRIMEFACES Çağatay Çivici
  • 2. Çağatay Çivici Apache MyFaces PMC “The Definitive Guide to Apache MyFaces and Facelets” Co-Author Reference in “Core JSF 2nd Edition” (Sun Core Series) Technical reviewer of “JBoss Seam and Trinidad” and “Apache MyFaces” books Speaker in JSFOne, JSFDays, universities and local Java Groups. PrimeFaces founder and project lead Krank CRUD framework team member Trainer, Consultant, Mentor FC Barcelona fan Prime Teknoloji (UK-TURKEY)
  • 3. Prime Teknoloji Consulting, Training, Software Development Agile Agile Agile, TDD, Patterns Java EE, JSF, Spring, Seam, JPA PrimeFaces
  • 4. JSF Joint Strike Fighter Crew: 1
  • 5. Java Server Faces Standard WEB Framework of JAVA EE Component Oriented Event driven Swing and WEB Apache MyFaces and Sun Mojarra (RI) Vendor support (Sun, IBM, Oracle, JBoss, Apache etc)
  • 6. Apache MyFaces JSF 1.1 ve 1.2 implementation Tomahawk Trinidad Tobago Portlet Bridge RI Orchestra ExtVAL
  • 7. JSF Tools Netbeans JBoss Tools MyEclipse Eclipse WTP JDeveloper IBM RAD IDEA Macromedia Dreamweaver
  • 8. Component Libraries MyFaces Tomahawk MyFaces Trinidad MyFaces Tobago JBoss RichFaces IceFaces Quipukit NetAdvantage WebGalileo
  • 9. PrimeFaces Open Source Rich Components Easy AJAX XML Free JSF Detailed Documentation Not a framework
  • 10. Open Source Model May the source be with you Free :) Apache Software Foundation Experience Turkey and Open Source
  • 11. Turkish Support Turkish Docs (160 + sayfa) Turkish enabled components Turkish support forum
  • 12. PrimeFaces Modules UI Components Optimus FacesTrace Mutually Exclusive modules
  • 13. Installation 1) Download 2) Logging ve SLF4J 3) Resource Servlet 4) JSP or Facelets Taglib 5) p:resources Let’s ROCK!
  • 14. Manuel Download Google code page:
  • 15. Maven Download <repository> <id>prime-repo</id> <name>Prime Technology Maven Repository</name> <url></url> <layout>default</layout> </repository> <dependency> <groupId>org.primefaces</groupId> <artifactId>primefaces-ui</artifactId> <version>0.8.1</version> </dependency>
  • 16. Resource Servlet Serving packed resources (js, css, ...) <servlet> <servlet-name>Resource Servlet</servlet-name> <servlet-class> org.primefaces.ui.resource.ResourceServlet </servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Resource Servlet</servlet-name> <url-pattern>/primefaces_resources/*</url-pattern> </servlet-mapping>
  • 17. Taglib JSP Taglib <%@ taglib uri="" prefix="p" %> Facelets Namespace xmlns:p=""
  • 18. JSF Page <html xmlns="" xmlns:p=""> <head> <p:resources /> </head> <body> <p:editor /> </body> </html>
  • 19. UI Components Rich components Easy AJAX Flash chart components Unobstrusive Javascript Yahoo UI, Prototype, Scriptaculous
  • 20. Rich Components UIAjax DataTable AccordionPanel Dialog AutoComplete Editor Button ImageCropper Calendar Menu Captcha Panel Carousel Poll Charts Resizable ColorPicker Slider ConfirmDialog Tabview Tooltip Tree
  • 21. Easy AJAX Partial Page Rendering - PPR Declarative AJAX
  • 22. Ajax Update <h:form prependId=”false”> <h:inputText value="#{}" /> <p:button value="Save" update="name" async="true"/> <h:outputText id=”name” value="#{}" /> </h:form>
  • 23. Ajax Status Displaying Ajax request status Global Ajax Request indicator <p:ajaxStatus> <f:facet name="start"> <h:graphicImage value="ajaxloadingbar.gif" /> </f:facet> <f:facet name="complete"> <h:outputText value="User Saved" /> </f:facet> </p:ajaxStatus>
  • 24. Ajaxify Enables ajax on standard JSF components <h:inputText value="#{}"> <p:ajax event="keyup" update="name" /> </h:inputText> <h:outputText id="name" value="# {}" /> Trigger on any DOM event blur, keyup, click, change
  • 25. Ajaxify Remoting Invoking Java methods with JavaScript <h:inputText value="#{}"> <p:ajax event="blur" update="name" actionListener="# {createUser.checkUser}"/> </h:inputText> <h:outputText id="name" value="# {}" /> public void checkUser(ActionEvent actionEvent) { //Check }
  • 26. Ajax Polling Periodical Ajax Requests <h:form prependId="false"> <h:outputText id="number" value="# {counter.number}" /> <p:poll frequency="3" actionListener="# {counter.increment}" update="number" /> </h:form> private int number; public void increment(ActionEvent actionEvent) { number++; }
  • 27. Graphs Chart components (Pie, Line, Column and more) Interactive Live data display
  • 28. Pie Chart Example private List<Sale> sales; public SaleReport() { sales = new ArrayList<Sale>(); sales.add(new Sale("Brand 1", 540)); sales.add(new Sale("Brand 2", 325)); sales.add(new Sale("Brand 3", 702)); sales.add(new Sale("Brand 4", 421)); } <p:pieChart value="#{saleReport.sales}" var="sale" categoryField="#{sale.brand}" dataField="#{sale.amount}" />
  • 29. Interactive Charts ItemSelectEvent <p:pieChart value="#{salesReport.sales}" var="sale" categoryField="#{sale.brand}" dataField="#{sale.amount}" itemSelectListener="#{salesReport.selectSeries}" update="info" /> <h:outputText id="info" value="#{salesReport.message}" /> private String message; public void selectSeries(ItemSelectEvent event) { mesaj = "Item Index: " + event.getItemIndex() + ", Series Index:" + event.getSeriesIndex(); }
  • 30. Live Data <p:pieChart value="#{votesReport.votes}" var="vote" live="true" refreshInterval="5000" categoryField="#{vote.candidate}" dataField="#{vote.amount}" />
  • 31. Skinning Before After
  • 32. UI Components DEMO
  • 33. Javascript and PrimeFaces YUI, Prototype, Scriptaculous PrimeFaces Namespace and Javascript API PrimeFaces.widget.* PrimeFaces.ajax.* Unobstrusive Javascript
  • 34. PrimeFaces.widget.* PrimeFaces widgets Example: PrimeFaces.widget.Editor <script type=”text/javascript”> var editor = new PrimeFaces.widget.Editor(...); </script>
  • 35. PrimeFaces.ajax.* Ajax API PrimeFaces.ajax.AjaxUtils PrimeFaces.ajax.AjaxRequest PrimeFaces.ajax.AjaxResponse <script type=”text/javascript”> PrimeFaces.ajax.AjaxRequest(url, config, params); </script>
  • 36. Unobstrusive Javascript Vanilla JSF <h:commandbutton value=”Submit” onclick=”alert(‘Barca’)” /> <input type=”submit” name=”_id1” value=”Submit” onclick=”alert(‘Barca’)” /> PrimeFaces <p:button value=”Submit” onclick=”alert(‘Barca’)” /> <button type=”submit” name=”_id1” value=”Submit”/> YAHOO.util.Event.addListener(“_id1”,”click”, function(e) { alert(‘Barca’);}
  • 37. Optimus Non rendering goodies Guice integration Validators XML-free JSF PDF and Excel export Security Extensions and AOP
  • 38. Google Guice Integration Guice based JSF beans @Controller for <managed-bean /> Dependency Injection Aspect Oriented Programming
  • 39. Vanilla JSF 1.x Managed-Bean package; public class CreateUser { ... } faces-config.xml <managed-bean> <managed-bean-name>createUser</managed-bean-name> <managed-bean-class></managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> createUser.xhtml <h:inputText value=”#{}” />
  • 40. Optimus IOC package; @Controller(name=”createUser”, scope=Scope.REQUEST) public class CreateUser { ... } faces-config.xml createUser.xhtml <h:inputText value=”#{}” />
  • 41. Controller name scope Request Session Application View startup: Initiate on application startup
  • 42. Classpath scanning Scan specific packages <context-param> <param-name>optimus.SCAN_PATH</param-name> <param-value>org.sopranos.project.ui</param-value> </context-param> package org.sopranos.project.ui; @Controller(name=”createUser”, scope=Scope.REQUEST) public class CreateUser { ... }
  • 43. Dependency Injection CreateUser UserDAO userDAO implements UserDAOJPA
  • 44. Dependency Injection public interface UserDAO { public void save(User user); } public interface UserDAOJPA implements UserDAO { public void save(User user) { //Persist with JPA, EntityManager.persist(user) } } public class MainAppModule implements Module{ public void configure(Binder binder) { binder.bind(userDAO.class).to(UserDAOJPA.class).in(Scopes.SINGLETON); } } <context-param> <param-name>optimus.CONFIG_MODULES</param-name> <param-value>org.sopranos.moviestore.MainAppModule </param-value> </context-param>
  • 45. Simple Injection No getter and setter package; //imports @Controller(name=”createUser”, scope=Scope.REQUEST) public class CreateUser { @Inject private UserDAO userDAO; //Other stuff public String saveUser() {; } }
  • 46. Setter Enjeksiyonu package; //imports @Controller(name=”createUser”, scope=Scope.REQUEST) public class CreateUser { private UserDAO userDAO; @Inject public void setUserDAO(UserDAO userDAO) { this.userDAO = userDAO; } //Other stuff public String saveUser() {; } }
  • 47. Constructor Injection package; //imports @Controller(name=”createUser”, scope=Scope.REQUEST) public class CreateUser { private UserDAO userDAO; @Inject public CreateUser(UserDAO userDAO) { this.userDAO = userDAO; } //Other stuff public String saveUser() {; } }
  • 48. JPA Support persistence.xml <?xml version="1.0" encoding="UTF-8"?> <persistence-unit name="examplesApplication" transaction-type="RESOURCE_LOCAL"> <provider>org.hibernate.ejb.HibernatePersistence</provider> <class>org.primefaces.examples.domain.Movie</class> <properties> <property name="hibernate.dialect" value="org.hibernate.dialect.HSQLDialect"/> <property name="hibernate.connection.url" value="jdbc:hsqldb:mem:jpabox"/> <property name="hibernate.connection.driver_class" value="org.hsqldb.jdbcDriver"/> <property name="hibernate.connection.username" value="sa"/> <property name="hibernate.connection.password" value=""/> <property name="" value="create"/> <property name="" value="true"/> </properties> </persistence-unit> </persistence> web.xml <filter> <filter-name>Optimus Persistence Filter</filter-name> <filter-class>org.primefaces.optimus.persistence.filter.PersistenceFilter</filter-class> </filter> //filter mapping to Faces Servlet
  • 49. JPA Support web.xml <context-param> <param-name>optimus.CONFIG_MODULES</param-name> <param-value>org.sopranos.moviestore.MainAppModule, org.primefaces.optimus.persistence.JPAModule </param-value> </context-param> public interface UserDAOJPA implements UserDAO { @Inject private EntityManager em; public void save(User user) { em.persist(user); } }
  • 50. Transactions public void save(User user) { try{ em.getTransaction().begin(); em.persist(kullanici); em.getTransaction().commit(); }catch(Exception e){ em.rollbackTransaction(); } } import org.primefaces.optimus.config.annotations.Transactional; //... @Transactional public void save(User user) { em.persist(user); }
  • 51. ViewScope Page scope Between request and session scope Req Create() Create() Create() View Create() Sess. Create() create.xhtml create.xhtml create.xhtml
  • 52. JSF 1.x Navigation userList.xhtml userDetail.xhtml <h:commandButton userDetail value =”Detail” action=”userDetail” /> faces-config.xml <navigation-rule> <from-view-id>/userList.xhtml</from-view-id> <navigation-case> <from-outcome>userDetail</from-outcome> <to-view-id>/userDetail.xhtml</to-view-id> </navigation-case> </navigation-rule>
  • 53. Optimus Navigation userList.xhtml userDetail.xhtml <h:commandButton userDetail value =”Detail” action=”userDetail” /> faces-config.xml <application> <navigation-handler> org.primefaces.optimus.navigationhandler.ViewIdBasedNavigationHandler </navigation-handler> </application>
  • 54. AuthContext UI Security <h:commandButton value=”Save” action=”#{}” rendered=”#{authContext.ifGranted[‘ROLE_ADMIN’]}” /> <h:outputText value=”Hi #{authContext.username}” /> ifGranted ifAllGranted ifAnyGranted ifNonGranted
  • 55. AOP and @Authorize Method level security package org.sopranos.project.ui; @Controller(name=”createUser”, scope=Scope.REQUEST) public class CreateUser { public String saveUser() { if(isAdmin()) { //... } } } package org.sopranos.project.ui; @Controller(name=”createUser”, scope=Scope.REQUEST) public class CreateUser { @Authorize(“ROLE_ADMIN”) public String saveUser() { //... } }
  • 56. Exporter Exports datatable data, Excel or PDF <p:dataTable id=”users”> ... </p:dataTable> <h:commandButton value="Export as Excel"> <opt:exportActionListener type="xls" target="users" fileName="users"/> </h:commandButton> <h:commandButton value="Export as PDF"> <opt:exportActionListener type="pdf" target="users" fileName="user"/> </h:commandButton>
  • 57. Exporter HTML DataTable
  • 58. PDF Renderer playerDetail.jsf playerDetail.jsf ?asPDF=true
  • 59. Collection ActionListener List operations without custom java code <p:dataTable id=”users” value=”#{userList.users}”> ... </p:dataTable> <h:commandButton value="Export as Excel"> <opt:collectionActionListener value="#{userList.user}" addTo"# {userList.users}" /> </h:commandButton>
  • 60. Validators Regular Expression Validator Email Validator CreditCard Validator <h:inputText id="txt_sample" value=”#{bla.bla}”> <opt:regexValidator regex="[A-Z][a-zA-Z]*" /> </h:inputText>
  • 61. FacesTrace Debug and Training tools Lifecycle visualizer Parameters (Request, Session vs) FacesMessages DHTML Component Tree Log4J support
  • 62. LifeCycle Visualizer
  • 63. FacesTrace DEMO
  • 64. Project Homepage
  • 65. Documentation Referance Guide (160 + pages) API ve TAG Docs WIKI
  • 66. Support and Help Community forum Enterprise support
  • 67. Forum
  • 68. Issue Tracker
  • 69. Online Demo
  • 70. Coming Soon JSF 2.0 compatibilty PrimeFaces 1.0 Drag-Drop components Flash based fileupload Conversation Scope More transaction management More JPA support
  • 71. Finale