Case Study: Bringing WinForms Controls to the Web with AJAX

This is a showcase review for our sponsors at The Code Project. These reviews are intended to provide you with information on products and services that we consider useful and of value to developers.

In 2003, Atalasoft decided to make web versions of their WinForms imaging controls. The main issue in the port of the controls to the web was how to get the same interactivity in a web control that you could get in WinForm control. Here is a short list of the major requirements:

Key Web Image Viewer Requirements

• Cross-platform and cross-browser
• Interactivity similar to what you get with the WinForms controls:
  • Scroll bars when a large image was shown in a small viewport
  • Ability to load parts of the image on demand
  • Ability to pan, zoom, and select with mouse gestures
• Tight integration with HTML, CSS and JavaScript on the client and ASP.NET on the server
• No special security settings required
• No plug-ins or anything to install or approve
• Technology could be used for future controls
  • The Web Thumbnail Viewer (released in 2006) required lazy loaded thumbnails and full integration with the Image Viewer
  • The Web Annotation Viewer (released in 2007) required the ability to create, edit, move and resize annotations in the browser

For this project, we chose to use the techniques that would later be called AJAX. The term was coined in 2005 to describe the general technique of using JavaScript to contact a server asynchronously whenever the user needs a server update and using the result of that communication to change the DOM by generating HTML dynamically with JavaScript. The most famous example is Google Maps, but the browser features that enable what we call AJAX were introduced into Internet Explorer in 2000 to implement Outlook Web Access. By the time Atalasoft started, these features were implemented in all major browsers.

<embed src="http://www.youtube.com/v/ZCit_ZEUEjc" width="425" height="350" type="application/x-shockwave-flash" wmode="transparent" /></embed />

AJAX is just one way to get interactivity in a browser. The general term for applications like this at the time were Rich Internet Applications (RIA) and that term is still used to encompass the wide range of technologies that can implement a desktop-like feel in a web browser. There are several technologies that could be used to implement our feature set: Java Applets, Flash, ActiveX or AJAX. I will briefly describe and discuss our assessment of each.

Java Applets are programs written in Java that run in the sandbox inside the browser. They have been around since 1995, and are a well understood technology. One thing to note is despite their long history, they are still relatively rare on the public web. I believe this is because of the following drawbacks:

1. The versions of the Java runtime available in browsers is inconsistent
2. Not every browser comes with Java by default, and Java is not ubiquitous enough for many applications.
3. Java applets do not integrate well with other browser technologies such as CSS and JavaScript

Despite that, Java applets are still a viable option for many applications. They are more common in enterprise intranet applications where the desktop machines are more regular and controlled. They are cross-platform and cross-browser, they can have high interactivity, and if you program within the confines of the sandbox, there are no special security settings.

The only other problems, from our point of view, are that they don't integrate well into ASP.NET applications. The main reason is that they don't automatically keep and restore state through a post-back. We recommend don't use a post-back to update our controls (we provide better ways), but these controls live on a page with other controls that might need to post-back, so we need to support it. The big advantage we get from this now is full integration with the Microsoft ASP.NET AJAX (formerly Atlas) UpdatePanel, which is based on post-backs.

