ajax in apache myfacespeople.apache.org/.../mo23/ajax_myfaces_presentation.pdf · 2013-05-27 ·...

1

AJAX in Apache MyFaces

Gerald MüllanMatthias Weßendorf

A New Approach To Web Applications

2

Gerald MüllanApache MyFaces contributorWeb-Engineer with focus on JavaServer FacesIntegration of AJAX into

Apache MyFacesAJAXInputSuggestAutoUpdateDataTable

JSF web applications

Employee of Irian, an Austrian IT-CompanyIRIAN co-founded MyFacesfocuses on J2EE based application development

3

Matthias Weßendorf

Apache MyFaces committer / PMCauthor of German books

Struts 1.2Web Services and mobile clientsJavaServer Faces 1.2 (soon)

author of German articlesstuff related to JSF (Facelets, AJAX, Spring,...)

4

Table of ContentIntroduction AJAX and Web 2.0Integrating AJAX in JavaServer Faces

The three strategies AJAX MyFaces components

AJAXInputSuggestAutoUpdateDataTable

Discussion (or Question & Answer)

5

Table of ContentIntroduction AJAX and Web 2.0Integrating AJAX in JavaServer Faces

The three strategies AJAX MyFaces components

AJAXInputSuggestAutoUpdateDataTable

Discussion (or Question & Answer)

6

The New Web - Web 2.0desktop applications provide richness and interactivity to the userweb applications should go the same wayWeb 2.0 services may replace desktopapplications Web 2.0

fully-fledged computing platforms serve web applications to end userspersonal content, social networkspurely web based

7

The New Web - Web 2.0complex and evolving technology infrastructure

server softwareclient applicationscontent syndication messaging protocols

A Web 2.0 site is built of many techniquesone of these is AJAX

8

What is AJAX?

a new approach to web applicationsa terminology affected by “Jesse James Garrett”from Adaptive Path in february 2005short name for “Asynchronous JavaScript And XML”becomes a new hype in 2005popularity raised with the help of Google

Gmail, Google Maps, Google Suggest

9

What is AJAX?

a bundle of common used techniquesHTML (or XHTML) and CSSDocument Object Model (DOM) XMLHttpRequest ObjectXML

JavaScript

hence not a new technologyformer called “server interaction via XMLHttpRequest”

10

AJAX Interaction

an AJAX application looks as if it resided on theuser's machinedata is asynchronously fetchedJavaScript call to AJAX engine

HTTP - Request back to serverhandling on its own

validation

browser is updated with gathered informationnot entirely refreshed

11

HTTP Request - Response

12

AJAX Request - Response

13

XMLHttp Object

Http request to server using a JavaScript objectMicrosoft:

XMLHttp since IE 5.0 (ActiveX Object)Instantiation:

if (window.ActiveXObject) // IE{

http_request = new ActiveXObject("Microsoft.XMLHTTP");

}

14

XMLHttpRequest ObjectMozilla, Safari..

XMLHttpRequestsupports same methods and properties

if (window.XMLHttpRequest) // Mozilla, Safari {

http_request = new XMLHttpRequest();}

