The slides are from a talk I had together with Manuel Amoabeng, an architect at a customer of mine dreamit.de. It shows how simple crawlable AJAX websites can be built with JSF.

1. RESPEKT
QUALITÄT
#EurostaffConnect
mit
FRANK CAPUTO
#EurostaffConnect
mit
Frank Caputo &
Manuel Amoabeng

2. Modern Websites with JSF
and jQuery
presented by Frank Caputo
and Manuel Amoabeng

3. The speakers
• Frank Caputo
Freelance Software Architect, JSF EG Member, Author of
JSF Resource Library Contracts, Passthrough Elements
frankcaputo.de
• Manuel Amoabeng
Softwarearchitect and interim PO at dreamIT in Ottensen
dreamit.de

4. The scenario
• Simple website, which must be crawled by bots
• Users want AJAX
• We must dynamically toggle content
• We must scale over multiple servers

5. Why JavaServerFaces
• Standard Java Web Framework
• Mature
• Designed for extensibility
• AJAX built in
• Continued development
• Many developers available
• Scalable

6. Why jQuery
• Mature
• De Facto Standard JavaScript Framework
• Designed for extensibility
• AJAX built in
• Continued development
• Many developers available

7. Implementation Notes

8. JSF Stateless Mode
• Disables JSF state saving
• Every form element needs
an ID
• Session must be restorable on any cluster node
• Still use session affinity
<f:view transient="true">
…
</f:view>

9. JSF AJAX Navigation
jsf.ajax.navigate = function (url) {
var fakeElement = {
form: {action: url, elements: [],
length: 0}
};
var fakeEvent = { type: 'navigate' };
this.request(fakeElement, fakeEvent,
{execute: '@none', render: 'main'});
};

10. jQuery Click Handlers
$('header nav a').on('click', function (e) {
jsf.ajax.navigate(e.currentTarget.href);
e.preventDefault();
});

11. JSF AJAX Events
jsf.ajax.addOnEvent(function (data) {
if (data.status == 'success' &&
data.responseCode == 200) {
var x = $(data.responseXML);
x.find('update').each(function (i, e) {
e = document.getElementById(e.id);
$(e).trigger('jsf:ajaxUpdate');
});
}
});

12. Browser Location Bar
$(document).on('jsf:ajaxUpdate', '#main',
function (e) {
var element = $(e.currentTarget);
var url = element.data('url');
var pathname = window.location.pathname;
if (pathname != url) {
window.history.pushState(null, null, url);
}
$(window).trigger('page:change');
});

13. Browser Back Button
$(window).on('popstate', function () {
jsf.ajax.navigate(location.pathname);
});

14. JSF Serverside AJAX Navigation
public class MyPartialViewContext extends
PartialViewContextWrapper {
@Override
public void setRenderAll(boolean renderAll) {
if(renderAll) {
getRenderIds().clear();
getRenderIds().add("main");
}
}
}

15. DEMO

16. Thank You!
Q&A
github.com/fcaputo/ModernJSF