[go: up one dir, main page]
Scribd
Upload
114 views49 pages

Primefaces: Next Generation Component Suite

This document provides an overview of PrimeFaces, a next generation JavaServer Faces (JSF) component suite. It describes key features such as over 100 rich UI components, support for Ajax functionality without requiring JavaScript coding, and integration with other technologies like JSF, Spring, EJB and CDI. The document also demonstrates how to easily install and use PrimeFaces components and features like Ajax, themes, and mobile support with TouchFaces.

Uploaded by

İsmail Cambaz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
114 views49 pages

Primefaces: Next Generation Component Suite

This document provides an overview of PrimeFaces, a next generation JavaServer Faces (JSF) component suite. It describes key features such as over 100 rich UI components, support for Ajax functionality without requiring JavaScript coding, and integration with other technologies like JSF, Spring, EJB and CDI. The document also demonstrates how to easily install and use PrimeFaces components and features like Ajax, themes, and mobile support with TouchFaces.

Uploaded by

İsmail Cambaz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 49

PrimeFaces

Next Generation Component Suite

Cagatay Civici
Yigit Darcin
Prime Technology
• Agile and Java EE Consulting
• Java EE (JSF, Spring, EJBs, CDI, JPA)
• Trainings (e.g. Java EE, PrimeFaces)
• Outsource Development
• Istanbul/Turkey based
• Turkcell Projects: AdServer, Gezenzi
What is this about?
• JSF Overview
• PrimeFaces Component Suite
• RIA
• Ajax Push
• TouchFaces
• iPhone/Android/Palm
• GPS Navigation
• Mock OS X with JSF
JSF Overview
• Standard Web Framework for Java EE
• MVC
• Component Oriented
• Event Driven
• Current 2.0
• Vendor Support
Vendor Support
• Apache MyFaces
• Oracle ADF Faces and Mojarra
• PrimeFaces
• Spring WebFlow
• JBoss Seam, RichFaces
• IceFaces
• Java EE 6 (CDI, Bean Validation)
Basic JSF
<h:form>
Username: <h:inputText value=”#{loginBean.username}” />
Password: <h:inputText value=”#{loginBean.password}” />

<h:commandButton actionListener=”#{loginBean.login}” value=”Login” />


</h:form>

public class LoginBean {


private String username;
private String password;

public void login() {


//check username and password
}
//getter-setter
}
JSF Advantages
• Small learning curve
• Reusable Components
• Ajax without Javascript
• Validation, Conversion
• Easy RIAs with Component Suites
• Popular
PrimeFaces
• Next Generation Component Suite

• Designed with JSF 2.0 in mind


• One jar, No Dependencies, Zero-Config
History
• 2.5 years old
• November 2008 - Start
• January 2009 - First Release 0.8.0
• January 2011 - 2.2
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
• 100+ Rich set of components
• Ajax powered and Client side
• jQuery based PrimeFaces widgets
• Unobtrusive Javascript
• Customizable and Easy to Use
• Compatible with “others”
• Theme Framework
Extreme UI with PrimeFaces
Install
• Just drop the jar and then...
<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
<p:schedule id=”calendar ” value=”#{bean.value}” editable=”true”/>

HTML Markup

<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}” />


Partial Processing
• Decide what to process
• process attribute
• Ajax requests

process=”@this”
Partial Processing - Case 1

<h:form>
<h:inputText id=”I_AM_REQUIRED” required=”true” />

<h:selectOneMenu id=”cities”>
<p:ajax update=”cities” process=”@this” />
</h:selectOneMenu>

<h:selectOneMenu id=”suburbs” />


</h:form>
Process vs Update
Restore View

Apply Request

Process Validations

Update Model

Invoke App

Update Render
Notifying Users
• Declarative
<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>

• Programmatic
<p:ajaxStatus onstart=”alert(‘Started’)” oncomplete=”alert(‘done’)” />
Global vs Non-Global
• To trigger p:ajaxStatus or not
<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>

• Global (Default) <p:commandButton value=”Submit” /

• Silent <p:commandButton value=”Submit” global=”false” /


Component specific
callbacks
• onstart
• onsuccess
• oncomplete
• onerror

<p:commandButton onstart=”return confirm(‘Sure’)”


oncomplete=”alert(‘Done’);” />
Callback Arguments
<p:commandButton value=”Submit” action=”#{bean.save}”
oncomplete=”handleComplete(xhr, status, args)” />

public void save() {


RequestContext context = RequestContext.getCurrentInstance();
context.addCallbackParam(“item”, item);
}

• From backing bean to ajax callbacks with


JSON
<script type=”text/javascript”>
function handleComplete(xhr, status, args) {
alert(args.item.name);
}
</script>
PPR Summary
No Need For
• Simple
Javascript
• Easy to Use
XML/JSON Parsing
• Flexible
• Responsive Server Controllers

• Lightweight
• Keep it clean
Component Suite Demo
Themes
• Integrated with ThemeRoller
• 30 Built-in Themes
• Online tool to create your own
Themes
Themes
• No need to know CSS
• http://vimeo.com/14235640
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;
}
Ajax Push Demo
Extensions: FacesTrace
• Trace/Debug tool
• Lifecycle visualizer
• Performance Tracker
• Visual component tree
FacesTrace Demo
Integrate With
• Spring
• Spring Webflow
• EJB
• Seam
• CDI
• Portlets
• GAE
• See svn/examples
Documentation
• User’s Guide - 440 pages
• Wiki
• Screencasts
• API & TLD Docs
• Third party articles/blogs
• PrimeFaces Book (McGraw Hill) - Soon
Community Support
• http://primefaces.prime.com.tr/forum
Enterprise Support
• Onsite support
• Priority forum access
• JSF specific help
• Special Case Support
Popularity
• Thousands of Users
• 1000+ posts per week in forum
• 14000+ downloads in 5 weeks, 2.2.RC2
• Invited to international conferences
Who Uses
Questions

You might also like