AJAX Features of ComponentArt Web.UI 2006.

1 Update
Address Bar

AJAX is quickly emerging as a solution for delivering a new breed of web applications with rich, high-
performance user interfaces. The fast growing recognition of AJAX in the web development community can be
attributed to recent high-profile AJAX implementations - such as Google Maps (maps.google.com), or
Microsoft's Outlook Web Access.

These implementations clearly show the superiority of web applications with rich user interfaces over the
traditional ones that typically require a full page reload after every user action.

ComponentArt Web.UI was designed to enable ASP.NET developers to easily deliver a rich set of AJAX features
in their applications - without having to write a lot of intricate cross-browser JavaScript code. This white paper
covers the following topics:

• What is AJAX?

• Overview of ComponentArt Web.UI AJAX Features

• AJAX Features Built Into Complex Web.UI Controls

• Universal AJAX User Interfaces Delivered Through the CallBack Control

• New AJAX Features Introduced With Web.UI 2006.1 (new!)

• What Separates ComponentArt Web.UI From Other AJAX Frameworks? (new!)

• Example AJAX Implementations Included in the Web.UI Download Package

• AJAX Features in Future Web.UI Releases

What is AJAX?

The AJAX acronym was coined by Adaptive Path in early 2005, and it stands for "Asynchronous
JavaScript and XML".

The main idea behind AJAX is to provide a more effective way of communicating with the server.
This means being able to execute server-side logic and update various page elements - without
reloading the entire page.

When a user performs an action - such as expanding a TreeView node - a callback request is made
to the server through JavaScript code. The server responds to this request by sending content of
the sub-tree in XML form. After this content is received by the browser, it is processed through
JavaScript code in order to generate and display sub-nodes of the expanded node. This is much
more efficient than re-generating the entire page in order to display the newly expanded TreeView
node.

This same concept can be applied to many other web user interface scenarios. We will cover some
of them in this document. While it is beneficial to understand what happens under the hood, please
note that you don't need to be an expert in client-side JavaScript programming to take advantage of
ComponentArt Web.UI AJAX features.

Overview of ComponentArt Web.UI AJAX Features

ComponentArt has been dedicated to providing rich, high performing, cross-browser web user
interfaces for ASP.NET since 2002. We have introduced several important innovations to this space,
such as client-side rendering, client-side storage, and client-side templates. The first ComponentArt
product with AJAX features - TreeView for ASP.NET - was released in early 2004.

Web.UI 2006.1 was architected from the ground up with strong focus on AJAX features across the
entire product line. Our goal was to go beyond simply placing AJAX wrappers around standard
ASP.NET controls.

The AJAX feature set of Web.UI 2006.1 is delivered in the following two categories:

1. AJAX features built into complex Web.UI controls (such as Grid, TreeView, or Snap);
2. Universal AJAX user interfaces implemented through the new CallBack control.

AJAX Features Built Into Complex Controls

A number of ComponentArt Web.UI controls come with AJAX features that can be used right out of
the box, without having to be combined with any other products or technologies.

ComponentArt Grid for ASP.NET

The ComponentArt Grid control is a great example of how ASP.NET developers can now leverage the
full power of AJAX without having to write client-side JavaScript code. Simply setting the
RunningMode Grid property to Callback enables paging, sorting, filtering, grouping, and editing to
be performed through AJAX callbacks.

When running in callback mode, ComponentArt Grid retrieves only the set of records required to
display the current page. Each user action triggers an AJAX callback request, retrieves the new set
of records, and updates the grid without reloading the entire page.

This technique can be used to efficiently handle millions of records. For a live demonstration of this
feature, please see the AJAX Grid example.

ComponentArt TreeView for ASP.NET

The ComponentArt TreeView control features the ability to handle very large tree structures by
loading each tree level on demand - through AJAX callbacks.

To enable this feature, ASP.NET developers simply need to specify the ContentCallbackUrl
TreeViewNode property, and implement server-side logic that generates the appropriate structure
for the sub-tree.

For live demonstrations of this feature, please see the AJAX File Explorer and AJAX Database-driven
Tree examples.

ComponentArt Snap for ASP.NET

ComponentArt Snap is an innovative control used to move, dock, expand/collapse, minimize, resize,
float, and align any ASP.NET content.

With version 2006.1, the Snap control features the ability to efficiently update user's profile on the
server by initiating an AJAX callback after each user action.

Each callback fires the appropriate server-side event without reloading the page. This means a web
application can track the new state of the Snap instance on the server. For a live demonstration,
please see the Snap Core Features example.

Universal AJAX User Interfaces Delivered Through the CallBack Control

The new CallBack control is designed to deliver universal AJAX-powered user interfaces, and AJAX-
enable the entire Web.UI suite. Our approach goes beyond simply wrapping standard ASP.NET
controls, and enables a whole new class of rich, high-performing web applications.

The CallBack control acts as an AJAX container for any ASP.NET content. Developers are able to
place any number of instances of the CallBack control on the page, and use them to render any
ASP.NET server control, user control, or a group of controls through an AJAX callback request.

Each CallBack control instance has a corresponding client-side JavaScript object, which can be used
to initiate an AJAX callback request with the appropriate parameters. This action triggers a server-
side event, providing the parameters and an HtmlTextWriter object instance in the event arguments.
The parameter can be used to execute custom server-side logic, and the HtmlTextWriter object can
be used to easily render ASP.NET content. This new content will be used to update the user interface
fragment defined by the CallBack instance, without reloading the entire page.

