Ajax Frameworks

unalaskaweepingInternet και Εφαρμογές Web

19 Ιουλ 2012 (πριν από 4 χρόνια και 9 μήνες)

582 εμφανίσεις





Ajax Frameworks





45 pages


Date: 05.04.2007
Version: 1.0



A
JAX

F
RA
ME
W
O
RKS




I

Table of Contents
1.

History....................................................................................................................................................3

1.1

Revision History.....................................................................................................................................3

1.2

Review History.......................................................................................................................................3

1.3

Approval History....................................................................................................................................3

2.

Introduction.............................................................................................................................................4

2.1

Purpose..................................................................................................................................................4

2.2

Summary...............................................................................................................................................4

2.3

Scope.....................................................................................................................................................6

2.4

Definitions, Acronyms and Abbreviations............................................................................................6

3.

Introduction to Ajax Frameworks...........................................................................................................7

4.

Customer Needs....................................................................................................................................8

5.

Ajax Frameworks Description................................................................................................................9

5.1

Direct Javascript Frameworks..............................................................................................................9

5.1.1

Prototype 1.5.0.................................................................................................................................9

5.1.2

Apache XAP (0.3.0) tar.gz............................................................................................................10

5.1.3

DWR...............................................................................................................................................12

5.2

Component Frameworks....................................................................................................................13

5.2.1

Dojo 0.4.2.......................................................................................................................................13

5.2.2

Script.aculo.us 1.7.0.....................................................................................................................15

5.2.3

Yahoo! UI (YUI) 2.2.0a..................................................................................................................16

5.2.4

Open Rico 1.1.2.............................................................................................................................18

5.2.5

Tibco General Interface 3.3 Professional.....................................................................................20

5.3

Server-drive Frameworks...................................................................................................................21

5.3.1

GWT (Google Web Toolkit ) 1.3....................................................................................................21

5.3.2

jMaki...............................................................................................................................................23

5.3.3

ICEFaces 1.5.3..............................................................................................................................25

5.3.4

JBoss RichFaces 3.0.....................................................................................................................26

A
JAX

F
RA
ME
W
O
RKS




II

5.3.5

Echo2 2.0.0....................................................................................................................................28

5.3.6

ThinWire 1.2 RC1..........................................................................................................................30

5.3.7

ASP.NET Ajax (codename Atlas).................................................................................................33

5.3.8

Ajax.NET Professional...................................................................................................................36

5.4

Comparison Matrix..............................................................................................................................38

Appendix. Comparison Matrix.....................................................................................................................39

A
JAX

F
RA
ME
W
O
RKS




1. History
1.1 Revision History
Version
Date
Description of Changes
Reason
Made by
0.1

Created
Customer request for
research
E.Gomonova
0.2

All sections are drafted

O. Moroz,
A. Syagaylo,
I. Anisimov
D. Zernov
A. Nesmiyanov
0.3

Summary is created

O. Moroz































1.2 Review History
Version
Date
Reviewer
Reference
0.4
04.04.2007
E. Gomonova

0.5
04.04.2007
A.Ignatov






1.3 Approval History
Version
Date
Approved by
Signature or reference
0.6
05.04.2007
E.Povalyaev






3
A
JAX

F
RA
ME
W
O
RKS




2. Introduction
2.1 Purpose
The main purpose of this document is to present the results of the research established by
Luxoft to compare several Ajax Frameworks and find out the most appropriate solution,
which is eminently suitable to business and technical Customer requirements.
2.2 Summary
The spectrum of tools for creating Ajax web applications is really wide – from simple multi-
purpose JavaScript libraries (Prototype) to client-side widget sets (Dojo, Yahoo! UI) to full
client-side presentation machine (TIBCO GI) to server-side framework integrated libraries
(Wicket) to complete server-side-driven UI toolkits (GWT, Echo2, ThinWire). Accordingly, we
will select the tools appropriate for specific cases and then evaluate and compare them
(if there are more than one).
We identified the following main cases:
JSF-based web application
Adding or implementing Ajax support in JSF application calls for one of Ajax-JSF
frameworks, the best two being RichFaces/ajax4jsf and ICEfaces. We recommend using
ajax4jsf or RichFaces (which adds more components and data binding support) when
adding Ajax support to an existing JSF application. If Ajax capabilities are planned from the
start, ICEfaces might be a better choice because of better integration with different IDEs and
more powerful architecture; though as ICEfaces has its own quirks and issues choosing
between the two should be done on project basis, taking into account the application server
environment, browser-to-server traffic, etc.
Rich-client interface to existing web application or web services
The best tools for rich-client interface implementation (where the significant part of
processing is performed on the client side and the server-side application is used as a set of
HTTP-based services called from the client as needed) are GWT and TIBCO General
Interface. The main development difference between them is that GWT UI is programmed
in the subset of Java and later automatically translated to JavaScript, while TIBCO GI UI is
built in the GI IDE and programmed directly in JavaScript (using high-level library), requiring
dedicated JavaScript developers. On the other hand, GWT tool support for interactive UI
building is much worse than TIBCO’s, GWT UI usually programmed by hand (like Swing
programming in early days).
Introducing a little Ajax into existing application
Another specific case is when we have a web site or web application, probably built on
action-oriented framework (such as Struts or Spring MVC), and we need to “ajaxify” a couple
of pages – e.g. for better response time or enhanced user experience. In this case, it is often
easier to use some of direct or component Ajax frameworks such as Prototype or
script.aculo.us / Dojo / Yahoo! UI, requiring small changes in the view (adding JS library and
JS components or handlers to the page) and action (creating or modifying an action for
answering Ajax requests) layers. This approach does not scale well to big UI-heavy
applications but is very appropriate “in the small”.
4
A
JAX

F
RA
ME
W
O
RKS




We recommend using Prototype when there is no need for custom widgets and visual
effects (though effects such as fading highlighting of changed fields or hiding controls can be
easily added by using script.aculo.us extensions). For rich client UI we recommend using
Yahoo! UI toolkit, which provides the most useful and functional set of custom widgets.
Sometimes it is convenient to expose Java object interfaces at the server side for direct
invocation from the client side. This is easily achieved with DWR toolkit that can integrate
well with Spring (and other frameworks), automatically generate JavaScript proxies from
Java interfaces. JavaScript proxies then may be imported into HTML page as a library and
then used by the client-side code.
“Full-stack” frameworks
Several frameworks under consideration, including Echo2, ThinWire, and in part GWT, are
completely server-side driven. Developer writes the Java code that instantiates the UI
component hierarchy, wires the appropriate event handlers, and then passes the resulting
page / application tree to the framework, where it is used to automagically generate the
client-side presentation and code. Usually such frameworks promote development patterns
that are more suitable for standard GUI applications than to the Web, and in our opinion
make poor match for the J2EE architecture, don’t play well with other enterprise
development frameworks (such as Spring), and don’t scale well. While these can be used for
quick prototyping, we do not recommend using these frameworks for production application
development.
ASP.NET application
There are significantly less Ajax frameworks and toolkits in the .NET world, probably
because there is really only one .NET web framework (ASP.NET) vs tens of Java web
frameworks, or because .NET developers tend to use Microsoft products. The best choice
here is Microsoft ASP.NET AJAX framework (codename ‘Atlas’) recently released as
open-source.

Interesting Finds

Two frameworks out of sixteen evaluated caught our particular attention, both of them for not
trying to be everything and the kitchen sink, but doing just one thing and doing it well. The
first is Direct Web Remoting (DWR) framework that covers transparent client-server
communication, and easily integrates with various client-side and server-side frameworks.
The second if TIBCO General Interface that concentrates on the client-side application
implementation and consumption of server-side web services and web applications.
See the "
Ajax Frameworks Description
" section for detailed information about each tool.
5
A
JAX

F
RA
ME
W
O
RKS




2.3 Scope
The scope of this analysis is limited by the explicit list of Ajax frameworks for evaluation,
including the following products:

Direct javascript frameworks:

Prototype

Apache XAP

DWR

Component frameworks:

Dojo

Script.aculo.us

Yahoo! UI

