Introducing Prime Faces en

PRIMEFACES
Çağatay Çivici
cagatay@apache.org
Ç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));
}
<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.*
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>
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
@Controller(name=”createUser”, scope=Scope.REQUEST)
...
}
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;
...
}
CreateUser UserDAO
userDAO
implements
UserDAOJPA
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
//imports
@Inject
private UserDAO userDAO;
//Other stuff
public String saveUser() {

userDAO.save(user);
}
}
Setter Enjeksiyonu
//imports
@Inject
public void setUserDAO(UserDAO userDAO) {
this.userDAO = userDAO;
}
//Other stuff

userDAO.save(user);
}
}
Constructor Injection
//imports
@Inject
public CreateUser(UserDAO userDAO) {
this.userDAO = userDAO;
}
//Other stuff

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"/>
<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

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;

em.persist(user);
}
}
Transactions
UserDAOJPA.java
try{
em.getTransaction().begin();
em.persist(kullanici);
em.getTransaction().commit();
}catch(Exception e){
em.rollbackTransaction();
}
}
import org.primefaces.optimus.config.annotations.Transactional;
//...
@Transactional
em.persist(user);
}
ViewScope
Page scope
Between request and session scope
Req Create() Create() Create()
View Create()
Sess. Create()
create.xhtml create.xhtml create.xhtml

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>
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>
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
AOP and @Authorize
Method level security

if(isAdmin()) {
//...
}
}
}
@Authorize(“ROLE_ADMIN”)
//...
}
}
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>
Exporter
HTML DataTable
PDF Renderer
playerDetail.jsf playerDetail.jsf ?asPDF=true
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>
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>
FacesTrace
Debug and Training tools
Lifecycle visualizer
Parameters (Request, Session vs)
FacesMessages
DHTML Component Tree
Log4J support
LifeCycle Visualizer
FacesTrace DEMO
Project Homepage
http://primefaces.prime.com.tr/tr
http://primefaces.prime.com.tr/en
Documentation
Referance Guide (160 + pages)
API ve TAG Docs WIKI

Support and Help
Community forum
Enterprise support
Forum
http://primefaces.prime.com.tr/forum/
Issue Tracker
http://code.google.com/p/primefaces/issues/list
Online Demo
http://www.rehberharitam.com/primefaces-examples
Coming Soon
JSF 2.0 compatibilty
PrimeFaces 1.0
Drag-Drop components
Flash based fileupload
Conversation Scope
More transaction management
More JPA support
Finale
cagatay@apache.org
http://cagataycivici.wordpress.com

Introducing Prime Faces en

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Introducing Prime Faces en

Diunggah oleh

Hak Cipta:

Format Tersedia

PRIMEFACES

<h:inputText value="#{createUser.name}" />

<p:button value="Save" update="name" async="true"/>

<h:outputText id=”name” value="#{createUser.name}" />

<h:outputText id="name" value="# {createUser.name}" />

Trigger on any DOM event

<h:outputText id="name" value="# {createUser.name}" />

public void checkUser(ActionEvent actionEvent) {

<p:poll frequency="3" actionListener="# {counter.increment}"

private int number;

public void increment(ActionEvent actionEvent) {

<p:pieChart value="#{saleReport.sales}" var="sale" categoryField="#{sale.brand}"

<p:pieChart value="#{salesReport.sales}" var="sale"

<h:outputText id="info" value="#{salesReport.message}" />

private String message;

public void selectSeries(ItemSelectEvent event) {

PrimeFaces.ajax.AjaxRequest(url, config, params);

<input type=”submit” name=”_id1” value=”Submit” onclick=”alert(‘Barca’)” />

<button type=”submit” name=”_id1” value=”Submit”/>

public class CreateUser {

public interface UserDAOJPA implements UserDAO {

public class MainAppModule implements Module{

public String saveUser() {

private UserDAO userDAO;

public String saveUser() {

private UserDAO userDAO;

public String saveUser() {

//filter mapping to Faces Servlet

public void save(User user) {

Req Create() Create() Create()

create.xhtml create.xhtml create.xhtml

<h:outputText value=”Hi #{authContext.username}” />

public String saveUser() {

<h:commandButton value="Export as Excel">

<h:commandButton value="Export as PDF">

<h:commandButton value="Export as Excel">

API ve TAG Docs WIKI

Anda mungkin juga menyukai