New AJAX Features Introduced With Web.UI 2006.1 (new!)

The 2006.1 release includes a number of new features and improvements designed to address
common customer feature requests and make our callback framework more comprehensive.

• Viewstate Persistence. By simply setting the PostState CallBack property to true, you will be
able to access the latest state of all ASP.NET controls contained on the page. This includes all
state changes made to Web.UI controls through the new client-side APIs.

• Bypassing the Page Life Cycle. We have noticed that many of our customers have been using
3rd party AJAX libraries side-by-side with our CallBack control in order to be able to send
quick commands to the server without going through the page life cycle. This was a way to
efficiently execute server-side logic when complex rendering through callbacks was not
needed. We now provide this functionality out of the box through a custom HTTP handler.
Developers are now able to mark their server-side methods with a
[ComponentArtCallbackMethod] attribute, and then invoke those methods from their client-
side code without causing the page to reload.

• Passing Any Number of Parameters to the Server. Starting with the 2006.1 release, any
number of simple-type parameters can be sent to the server with the callback request.
Those parameters will be available through the Parameters collection in the callback server-
side event arguments.

• Automatic Refresh. Automatic callback refresh can be enabled by setting the RefreshInterval
property to the desired time interval (in milliseconds). You can use the client-side API to
change the parameter(s) that are being sent to the server at any given time.

What Separates ComponentArt Web.UI From Other AJAX Frameworks? (new!)

When designing the AJAX feature set of ComponentArt Web.UI, our goal was to offer an elegant,
comprehensive, and high-performing AJAX solution which won't require developers to rewrite their
applications with a completely new set of controls. Here is the overview of the unique aspects of
ComponentArt's offering:

Unique Client-side Programmatic and Callback Persistence Features

An industry first, ComponentArt Grid and all Web.UI navigation controls now feature complete
client-side programmatic control. Nodes at any level can be created, updated, or removed through
the client-side API. When this new functionality is combined with the CallBack viewstate persistence
feature, a whole new level of richness is introduced to web programming. All of the client-side
programmatic changes are now present in the server-side object state on each callback request,
further blurring the line between the client and the server.

Superior Callback Performance Enabled by Client Templates

Not all AJAX implementations are the same when it comes to what exactly is being sent to the client
on each callback request. Most implementations render XHTML on the server and send it back with
each callback response. To make things lighter and faster, ComponentArt has introduced the client-
side templating technology, allowing only data to be sent with each callback response, while still
enabling full customization of the UI.

Ability to Optionally Bypass the Page Life Cycle

There are two main approaches to AJAX implementations for ASP.NET: triggering callbacks that
execute the page life cycle, and bypassing the page life cycle though an HTTP handler. Since there
are benefits to each approach depending on the usage scenario, ComponentArt Web.UI supports
both.

Elegance and Ease of Use

We believe that the approach of providing a comprehensive general AJAX wrapper has proven to be
more powerful in real life scenarios than providing a set of "pre-wrapped" AJAX enabled controls.
More complex UI scenarios contain groups of controls that need to be updated simultaneously, and
it is quite easy to do this with the ComponentArt CallBack control. In addition, being able to reuse
the existing server-side logic rather than starting with a new set of controls has benefited many of
our customers.

Example AJAX Implementations Included in the Web.UI Download Package

The following AJAX examples ship with the Web.UI 2006.1 download package:
 • AJAX Windows Explorer is a real file and directory browser implemented through
ComponentArt TreeView, Grid, Menu, and CallBack controls. Expanding TreeView nodes,
selecting directories, and rendering context menu content is performed through AJAX-style
callbacks - without reloading the entire page.

• AJAX Image Gallery is implemented though ComponentArt NavBar, TabStrip, and CallBack
controls, as well as the standard ASP.NET Image and Label controls. Selecting a new image
category loads the appropriate list of thumbnails through an AJAX callback. Similarly,
selecting a thumbnail loads the corresponding image along with its text description - without
reloading the entire page.

• AJAX Calendar is a customized schedule calendar implemented through ComponentArt

Calendar and CallBack controls. Each day contains custom schedule information generated
on the server. Paging through months is performed through AJAX callbacks without reloading
the entire page.

• AJAX Product Info is an example of displaying product information through AJAX callbacks,
based on user selection. Examples of driving this selection through TabStrip, Menu, and
TreeView controls are also included in the Web.UI 2006.1 download package.

• AJAX Context Menu is a server-generated context menu rendered through AJAX callbacks.
Being able to generate the context menu structure on the server is a great alternative to
having many context menu instances on the page.

• AJAX Standard Controls is an example of AJAX-wrapping standard ASP.NET controls.

AJAX in Future Web.UI Releases

We are only at the beginning of fully harnessing the power of AJAX and rich web user interfaces.
ComponentArt will continue to invest heavily in AJAX features, and our customers will enjoy the
benefits of our innovation in the following areas:

1. Introductions of brand-new Web.UI controls with built-in AJAX features;

2. Additions and improvements of built-in AJAX features of the existing controls;
3. More comprehensive general AJAX-wrapping abilities of the CallBack control;
4. Many more AJAX example implementations;
5. Support for emerging AJAX platforms, such as Microsoft Atlas.

We highly welcome your feedback regarding our AJAX direction.

The ComponentArt Team

Helping You Build Something Amazing