09 Rich Faces

8/4/2019 09 Rich Faces

http://slidepdf.com/reader/full/09-rich-faces 1/23

ama ec no ogy roup

sng c aces an ax

© 2007 NTG



Problem Statement

• Web is ubiquitous

• How to Develop Rich Client Application or Rich InternetApplications

• How to add Interactivity, animation, events and servera a e c unc ona y w ou re oa ng e pages

• How to manage content changes without refreshing thewhole content

2



Answer !!!!!! Ajax

• Ajax can be viewed as a set of technologies

•

• 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 doesn’t require anypropr e ary so ware or ar ware.

• No need to learn some new language.

• No need to scrap existing investment in server-side technology

• Ajax is a client-side approach

• Ajax can interact with WebServices, J2EE, .NET, PHP, Ruby,and CGI scripts

• To believe in AJAX you should be a client side scriptingsupporter and server agnostic

3



Ajax: Asynchronous JavaScript and XML

• Standards-based presentation using XHTML and CSS

Model• Data interchange and manipulation using XML and XSLT

• Asynchronous data retrieval using XMLHttpRequest orXMLHTTP (from Microsoft)

• JavaScript binding everything together

4



Ajax Architecture

• User makes initial request against a given URL

• Browser renders page as in-memory DOM tree

• User activity causes subsequent request against another URLasynchronously, leaving existing DOM tree untouched

• Browser returns data to a callback function inside the existingpage

• Browser parses result and updates in-memory DOM with the,

page is redrawn, but not "refreshed")

5



Partial Refresh

6



The XMLHttpRequest Object

By using the XMLHttpRequest object, a web developer canu date a a e with data from the server after the a e hasloaded!

The XMLHttpRequest object is supported in Internet Explorer5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape7

7



Basic concepts of the RichFaces

The framework is implemented as a component library whichadds A ax ca abilit into existin a es so ou don't need towrite any JavaScript code or to replace existing componentswith new

Ajax widgets. RichFaces enables page-wide Ajax supportinstead of the traditional componentwide support.

8



Request Processing Flow

9



Re-Rendering

"reRender" is a key attribute. The attribute allows to point to area s on a a e that should be u dated as a res onse onAjax interaction.

The value of the "reRender" attribute is an id of the JSFcomponent or an id list.

10



Addign RichFaces To your application

Requires 3 Jars to be added to you JSF application classpath

- - . . . .

richfaces-impl-3.3.2.SR1.jarrichfaces-ui-3.3.2.SR1.jar

11



Register Rich Faces in web.xml

12



Rich Faces Tag Libraries

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

" "= .

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

for a page updating according to a specified time interval.

19



Auto Complete using Ajax

The component adds on-keypress suggestions capabilities toan in ut text com onent like

<h:inputText>

20



<a4j:support/>

• The <a4j:support> component is the most important corecom onent in the RichFaces librar .

• It enriches any existing non-Ajax JSF or RichFaces componentwith Ajax capability.

• All other RichFaces Ajax components are based on the same

21



A4j:status

The <a4j:status> component generates elements fordis la in of the current A ax re uests status.

There are two status modes: Ajax request is in process orfinished.

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

22



Having completed this unit, you should be able to:

Unit summary

.

23

Documents

09 Rich Faces