PRIMEFACES
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

PRIMEFACES

on

  • 18,265 views

 

Statistics

Views

Total Views
18,265
Views on SlideShare
18,254
Embed Views
11

Actions

Likes
2
Downloads
338
Comments
0

1 Embed 11

http://www.slideshare.net 11

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

PRIMEFACES Presentation Transcript

  • 1. PRIMEFACES Çağatay Çivici cagatay@apache.org
  • 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 www.emlakharitam.com PrimeFaces www.prime.com.tr
  • 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 http://code.google.com/p/primefaces/ 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: http://code.google.com/p/primefaces/issues/list
  • 15. Maven Download <repository> <id>prime-repo</id> <name>Prime Technology Maven Repository</name> <url>http://repository.prime.com.tr/</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="http://primefaces.prime.com.tr/ui" prefix="p" %> Facelets Namespace xmlns:p="http://primefaces.prime.com.tr/ui"
  • 18. JSF Page <html xmlns="http://www.w3.org/1999/xhtml" xmlns:p="http://primefaces.prime.com.tr/ui"> <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="#{createUser.name}" /> <p:button value="Save" update="name" async="true"/> <h:outputText id=”name” value="#{createUser.name}" /> </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="#{createUser.name}"> <p:ajax event="keyup" update="name" /> </h:inputText> <h:outputText id="name" value="# {createUser.name}" /> Trigger on any DOM event blur, keyup, click, change
  • 25. Ajaxify Remoting Invoking Java methods with JavaScript <h:inputText value="#{createUser.name}"> <p:ajax event="blur" update="name" actionListener="# {createUser.checkUser}"/> </h:inputText> <h:outputText id="name" value="# {createUser.name}" /> 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 CreateUser.java package fc.barcelona; public class CreateUser { ... } faces-config.xml <managed-bean> <managed-bean-name>createUser</managed-bean-name> <managed-bean-class>fc.barcelona.CreateUser</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> createUser.xhtml <h:inputText value=”#{createUser.user.name}” />
  • 40. Optimus IOC CreateUser.java package fc.barcelona; @Controller(name=”createUser”, scope=Scope.REQUEST) public class CreateUser { ... } faces-config.xml createUser.xhtml <h:inputText value=”#{createUser.user.name}” />
  • 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 fc.barcelona; //imports @Controller(name=”createUser”, scope=Scope.REQUEST) public class CreateUser { @Inject private UserDAO userDAO; //Other stuff public String saveUser() { userDAO.save(user); } }
  • 46. Setter Enjeksiyonu package fc.barcelona; //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() { userDAO.save(user); } }
  • 47. Constructor Injection package fc.barcelona; //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() { userDAO.save(user); } }
  • 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="hibernate.hbm2ddl.auto" value="create"/> <property name="hibernate.show.sql" 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> UserDAOJPA.java public interface UserDAOJPA implements UserDAO { @Inject private EntityManager em; public void save(User user) { em.persist(user); } }
  • 50. Transactions UserDAOJPA.java 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=”#{createUser.save}” 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 http://primefaces.prime.com.tr/tr http://primefaces.prime.com.tr/en
  • 65. Documentation Referance Guide (160 + pages) API ve TAG Docs WIKI
  • 66. Support and Help Community forum Enterprise support
  • 67. Forum http://primefaces.prime.com.tr/forum/
  • 68. Issue Tracker http://code.google.com/p/primefaces/issues/list
  • 69. Online Demo http://www.rehberharitam.com/primefaces-examples
  • 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 cagatay@apache.org http://cagataycivici.wordpress.com