TIBCO GI

Open Rico

Server-drive frameworks:

GWT

jMaki

ICEfaces

RichFaces

Echo2

ThinWire.

ASP.NET Ajax (codename Atlas)

Ajax.NET Professional
For general description of Ajax Frameworks and each group of frameworks see the
"
Introduction to Ajax Frameworks
" section. Reviewed Ajax Frameworks were evaluated
basing on the list of requirement specified by the customer and listed in section "
Customer
Needs
".
2.4 Definitions, Acronyms and Abbreviations
AJAX
Asynchronous JavaScript and XML
6
A
JAX

F
RA
ME
W
O
RKS




3. Introduction to Ajax Frameworks
AJAX (Asynchronous JavaScript and XML) is a technology to build dynamic web pages on
the client side, where the data is read from the server or sent to the server by JavaScript
requests. A framework eases the work of the Ajax programmer at two levels: on the client
side, it offers JavaScript functions to send requests to the server and generally managing
document tree and other browser functionality. On the server side, it processes the requests,
looks up or calculates the necessary data, and transmits them to the browser. Some
frameworks are very sophisticated and provide a complete library to build web applications.
Ajax frameworks can be loosely grouped into categories according to the features they offer
and the skills required of the developer:

Direct Ajax frameworks require HTML, CSS and Ajax expertise. A developer is
expected to author pages directly in HTML, and framework APIs deal directly with HTML
elements. Cross-browser APIs are provided for a variety of purposes, commonly
including communications, DOM manipulation, event handling, and
sizing/moving/animating HTML elements.

Ajax component frameworks offer pre-built components, such as tabbed panes,
which automatically create and manage their own HTML. Components are generally
created via JavaScript or XML tags, or by adding special attributes to normal HTML
elements. These frameworks are generally larger, and intended for web applications
rather than web sites.

Server-driven Ajax frameworks offer a server-side component-based development
model with some degree of Ajax support. Components are generally created and
manipulated on the server using a server-side programming language. Pages are then
rendered by a combination of server-side and client-side HTML generation and
manipulation. User actions are communicated to the server via Ajax techniques, server-
side code manipulates a server-side component model, and changes to the server
component model are reflected on the client automatically.
7
A
JAX

F
RA
ME
W
O
RKS




4. Customer Needs
During the review of Customer project it was discovered that standard approach, based on
synchronous communication to the server with full page refresh sometimes is not
acceptable. Customer needs to use new technology where Unit of work is a component and
only parts of pages are updated at a time.
The Ajax technology is a good candidate, but there are still some problems with
development process. For example, it is difficult to test and debug client applications for
different browsers. The time of development dramatically increased. Therefore, Customer
needs a good framework and good reliable libraries for development Ajax applications.
The set of criteria for such frameworks includes the following features:

Visual Design Environment.

Easy integration with existed IDE (Eclipse, etc)

Page Flow Designer, RAD framework, plenty of libraries (Advanced Controls, Visual
Effects, Drag & Drop forms, Data View / Grids)

Logging functionality with providing convenient errors handling and debugging.

Cross platform compatibility and tools to develop cross platform applications
A product used as Ajax Framework may be Open Source based.
8
A
JAX

F
RA
ME
W
O
RKS




5. Ajax Frameworks Description
5.1 Direct Javascript Frameworks
5.1.1 Prototype 1.5.0
http://www.prototypejs.org/

Prototype is a JavaScript Framework that aims to ease development of dynamic web
applications.
Featuring a unique, easy-to-use toolkit for class-driven development and one of the nicest
Ajax library around, Prototype is quickly becoming the codebase of choice for web
application developers everywhere.
Prototype provide developer independence from browser-specific behavior and
implementation issues, while not isolating him from the browser DOM completely. It provides
handy objects, methods, shortcut functions, and extensions for such useful operations as:

Navigating document tree

Selecting elements based on ID, name, or CSS properties

Getting and setting element value

Manipulating document tree

Converting between collection types

String substitution and templates

AJAX support

JSON support

Declarative behaviours.
Prototype is not integrated with any particular server framework, but it is designed to be
easily interfaced with almost anything on the server side from Perl to Java to Ruby on Rails.
Prototype framework also does not include advanced DHTML controls and visual effects but
serves as the base for several user-interface JavaScript frameworks such as
script.aculo.us.
9
A
JAX

F
RA
ME
W
O
RKS




5.1.2 Apache XAP (0.3.0) tar.gz
http://incubator.apache.org/xap/

Download:
http://incubator.apache.org/xap/index.php@cid=1056.html

XAP is an XML-based declarative framework for building, deploying and maintaining rich,
interactive Ajax powered web applications. It aims to reduce the need for scripting and help
solve the development and maintenance challenges associated with large scale JavaScript
programming.
XAP provides:

Declarative rich user interface via XML;

Data binding for connecting UI to data.

Incremental update of web pages, declaratively and programmatically.

A "plugin architecture" allowing developers to define their own XML tags to provide
behavior and UI or even use a completely different XML syntax.
Declarative approach simplifies development. Rather than writing many lines of
JavaScript to build a user interface XAP uses simple XML to create rich, complex user
interface. XML is also easy to parse, enabling supporting tools for visual creation and
management of XAP UI. XAP is not about "XML for everything" - XML is clumsy for
expressing sophisticated logic. XAP provides the plumbing and uses XML to describe the
user interface, link controls to data objects and form a foundation for building applications; it
then allows developers to place the right amount of code where it is needed.
XAP separates presentation from behavior. XAP defines presentation and data binding in
XML along with client side event handling that works well with encapsulated and packaged
JavaScript objects. This clear separation between user interface and logic allows to create
larger, more maintainable applications and fosters team development.
XAP works with any web server. XAP is a client side offering that you can use with any
web server - PHP, .NET, etc. It does not have any specific server requirements.
Event handling can take place at the client, using managed code objects (MCOs) written in
JavaScript, or on the server with event handlers written in any language supported by the
server environment. The MCO mechanism provides life cycle management and object
orientation for future development of business and user interface logic - another step to
simplifying development.
XAP uses any UI toolkit. XAP architecture is based on a "plugin architecture" that
leverages a component bridges concept, XML UI markup can be connected to virtually any
user interface toolkit. Initial XAP releases will support integration with toolkits such as Kabuki
and Dojo. Future releases will focus on other full-featured, high-performance UI toolkits.
Extensible Application Platform (XAP) user interface and data binding are described by
Extensible Application Language (XAL) files containing an XML-based markup language
designed to support application development - rather than document markup. XAP maps
XAL markup to specific UI widgets. An XAP DOM, separate from the HTML DOM, maintains
the UI state.
10
A
JAX

F
RA
ME
W
O
RKS




