JSF 2 and Ajax

JavaServer Faces 2.0 and Ajax Jim Driscoll [email_address]

Agenda
The basics
Ajax Tag
JavaScript API
Events
Components
Example
Future directions

Basics of Ajax
Asynchronous
JavaScript
And
XML

Basics of Ajax
XMLHttpRequest
Async request
Parsing response
DOM manipulation
… but you don't need to know that for JSF

JSF and Ajax
Http
Request
Response
JSF Lifecycle
Render
Execute
Components and EL

About Execute and Render
Simplified Lifecycle view
Execute is where:
Get the new values from the page
Validation
Pushing the values into the backing beans
Execute any listener/controller logic
Render is where:
The results are “drawn”, or rendered, to the browser

Targets
Client Ids vs Component Ids
Tag vs JavaScript API
prependId=false
findComponent()
Keywords
@this, @none, @form, @all

Ajax Tag
<f:ajax>
Wrapped and wrapper
Attributes
render
Default: @none
execute
Default: @this
event
Implicit: valueChange, action
Explicit: click, change, keyup, etc.

Simple Ajax Tag Example Output: <h:outputText id="out1" value="#{echo.str}"/> <br/> Input: <h:inputText id="in1" value="#{echo.str}"> <f:ajax render="out1"/> </h:inputText> <br/>  <h:commandButton id="button1" value="Echo" type="button"/> <br/>

Another tag example <h:form id="countForm"> <h:outputText id="out1" value="#{ajaxrequest.count}"/> <h:commandButton id="button1" value="Count"> <f:ajax render="countForm:out1"/> </h:commandButton> <h:commandButton id="reset" value="reset" actionListener="#{ajaxrequest.resetCount}" > <f:ajax render="countForm:out1"/> </h:commandButton> </h:form> <h:outputText id="out2" value="#{ajaxrequest.count}"/>

Another tag example @ManagedBean(name="ajaxrequest") @ViewScoped public class AjaxRequestBean { private Integer count = 0; public Integer getCount() { return count++; } public void resetCount(ActionEvent ae) { count = 0; } }

JavaScript API
jsf.ajax.request(source, event, options)
<h:outputScript name="jsf.js" library="javax.faces" target="head"/>
Source = id of emitting element
Event = dom event from element (optional)
Options - Object containing things like:
Render
Execute

Simple JavaScript Example <h:form id="form1" prependId="false"> <h:outputScript name="jsf.js" library="javax.faces" target="head"/> <h:outputText id="out1" value="#{count.count}"/> <h:commandButton id="button1" value="Count" onclick=" jsf.ajax.request(this, event, {execute: this.id, render: 'out1'}); return false; "/>

Client Events
f:ajax onevent attribute
jsf.ajax.request option onevent
jsf.ajax.addOnEvent function
Status:
Begin – at start
Complete – on finish
Success – on successful finish

Errors – a kind of event
f:ajax onerror attribute
jsf.ajax.request option onerror
jsf.ajax.addOnError function
Status:
serverError
httpError
malformedXMLError
emptyResponse

