Module 4: Rich Internet applications

Module 4: Rich Internet applications

Syllabus: Characteristics of RIA, Introduction to AJAX: AJAX design basics, AJAX vs Traditional
Approach, Rich User Interface using Ajax, jQuery framework with AJAX.

Rich Internet applications (RIA):

 Rich Internet applications (RIA) are Web-based applications that have some
characteristics of graphical desktop applications.
 It is built with powerful development tools, so it runs faster and be more engaging.
 They can offer users a better visual experience and more interactivity than traditional
browser applications that use only HTML and HTTP.
 Early Internet users mostly exchanged text-based electronic mail messages. Then along
came HTML and the World Wide Web, and soon people were looking at graphically
enhanced Web pages designed by specialists and served up on demand.
 All these applications mainly involved reading text on-screen and dealing with material
that was preformatted and essentially static.
 To do tasks like manipulate data and interact with sophisticated business logic, users
relied on specialized software on their computers and networks. Then someone thought
about providing applications through standard Web pages that people could access with
their browsers.
 An RIA normally runs inside a Web browser and usually does not require software
installation on the client side to work. However, some RIAs may only work properly with
one or more specific browsers.
 For security purposes, most RIAs run their client portions within a special isolated area
of the client desktop called a sandbox. The sandbox limits visibility and access to the file
and operating system on the client to the application server on the other side of the
connection.
 Today, programmers can embed almost any functionality they want inside a Web-based
graphical interface, making it look and act as if it were traditional, shrink-wrapped
software.
 With modern tools, developers can create complex application screens using a variety of
mixed media such as multiple fonts, bit-map and vector graphic files, animations, online
conferencing, audio and video. Those applications offer functionality that goes far
beyond mere reading and browsing, and they can be served up over the Web. These are
called as rich Internet applications.

RIA tools:
The list of current technologies that can be used to build modern RIAs is long. Here are
some of them:
1. AJAX
2. Adobe Flash, Flex and Adobe Integrated Runtime (AIR)
3. Microsoft Silverlight
4. Curl (an object-oriented language with embedded HTML markup)
 Module 4: Rich Internet applications

5. Google Gears
6. OpenLaszlo and Webtop
7. Oracle WebCenter

Characteristics of RIA:
A number of key features differentiate RIAs from traditional Web applications.

1. Direct interaction: In a traditional page-based Web application, interaction is limited to a

small group of standard controls: checkboxes, radio buttons and form fields. This severely
hampers the creation of usable and engaging applications.

An RIA can use a wider range of controls that allow greater efficiency and enhance the user
experience. In RIAs, for example, users can interact directly with page elements through editing
or drag-and-drop tools. They can also do things like pan across a map or other image.

2. Partial-page updating: Standard HTML-based Web pages are loaded once. If you update
something on a page, the change must be sent back to the server, which makes the changes
and then resends the entire page. There's no other way to do it with HTTP and HTML. With
traditional Web-based apps, network connectivity issues, processing limitations and other
problems require users to wait while the entire page reloads. Even with broadband
connections, wait times can be long and disruptive.

But RIAs incorporate additional technologies, such as real-time streaming, high-performance

client-side virtual machines, and local caching mechanisms that reduce latency (wait times) and
increase responsiveness. A number of commercial development tools permit this partial-page
updating.

3. Better feedback: Because of their ability to change parts of pages without reloading, RIAs can
provide the user with fast and accurate feedback, real-time confirmation of actions and choices,
and informative and detailed error messages.

4. Consistency of look and feel: With RIA tools, the user interface and experience with different
browsers and operating systems can be more carefully controlled and made consistent.

5. Offline use: When connectivity is unavailable, it might still be possible to use an RIA if the
app is designed to retain its state locally on the client machine.

6. Performance impact: Depending on the application and network characteristics, RIAs can
often perform better than traditional apps. In particular, applications that avoid round trips to
the server by processing locally on the client are likely to be noticeably faster. Offloading such
processing to the client machines can also improve server performance. The downside is that
small, embedded and mobile devices -- which are increasingly common -- may not have the
resources necessary to use such apps.
 Module 4: Rich Internet applications

7. Security: RIAs should be as secure as any other web application, and the framework should
be well equipped to enforce limitations appropriately when the user lacks the required
privileges, especially when running within a constrained environment such as a sandbox.
8. Advanced Communication: Sophisticated communications with supporting servers through
optimized network protocols can considerably enhance the user experience.
9. Rapid Development: An RIA Framework should facilitate rapid development of a rich user
experience through its easy-to-use interfaces in ways that help developers.
10. Improved Features: RIA allow programmers to embed various functionalities in graphics-
based web pages that look fascinating and engaging like desktop applications. RIA provide
complex application screens on which various mixed media, including different fonts, vector
graphic and bitmap files online conferencing etc. are paused by using different modern
development tools.

