Embed Size (px)
Citation preview
Çağatay ÇiviciApache MyFaces PMC“The Definitive Guide to Apache MyFaces and Facelets” Co-AuthorReference in “Core JSF 2nd Edition” (Sun Core Series)Technical reviewer of “JBoss Seam and Trinidad” and “Apache MyFaces” booksSpeaker in JSFOne, JSFDays, universities and local Java Groups.PrimeFaces founder and project leadKrank CRUD framework team memberTrainer, Consultant, MentorFC Barcelona fanPrime Teknoloji (UK-TURKEY)
Prime TeknolojiConsulting, Training, Software Development
Agile Agile Agile, TDD, Patterns
Java EE, JSF, Spring, Seam, JPA
www.emlakharitam.com
PrimeFaces
www.prime.com.tr
JSFJoint Strike Fighter
Crew: 1
Java Server FacesStandard 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 MyFacesJSF 1.1 ve 1.2 implementationTomahawk
TrinidadTobago
Portlet Bridge RIOrchestraExtVAL
JSF ToolsNetbeansJBoss ToolsMyEclipseEclipse WTPJDeveloperIBM RADIDEAMacromedia Dreamweaver
Component LibrariesMyFaces TomahawkMyFaces TrinidadMyFaces TobagoJBoss RichFacesIceFacesQuipukitNetAdvantageWebGalileo
PrimeFacesOpen Source
Rich Components
Easy AJAX
XML Free JSF
Detailed Documentation
Not a framework
Open Source ModelMay the source be with you
Free :)
Apache Software Foundation Experience
http://code.google.com/p/primefaces/
Turkey and Open Source
Turkish SupportTurkish Docs (160 + sayfa)
Turkish enabled components
Turkish support forum
PrimeFaces ModulesUI Components
Optimus
FacesTrace
Mutually Exclusive modules
Installation1) Download
2) Logging ve SLF4J
3) Resource Servlet
4) JSP or Facelets Taglib
5) p:resources
Let’s ROCK!
Manuel DownloadGoogle 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 ServletServing 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>
TaglibJSP Taglib
Facelets Namespace
<%@ taglib uri="http://primefaces.prime.com.tr/ui" prefix="p" %>
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 ComponentsRich components
Easy AJAX
Flash chart components
Unobstrusive Javascript
Yahoo UI, Prototype, Scriptaculous
Rich ComponentsUIAjax DataTable
AccordionPanel DialogAutoComplete Editor
Button ImageCropperCalendar MenuCaptcha PanelCarousel PollCharts Resizable
ColorPicker SliderConfirmDialog Tabview
Tooltip Tree
Easy AJAXPartial 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 StatusDisplaying 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>
AjaxifyEnables ajax on standard JSF components
Trigger on any DOM event
blur, keyup, click, change
<h:inputText value="#{createUser.name}"> <p:ajax event="keyup" update="name" /> </h:inputText> <h:outputText id="name" value="# {createUser.name}" />
Ajaxify RemotingInvoking 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 PollingPeriodical 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++;}
GraphsChart 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 ChartsItemSelectEvent
<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 PrimeFacesYUI, 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 JavascriptVanilla JSF
PrimeFaces
<h:commandbutton value=”Submit” onclick=”alert(‘Barca’)” />
<input type=”submit” name=”_id1” value=”Submit” onclick=”alert(‘Barca’)” />
<p:button value=”Submit” onclick=”alert(‘Barca’)” />
<button type=”submit” name=”_id1” value=”Submit”/>
YAHOO.util.Event.addListener(“_id1”,”click”, function(e) { alert(‘Barca’);}
OptimusNon rendering goodies
Guice integration
Validators
XML-free JSF
PDF and Excel export
Security Extensions and AOP
Google Guice IntegrationGuice based JSF beans
@Controller for <managed-bean />
Dependency Injection
Aspect Oriented Programming
Vanilla JSF 1.x Managed-Beanpackage fc.barcelona;
public class CreateUser {...}
<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>
<h:inputText value=”#{createUser.user.name}” />
CreateUser.java
faces-config.xml
createUser.xhtml
Optimus IOCpackage fc.barcelona;
@Controller(name=”createUser”, scope=Scope.REQUEST)public class CreateUser {...}
CreateUser.java
<h:inputText value=”#{createUser.user.name}” />
faces-config.xml
createUser.xhtml
Controllernamescope
RequestSessionApplicationView
startup: Initiate on application startup
Classpath scanningScan 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
CreateUseruserDAO
UserDAO
UserDAOJPA
implements
Dependency Injectionpublic 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 InjectionNo 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 Enjeksiyonupackage 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 Injectionpackage 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<?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>
persistence.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
web.xml
JPA Support
public interface UserDAOJPA implements UserDAO {
@Inject private EntityManager em;
public void save(User user) { em.persist(user); }}
<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
web.xml
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;
//...
@Transactionalpublic void save(User user) { em.persist(user);}
UserDAOJPA.java
ViewScopePage scope
Between request and session scope
Create()
Create()
Create()
create.xhtml
Create() Create()Req
View
Sess.
create.xhtmlcreate.xhtml
JSF 1.x NavigationuserDetail
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>
<h:commandButton value =”Detail” action=”userDetail” />
userList.xhtml userDetail.xhtml
Optimus Navigation
<h:commandButton value =”Detail” action=”userDetail” />
userDetail
faces-config.xml
<application> <navigation-handler>org.primefaces.optimus.navigationhandler.ViewIdBasedNavigationHandler
</navigation-handler></application>
userList.xhtml userDetail.xhtml
AuthContextUI Security
ifGranted
ifAllGranted
ifAnyGranted
ifNonGranted
<h:commandButton value=”Save” action=”#{createUser.save}” rendered=”#{authContext.ifGranted[‘ROLE_ADMIN’]}” />
<h:outputText value=”Hi #{authContext.username}” />
AOP and @Authorizepackage org.sopranos.project.ui;
@Controller(name=”createUser”, scope=Scope.REQUEST)public class CreateUser {
public String saveUser() { if(isAdmin()) { //... } }}
Method level security
package org.sopranos.project.ui;
@Controller(name=”createUser”, scope=Scope.REQUEST)public class CreateUser {
@Authorize(“ROLE_ADMIN”) public String saveUser() { //... }}
ExporterExports 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>
ExporterHTML DataTable
PDF Renderer
playerDetail.jsf playerDetail.jsf?asPDF=true
Collection ActionListenerList 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>
ValidatorsRegular Expression Validator
Email Validator
CreditCard Validator
<h:inputText id="txt_sample" value=”#{bla.bla}”> <opt:regexValidator regex="[A-Z][a-zA-Z]*" /></h:inputText>
FacesTraceDebug and Training tools
Lifecycle visualizer
Parameters (Request, Session vs)
FacesMessages
DHTML Component Tree
Log4J support
LifeCycle Visualizer
FacesTrace DEMO
Project Homepagehttp://primefaces.prime.com.tr/tr
http://primefaces.prime.com.tr/en
Documentation
WIKIAPI ve TAG Docs
Referance Guide (160 + pages)
Support and HelpCommunity forum
Enterprise support
Forumhttp://primefaces.prime.com.tr/forum/
Issue Tracker
http://code.google.com/p/primefaces/issues/list
Online Demohttp://www.rehberharitam.com/primefaces-examples
Coming SoonJSF 2.0 compatibilty
PrimeFaces 1.0
Drag-Drop components
Flash based fileupload
Conversation Scope
More transaction management
More JPA support
http://cagataycivici.wordpress.com
