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