Primefaces Nextgen

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 • ResourceServlet (Opt)
• p:resources • Taglib
• Taglib • Ready!
• 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
<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}” />

Defining Ids
• Server id update=”text”
• Client id update=”form:text”
• Comma separated update=”text,panel”
• White space separated update=”text panel”
• Mix update=”form:text grid”
• Keywords update=”@form”
Keywords
• @this update=”@parent”
• @parent
• @form
• @all
• @none
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>
<h:form>
<h:outputText id=”selected” />
<p:dataTable id=”table”>
<p:column>
<p:commandLink update=”selected” process=”table” />
</p:column>
</p:dataTable>
</h:form>
<h:form>
<h:commandButton action=”navigate” immediate=”true” />

</h:form>
• Making immediate obsolete

<h:form>
<p:commandButton action=”navigate” process=”@this” />

</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
function handleComplete(xhr, status, args) {
alert(args.item.name);
}
</script>
Ajax Remoting
public class GreetingBean {
private String name;
//...
public void toUpperCase() {
name = name.toUpperCase();
}
}
• p:remoteCommand
<p:remoteCommand name=”upperCase”
actionListener=#{greetingBean.toUppterCase} />
upperCase();
</script>
PPR Summary
No Need For
• Simple
Ajax Servlet Filter
• Easy to Use
Html Parser
• Flexible
• Responsive Ajax ViewHandler
• Lightweight Ajax StateManager
• Keep it clean 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” />
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 ContextMenu
ProgressBar
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

Primefaces Nextgen

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Primefaces Nextgen

Enviado por

Direitos autorais:

Formatos disponíveis

PrimeFaces

Next Generation Component Suite

• Designed with JSF 2.0 in mind

• Renders <link />, <script />

<p:commandButton value=”Ajax Submit” update=”name”/>

<h:outputText id=”name” value=”Hi: #{greetingBean.name}” />

• Comma separated update=”text,panel”

• White space separated update=”text panel”

• Mix update=”form:text grid”

<h:selectOneMenu id=”suburbs” />

<h:outputText id=”selected” />

<h:commandButton action=”navigate” immediate=”true” />

• Making immediate obsolete

<p:commandButton action=”navigate” process=”@this” />

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

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

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

public void save() {

• From backing bean to ajax callbacks with

• Lightweight Ajax StateManager

• Keep it clean Ajax Regions

Translate Chat - Ajax Push PathFinder - GPS TwitFaces

Weather Notes News

private String message;

public void send(ActionEvent event) {

<p:push channel=”chat” onpublish=”handlePublish” />

Você também pode gostar