PrimeFaces - Next Generation Component Suite

makeshiftluteΛογισμικό & κατασκευή λογ/κού

14 Ιουλ 2012 (πριν από 4 χρόνια και 11 μήνες)

566 εμφανίσεις

PrimeFaces
Next Generation Component Suite
Cagatay Civici
Cagatay Civici

JSF Expert Group Member (JSR-314)

PrimeFaces Founder and Lead

Apache MyFaces PMC Member

Atmosphere Ajax Push/Comet
Committer

Regular Speaker, Author, Technical
Reviewer

Co-founder of Prime Technology
Prime Technology

Agile and Java EE Consulting

JSF, Spring, Seam, JPA

Trainings (e.g. PrimeFaces, JSF 2.0)

Outsource Development

Istanbul/Turkey based
What is this about?

PrimeFaces Component Suite

RIA

Ajax Push

TouchFaces

iPhone/Android/Palm

GPS Navigation

Mock OS X with JSF

Interested?
PrimeFaces

Next Generation Component Suite

Designed with JSF 2.0 in mind
History

1+ year old

November 2008 - Start

January 2009 - First Release 0.8.0

10 releases so far

February 2010 - 1.0.0 and 2.0.0
1.0.0 and 2.0.0
Design Principles

A good UI component should hide
complexity
but must keep
flexibility

Page author must be in full control

Do not overuse JSF extensions

Avoid extensions that can cause race
conditions

Avoid bringing overhead, keep it clean!
UI Components

70+ Rich set of components

Ajax powered or Client side

YUI, jQuery and PrimeFaces widgets

Unobstrusive Javascript

Customizable and Easy to Use

Compatible with “others”

Skinning
Extreme UI with PrimeFaces
Simple Setup
JSF 1.2
JSF 2.0

ResourceServlet

p:resources

Taglib

Ready!

ResourceServlet (Opt)

Taglib

Ready!
ResourceServlet

Streaming and Caching (js, css, images)