Second, there is no standard way for Java applets to be controlled from the server-side. Since we want to be able to have an ASP.NET control on the server that behaves like any other server control (which will integrate tightly with Visual Studio's designer), we would have to write this part ourselves.

Flash programs run inside the browser via a plug-in published by Adobe. The player is ubiquitous (an independent assessment says that 97-98% of internet users have it in their browser), and it is possible to create stunning User Interfaces with it. Although it is common to see Flash used for online advertising and games, it is still not widely used to create applications. Flash does have the best cross-browser/cross-platform multimedia support which is one reason why YouTube and Google Video chose it for their respective video services.

Similarly to Java applets, they do not have standard ways to integrate with CSS and JavaScript (although recent Flash players expose some controls to JavaScript), and they would not behave well through a post-back.

The biggest drawback at the time is the programming model for Flash which is very different from the standard ways of writing software. The player evolved from an interactive presentation creation system, and still has many artifacts from that. Essentially, creating a Flash application was modeled after stringing together movie clips or animations, and not based on any developer-friendly GUI methodology.

There are two alternatives for that now. Adobe themselves have released Flex, which among other things adds a markup language to describing Flash user interfaces, and OpenLaszlo, which is an open-source alternative that also provides a more standard programming model to delivering programs to the Flash player. At the time we were creating our controls, both of these technologies were in their infancy (and Laszlo wasn't open until October 2004).

ActiveX and other plug-in technologies like .NET's Web Deploy and even the new XAML Browser Applications have to be considered by any company targeting the Microsoft platform. If you only need to support IE on Windows then they offer superior interactivity and a well-supported programming environment. However, Atalasoft was committed to our client-side working on every major browser and platform without any plug-ins or special security settings, so these were never really an option for us.

AJAX is a term used to describe applications that use JavaScript, Dynamic HTML, and some sort of mechanism to contact the server for updates without needing a post-back. The effect is that the HTML page appears to update in place without causing it to blank out and refresh. AJAX itself is an acronym meaning Asynchronous JavaScript and XML, and describes the technique, not a specific tool or implementation—there is no AJAX player, for instance.

Although the name "AJAX" caught on very quickly, it doesn't really describe how this technique is actually done, since XML is not always used. The X in AJAX refers to both the format of the server communication (XML) and the browser function used to initiate the connection (XMLHttpRequest). Atalasoft actually uses neither, opting instead for communicating by posting forms in the background via an IFRAME and receiving JavaScript and JSON (JavaScript Object Notation).

To us, AJAX offers the following benefits over the other technologies:

• Only needs features native to the browser, HTML and JavaScript. All modern browsers support it. No plug-ins required.
• If necessary, you can write it to degrade nicely on older browsers that don't support it.
• It can be styled with CSS and integrates naturally with JavaScript.
• Since it's built on top of HTML and uses the DOM to represent itself, ASP.NET has natural ways for keeping its state via a post-back.
• It uses open technologies well understood by web developers.

Three years later, the technique we chose is gaining great acceptance. In 2005, after Google released Google Maps and Suggest (and GMail starting getting more and more interactive), many developers realized that HTML and JavaScript had come a long way, and were willing to bet on the technology (since it was good enough for Google). Gartner is predicting that by 2010, at least 60 percent of new application development projects will include Rich Internet Applications (RIA) technology such as AJAX.

The second annual AJAXWorld in NYC was in March this year, and according to the keynote, there are over a hundred AJAX frameworks on the market (many open-source). Google, Yahoo, and Microsoft all have open frameworks and tools available, but there are other popular ones such as Dojo and MochiKit, not to mention many proprietary ones.

<embed src="http://www.youtube.com/v/_s1gtVwMMAg" width="425" height="350" type="application/x-shockwave-flash" wmode="transparent" /></embed />

For ASP.NET developers, Microsoft publishes ASP.NET AJAX (formerly Atlas), which is a combination of their open-source AJAX JavaScript library and server-side ASP.NET controls to interact with them. Our AJAX implementation is fully compatible with it (since we designed it to be compatible with ASP.NET from the start). One common theme at AJAXWorld is that it was better to adopt AJAX components that operated within a framework. This is because although AJAX is thought of as a client-side technology, its true benefit comes from tight integration with a server-side proxy for the component. For web components targeted ASP.NET, integrating with the ASP.NET control classes is key to delivering the full benefit of AJAX.

See Atalasoft's AJAX-enabled ASP.NET imaging controls here.

Download Atalasoft's DotImage, the imaging toolkit that containfs these ASP.NET imaging controls here.

About Atalasoft

Established in 2000, Atalasoft is a provider of a high-performance, standards-compliant .NET Framework imaging libraries targeted towards authors of document processing and management systems and photographic imaging. Atalasoft offers unparalleled ease of integration through CLR compliant objects, logically laid-out object hierarchies, rock-solid implementation, and first-rate support.

Atalasoft, Inc.
116 Pleasant Street, Suite 321
Easthampton, MA 01027
Tel: 866-568-0129 or 413-572-4443
Fax: 866-568-0129
http://www.atalasoft.com/

Other product or service names mentioned herein are the trademarks of their respective owners.