Nilkamal T h l Nilk l Technology G Group

Using Richfaces and Ajax4j U i Ri hf d Aj 4j

2007 NTG

Problem Statement
Web is ubiquitous Browser based applications are the future How to Develop Rich Client Application or Rich Internet Applications How to add Interactivity, animation, events and server data fetch functionality without reloading the pages How to manage content changes without refreshing the whole content

Answer !!!!!! Ajax

Ajax can be viewed as a set of technologies Ajax can be viewed as an architecture JavaScript is primary component of AJAX Ajax is more of a technique than it is a specific technology Ajax works in most modern browsers and doesnt require any proprietary software or hardware hardware. No need to learn some new language. No need to scrap existing investment in server-side technology Ajax is a client-side approach j pp Ajax can interact with WebServices, J2EE, .NET, PHP, Ruby, and CGI scripts To believe in AJAX you should be a client side scripting supporter and server agnostic

Ajax: Asynchronous JavaScript and XML

Standards-based presentation using XHTML and CSS Dynamic display and interaction using the Document Object Model Data interchange and manipulation using XML and XSLT Asynchronous data retrieval using XMLHttpRequest or XMLHTTP (from Microsoft) JavaScript binding everything together

Ajax Architecture
User makes initial request against a given URL Server returns original HTML page Browser renders page as in-memory DOM tree User activity causes subsequent request against another URL asynchronously, leaving existing DOM tree untouched Browser returns data to a callback function inside the existing page Browser parses result and updates in-memory DOM with the new data, which is then reflected on screen to the user (the data page is redrawn, but not "refreshed")

Partial Refresh

The XMLHttpRequest Object

By using the XMLHttpRequest object, a web developer can update a p g with data from the server after the p g has p page page loaded! The XMLHttpRequest object is supported in Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape 7

Basic concepts of the RichFaces

The framework is implemented as a component library which adds Ajax capability into existing p g , so y don't need to j p y g pages, you write any JavaScript code or to replace existing components with new Ajax widgets. RichFaces enables page-wide Ajax support instead of the traditional componentwide support.

Request Processing Flow

Re-Rendering
"reRender" is a key attribute. The attribute allows to point to area(s) on a p g that should be updated as a response on ( ) page p p Ajax interaction. The value of the "reRender" attribute is an id of the JSF component or an id list.

10

Addign RichFaces To your application

Requires 3 Jars to be added to you JSF application classpath richfaces-api-3.3.2.SR1.jar richfaces api 3 3 2 SR1 jar richfaces-impl-3.3.2.SR1.jar richfaces-ui-3.3.2.SR1.jar

11

Register Rich Faces in web.xml

12

Rich Faces Tag Libraries

<xmlns:a4j="http://richfaces.org/a4j"> <xmlns:rich= http://richfaces.org/rich > <xmlns:rich="http://richfaces org/rich">

13

Sample Ajax Output

14

Some Rich Components

15

Rich Components
<rich:panel />

<rich:dropDownMenu/>

16

Rich Components
<rich:tab/>

<rich:editor/>

17

Rich Components

18

Using the Ajax Poll

The <a4j:poll> component allows periodical sending of Ajax requests to a server and is used for a page updating according to a specified time interval.

19

Auto Complete using Ajax

The component adds on-keypress suggestions capabilities to any input text component like y p p <h:inputText>

20

<a4j:support/>
The <a4j:support> component is the most important core component in the RichFaces library. p y It enriches any existing non-Ajax JSF or RichFaces component with Ajax capability. All other RichFaces Ajax components are based on the same principles <a4j:support>

21

A4j:status
The <a4j:status> component generates elements for displaying of the current Ajax requests status. p y g j q There are two status modes: Ajax request is in process or finished.

<a4j:status startText="Started" stopText="stopped" />

22

Unit summary
Having completed this unit, you should be able to: Explain the use of JSF RichFaces Technology Technology.

23