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; };