function call after server response: (for both)http_request.onreadystatechange = function(){

// do useful stuff};

15

XMLHttpRequest Objectmake the request:

http_request.open('GET', URL, true);

asynchronous/synchronousAJAX!!

GET, POST, HEAD…

http_request.send(null);

response ok, continue processing:if (http_request.readyState == 4)

check the status code:if (http_request.status == 200)

16

JavaScript Libraries

need of JavaScript librariesAJAX supportvisual effects

prototype.jsopen-source JavaScript frameworkused in MyFaces AJAX componentsalso used by script.aculo.us

rico.jsdrag and drop management

17

Pros of AJAX

richness and interactivityAJAX effects look great

only parts of the page are changedless redundant datafaster update of the page

no stalling of user’s interaction with the application no plug-in needed

like flash, shockwave..

18

Pros of AJAX

platform independentworks across all browsers if JavaScript isenabledworks across all operating systems

19

Cons of AJAX

web application can feel inactive to a userstate handling

Browsers „back“ buttonbookmarking

need of JavaScript supportdifferences of browsers -> more testing

not a big issue with JavaScript libraries(AJAX-Engine)

20

Table of ContentIntroduction AJAX and Web 2.0Integrating AJAX in JavaServer Faces

The three strategies AJAX MyFaces components

AJAXInputSuggestAutoUpdateDataTable

Discussion (or Question & Answer)

21

First Strategy (simplest one)

uses only standard components<h:form/>,<h:InputText/>,<h:OutputText/>

for the result<div>…</div>

binding of JavaScript librariesbinding of CSS filesseparate Servlet

reads from <h:InputText> through id form:inputreturns <ul>..<li> ..</li>…</ul>

22

<f:view><h:form id="form"><h:panelGrid columns="2">

<h:outputText value=“Input"/><h:inputText id=“input“

value="#{ajaxbacking.input}"/><h:commandButton value=“send"/>

</h:panelGrid></h:form><h:outputTextvalue=“Value:#{ajaxbacking.input}"/>

</f:view><div id="results" class="ajax"></div>

<script>new Ajax.Autocompleter('form:input',

'results','ajax/suggest');</script>

First Strategy: The .jsp

23

First Strategy: Problems

change of id -> not genericno autocomplete attribute of <h:inputText/>

dependence of JavaScript librariesmixing of roles

page authorcomponent writer

24

Second Strategy

reuse of standard component <h:inputText/>

-> AJAX component <ajax:inputText/>

takes care of ressource bindingattributes: value, resourceURL

component writer:renderer classtag class

more compact

25

Second Strategy: The .jsp

<f:view><h:form id="form">

<h:panelGrid columns="2"><h:outputText value=“Input:"/><ajax:inputText id=“input"

value="#{ajaxbacking.input}"resourceURL="ajax/suggest"/>

<h:commandButton value=“send"/><h:outputTextalue="Wert:#{ajaxbacking.input}"

rendered="#{!empty ajaxbacking.input}"/></h:panelGrid>

</h:form></f:view>

26

Strategy 2: The Rendererpublic void encodeBegin(FacesContext context,

UIComponent component) throws IOException {

this.encodeResources(context, component);ResponseWriter out = context.getResponseWriter();String clientId = component.getClientId(context);out.startElement("input", component);out.writeAttribute("name", clientId, null);out.writeAttribute("id", clientId, null);out.writeAttribute("autocomplete", "off", null);…"new Ajax.Autocompleter ('"+component.getClientId

(context)+"', '"+DIV_ID+"','"+component.getAttributes().get("resourceURL")+"');…

27

Second Strategy: Problems

still relying on servletparameter form:input must match

-> solution without filter or servlet

28

Third Strategy

adding a PhaseListenerhandles the requestserves the resourceswrites <ul>..<li> ..</li>…</ul> in the response

tag classno resourceURL attribute

rendererno servlet mappinghandling through JSF engine (actionURL)

29

Third Strategy: Impacts

no external resourcesServletServletFilter

cleanest strategybut: lookup of list items in PhaseListenerbetter solution:

component attribute with reference to backing bean-> MyFaces AJAX components

30

Table of ContentIntroduction AJAX and Web 2.0Integrating AJAX in JavaServer Faces

The three strategies AJAX MyFaces components

AJAXInputSuggestAutoUpdateDataTable

Discussion (or Question & Answer)

31

AJAXInputSuggest

sandbox componentautosuggest control with AJAXsuggestedItemsMethod

method of backing bean delivers preview data realized with MethodBinding

call order1.) Ajax request2.) suggestionMethod in backend bean

32

AJAXInputSuggest

callorder3.) values pushed into the control binding4.) result sent back to the client 5.) control shows suggestion drop down

uses prototype.jsAjax.MyFacesAutocompleter(…)-> Ajax.Base(…)

33

AJAXInputSuggest: .jsp

<h:form><h:panelGrid columns="3“>

<x:outputLabel value="#{label.title_product}"/><s:inputSuggestAjax

suggestedItemsMethod=“#{product.getSuggestedProducts}"

value=“#{product.productNameToSearch}"/><x:commandButton value="#{label.productButton}"

action="#{product.searchForProducts}"/></h:panelGrid>

</h:form>

34

AJAXInputSuggest:suggestedItemsMethod

public List getSuggestedProducts(String prefix){

List<String> suggestedNames = new ArrayList<String>();

Session session = getSession();Criteria crit = session.createCriteria(Product.class)

.add(Restrictions.like("name","%"+prefix+"%"));

List<Product> tempProds = crit.list();

for(Product prod : tempProds)suggestedNames.add(prod.getName());

return suggestedNames;}

35

AutoUpdateDataTable

sandbox componentfrequency controlled updated DataTableuses prototype.js

Ajax.PeriodicalUpdater(…)

36

AutoUpdateDataTable: .jsp<h:form>

<s:autoUpdateDataTablevar="bids“value="#{dataTableData.bids}"preserveDataModel="true"frequency="3">

<h:column><f:facet name="header">

<h:outputText escape="false" value=“Bid"/></f:facet><h:outputText value="#{bids.bidData}" />

</h:column></s:autoUpdateDataTable>

</h:form>

37

Links and books

MyFaces AJAX exampleshttp://www.irian.at/open_source.jsf(sandbox components)

AJAX web resourceshttp://www.adaptivepath.comhttp://www.ajaxinfo.com/http://www.ajaxpatterns.org/Ajax_Frameworkshttp://www.ajaxdeveloper.org

38

Questions ?

Answers!