PrimeFaces Next Generation Component Suite Cagatay Civici
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
PrimeFacesNext 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 UIJSF 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 ForAjax 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 Minutepublic 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
• Twitter: @cagataycivici, @primefaces
• Facebook Group: 206606616332
• Blog: http://cagataycivici.wordpress.com
• HomePage: http://www.primefaces.org
• Atmosphere: http://atmosphere.dev.java.net
Questions
Related Documents
