Çağatay Çivici [email protected] Çağatay Çivici

PRIMEFACES Çağatay Çivici [email protected] Ç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) 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 JSF Joint Strike Fighter Crew: 1 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) Apache MyFaces JSF 1.1 ve 1.2 implementation Tomahawk Trinidad Tobago Portlet Bridge RI Orchestra ExtVAL JSF Tools Netbeans JBoss Tools MyEclipse Eclipse WTP JDeveloper IBM RAD IDEA Macromedia Dreamweaver Component Libraries MyFaces Tomahawk MyFaces Trinidad MyFaces Tobago JBoss RichFaces IceFaces Quipukit NetAdvantage WebGalileo PrimeFaces Open Source Rich Components Easy AJAX XML Free JSF Detailed Documentation Not a framework Open Source Model May the source be with you Free :) Apache Software Foundation Experience http://code.google.com/p/primefaces/ Turkey and Open Source Turkish Support Turkish Docs (160 + sayfa) Turkish enabled components Turkish support forum PrimeFaces Modules UI Components Optimus FacesTrace Mutually Exclusive modules Installation 1) Download 2) Logging ve SLF4J 3) Resource Servlet 4) JSP or Facelets Taglib 5) p:resources Let’s ROCK! Manuel Download Google code page: http://code.google.com/p/primefaces/issues/list 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> 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> Taglib JSP Taglib <%@ taglib uri="http://primefaces.prime.com.tr/ui" prefix="p" %> Facelets Namespace xmlns:p="http://primefaces.prime.com.tr/ui" 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> UI Components Rich components Easy AJAX Flash chart components Unobstrusive Javascript Yahoo UI, Prototype, Scriptaculous Rich Components UIAjax DataTable AccordionPanel Dialog AutoComplete Editor Button ImageCropper Calendar Menu Captcha Panel Carousel Poll Charts Resizable ColorPicker Slider ConfirmDialog Tabview Tooltip Tree Easy AJAX Partial Page Rendering - PPR Declarative AJAX 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> 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> 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 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 } 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++; } Graphs Chart components (Pie, Line, Column and more) Interactive Live data display 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}" /> 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(); } Live Data <p:pieChart value="#{votesReport.votes}" var="vote" live="true" refreshInterval="5000" categoryField="#{vote.candidate}" dataField="#{vote.amount}" /> Skinning Before After UI Components DEMO Javascript and PrimeFaces YUI, Prototype, Scriptaculous PrimeFaces Namespace and Javascript API PrimeFaces.widget.* PrimeFaces.ajax.* Unobstrusive Javascript PrimeFaces.widget.* PrimeFaces widgets Example: PrimeFaces.widget.Editor <script type=”text/javascript”> var editor = new PrimeFaces.widget.Editor(...); </script> PrimeFaces.ajax.* Ajax API PrimeFaces.ajax.AjaxUtils PrimeFaces.ajax.AjaxRequest PrimeFaces.ajax.AjaxResponse <script type=”text/javascript”> PrimeFaces.ajax.AjaxRequest(url, config, params); </script> 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’);} Optimus Non rendering goodies Guice integration Validators XML-free JSF PDF and Excel export Security Extensions and AOP Google Guice Integration Guice based JSF beans @Controller for <managed-bean /> Dependency Injection Aspect Oriented Programming 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}” /> 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}” /> Controller name scope Request Session Application View startup: Initiate on application startup 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 { ... } Dependency Injection CreateUser UserDAO userDAO implements UserDAOJPA 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> 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); } } 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); } } 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); } } 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"/>

Çağatay Çivici [email protected] Çağatay Çivici

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support