Advantages of RIA:
The benefits and advantages of the RIA are:
1. Remotely accessed application: The basic principle of the RIA is the ability to have any
new user connect and run the application from any location as long as they are
connected to the network.
2. Full interactive experience: Unlike Web applications that provide page-by-page
interaction and feedback, the RIA provides a full interactive end-user experience.
3. Minimal Total Cost of Ownership (TCO):
 There is no need for application-specific setups to access and run a RIA.
 There is no need to manage the end-user's machine to accommodate application
maintenance.
 There is no need to install client-side software, such as Database-client and
special printer drivers.
4. Integrated Form Editor: The user interface design is an integral part of the uniPaaS
Studio.
5. A Comprehensive Solution: A comprehensive end-to-end solution facilitating full
interactive distributed clients and a centralized managed server.
6. A Single Unified IDE & Paradigm: The Rich Client is supported by a single and unified IDE
and development paradigm for defining server-side and client-side logic along with the
user interface design.
7. Automatic Logic Partitioning: The Rich Client deployment modules facilitate optimized
automatic logic partitioning between client and server.
8. Performance-Aware Development: The Rich Client Studio is a performance-aware
platform for developing response-optimized applications.
 Module 4: Rich Internet applications

9. Native Look & Feel – The Rich Client provides an automatic reflection of the native look
and feel of the selected client machine.
10. Browser free solution – The Rich Client is independent of browser vendors and browser
versions.
11. Local Resources Activation – The Rich Client supports various activities that can be
executed on the client side. For example:
 OS command
 File manipulation
 OS environment manipulation

AJAX Introduction
 AJAX is a developer's dream, because it allows:

 Update a web page without reloading the page.

 Request data from a server - after the page has loaded.
 Receive data from a server - after the page has loaded.
 Send data to a server - in the background.

 AJAX is not a programming language.

 AJAX is a technique for accessing web servers from a web page.
 AJAX stands for Asynchronous JavaScript and XML.

What is AJAX?
AJAX = Asynchronous JavaScript And XML.

AJAX is not a programming language.

AJAX just uses a combination of:

 A browser built-in XMLHttpRequest object (to request data from a web

server)
 JavaScript and HTML DOM (to display or use the data)

AJAX is a misleading name. AJAX applications might use XML to transport data,
but it is equally common to transport data as plain text or JSON text.
 Module 4: Rich Internet applications

AJAX allows web pages to be updated asynchronously by exchanging data with

a web server behind the scenes. This means that it is possible to update parts
of a web page, without reloading the whole page.

How AJAX Works

1. An event occurs in a web page (the page is loaded, a button is clicked)

2. An XMLHttpRequest object is created by JavaScript

3. The XMLHttpRequest object sends a request to a web server

4. The server processes the request

5. The server sends a response back to the web page

6. The response is read by JavaScript

7. Proper action (like page update) is performed by JavaScript

AJAX cannot work independently. It is used in combination with other technologies to

create interactive webpages.

JavaScript
 Loosely typed scripting language.
 Module 4: Rich Internet applications

 JavaScript function is called when an event occurs in a page.

 Glue for the whole AJAX operation.

DOM
 API for accessing and manipulating structured documents.
 Represents the structure of XML and HTML documents.

CSS
 Allows for a clear separation of the presentation style from the content and may be
changed programmatically by JavaScript

XMLHttpRequest
 JavaScript object that performs asynchronous interaction with the server.
Here is a list of some famous web applications that make use of AJAX.

Google Maps
A user can drag an entire map by using the mouse, rather than clicking on a button.
 https://maps.google.com/

Google Suggest
As you type, Google offers suggestions. Use the arrow keys to navigate the results.
 https://www.google.com/webhp?complete=1&hl=en

Gmail
Gmail is a webmail built on the idea that emails can be more intuitive, efficient, and
useful.
 https://gmail.com/

Yahoo Maps (new)

Now it's even easier and more fun to get where you're going!
 https://maps.yahoo.com/

How AJAX works?

AJAX communicates with the server using XMLHttpRequest object. Let's try to
understand the flow of ajax or how ajax works by the image displayed below.
 Module 4: Rich Internet applications

As you can see in the above example, XMLHttpRequest object plays a important role.

1. User sends a request from the UI and a javascript call goes to XMLHttpRequest object.
2. HTTP Request is sent to the server by XMLHttpRequest object.
3. Server interacts with the database using JSP, PHP, Servlet, ASP.net etc.
4. Data is retrieved.
5. Server sends XML data or JSON data to the XMLHttpRequest callback function.
6. HTML and CSS data is displayed on the browser.

