Professional Documents
Culture Documents
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
<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
<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}” />
• Client id update=”form:text”
• 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>
<p:dataTable id=”table”>
<p:column>
<p:commandLink update=”selected” process=”table” />
</p:column>
</p:dataTable>
</h:form>
Partial Processing - Case 3
<h:form>
<h:inputText id=”iamrequired” required=”true” />
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>
• p:remoteCommand
<p:remoteCommand name=”upperCase”
actionListener=#{greetingBean.toUppterCase} />
<script type=”text/javascript”>
upperCase();
</script>
PPR Summary
No Need For
• Simple
Ajax Servlet Filter
• Easy to Use
Html Parser
• Flexible
• Responsive Ajax ViewHandler
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
<h:form>
<h:inputText value=”#{chatController.message}” />
<p:commandButton value=”Send” actionListener=”#{chatController.send}” />
</h:form>
<p:outputPanel id=”display” />
<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 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