Primefaces Nextgen Lju

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

Design Principles
• A good UI component should hide
complexity but must keep ﬂexibility
• 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

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>

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

Deﬁning 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 speciﬁc
callbacks
• onstart
• onsuccess
• oncomplete
• onerror

<p:commandButton onstart=”return conﬁrm(‘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*

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

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

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

Integrate With
• Spring
• Spring Webﬂow
• 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 speciﬁc 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

Primefaces Nextgen Lju

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Primefaces Nextgen Lju

Semelhante a Primefaces Nextgen Lju (20)

Mais de Skills Matter

Mais de Skills Matter (20)

Último

Último (20)

Primefaces Nextgen Lju