Auto-Registered in Servlet 3.0 Environment
<servlet>
<servlet-name>Resource Servlet</servlet-name>
<servlet-class>org.primefaces.resource.ResourceServlet</servlet>
</servlet>
<servlet-mapping>
<servlet-name>Resource Servlet</servlet-name>
<url-pattern>/primefaces_resource/*</url-pattern>
</servlet-mapping>
p:resources for JSF 1.2

Renders <link />, <script />

No hacks to head

Not required in JSF 2.0 -> <h:head />
<head>
<p:resources />
</head>
Ready!
<html xmlns="
http://www.w3.org/1999/xhtml
"
xmlns:h="
http://java.sun.com/jsf/html
"
xmlns:p="
http://primefaces.prime.com.tr/ui
">
<h:head>
!
</h:head>
<h:body>
!<p:editor />
<h:body>
</html>
Unobstrusive UI
JSF Markup
HTML Markup
<p:schedule id=”calendar ” value=”#{bean.value}” editable=”true”/>
<div id=”calendar”></div>
<script type=”text/javascript”>
new PrimeFaces.widget.Schedule(‘calendar’, {editable:true});
</script>
Output
Easy Ajax

Ajax without complexity

Partial Page Rendering

Flexible with Callbacks (e.g. onstart,
oncomplete)

Ajax components (e.g. autoComplete)

Lightweight, No overhead
PPR - Hello World
public class GreetingBean {
private String name;
//...
}
<h:form>
<h:inputText value=”#{greetingBean.name}” />
<h:outputText id=”name” value=”Hi: #{greetingBean.name}” />
<p:commandButton value=”Ajax Submit” update=”name”/>
</h:form>
p:ajax

f:ajax extension
<h:inputText value=”#{greetingBean.name}”>
<p:ajax event=”blur” update=”name” />
</h:inputText>
<h:outputText id=”name” value=”Hi: #{greetingBean.name}” />
Defining Ids

Server id

Client id

Comma separated

White space separated

Mix

Keywords
update=”text”
update=”form:text”
update=”text,panel”
update=”text panel”
update=”form:text grid”
update=”@form”
Keywords

@this

@parent

@form

@all

@none
update=”@parent”
Partial Processing

Decide what to process

process
attribute

Ajax requests

Non-ajax requests
process=”@this”
Partial Processing - Case 1
<h:form>
<h:inputText id=”iamrequired” required=”true” />
<h:selectOneMenu id=”cities”>
<p:ajax update=”cities” process=”@this” />
</h:selectOneMenu>
<h:selectOneMenu id=”suburbs” />
</h:form>
Partial Processing - Case 2
<h:form>
<h:inputText id=”iamrequired” required=”true” />
<h:outputText id=”selected” />
<p:dataTable id=”table”>
<p:column>
<p:commandLink update=”selected” process=”table” />
</p:column>
</p:dataTable>
</h:form>
Partial Processing - Case 3

Making immediate obsolete
<h:form>
<h:inputText id=”iamrequired” required=”true” />
<h:commandButton action=”navigate” immediate=”true” />
</h:form>
<h:form>
<h:inputText id=”iamrequired” required=”true” />
<p:commandButton action=”navigate” process=”@this” />
</h:form>
Process vs Update
Process
Update
Restore View
Apply Request
Validations
Update Model
Invoke App
Render
Notifying Users

Declarative

Programmatic
<p:ajaxStatus>
!!<f:facet name="start">
!!!<p:graphicImage value="fancyanimation.gif" />
!!</f:facet>!!
!!<f:facet name="complete">
!!!<h:outputText value="Request Completed" />
!!</f:facet>
</p:ajaxStatus>
<p:ajaxStatus onstart=”alert(‘Started’)” oncomplete=”alert(‘done’)” />
Global vs Non-Global

To trigger p:ajaxStatus or not

Global (Default)

Silent
<p:ajaxStatus>
!!<f:facet name="start">
!!!<p:graphicImage value="fancyanimation.gif" />
!!</f:facet>!!
!!<f:facet name="complete">
!!!<h:outputText value="Request Completed" />
!!</f:facet>
</p:ajaxStatus>
<p:commandButton value=”Submit” /
<p:commandButton value=”Submit” global=”false” /
Component specific
callbacks

onstart

onsuccess

oncomplete

onerror
<p:commandButton onstart=”return confirm(‘Sure’)”
oncomplete=”alert(‘Done’);” />
Callback Arguments

From backing bean to ajax callbacks with
JSON
<p:commandButton value=”Submit” action=”#{bean.save}”
oncomplete=”handleComplete(xhr, status, args)” />
public void save() {
RequestContext context = RequestContext.getCurrentInstance();
context.addCallbackParam(“item”, item);
}
<script type=”text/javascript”>
function handleComplete(xhr, status, args) {
alert(args.item.name);
}
</script>
Ajax Remoting

p:remoteCommand
public class GreetingBean {
private String name;
//...
public void toUpperCase() {
name = name.toUpperCase();
}
}
<p:remoteCommand name=”upperCase”
actionListener=#{greetingBean.toUppterCase} />
<script type=”text/javascript”>
upperCase();
</script>
PPR Summary

Simple

Easy to Use

Flexible

Responsive

Lightweight

Keep it clean
No Need For
Ajax Servlet Filter
Html Parser
Ajax ViewHandler
Ajax StateManager
Ajax Regions
Ajax*
Component Suite Demo
TouchFaces

Mobile UI Kit

WebKit Browsers

IPhone, Android, Palm

Native IPhone UI

Integrated Ajax

Regular JSF

Powered by jqTouch
TouchFaces UI

<i:application />

<i:view />

<i:tableView />

<i:rowGroup />

<i:rowItem />

<i:switch />
TouchFaces in Action
Translate
Chat - Ajax Push
PathFinder - GPS
TwitFaces
Weather
Notes
News
TouchFaces Demo
Ajax Push/Comet

Built on top of Atmosphere

<p:push />

CometContext.publish(...)
Atmosphere Framework

Portable Comet Framework

Write Once, Deploy Anywhere

Rest support

Servlet 3.0 support

JSF Integration: PrimeFaces
Ajax Push/Comet
Chat App in a Minute
public class ChatController {
private String message;
public void send(ActionEvent event) {
CometContext.publish(“chat”, message);
}
//getters setters
}
<h:form>
<h:inputText value=”#{chatController.message}” />
<p:commandButton value=”Send” actionListener=”#{chatController.send}” />
</h:form>
<p:outputPanel id=”display” />
<p:push channel=”chat” onpublish=”handlePublish” />
<script type=”text/javascript”>
function handlePublish(pushed) {
!$('#display').append(pushed.data);
}
</script>
Pushing as JSON
Player player = new Player();
player.setName(“Messi”);
player.setAge(22);

CometContext.publish(player);
function handlePublish(pushed) {
//pushed.data.name;
//pushed.data.age;
}
Extensions: FacesTrace

Trace/Debug tool

Lifecycle visualizer

Performance Tracker

Visual component tree
FacesTrace Demo
Integrate With

Spring

Spring Webflow

Seam

CDI

Portlets

See svn/examples
Documentation

User’s Guide - 350 pages

Wiki

Screencasts

API & TLD Docs

Third party articles/blogs
Community Support

http://primefaces.prime.com.tr/forum
Enterprise Support

2/4 hour average response time

Priority forum access

Ticket based portal

IM support over skype

JSF specific help

Special Case Support
Community

Strong community feedback

500 posts per week in forum

Join us!
Coming Soon
TreeTable
ProgressBar
ContextMenu
and more.......
Finale

cagatay.civici@prime.com.tr

Twitter: @cagataycivici, @primefaces

Facebook Group: 206606616332

Blog:
http://cagataycivici.wordpress.com

HomePage:
http://www.primefaces.org

Atmosphere:
http://atmosphere.dev.java.net
Questions