Steps of AJAX Operation

 A client event occurs.
 An XMLHttpRequest object is created.
 The XMLHttpRequest object is configured.
 The XMLHttpRequest object makes an asynchronous request to the Webserver.
 The Webserver returns the result containing XML document.
 The XMLHttpRequest object calls the callback() function and processes the result.
 Module 4: Rich Internet applications

 The HTML DOM is updated.

Let us take these steps one by one.

A Client Event Occurs

 A JavaScript function is called as the result of an event.
 Example − validateUserId() JavaScript function is mapped as an event handler
to an onkeyup event on input form field whose id is set to "userid"
 <input type = "text" size = "20" id = "userid" name = "id" onkeyup =
"validateUserId();">.

The XMLHttpRequest Object is Created

var ajaxRequest; // The variable that makes Ajax possible!
function ajaxFunction() {
try {
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e) {

// Internet Explorer Browsers

try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {

try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {

// Something went wrong

alert("Your browser broke!");
return false;
}
}
}
}

The XMLHttpRequest Object is Configured

In this step, we will write a function that will be triggered by the client event and a
callback function processRequest() will be registered.
function validateUserId() {
ajaxFunction();

// Here processRequest() is the callback function.

ajaxRequest.onreadystatechange = processRequest;
 Module 4: Rich Internet applications

if (!target) target = document.getElementById("userid");

var url = "validate?id=" + escape(target.value);

ajaxRequest.open("GET", url, true);

ajaxRequest.send(null);
}

Making Asynchronous Request to the Webserver

Source code is available in the above piece of code. Code written in bold typeface is
responsible to make a request to the webserver. This is all being done using the
XMLHttpRequest object ajaxRequest.
function validateUserId() {
ajaxFunction();

// Here processRequest() is the callback function.

ajaxRequest.onreadystatechange = processRequest;

if (!target) target = document.getElementById("userid");

var url = "validate?id = " + escape(target.value);

ajaxRequest.open("GET", url, true);

ajaxRequest.send(null);
}
Assume you enter Zara in the userid box, then in the above request, the URL is set to
"validate?id = Zara".

Webserver Returns the Result Containing XML

Document
You can implement your server-side script in any language, however its logic should be
as follows.

 Get a request from the client.

 Parse the input from the client.
 Do required processing.
 Send the output to the client.
If we assume that you are going to write a servlet, then here is the piece of code.
public void doGet(HttpServletRequest request,
HttpServletResponse response) throws IOException, ServletException {
String targetId = request.getParameter("id");

if ((targetId != null) && !accounts.containsKey(targetId.trim())) {

response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
 Module 4: Rich Internet applications

response.getWriter().write("<valid>true</valid>");
} else {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<valid>false</valid>");
}
}

Callback Function processRequest() is Called

The XMLHttpRequest object was configured to call the processRequest() function
when there is a state change to the readyState of the XMLHttpRequest object. Now
this function will receive the result from the server and will do the required processing.
As in the following example, it sets a variable message on true or false based on the
returned value from the Webserver.

function processRequest() {
if (req.readyState == 4) {
if (req.status == 200) {
var message = ...;
...
}

The HTML DOM is Updated

This is the final step and in this step, your HTML page will be updated. It happens in
the following way −

 JavaScript gets a reference to any element in a page using DOM API.

 The recommended way to gain a reference to an element is to call.
document.getElementById("userIdMessage"),
// where "userIdMessage" is the ID attribute
// of an element appearing in the HTML document

 JavaScript may now be used to modify the element's attributes; modify the
element's style properties; or add, remove, or modify the child elements. Here is
an example −
<script type = "text/javascript">
<!--
function setMessageUsingDOM(message) {
var userMessageElement = document.getElementById("userIdMessage");
var messageText;

if (message == "false") {
userMessageElement.style.color = "red";
messageText = "Invalid User Id";
} else {
 Module 4: Rich Internet applications

userMessageElement.style.color = "green";
messageText = "Valid User Id";
}

var messageBody = document.createTextNode(messageText);

// if the messageBody element has been created simple

// replace it otherwise append the new element
if (userMessageElement.childNodes[0]) {
userMessageElement.replaceChild(messageBody,
userMessageElement.childNodes[0]);
} else {
userMessageElement.appendChild(messageBody);
}
}
-->
</script>

<body>
<div id = "userIdMessage"><div>
</body>
If you have understood the above-mentioned seven steps, then you are almost done
with AJAX. In the next chapter, we will see XMLHttpRequest object in more detail.