Sample: Event and Error var statusUpdate = function statusUpdate(data) { // “statusArea” is a textArea in the page var statusArea = document.getElementById("statusArea"); var text = statusArea.value; text = text + "Name: "+data.source.id; if (data.type === "event") { text = text +" Event: "+data.status+" "; } else { // otherwise, it's an error text = text + " Error: "+data.status+" "; } statusArea.value = text; }; // Setup the statusUpdate function to // hear all events on the page jsf.ajax.addOnEvent(statusUpdate); jsf.ajax.addOnError(statusUpdate);

Event/Error data payload
Type: event || error
status
source: id
description (error only, freetext)
responseCode, responseText, responseXML
errorName, errorMessage (for server error)

Example: Ajax Switchlist Show running Switchlist

Switchlist (aka “Shuttle”)
Two lists, with controls to move values
Need two lists, for selected values
Need two maps, for list contents
Need two Action methods to move values

Switchlist Backing Bean @ManagedBean(name="switchlist") @SessionScoped public class SwitchlistBean implements Serializable { private Map<String, String> items1 = new LinkedHashMap<String, String>(); private Map<String, String> items2 = new LinkedHashMap<String, String>(); private String[] list1 = null; private String[] list2 = null; { items1.put("one", "one"); items1.put("two", "two"); items1.put("three", "three"); items1.put("four", "four"); } // and the same for items2 Plus associated Getters and Setters...

Switchlist Backing Bean public void move1to2(ActionEvent ae) { if (list1 != null && list1.length > 0) { for (String item : list1 ) { items2.put(item, items1.remove(item)); } } } public void move2to1(ActionEvent ae) { if (list2 != null && list2.length > 0) { for (String item : list2 ) { items1.put(item, items2.remove(item)); } } }

Switchlist in Page <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"> <h:head> <title>Switchlist Example</title> </h:head> <h:body> <h1>Switchlist Example</h1> <h:form id="form1"> <h:outputStylesheet name="switchlist.css"/>

Switchlist in Page <h:selectManyListbox value="#{switchlist.list1}" styleClass="switchlist"> <f:selectItems value="#{switchlist.items1}"/> </h:selectManyListbox> <h:panelGroup id="buttonGroup" styleClass="switchlistButtons"> <h:commandButton value=">>" actionListener="#{switchlist.move1to2}" styleClass="switchlistButton" /> <h:commandButton value="<<" actionListener="#{switchlist.move2to1}" styleClass="switchlistButton" /> </h:panelGroup> <h:selectManyListbox value="#{switchlist.list2}" styleClass="switchlist"> <f:selectItems value="#{switchlist.items2}"/> </h:selectManyListbox> </h:form> </h:body> </html>

Backtracking a bit - Switchlist in Page <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"> <h:head> <title>Switchlist Example</title> </h:head> <h:body> <h1>Switchlist Example</h1> <h:form id="form1"> <h:outputStylesheet name="switchlist.css"/>

With and without Styling

Resources
h:outputStylesheet calls a resource
Resources are placed in {context}/resources
You can use resources for libraries, images, css, javascript and composite components
Lots of options, this is a simple case
So when you call
<h:outputStylesheet name=”switchlist.css”>
It serves the file {context}/resources/switchlist.css

resources/switchlist.css .switchlist { font-size: medium; font-family: Arial, sans-serif; height: 150px; width: 100px; } .switchlistButtons { width: 55px; display: inline-block; margin-top: 50px; vertical-align: top; } .switchlistButton { width: 50px; height: 25px; }

Just one problem
As implemented, you're getting a full page refresh every time you click a button
Let's fix that, by adding the <f:ajax> tag

Adding the Ajax tag <h:panelGroup id="buttonGroup"> <h:commandButton id="button1" value=">>" actionListener="#{listholder.move1to2}"> <f:ajax execute="@this list1" render="list1 list2"/> </h:commandButton> <h:commandButton id="button2" value="<<" actionListener="#{listholder.move2to1}" > <f:ajax execute="@this list2" render="list1 list2"/> </h:commandButton> </h:panelGroup>

Ajax Comp Components
Two new features that work great together
A few tricks to know:
Wrap with a <span id="#{cc.clientId}">
Use a context object
Namespacing
Careful with render=false

Saving Context
Eventually, you'll use JavaScript in a component
The ajax tag can only take you so far
When using an external JavaScript file, it's only served once . That means that including it in your a component gets harder.
How will you keep track of the clientid?
There's an easy solution, fortunately – keep track of the ID of your component inside the component itself, with context or state.

EditText Example Demo of EditText

EditText using page <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ez="http://java.sun.com/jsf/composite/editText" > <h:head> <title>Editable Text Example</title> </h:head> <h:body> <h1>Editable Text Example</h1> <h:form id="form1"> <ez:editText id="editText1" value="#{stringholder.str}"/>

EditText Interface <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:composite="http://java.sun.com/jsf/composite"> <composite:interface> <composite:attribute name="value" required="true"/> </composite:interface>

EditText Implementation <composite:implementation> <h:outputScript name="jsf.js" library="javax.faces" target="head"/> <h:outputScript name="editText/editText.js" target="head" /> <script type="text/javascript"> edittextdemo.init("#{cc.clientId}", "#{cc.attrs.value}"); </script> <h:outputStylesheet name="editText/styles.css"/> <span id="#{cc.clientId}">

EditText Impl – Panel 1 <h:panelGroup id="edit1"> <h:outputLink id="editLink" title="Click to edit" styleClass="editLink" onclick="return edittextdemo.linkClick('#{cc.clientId}');"> #{cc.attrs.value}</h:outputLink> </h:panelGroup>

EditText Impl – Panel 1 <h:panelGroup id="edit1"> <h:outputLink id="editLink" title="Click to edit" styleClass="editLink" onclick="return edittextdemo.linkClick('#{cc.clientId}');" > #{cc.attrs.value}</h:outputLink> </h:panelGroup>

EditText Impl – Panel 1 <h:panelGroup id="edit1"> <h:outputLink id="editLink" title="Click to edit" styleClass="editLink" onclick="return edittextdemo.linkClick('#{cc.clientId}');"> #{cc.attrs.value} </h:outputLink> </h:panelGroup>

EditLink css .editLink { font-size: medium; font-style: normal; font-family: Arial, sans-serif; } a.editLink:link {text-decoration: none} a.editLink:visited {text-decoration: none} a.editLink:active {text-decoration: none} a.editLink:hover {text-decoration: none; background-color: #eeee11;}

EditText Impl – Panel 2 <h:panelGroup id="edit2" style="display:none;" > <h:inputText id="editInput" value="#{cc.attrs.value}" styleClass="editInput"/> <h:commandButton value="Submit" id="submit" onclick="return edittextdemo.submitButton('#{cc.clientId}', event);"/> <h:commandButton value="Cancel" id="cancel" onclick="return edittextdemo.cancelButton('#{cc.clientId}');"/> </h:panelGroup>

EditText Impl – Panel 2 <h:panelGroup id="edit2" style="display:none;"> <h:inputText id="editInput" value="#{cc.attrs.value}" styleClass="editInput"/> <h:commandButton value="Submit" id="submit" onclick="return edittextdemo.submitButton('#{cc.clientId}', event);"/> <h:commandButton value="Cancel" id="cancel" onclick="return edittextdemo.cancelButton('#{cc.clientId}');"/> </h:panelGroup>

EditText Impl – Panel 2 <h:panelGroup id="edit2" style="display:none;"> <h:inputText id="editInput" value="#{cc.attrs.value}" styleClass="editInput"/> <h:commandButton value="Submit" id="submit" onclick=" return edittextdemo.submitButton('#{cc.clientId}', event); "/> <h:commandButton value="Cancel" id="cancel" onclick="return edittextdemo.cancelButton('#{cc.clientId}');"/> </h:panelGroup>

EditText JS - Initialization if (!window["edittextdemo"]) { var edittextdemo = {}; } edittextdemo.init = function init(componentID, initialValue) { edittextdemo[componentID] = initialValue; };

EditText JS – Toggle edittextdemo.toggle = function toggle(idOn, idOff) { var elementon = document.getElementById(idOn); var elementoff = document.getElementById(idOff); elementon.style.display = "inline"; elementoff.style.display = "none"; };

EditText JS – Link Click edittextdemo.linkClick = function linkClick(componentID) { var edit1 = componentID + ':edit1'; var edit2 = componentID + ':edit2'; var editInput = componentID + ':editInput'; edittextdemo.toggle(edit2, edit1); document.getElementById(editInput).focus(); return false; };

EditText JS – Submit 1 edittextdemo.submitButton = function submitButton(componentID, event) { var edit1 = componentID + ':edit1'; var edit2 = componentID + ':edit2'; edittextdemo.toggle(edit1, edit2);

EditText JS – Submit 2 var link = componentID + ':editLink'; var input = componentID + ':editInput'; var subButton = componentID + ':submit'; var exec = subButton + ' ' + input; var rend = input + ' ' + link; jsf.ajax.request( document.getElementById(subButton), event, {execute: exec, render: rend}); edittextdemo[componentID] = document.getElementById(input).value; return false; };

Revisit: Ajax Comp Components
Wrap with a <span id="#{cc.clientId}">
Use a context object
Namespacing
Careful with render=false

Future JSF Ajax Plans (2.1)
Ajax functionality will be expanded
Queues?
Autoupdate?
Arbitrary Actions?
Driven by user requests
Comet
Almost certain, but currently unsure of what form it will take

For more on JSF 2 & Ajax
Jim Driscoll's blog: http://weblogs.java.net/blog/driscoll/
[email_address]
Project Mojarra - http://mojarra.dev.java.net
Project GlassFish - http://glassfish.dev.java.net

JavaServer Faces 2.0 and Ajax Jim Driscoll [email_address]

http://blog.eisele.net	303
http://www.slideshare.net	51
http://www.eisele.net	13
http://translate.googleusercontent.com	3
http://www.ctroller.com	1
http://redirectit.itelcel.com.zmeomzm.appspot.com	1
http://www.google.com	1
http://polo.ceit.metu.edu.tr	1
http://www.linkedin.com	1

JSF 2 and Ajax

by Jim Driscoll

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 375

Statistics

JSF 2 and Ajax Presentation Transcript