Mais conteúdo relacionado Semelhante a Primefaces Confess 2012 (20) Mais de cagataycivici (7) Primefaces Confess 20122. Çagatay Çivici
• JSF Expert Group Member (JSR-314, JSR-344)
• PrimeFaces Lead
• Apache MyFaces PMC
• Speaker, Author, Reviewer
• Co-Founder of Prime Teknoloji
18. Hide Complexity
CSS JS AJAX
Keep Flexibility
<p:tabView onTabChange=”handleTabChange()”>
<p:ajax event=”change” listener=”#{bean.onTabChange}” update=”comp” />
//tabs
</p:tabView>
CSS JS Client Ajax
Override API Callbacks Callbacks
19. Anatomy of a Component
Page <p:schedule id=”sch” value=”#{bean.model}” editable=”true” />
Markup <div id=”sch”></div>
<script type=”text/javascript”>
Script PrimeFaces.cw(‘Schedule’,’widgetVar’, {id:’sch’, editable:true});
</script>
21. HTML5
data-*
canvas websockets
forms media
23. Ajax Extensions
p:ajax
autoUpdate Callbacks
Selectors
AjaxStatus RequestContext
partialSubmit
24. p:ajax f:ajax
oncomplete onevent
onerror onerror
onstart
onsuccess
async
global
25. AjaxStatus
<p:ajaxStatus>
<f:facet name=”start”>
<p:graphicImage value=”fancyanimation.gif” />
</f:facet>
Declarative <f:facet name=”complete”>
<h:outputText value=”Request Completed” />
</f:facet>
</p:ajaxStatus>
Programmatic <p:ajaxStatus onstart=”dialog.show()” oncomplete=”dialog.hide()” />
Global <p:commandButton global=”true|false” />
26. RequestContext - Scripts
<p:commandButton value=”Submit” action=”#{bean.save}” />
Page
<p:dialog widgetVar=”dialogWidget” ... />
public void save() {
RequestContext rc = RequestContext.getCurrentInstance();
Bean rc.execute(“dialogWidget.hide()”);
}
27. RequestContext - Update
<p:commandButton value=”Submit” action=”#{bean.save}” />
Page
<h:outputText id=”val” value=”#{bean.property}” />
public void save() {
Bean RequestContext rc = RequestContext.getCurrentInstance();
rc.addPartialUpdateTarget(“val”);
}
or
<p:commandButton value=”Submit” action=”#{bean.save}”
update=”val” />
<h:outputText id=”val” value=”#{bean.property}” />
28. RequestContext - Scroll
<p:commandButton value=”Submit” action=”#{bean.save}” />
Page
<h:outputText id=”val” value=”#{bean.property}” />
public void save() {
Bean RequestContext rc = RequestContext.getCurrentInstance();
rc.scrollTo(“val”);
}
29. AutoUpdate
<p:growl id=”messages” />
<p:commandButton value=”Save” update=”messages” />
<p:commandButton value=”Update” update=”messages” />
<p:commandButton value=”Delete” update=”messages” />
becomes
<p:growl id=”messages” autoUpdate=”true”/>
<p:commandButton value=”Save” />
<p:commandButton value=”Update” />
<p:commandButton value=”Delete” />
30. PartialSubmit
False True
Post Post
Data:javax.faces.partial.ajax=true&javax.faces.source=fo Data:javax.faces.partial.ajax=true&javax.faces.source=for
rm%3Aj_idt18&javax.faces.partial.execute=form m%3Aj_idt18&javax.faces.partial.execute=form
%3Aname&javax.faces.partial.render=form %3Aname&javax.faces.partial.render=form
%3Adisplay&form%3Aj_idt18=form %3Adisplay&form%3Aj_idt18=form
%3Aj_idt18&form=form&form%3Aname=&form %3Aj_idt18&form=form&form
%3Aj_idt20=&form%3Aj_idt22=&form%3Aj_idt24=&form %3Aname=&javax.faces.ViewState=7916482521909421
%3Aj_idt26=&form%3Aj_idt28=&form%3Aj_idt30=&form 983%3A-2156051337299048496
%3Aj_idt32=&form%3Aj_idt34=&form%3Aj_idt36=&form
%3Aj_idt38=&form%3Aj_idt40=&form%3Aj_idt42=&form
%3Aj_idt44=&form%3Aj_idt46=&form%3Aj_idt48=&form
%3Aj_idt50=&form%3Aj_idt52=&form%3Aj_idt66=&form
%3Aj_idt68=&form%3Aj_idt70=&form%3Aj_idt72=&form
%3Aj_idt74=&form%3Aj_idt76=&form%3Aj_idt78=&form
%3Aj_idt80=&form%3Aj_idt82=&form%3Aj_idt84=&form
%3Aj_idt86=&form%3Aj_idt88=&form%3Aj_idt90=&form
%3Aj_idt92=&form%3Aj_idt94=&form%3Aj_idt96=&form
%3Aj_idt98=&javax.faces.ViewState=79164825219094
21983%3A-2156051337299048496
31. PrimeFaces Selectors (PFS)
update=”@(form)”
update=”@(form.first)”
update=”@(.mystyle)”
update=”@(.ui-datatable)”
update=”@(:input:not(select))”
update=”@(:input:disabled))”
35. Install a Theme
Add primefaces-{themename}.jar
Configure
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>{themename}</param-value>
</context-param>
40. PrimeFaces Mobile
<pm:page title="TwitFaces">
<pm:view id="main" swatch="b">
<pm:header title="TwitFaces">
</pm:header>
<pm:content>
<h:form id="twitForm">
<h:outputText value="Account: " />
<h:inputText value="#{twitterController.username}" />
<p:separator />
<p:commandButton value="Get Tweets" icon="refresh" update="tweetList"
actionListener="#{twitterController.loadTweets}" />
<p:dataList id="tweetList" value="#{twitterController.tweets}" var="tweet">
#{tweet}
</p:dataList>
</h:form>
</pm:content>
</pm:view>
</pm:page>
45. PrimeFaces Push
Page <p:push channel=”chat” onmessage=”handleMessage” />
public void send() {
RequestContext rc = RequestContext.getCurrentInstance();
Bean rc.push(“chat”, “Hello everyone!”);
}
Callback <script type=”text/javascript”>
function handleMessage(event, data) {
//data -> “Hello everyone!”
}
</script>
48. Portlets
Sample: /svn/examples/trunk/prime-portlet
49. On The Cloud
http://primefaces-rocks.appspot.com
http://primefaces-gae-kickstart.appspot.com
56. The End
contact@prime.com.tr
@primefaces
206606616332
http://blog.primefaces.org