XAP Architecture (simplified workflow)
The following diagram provides a high level overview of the XAP architecture with a workflow
of XML input to the UI output. `"A" is the XAP application, which is an XML file that consists
of XAL markup and instructions. Subsequent changes to the DOM can be made either via
additional XAP XML documents containing declarative modification instructions or
programmatically via object oriented interfaces.

XAP Workflow
The above diagram demonstrates how XAL XML is fed into XAP to build the user interface.
Events generated by user interaction are fed back into the XAP application.
The simplified workflow of XAP architecture consists of the following steps:
1)
XML Parser processes the markup; markup consists of UI elements and instructions to
operate on the UI DOM or other DOMs
2)
Processed markup builds the UI DOM. The XAP DOM manages user interface state for
the XAP portions of the application; listeners allow hooking into DOM changes.
3)
Component bridges map XML tags to user interface
4)
UI Toolkits provide implementation of user interface components and make the relevant
changes to the HTML DOM
5)
Actual browser DOM representing the web browsers user interface
6)
Events are fired when the user interacts with the UI; these events are handled by the
XAP application.
11
A
JAX

F
RA
ME
W
O
RKS




5.1.3 DWR
http://getahead.org/dwr

DWR is a Java open source library for writing Ajax web sites. It allows code in a browser to
use Java functions running on a web server just as if it was in the browser.
DWR consists of two main parts:

Java Servlet running on the server that processes requests and sends responses back
to the browser.

JavaScript running in the browser that sends requests and can dynamically update the
webpage.
DWR works by dynamically generating Javascript based on Java classes. The code does
some Ajax magic to make it feel like the execution is happening on the browser, but in reality
the server is executing the code and DWR is marshalling the data back and forwards. This
method of remoting functions from Java to JavaScript gives DWR users a feel much like
conventional RPC mechanisms like RMI or SOAP, with the benefit that it runs over the web
without requiring web-browser plug-ins.
The diagram below shows how DWR can alter the contents of a selection list as a result of
some Javascript event like onclick.

DWR dynamically generates an AjaxService class in Javascript to match some server-side
code. It is called by the eventHandler. DWR then handles all the remoting details, including
converting all the parameters and return values between Javascript and Java. It then
executes the supplied callback function (populateList) in the example below which uses a
DWR utility function to alter the web page.
DWR also helps to produce highly interactive web-sites by providing some Javascript
libraries to help with DHTML and by giving the developer a set of examples to copy from.
12
A
JAX

F
RA
ME
W
O
RKS




5.2 Component Frameworks
5.2.1 Dojo 0.4.2
http://dojotoolkit.org/

Dojo is an Open Source DHTML toolkit written in JavaScript. Dojo aims to solve some long-
standing historical problems with DHTML, which prevented mass adoption of dynamic web
application development.
Dojo allows the developer to easily build dynamic capabilities into web pages and any other
environment that supports JavaScript. It provides components that can be used to make
web sites and applications more useable, responsive, and functional. Using Dojo,
developers can build degradable user interfaces more easily, quickly prototype interactive
widgets, and animate transitions. They can use the lower-level APIs and compatibility layers
from Dojo to write portable JavaScript and simplify complex scripts. Dojo's event system, I/O
APIs, and generic language enhancement form the basis of a powerful programming
environment.
Dojo build tools can be used to write command-line unit-tests for JavaScript code. The Dojo
build process helps to optimize the JavaScript code for deployment by grouping sets of files
together and reuse those groups through "profiles".
Dojo does all of these things by layering capabilities onto a very small core providing just the
package system and little else. When writing scripts with Dojo, the developer can include
either little or many of the available APIs depending on the needs.
Dojo provides the following features:

Multiple Points of Entry - to make sure that users should be able to start using Dojo at
the level they are most comfortable with. For example, expert JavaScript programmers
should find a set of capable foundation capabilities that allow them to be more
productive quickly, while web designers and developers should find a set of easy to use,
modify, and extend components that make their applications more responsive without
requiring them to learn a large JavaScript API.

Interpreter Independence - Dojo is a JavaScript toolkit, but within the realm of
JavaScript interpreters and environments, not everything was created equal. Dojo tries
very hard to ensure that it is possible to support at least the very core of the system on
as many JavaScript enabled platforms as possible. This will allow Dojo to serve as a
"standard library" for JavaScript programmers as they move between client-side, server-
side, and desktop programming environments.

Forward Looking APIs - No one has a crystal ball when it comes to what technologies
will be broadly available or used in 5 years, but Dojo attempts to provide APIs that are
generic enough to be (directly) useful with today's capabilities while still building in room
for future improvement.

Reducing Barriers to Adoption - This core philosophy behind Dojo's design
acknowledges the fact that tools that are hard to use just will not get used, no matter
how good they are.
13
A
JAX

F
RA
ME
W
O
RKS




On top of the packaging system, Dojo provides:

Big UI widget library

Rich layout capabilities

Visual effects and animations library

Browser-independent graphics

Event system for connecting parts together

Data storage and data binding system

AJAX capabilities

Internationalization and accessibility framework

JavaScript utilities for various tasks.
Example of user interface implemented in Dojo is represented on the picture below:

While being useful by itself, Dojo also serves as the foundation for several JavaScript
frameworks as well as server-side frameworks integration.
1
4
A
JAX

F
RA
ME
W
O
RKS




5.2.2 Script.aculo.us 1.7.0
http://script.aculo.us/

Script.aculo.us (Scriptaculous) toolkit provides a developer with easy-to-use, cross-browser
user interface JavaScript libraries. Scriptaculous can be used to create usable and
responsive web interfaces, including AJAX capabilities, slider control, drag-and-drop, and
visual effects.
Slider control allows user to visually choose the value in the specified range or from the
specified list of values.

Script.aculo.us slider control
AJAX capabilities are based on Prototype library adding support for auto-completion and in-
place editing.

Script.aculo.us autocompletion support
The Drag-and-drop library enables easy-to-do dragging and dropping of elements in the web
application and implementation of sortable lists and floats.
1
5
A
JAX

F
RA
ME
W
O
RKS




The Visual Effects library animations are time-based, not frame-based, allowing the
animation to run in exactly the time span given by developer. They are also style/CSS-based
and so are for most part independent from the underlying HTML control (different browsers
may apply different restrictions on style properties for some controls though). The library
includes 5 basic and 16 composite effects and supports chaining and compositing effects
and animations.
Scriptaculous framework also adds support for unit-testing JavaScript code.
5.2.3 Yahoo! UI (YUI) 2.2.0a
http://developer.yahoo.com/yui/

The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript,
for building richly interactive web applications using techniques such as DOM scripting,
DHTML and AJAX. The YUI Library also includes several core CSS resources. All
components in the YUI Library have been released as open source under a BSD license
and are free for all uses.
YUI components fall into three groups: Utilities, UI Controls, and CSS resources.
The YUI Utilities simplify in-browser devolvement that relies on cross-browser DOM
scripting, as do all web applications with DHTML and AJAX characteristics, including:

Animation: Create "cinematic effects" on web pages by animating the position, size,
opacity or other characteristics of page elements.

Connection Manager: This utility library helps manage XMLHttpRequest (commonly
referred to as AJAX) transactions in a cross-browser fashion, including integrated
support for form posts, error handling and callbacks. Connection Manager also supports
file uploading.

DataSource Utility: DataSource provides an interface for retrieving data from arrays,
XHR services, and custom functions with integrated caching and Connection Manager
support.

Dom Collection:The DOM Utility is an umbrella object comprising a variety of
convenience methods for common DOM-scripting tasks, including element positioning
and CSS style management.

Drag & Drop: Create draggable objects that can be picked up and dropped elsewhere
on the page.

Event: This sophisticated manager class gives an easy and safe access to browser
events (such as clicks and key presses). The Event package also includes the Custom
Event object, a mechanism for publishing and subscribing to interesting moments in
your own application flow.
16
A
JAX

F
RA
ME
W
O
RKS




The YUI Library Controls provide highly interactive visual design elements for web pages.
These elements are created and managed entirely on the client side and never require a
page refresh. Library Control set includes:

AutoComplete: Provides suggestion lists and type-ahead functionality based on a
variety of data-source formats and supports server-side data-sources via
XMLHttpRequest.

Button Control: The Button Control provides checkbox, radio button, submit and menu-
button UI elements that are more impactful visually and more powerful programmatically
than the browser's built-in form widgets.

Calendar: The Calendar Control is a graphical, dynamic control used for date selection.


Container: The Container family of controls supports a variety of DHTML windowing
patterns including Tooltip, Panel, Dialog and SimpleDialog. The Module and Overlay
controls provide a platform for implementing additional, customized DHTML windowing
patterns.

DataTable Control: DataTable leverages the semantic markup of the HTML table and
enhances it with sorting, column-resizing, inline editing of data fields, and more.

Menu: Application-style fly-out menus require just a few lines of code with the Menu
Control. Menus can be generated entirely in JavaScript or can be layered on top of
semantic unordered lists.


Slider: This control provides a generic slider element that enables the user to choose
within a finite range of values on one or two axes.

TabView: Implements a rich tabbed-navigation control.
17
A
JAX

F
RA
ME
W
O
RKS





TreeView: The TreeView control produces a content tree whose nodes can be
expanded and contracted by user interaction (and by script, where necessary). The
nodes can contain links or custom properties and can be loaded dynamically.

YUI CSS Resources are the basic building blocks for creating clean, flexible layouts that
play well across browsers, including preset grid layouts, standardized cross-browser font
families and size rendering, and utility for resetting CSS information at the start of the page.
5.2.4 Open Rico 1.1.2
http://www.openrico.org/

Open Rico is an open source JavaScript library for creating rich internet applications. Rico
provides full Ajax support, drag-and-drop management, and a cinematic effects library.
Rico provides a very simple interface for registering Ajax request handlers as well as HTML
elements or JavaScript objects as Ajax response objects. Multiple elements and/or objects
may be updated as the result of one Ajax request.
Rico provides one of the simplest interfaces for enabling your web application to support
drag and drop. Just register any HTML element or JavaScript object as a draggable and any
other HTML element or JavaScript object as a drop zone and Rico handles the rest. Rico
provides several cinematic effects as well as some simple visual style effects in a very
simple interface.
18
A
JAX

F
RA
ME
W
O
RKS




You can get an Accordion component like those found in Macromedia Flex and Laszlo. Just
nest some DIVs and with one line of JavaScript turn your div panels into an accordion:


Rico.Accordion Example
And the latest behavior is the LiveGrid. LiveGrid allows you to connect an Html table up to a
stream of Ajax responses. Ajax requests are automatically called during table scrolling. The
result is - now Html tables can hold an unlimited amount of data scrolled into view on the fly
as needed.

LiveGrid Example
19
A
JAX

F
RA
ME
W
O
RKS




5.2.5 Tibco General Interface 3.3 Professional
http://www.tibco.com/devnet/gi/default.jsp

The TIBCO General Interface application framework enables enterprises to deliver rich
internet applications (RIAs) that look, feel, and perform like desktop installed software but run
in a standard web browser. With General Interface, enterprises can have the best of both
options: rich, highly productive, service-differentiating GUI functionality with the low-cost
profile of web development, instant distribution, and accessibility.
The TIBCO General Interface application framework leverages AJAX (asynchronous
communications, JavaScript, and XML), event, and rendering capabilities of the web browser
to instantly create a powerful, object-based enterprise-grade application environment into
which your General Interface applications can be deployed. By working with an object-based
environment, as opposed to declarative markup languages, development time is shortened,
and the business can easily distribute, manage, and deploy high performance solutions.
TIBCO General Interface solves existing browser limitations by distributing many of the
processes typically handled by a centralized web application server to the browser on the
client machine. The application framework does this by first wrapping, then extending,
browser APIs with functionality more suitable to object-oriented application development.
Rather than forcing the developer to model complex workflows with a series of flat HTML
pages, the General Interface APIs enables to create stateful, interactive, object-based, client
applications that look, feel, and perform as if launched from the local operating system.
In addition to providing a powerful and efficient architecture, TIBCO General Interface makes
it easy to develop and deploy applications. Industry-standard technology is used, so
knowledge of existing technologies can be leveraged. GI features:

Ease of Deployment -- The General Interface application framework and all General
Interface applications are composed of JavaScript, XML, and CSS files. To deploy the
environment and applications, you simply include a reference to these files in an HTML
page that can be accessed by an end user from any HTTP or HTTPS server. The end
user types the URL into a browser and starts using the General Interface application. To
restrict and secure access to your application, use your existing mechanism for securing
web page access.

Support for Industry Standards and Best Practices -- General Interface uses
industry standard and widely accepted technologies in both its underlying code
(JavaScript, XML, and CSS) and overall architecture (Model-View-Controller and multi-
tier design). Best-practice, server-side tasks are migrated to the browser to deliver the
same successful results, maintainable code, and scalable performance. General
Interface takes best-practice approaches from the server and implements them in the
browser.

Scalable Architecture -- The fastest page server simply cannot compete with locally
served data. Load balancing, additional processors, page pre-caching, and any number
of server-side enhancements are all ultimately short-term solutions. Rather than
attempting to scale the server to meet the needs of the nth end user, consider a
paradigm where each end user provides the resources for their own processing needs.
20
A
JAX

F
RA
ME
W
O
RKS





Development Tools -- You can develop TIBCO General Interface client applications
and components using General Interface Builder, a script authoring environment, or
another IDE. Once the TIBCO General Interface runtime environment is loaded into an
HTML page in the browser, the developer can directly interact with the General Interface
GUI, data, and communication objects using JavaScript APIs. General Interface Builder,
a rapid deployment environment, is a visual authoring environment optimized for
creating General Interface applications and can run either as a standalone tool or within
the embedded browser module of another IDE.

TIBCO General Interface Builder IDE
5.3 Server-drive Frameworks
5.3.1 GWT (Google Web Toolkit ) 1.3
http://code.google.com/webtoolkit/

Google Web Toolkit (GWT) is an open source Java software development framework that
makes writing AJAX applications like Google Maps and Gmail easy for developers who don't
speak browser quirks as a second language. Writing dynamic web applications today is a
tedious and error-prone process; you spend 90% of your time working around subtle
incompatibilities between web browsers and platforms, and JavaScript's lack of modularity
makes sharing, testing, and reusing AJAX components difficult and fragile.
GWT lets you avoid many of these headaches while offering your users the same dynamic,
standards-compliant experience. You write your front end in the Java programming
language, and the GWT compiler converts your Java classes to browser-compliant
JavaScript and HTML.
21
A
JAX

F
RA
ME
W
O
RKS




The Demo Desktop App Clone Example Project is represented on the picture below:

Google Web Toolkit features includes the following:

Dynamic, reusable UI components. Create a Widget by compositing other Widgets.
Lay out Widgets automatically in Panels. Send your Widget to other developers in a JAR
file.

Really simple RPC. To communicate from your web application to your web server,
you just need to define serializable Java classes for your request and response. In
production, GWT automatically serializes the request and deserializes the response
from the server. GWT's RPC mechanism can even handle polymorphic class
hierarchies, and you can throw exceptions across the wire.

Browser history management. No, AJAX applications don't need to break the
browser's back button. GWT lets you make your site more usable by easily adding state
to the browser's back button history.

Real debugging. In production, your code is compiled to JavaScript, but at
development time it runs in the Java virtual machine. That means when your code
performs an action like handling a mouse event, you get full-featured Java debugging,
with exceptions and the advanced debugging features of IDEs like Eclipse.

Browser compatible. Your GWT applications automatically support IE, Firefox, Mozilla,
Safari, and Opera with no browser detection or special-casing within your code in most
cases.

JUnit integration. GWT's direct integration with JUnit lets you unit test both in a
debugger and in a browser...and you can even unit test asynchronous RPCs.
22
A
JAX

F
RA
ME
W
O
RKS





Internationalization. Easily create efficient internationalized applications and libraries.

Interoperability and fine-grained control. If GWT's class library doesn't meet your
needs, you can mix handwritten JavaScript in your Java source code using our
JavaScript Native Interface (JSNI).

Completely Open Source. All of the code for GWT is available under the Apache 2.0
license.
5.3.2 jMaki
https://ajax.dev.java.net/

The jMaki framework gives you a simple way to create JavaScript centric Web 2.0
applications. The framework provides CSS layout templates, access to widgets from popular
toolkits and a client side communication bus for distributing events between JavaScript
components. jMaki focuses on the delivering JavaScript to the client and allowing that
JavaScript to communicate to various server-technologies including PHP, Java (JSP/JSF),
and Phobos in a server-technology neutral way.


jMaki Client Side Components include:

jMaki Layouts. jMaki Layouts provide a standards based starting point for creating your
web applications using HTML and CSS. The CSS is in plain view so it can be easily
customized for your needs.

jMaki Client Runtime. The jMaki Client Runtime is a JavaScript responsible for
bootstrapping all widgets and passing parameters provided by a server-side runtime to
the widgets. Parameters are unique to each widget, and the JavaScript runtime makes
sure that each widget instance gets the correct parameters that were passed from the
server-side runtime. In cases when parameters are not provided, the runtime uses
default parameters that may then be customized for each widget.
23
A
JAX

F
RA
ME
W
O
RKS





jMaki Client Services. Services such as convenient APIs for performing
XMLHttpRequest and publish/subscribe on the client are provided to all widgets as
means of communication.

jMaki Glue is built on top of the publish/subscribe mechanism. It allows to
define application behavior and tie widgets together using JavaScript actions
when a specific event is published to a topic.

jMaki Timers allow JavaScript action handlers to be called or events to be
published at a set interval.

jMaki Injector is a client service that allows to bring in an external page into any
given div element. The Injector transfers scripts and CSS to the global page
content and allows widgets to be loaded much like an iframe without the
usability issues.

jMaki Widget Model. The jMaki widget model provides a component model for reusable
JavaScript components. The structure is based on a HTML, JavaScript and CSS. You
can use this structure to create your own widgets or wrap widgets from any given toolkit.
jMaki provides default wrappers and a server tie-in for many commonly-used Dojo,
Yahoo UI, Prototype, and some native widgets. jMaki also defines a widget.json
format which is a common way of describing widgets so that they are accessible by
tools.
jMaki Server Components include:

jMaki Server Runtime. The jMaki Server Runtime is responsible for tying the jMaki
JavaScript Client Runtime to a server-side runtime such as Java, PHP, or the
JavaScript-based Phobos runtime. The server runtime tracks and renders all script and
CSS references based on library type being used making sure that the duplicate script
and CSS links are not duplicated. The server-runtime also makes sure API keys (such
as Google and Yahoo Map keys) are applied when necessary based on a configurable
set of keys. The server runtime renders the HTML templates making and serializes data
in JavaScript such that each widget instance is provided the proper data.

XmlHttpProxy. The XmlHttpProxy module provides a means for widgets to access
JSON or XML access RESTful XML-based services outside of the web application
domain. Such services include RSS feeds, Yahoo services such as geocoding, Flickr
image searches, and many more to come. The XmlHttpProxy allows widgets to access
services in a uniform way by providing XSL-to-JSON transformations that can be easily
customized.

2
4
A
JAX

F
RA
ME
W
O
RKS




5.3.3 ICEFaces 1.5.3
http://www.icefaces.org

ICEfaces is the industry's first standards-compliant AJAX-based solution for rapidly creating
pure-Java, rich web applications that are easily maintained, extended, and scaled, at very
low cost.
ICEfaces provides a rich web presentation environment for JavaServer Faces (JSF)
applications that enhances the standard JSF framework and lifecycle with AJAX-based
interactive features. ICEfaces replaces the standard HTML-based JSF renderers with Direct-
to-DOM (D2D) renderers, and introduces a lightweight AJAX bridge to deliver presentation
changes to the client browser and to communicate user interaction events back to the
server-resident JSF application. Additionally, ICEfaces provides an extensive AJAX-enabled
component suite that facilitates rapid development of rich interactive web-based applications.
The basic architecture of an ICEfaces-enabled application is shown below.


ICEfaces-enabled JSF Application
The rich web presentation environment enabled with ICEfaces provides the following
features:

Smooth, incremental page updates that do not require a full page refresh to achieve
presentation changes in the application. Only elements of the presentation that have
changed are updated during the render phase.

User context preservation during page update, including scroll position and input focus.
Presentation updates do not interfere with the user's ongoing interaction with the
application.
These enhanced presentation features of ICEfaces are completely transparent from the
application development perspective. Any JSF application that is ICEfaces-enabled will
benefit.
ICEfaces also includes the ICEfaces Component Suite with enhanced implementations of
the JSF standard components and additional custom components that fully leverage the
ICEfaces Direct-to-DOM rendering technology and provide additional ICEfaces-specific
features, such as automated partial submit, incremental page updates, and easily
configurable component look-and-feel. Components can optionally be made draggable, drop
targets, or both.
2
5
A
JAX

F
RA
ME
W
O
RKS




The Extended Standard Components in the ICEfaces Component Suite provide special
attributes that can be used to invoke effects on the components, such as fade, highlight,
pulsate, and move. Effects can either be server-initiated (Server) or client-initiated (Local).
Server effects are invoked by dynamically changing the value of the 'effect' attribute on a
component, usually by binding the attribute to a backing bean. Local effects are invoked by
client-side browser events, such as "onMouseOver" or "onClick". Effects can be used to
provide a richer user-interface experience to the user by dynamically manipulating
components in interesting ways.
ICEfaces supports JSF 1.1 and can be uses with JSP as well as Facelets (recommended) in
the view layer. ICEfaces provides tight integration with various popular Java IDEs including
Eclipse-based IDEs (BEA Workshop, IBM RAD, Eclipse WTP) as well as NetBeans.
5.3.4 JBoss RichFaces 3.0
http://labs.jboss.com/portal/jbossrichfaces

RichFaces is a rich component library for JSF built on top of Ajax4jsf, an advanced
framework for easily integrating AJAX capabilities into business application development.
The RichFaces components come ready to use out-of-the-box, so developers can
immediately save time in taking advantage of component features to create Web
applications that provide a greatly improved user experience more reliably and more quickly.
RichFaces also includes strong support for the skinnability of JSF applications.
RichFaces is built on the foundation of Ajax4jsf framework that allows to:

Leverage the whole set of JSF benefits while working with AJAX

Add AJAX capability to existing JSF applications

Take advantage of skins-based technology

Create new custom rich components with built-in AJAX support

Test the components, actions, listeners, and pages in the development process


Adding Ajax4jsf support to existing JSF application
26
A
JAX

F
RA
ME
W
O
RKS




The key features of RichFaces include:

Set of ready-made AJAX components and the ability to add AJAX capabilities to existing
components - making possible to create Web applications that are as responsive as
regular desktop applications without having to write a single line of JavaScript code

Skinnable components - giving more flexibility in trying out different look-and-feel
options within a serviceable off-the-shelf Web design when developing applications. This
flexibility allows the delivery of projects focused on business goals more quickly.

A large number of components - the component-based approach to Web development
exemplified in JSF shows great promise for faster and more reliable development, but
requires getting quality components to use that are powerful and can be used right out-
of-the box. RichFaces provides components that allow developers to speedily reap
these benefits of component-based development.

<rich:datascroller> component example

<rich:tab> component example
RichFaces was originally developed by Exadel as a commercial framework and is being
currently open-sourced to JBoss along with its companion Exadel Studio IDE.
27
A
JAX

F
RA
ME
W
O
RKS




5.3.5 Echo2 2.0.0
http://www.nextapp.com/platform/echo2/echo/

Echo2 is the next-generation of the Echo Web Framework, a platform for developing web-
based applications that approach the capabilities of rich clients. The 2.0 version holds true to
the core concepts of Echo while providing dramatic performance, capability, and user-
experience enhancements made possible by its new Ajax-based rendering engine.
Echo2 removes the developer from having to think in terms of "page-based" applications and
enables him/her to develop applications using the conventional object-oriented and event-
driven paradigm for user interface development. Knowledge of HTML, HTTP, and JavaScript
is not required. Applications may be hosted using any Java servlet container. Echo2, like its
predecessor, is open-source software distributed under the terms of the Mozilla Public
License (or, if preferred, the GNU LGPL License).
Module Divisions
The Echo2 framework is divided into three distinct modules: the Application Framework, the
Web Rendering Engine, and the Web Application Container. Coupling between the modules
are kept to a minimum. The only dependency relationship amongst the modules is that the
Web Application Container is dependent upon both the Application Framework and Web
Rendering Engine modules. This dependency is NOT reciprocated.

Application Framework
The "Application Framework" module provides an API used to represent and manage the
state of an application and its user interface. Nearly all of an Echo application developer's
interaction with the framework will be through the Application Framework API - the
ApplicationInstance, Components, property objects, and event/listener APIs used in
developing an application are found within this module.
28
A
JAX

F
RA
ME
W
O
RKS




One of the most defining characteristics about the Application Framework is actually in what
it DOES NOT provide: it specifically does not provide any capability for rendering a user
interface to HTML or any capabilities for communicating with Web browsers. Further, it has
no dependency on any such code. The Application Framework is designed such that it could
theoretically be used in a scenario where a user interface were instead being rendered to
Swing, SWT, Flash or any other local or remote environment.
Update Manager
While the Application Framework does not provide any rendering capabilities of its own, it
does provide infrastructure for a rendering agent to interface with it. The Update Manager is
used to track updates to the displayed hierarchy of Component objects that make up the
user interface of an Echo application, and to process input received from the rendering agent
and communicate it to an application and its Components.
Web Rendering Engine
The "Web Rendering Engine" module is a set of tools which form the foundation of the
client/server interaction facilities of the framework. The engine consists of a server-side
portion (written in Java and utilizing the Java servlet API) and a client-side portion (written in
JavaScript and making extensive use of the XMLHttpRequest object).
The Web Rendering Engine is written as a base/utilitarian layer that is entirely independent
of / decoupled from any other module. The Web Rendering Engine is built as a somewhat
generic API for synchronizing a web browser with a server-side application, and as such it
has no direct connection to the Application Framework module.
Server Engine
The server-side portion of the Web Rendering Engine provides an HttpServlet at its core that
is used to process requests from the client. When the servlet receives an HTTP request, it
will delegate it to an appropriate Service object based on a service identifier provided in the
request. Echo provides numerous Service implementations that perform tasks such as
rendering the initial state of a user interface as an HTML document, providing JavaScript
modules, providing binary images, and rendering XML messages containing directives to
perform frational DOM updates on the client.
Client Engine
The client-side portion of the Web Rendering Engine is a JavaScript application, which runs
in the client web browser and interacts with the server engine to provide a remote user
interface to the server-side application. The Client Engine is responsible for initiating
connections (via XMLHttpRequeset) to the Server Engine to synchronize client/server state
when user operations warrant. It additionally provides a set of utilitarian APIs for interacting
with web browsers in a platform-agnostic manner.
29
A
JAX

F
RA
ME
W
O
RKS




Web Application Container
The Web Application Container is an extension of the Web Rendering Engine that serves to
render and synchronize the state of a user interface built with the Application Framework
with remote web clients. As an extension of the Web Rendering Engine, it provides
extensions to both the Server Engine and Client Engine, i.e., it contains server-side Java and
client-side JavaScript code.

Demo application. Window Pane.
5.3.6 ThinWire 1.2 RC1
http://www.thinwire.com/

ThinWire® is an open source, free for commercial use, development framework that allows
to easily build applications for the web that have responsive, expressive and interactive user
interfaces without the complexity of the alternatives. While virtually any web application can
be built with ThinWire, when it comes to enterprise applications, the framework excels with
its highly interactive and rich user interface components. Using ThinWire to handle the view-
layer of Java EE (J2EE) application allows one to provide an unparalleled user experience,
while at the same time completing the project in less time.
ThinWire takes a completely new and refreshing approach to the problems of web
application development. The first thing ThinWire does is accept that HTML and HTTP were
designed to deliver static content pages in the form that we see on news and magazine web
sites. They are not intended to be used as is, for business process data centric application
development. Of course, there is the basic data capture capability using HTML forms useful
for filling out an order form or sending an email. However, when talking about your typical
business process application, there are often complex business rules driving data entry.
Further, it's necessary to have more expressive user interface elements in order to
accurately capture and report information to the user.
While many of the Ajax techniques that have become popular as of recent address aspects
of these problems, the issue with all of them is that they simply add another layer of
complexity to an already over-burdened approach to web application programming.
30
A
JAX

F
RA
ME
W
O
RKS




ThinWire gives a clean and simple approach to solving these issues, which offers a
compelling alternative to current practices.

Example e-mail application built using ThinWire
An example of building a simple ThinWire application is illustrated on the picture below:

31
A
JAX

F
RA
ME
W
O
RKS




The main features of the framework are as follows:

Development framework for architecting Rich Internet Applications (RIA) that utilize Ajax
techniques

Familiar event-driven GUI programming model

Reconnects the flow of logic, no request response

Maintains state naturally via variables, not via session

Develop exclusively in server-side language only

Never use HTML, CSS, or JavaScript again

Program exclusively in Java

Server-Side execution of all application logic.

Rich Set of Complex Widget Components

Menu with image & shortcut-key support

Grid with multiple sortable columns

TextField & DropDown with real-time edit masking

Editable DropDown with multiple sortable columns

Tree control with image support

TabFolder with image support

Push buttons with images

Many other cool features.

Optimized for rapidly building productivity apps

Completely Dynamic, single page for entire application

Content is sent incrementally and only when needed

Zero Footprint Client, no browser plug-ins

Change Application Look and Feel with Global Style.
32
A
JAX

F
RA
ME
W
O
RKS




5.3.7 ASP.NET Ajax (codename Atlas)
http://ajax.asp.net/

Microsoft ASP.NET AJAX enables you to quickly create Web pages that include a rich user
experience with responsive and familiar user interface (UI) elements. ASP.NET AJAX
provides client-script libraries that incorporate cross-browser ECMAScript (JavaScript) and
dynamic HTML (DHTML) technologies, and it integrates them with the ASP.NET 2.0 server-
based development platform. By using ASP.NET AJAX, you can improve the user
experience and the efficiency of your Web applications.
ASP.NET AJAX enables you to build rich Web applications that have many advantages over
Web applications that are completely server-based. ASP.NET AJAX applications offer:

Improved efficiency by performing significant parts of a Web page's processing in the
browser.

Familiar UI elements such as progress indicators, tooltips, and pop-up windows.

Partial-page updates that refresh only the parts of the Web page that have changed.

Client integration with ASP.NET application services for forms authentication and user
profiles.

Integration of data from different sources through calls to Web services.

A framework that simplifies customization of server controls to include client capabilities.

Support for the most popular and generally used browsers, which includes Microsoft
Internet Explorer, Mozilla Firefox, and Apple Safari.
Architecture
ASP.NET AJAX consists of client-script libraries and of server components that are
integrated to provide a robust development framework. In addition to ASP.NET AJAX, you
can use the ASP.NET AJAX Control Toolkit and the features in the ASP.NET AJAX Futures
releases, which are both community supported.
33
A
JAX

F
RA
ME
W
O
RKS




The following illustration shows the functionality that is included in the client-script libraries
and server components.


ASP.NET AJAX server and client architecture
The illustration shows the functionality of the client-based Microsoft AJAX Library, which
includes support for creating client components, browser compatibility, and networking and
core services. The illustration also shows functionality of server-based ASP.NET 2.0 AJAX
Extensions, which includes script support, Web services, application services, and server
controls.
Server Architecture
The ASP.NET AJAX server components consist of ASP.NET Web server controls and
components to manage the UI and flow of an application, and to manage serialization,
validation, control extensibility, and so on. There are also ASP.NET Web services that
enable you to access ASP.NET application services for forms authentication and user
profiles.
Server Controls
The ASP.NET AJAX server controls consist of server and client code that integrate to
produce AJAX-like behavior. The following list describes the most frequently used ASP.NET
AJAX server controls.

ScriptManager. Manages script resources for client components, partial-page
rendering, localization, globalization, and custom user scripts. The ScriptManager
control is required in order to use the UpdatePanel, UpdateProgress, and Timer
controls.

UpdatePanel. Enables you to refresh selected parts of the page, instead of refreshing
the whole page by using a synchronous postback.
3
4
A
JAX

F
RA
ME
W
O
RKS





UpdateProgress. Provides status information about partial-page updates in
UpdatePanel controls.

Timer. Performs postbacks at defined intervals. You can use the Timer control to
post the whole page, or use it together with the UpdatePanel control to perform partial-
page updates at a defined interval.
Client Architecture
The ASP.NET AJAX client-script libraries consist of JavaScript (.js) files that provide features
for object-oriented development. The object-oriented features included in the ASP.NET
AJAX client-script libraries enable a high level of consistency and modularity in client
scripting. The following layers are included in the ASP.NET AJAX script libraries:

Browser compatibility layer. This provides compatibility across the most frequently
used browsers (including Microsoft Internet Explorer, Mozilla Firefox, and Apple Safari)
for your ASP.NET AJAX scripts.

ASP.NET AJAX core services, which include extensions to JavaScript, such as
classes, namespaces, event handling, inheritance, data types, and object serialization.

ASP.NET AJAX base class library, which includes components such as string builders
and extended error handling.

A networking layer that handles communication with Web-based services and
applications, and that manages asynchronous remote method calls.

Support for JavaScript libraries that are either embedded in an assembly or are
provided as standalone JavaScript (.js) files. Embedding JavaScript libraries in an
assembly can make it easier to deploy applications and can solve versioning issues.

Support for accessing server-based forms authentication and profile information
in client script. This support is also available to Web applications that are not created
by using ASP.NET, as long as the application has access to the Microsoft AJAX Library.

Support for release and debug modes and localization support for both
assembly-embedded and standalone JavaScript files. For more information, see the
ASP.NET AJAX Debugging and Tracing Overview and Localizing Resources for
Component Libraries Overview.
Control Toolkit
The ASP.NET AJAX Control Toolkit is a collection of samples and components that show
you some of the experiences you can create with rich client ASP.NET AJAX controls and
extenders. The Control Toolkit provides samples and a powerful SDK to make it simple to
create and reuse custom controls and extenders. You can download the ASP.NET AJAX
Control Toolkit from the ASP.NET Ajax Web site. The ASP.NET AJAX Control Toolkit is
community supported.
3
5
A
JAX

F
RA
ME
W
O
RKS




5.3.8 Ajax.NET Professional
http://www.ajaxpro.info/

Ajax.NET Professional (AjaxPro) is one of the first AJAX frameworks available for Microsoft
ASP.NET and is working with .NET 1.1 and 2.0.
Ajax.NET Professional enables you to build rich Web applications that have many
advantages over Web applications that are completely server-based.
The key benefits of Ajax.NET Professional are as follows:

Methods only get attribute, no need to implement interface or inherit from class
[AjaxMethod]
public int GetAge(string username){:}.

Source-code doesn't change if you want to use the method in server-side code
DemoMethods dm = new DemoMethods();
int age = dm.GetAge("michael");

WebServices can be used without code change:
<script type= "text/javascript"
src="servie1.asmx?AJAX"></script>

Client-side JavaScript will get "real" objects from Ajax.NET calls using JSON
<script type="text/javascript">
function test_callback(res) {
alert(res.value.FirstName + ' ' + res.value.FamilyName); }
</script>

DataSet, DataTable, DataRow, ArrayList, Array, DateTime, TimeSpan…

Create your own IAjaxObjectConverters

Cache requests (CacheDurationTimeSpan)

Access SessionState objects using HttpContext.Current.Session[…]

Context support for callback method

Unicode support without use of XML parser

Use Ajax.NET to retreive “events“ instead of polling
36
A
JAX

F
RA
ME
W
O
RKS




How it works
AJAX relies on a broker to dispatch and process requests to and from the server. For this
task, the .Net wrapper relies on the client-side XmlHttpRequest object. The
XmlHttpRequest object is well supported by most browsers, making it the solution of
choice.
The wrapper itself works by marking .Net functions as AJAX methods. Once marked, AJAX
creates corresponding JavaScript functions which can be called client-side (liky any
JavaScript functions) and that serve as proxies, using XmlHttpRequest. These proxies
map back to the server-side function.
The necessary common steps to utilize Ajax.NET Professional are as follows:
1)
Add reference ajax.dll to your project
2)
Modify your web.config to configure IHttpHandler for Ajax.NET requests
<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<system.web>
<httpHandlers>
<add verb="POST,GET" path="ajaxpro/*.ashx"
type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
</httpHandlers>
[...]
</system.web></configuration>

3)
Write your methods in C#/VB.NET and add the attribute [AjaxMethod]
[AjaxPro.AjaxMethod]
public DateTime GetServerTime()
{
return DateTime.Now;
}

4)
To use the .NET method on the client-side JavaScript you have to register the methods,
this will be done to register a complete class to Ajax.NET
namespace MyDemo
{
public class _Default
{
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));
}

[AjaxPro.AjaxMethod]
public DateTime GetServerTime()
{
return DateTime.Now;
}
}
}
37

A
JAX
F
RAMEWORKS

38
5.4 Comparison Matrix
We compared the products according to the requirements (specified in section "
Customer
Needs
") and created the comparison matrix (see
Appendix
) to facilitate the analysis.

6)
To call a .NET method form the client-side JavaScript code you can use following
syntax:
5)
If you start the web page two JavaScript includes are rendered to the HTML source.
function getServerTime()
{
MyDemo._Default.GetServerTime(getServerTime_callback); //
asynchronous call
}

// This method will be called after the method has been executed
// and the result has been sent to the client.

function getServerTime_callback(res)
{
alert(res.value);
}





A
JAX

F
RA
ME
W
O
RKS

Appendix. Comparison Matrix

Direct Javascript
Frame
works
Component Frame
works
Server-drive frame
works
Criteria
Prototype
Apache
XAP
DWR
Dojo
script.ac
ulo.us
Open Rico
Y
ahoo! UI
(YUI)
Tibco
GI
GWT
jMaki
ICE
faces
JBoss
Rich
Faces
Echo2
Thin
Wire
ASP.NET
Ajax
Ajax.NET
Professional
Browsers
supported
IE 6+,
Firefox
1+,
Safari
1.2+
IE,
Firefox
, etc.
IE 6+,
FireFo
x 1+,
Opera
8+,
Safari
1.3+
IE
6+,Fire
Fox
1+,
Opera
9+,
Safari
2+,
Konqu
eror
3.5
+
IE 6+,
Firefox
1+,
Safari
1.2+,
Opera
8+
IE 5.5, IE
6, Firefox
1.0x/Win,
Camino/M
ac, Firefox
1.5x/Mac
Curre
ntly,
the Drag
And Drop
is not
supported
on Safari
and the
Ajax API
requires
Safari 2.0.3
IE 6+,
FireFox
1.5+,
Opera
9+,
Safari
2+
IE
6+,
FireF
ox
1.5+

IE,
Firef
ox,
Mozil
la,
Safar
i, and
Oper
a
IE6, IE7,
Firefox 1.5,
Firefox 2.0,
Safari 2.x
and
Firefox 1.5
on Mac
OS X
Some
technologi
es
experien
ce
problem
s
with the
Firefox 1.0,
Safari, and
Mozilla
browsers
IE 6+,
FireFox
1+,
Safari
1.3+
IE 5+,
FireFox
1+,
Opera
8+,
Safari
2+
IE 6,
Oper
a 9,
Firef
ox 2
IE
5.5+,
FireFo
x 1+,
Opera
8+,
Safari
2+,
Nokia
770
Tablet
Microsoft
Internet
Explorer
6.0 or lat
er
versions.
Mozilla
Firefox
version 1.5
or later
versions.
Opera
version 9.0
or later
versions.
Apple
Safari
version 2.0
or later
versions.
Microsoft
Internet
Explorer
5.0
or later
versions
.
Mozilla
Firefox
versio
n 1.5
or later
versions
.
Oper
a
versio
n 9.0
or later
versions
.
Apple Safari
versio
n 2.0
or later
versions
.
Browser
isolati
on
(single code
for all
browsers)
Mostly













Yes
Yes
Mostly
Mostly
Yes
Yes
Yes
yes
Y
es
Yes
Yes
y
es
Yes
Yes
Yes


39


A
JAX

F
RA
ME
W
O
RKS


Direct Javascript
Frame
works
Component Frame
works
Server-drive frame
works
Criteria
Prototype
Apache
XAP
DWR
Dojo
script.ac
ulo.us
Open Rico
Y
ahoo! UI
(YUI)
Tibco
GI
GWT
jMaki
ICE
faces
JBoss
Rich
Faces
Echo2
Thin
Wire
ASP.NET
Ajax
Ajax.NET
Professional
Developer
isolati
on (no
need to write
Jav
aScript)
No














Yes
No
(autog
enerat
es
client-
server
code)
No
No
?
No
No
DO
M
mani
pulat
ion;
buis
ness
layer
is in
Java
Scrip
t
yes
?
Yes
Yes
y
es
Yes
Need
to
write
JavaScript
only for
custom
scripts
Need to
write
JavaScript
Visual de
sign
environment
No












No
No
No
No
?
No
Tibc
o
Gene
ral
Inter
face
Buil
der
no
?
Yes
Yes
Ech
oStu
dio 2
for
Ecli
pse
No
(web-
based
form
builder
in the
works)
Yes
No


40


A
JAX

F
RA
ME
W
O
RKS


Direct Javascript
Frame
works
Component Frame
works
Server-drive frame
works
Criteria
Prototype
Apache
XAP
DWR
Dojo
script.ac
ulo.us
Open Rico
Y
ahoo! UI
(YUI)
Tibco
GI
GWT
jMaki
ICE
faces
JBoss
Rich
Faces
Echo2
Thin
Wire
ASP.NET
Ajax
Ajax.NET
Professional
Supported
IDEs
JSEclips
e,
Eclipse
ATF,
others
No
No
JSEcli
pse,
Ecli
pse
ATF,
others
JSEcli
pse,
Eclipse
ATF,
others
?
No
No
Eclip
se,
Intelli
J
NetBeans,
Eclipse 3.2
BEA
Worksh
op,
Eclipse
WTP,
IBM
RAD,
NetBea
ns
Exadel
Studio
(to be
RedHat
Develop
ment
Studio)
Ecli
pse
No


Microsoft
Visual
Studio
2005 or
Visual Web
Developer
Express
Edition
Microsoft
Visual
Studio
2003/2005
(VS
template)
Server-side
language/fra
mework
support
Not
included
(support
ed by
Ruby on
Rails,
ajaxtags,
wicket,
DWR,
and
others)
It does
not
have
any
specifi
c
server
require
ments.
Java
1.3+
Not
include
d
(suppo
rted by
many)
Not
include
d
(suppo
rted by
Ruby
on
Rails,
ajaxtag
s,
wick
et,
DWR,
and
others)
N/A, only
visual
library?
Not
include
d
(suppor
ted by
many)
Web
servi
ces,
HTT
P
requ
ests
Java


Java,
PHP,
JavaScript,
Phob
os?
JSP, JSF
Java /
JSF
Java /
JSF
Java
Java /
Java
EE
ASP.NET
2.0 /
Microsoft
.NET
Framework
2.0+
ASP.NET
1.0 /
Microsoft
.NET
Framework
1.1+
Standard
HT
ML
controls
supported
Extends
standard
DOM
Yes
No
Yes








Yes
Yes
Extend
s
DOM,
CSS
utilities
Yes
yes
?
Yes
(skinna
ble)
Yes
(skinnab
le)
y
es
Yes
Yes
No


41


A
JAX

F
RA
ME
W
O
RKS


Direct Javascript
Frame
works
Component Frame
works
Server-drive frame
works
Criteria
Prototype
Apache
XAP
DWR
Dojo
script.ac
ulo.us
Open Rico
Y
ahoo! UI
(YUI)
Tibco
GI
GWT
jMaki
ICE
faces
JBoss
Rich
Faces
Echo2
Thin
Wire
ASP.NET
Ajax
Ajax.NET
Professional
Advanc
ed
controls
No





Yes
No
Accord
ion,
Chart,
DatePi
cker,
Rich-
Text
Editor,
Menu,
Popup,
Slider,
Table/
Grid,
Toolba
r, Tree
Slider
Accordeon,
LiveGrid

Autoco
mplete,

Button,
Calend
ar,
Panel,
Dialog,
DataTa
ble,
Logger,
Menu,
Slider,
TabVie
w,
TreeVi
ew
Pane
l,
Dial
og,
Split
ter,
Tabb
ed
Pane
,
Colo
r
Pick
er,
Date
Pick
er,
Slide
r,
Grid,
Men
u,
Tool
bar,
Tree,
Soun
d,
Char
t
Men
uBar,
Tree,
TabB
ar,
Dialo
gBox
,
Popu
pPan
el,
Stac
kPan
el,
som
e
Pane
ls
Dojo,
Scripta
culu
s, and
Yaho
o UI
Widgets
Chart,
Grid /
Table,
Menu,
Tree,
Date
Picker,
Panel
Data
Grid,
Slider,
Spinner,
Panel,
Tab
Panel,
Toolbar,
Tree,
Google
Map
y
es
Menu,
Grid,
Tree,
TabFol
der,
others
Yes
No


42


A
JAX

F
RA
ME
W
O
RKS


Direct Javascript
Frame
works
Component Frame
works
Server-drive frame
works
Criteria
Prototype
Apache
XAP
DWR
Dojo
script.ac
ulo.us
Open Rico
Y
ahoo! UI
(YUI)
Tibco
GI
GWT
jMaki
ICE
faces
JBoss
Rich
Faces
Echo2
Thin
Wire
ASP.NET
Ajax
Ajax.NET
Professional
Visual effects
No
Yes/?
No
11
effects
and
chainin
g
suppor
t
5 basic
and 16
combi
n
ation
effects
color, size,
position
Animat
ion
frame
w
ork,
CSS
effects
CSS
yes



?
18
effects
No
y
es

Animat
ions
frame
work
color, size,
position
No
Drag an
d
drop
No










?
No
Yes,
with
sorting
suppor
t and
effects
Yes,
with
sorting
suppor
t
Yes
Yes
Yes
no
Yes
Yes
Yes
no
Yes
Yes
No
Grid
s, dat
a
binding
No










Yes
No
Yes
No
LiveGrid
Yes
(beta)
Yes
Tabl
e
?
Yes
Yes
y
es
Yes
Standard
ASP.NET
2.0 data
controls/bin
ding
No
Advanc
ed
features
(page flow
designer,
RAD
framework)
No








No
No
No
No
?
No
In-
brow
ser
RAD
tool
(GI
Buil
der)
no
?
RAD
tool
RAD
tool
no
RAD
frame
work in
Java
Standard
ASP.NET
2.0
features.
No


43


A
JAX

F
RA
ME
W
O
RKS


Direct Javascript
Frame
works
Component Frame
works
Server-drive frame
works
Criteria
Prototype
Apache
XAP
DWR
Dojo
script.ac
ulo.us
Open Rico
Y
ahoo! UI
(YUI)
Tibco
GI
GWT
jMaki
ICE
faces
JBoss
Rich
Faces
Echo2
Thin
Wire
ASP.NET
Ajax
Ajax.NET
Professional
Error handling
and
debugging
features
Failure
handlers,
debuggin
g utils
Yes
JS
error
handle
rs,
except
ion
propag
ation
from/t
o Java
Debug
ging
utils
Failure
handle
rs,
debug
ging
utils,
unit
testing
using
Firebug or
other
tools?
Failure
case in
Connec
tion
support
Error
hand
lers,
debu
gger
Java
debu
g,
JUnit
? via
NetBeans
?
Java/JS
F
excepti
ons /
debuggi
ng
Java/JS
F
exceptio
ns /
debuggi
ng
Java
Java
excepti
ons /
debug
ging
Yes


No
Documentatio
n quality
Medium




Good
Mediu
m
Good
Mediu
m
there are
online
dem
os
and
tutorials
Mediu
m
Goo
d
no
rm
al
there a
re
online
demos
and
tutorials
Excelle
nt
Good
medi
um
Mediu
m
Very good
(online +
offline)
Poor
Maturity






Medium

?
Mediu
m
Mediu
m
Mediu
m
?
Mediu
m
Goo
d
no
rm
al
?
Good
Good
medi
um
Low
Enough
(First
release)
Enough
License and
support price
Free /
open-
source
Apach
e
Licens
e
Free /
open-
source
Free /
open-
source
Free /
open-
source
free and
open-
source
Apac
he 2.0
License
Free /
open-
source
Free
/
open
-
sour
ce
free


free,
open
source
Free /
open-
source
Free /
open-
source
free
Free /
open-
source
Itself free
(but works
only with
ASP.NET
2.0+)
Itself free
(but works
only with
ASP.NET
1.1/2.0)



4
4