Handouts to Session AJAX in Apache MyFaces - MO23 Web 2.0 slides: - PDF document

Handouts to Session AJAX in Apache MyFaces - MO23 “Web 2.0” slides: The New Web - Web 2.0 No single, unified definition of the term "Web 2.0" exists. To some, it refers to a perceived transition of the WWW from a collection of websites to a full-fledged computing platform, serving web applications to end users. To others, “Web 2.0” is a social phenomenon and refers to an approach to creating web content. However, “Web 2.0” services and applications provide richness and interactivity to the user and may replace desktop applications. If we have a look at the real-world example websites which follow the “Web 2.0” paradigm, we will see that there is a new approach to web applications coming up. Many concepts fit into this mixture: blogs, wikis, torrents, RSS, social software, Web APIs, XHTML/CSS. But there is also one other concept which refers to the term “Web 2.0”, called AJAX. “AJAX” slides: AJAX – A new approach to web applications AJAX is a new approach to web applications and was affected by “Jesse James Garrett” from Adaptive Path in February 2005. In his essay, Garret mentioned the name “ A synchronous J avaScript A nd X ML” as a short name for AJAX. In 2005 AJAX becomes a new hype. Also as a result of some well-known applications from Google, like Google Earth, Gmail, Google Suggest and so on. Ajax is not a technology in itself, but a term that refers to the use of a group of technologies together: • XHTML (or HTML) and CSS for presenting information • The Document Object Model manipulated through JavaScript to dynamically display and interact with the information presented • The XMLHttpRequest object to exchange data asynchronously with the web server. (XML is commonly used, although any format will work)

Ajax applications look almost as if they reside on the user's machine, rather than across the Internet on a server. The reason: pages get updated, not entirely refreshed! A really nice explanation what AJAX is about, refers from the essay mentioned above: “Every user's action that normally would generate an HTTP request takes the form of a JavaScript call to the Ajax engine instead. Any response to a user action that doesn’t require a trip back to the server — such as simple data validation, editing data in memory, and even some navigation — the engine handles on its own. If the engine needs something from the server in order to respond — if it’s submitting data for processing, loading additional interface code, or retrieving new data — the engine makes those requests asynchronously, usually using XML, without stalling a user’s interaction with the application”, wrote Jesse James Garrett in his essay. The biggest advantage of using AJAX is that data can be manipulated without having to render the entire page again in the web browser. This allows web applications to respond more quickly to many types of user interaction and to avoid repeatedly sending unchanged information across the network. Also, because AJAX technologies are open, they are supported in all JavaScript enabled browsers regardless of operating system. While no browser plug-in is required, AJAX requires users to have JavaScript enabled in their browsers. AJAX applications must be tested rigorously to deal with the quirks of different browsers and platforms; a number of programming libraries have become available as AJAX has matured, that can help ease this task. “AJAX” in JSF slides: Integrating AJAX in JavaServer Faces If you integrate AJAX in a framework like JavaServer Faces, there is not only one solution for this kind of problem. The following paragraphs show 3 strategies for an automatically suggested behaviour with the help of AJAX. For the corresponding code see the slides of the presentation. First – the simplest one – you can use only JSF standard components and a separate servlet in order to get AJAX running.

In the .jsp there are standard components like <h:form/>,<h:InputText/> (the AJAX Inputfield ),<h:OutputText/> and a <div>…</div> in order to show the suggested results. The servlet reads from the <h:InputText> field through the id form:input and returns a suggested result in the form of a list: <ul>..<li> ..</li>…</ul> to the mentioned div. The page author has to take care of the binding of JavaScript and CSS files and also of a few lines of JavaSript code to call the JavaScript library and do the AJAX request. A problem of this strategy is that this solution is not a generic one. If the id is changed, the servlet will not work. Also there is no autocomplete attribute of <h:inputText/>. Furthermore the page author has to do some work (like the binding, or inserting JavaScript code) which has to be originally done by the component writer. The second strategy is dealing with reuse of the standard component <h:inputText/> with the result of an AJAX component <ajax:inputText/> but NO own JSF component. It takes care of ressource binding and has the attributes value and resourceURL. The component writer has to deliver a renderer class and tag class. A result of this AJAX component is a more compact handling and as a result reduced work for the page author. But a more generic solution is needed without a servlet, because it is still relying on the id of the input component! The third strategy adds a PhaseListener instead of the servlet to handle the AJAX request. It serves the resources and writes writes <ul>..<li> ..</li>…</ul> in the response. The tag class has no resourceURL attribute anymore, because the renderer needs no servlet mapping. The handling of the mapping is done through the JSF engine with the help of the actionURL mechanism. For details see the code fragments in the slides to strategy 3. There is another problem coming up with this approach. The method which looks up the suggested items resides in the PhaseListener. It would be more convenient if there is an own attribute in the component where a method can be specified which does the look up of the suggested data. This is realized with the JSF method binding mechanism in the PhaseListener.

The MyFaces AjaxInputSuggest component follows this strategy which is also explained in the last slides of the presentation. And now, let’s have a look at some examples of MyFaces AJAX components: http://www.irian.at/open_source.jsf (sandbox components)