Enhancing Site interaction Ajax appreciation of widgets (1)

Web 2.0 emphasizes unique and novel ways to interact with customers on the website. Many of these innovative technologies use graphs and widgets to communicate with servers and obtain data for display. In this article, I will introduce five of these widgets-some of which are open-source and some that need to be licensed-they communicate with the server through Ajax and XML.

• Carousel:This widget is a rolling image browser that allows you to scroll through a series of projects, each of which is represented in a small image. When you click a project, you can decide what to do. The actual example of movie usel is the Flikr website and Apple's iTunes interface. Carousel is provided for free and is based on the popular jQuery JavaScript framework.
• SWF/Charts:This Adobe Flash-based control reads chart data and style options from XML on the server, and then displays a chart based on the data. Its interface is very elegant. Because it is easy to create XML data, it is easy to add dynamic images to the page.
• SWF/Gauge:Similar to SWF/Charts, this Flash widget uses XML on the server to build a fully customizable dashboard display. The appearance of a dashboard can be imitated on an airplane or a car, or a more popular style. You can select this option.
• Local Editing:Strictly speaking, it is not a small part, but an intuitive, interactive, and lightweight way to obtain information from users. This function is included in the Scriptaculous framework and is located on the prototype. js library.
• DHTML windows:DHTML window provides a mechanism for placing a stateless floating window on the page content. You can move the window, resize it, or make it disappear. The window content can be specified by JavaScript on the page or read from the server through Ajax. This type of window is very suitable for use as an alarm mechanism, and is also suitable for displaying small forms, so as to avoid re-loading the entire page.

I will first show SWF/Charts widgets, because I think it is one of the easiest to deploy widgets. Compared with the amount of effort spent, it has the biggest return.

1. SWF/Charts Widgets

As the saying goes: "One painting is worth a thousand words ". This sentence is hard to refute, especially when talking about graphics. However, drawing on the Web is never easy. Although some Web frameworks include some basic images used to build images, most Web frameworks lack out-of-the-box drawing tools. The lack of this feature requires you to construct your own graphics.

Isn't it good if a widget can draw XML-encoded data? In fact, there is such a small part: SWF/Charts. To get started with this widget, I downloaded the SWF file from my website and some other SWF files used by the widget. Then, I installed these files on my site and added a link to the SWF widget in HTML, as shown in Listing 1.

Listing 1. Chart_page.html

Classid = "clsid: D27CDB6E-AE6D-11cf-96B8-444553540000" Codebase = "http://download.macromedia.com/pub.../swflash.cab#version=6,0,0,0" Width = "400" height = "250"> Value = "charts.swf? Xml_source = chart_data.xml & library_path = charts_library "> Src = "charts.swf? Xml_source = chart_data.xml & library_path = charts_library" Width = "400" height = "250" Type = "application/x-shockwave-flash" Pluginspace = "http://www.macromedia.com/go/getflashplayer">

Charts.swf has two parameters: the location of the library directory and the URL of the XML data. The XML data format is quite simple. Listing 2 shows a simple example.

Listing 2. Chart_data.xml

Bar 2005 2006 Projected 500 700 Actual 600 900

This file is basically used for chart data and some optional visual information. In this example, I specify the chart type as a bar chart. The site where the SWF file I downloaded is located has more information on options that can be set and available graph types.

When you browse this file in the Firefox browser, you can see the image shown in Figure 1.

Figure 1. Chart widget in use

We can see that the default color mode and appearance of this chart are indeed neat. The Axis values are arranged evenly. The overall effect is very good, and I do not pay much for it.

Obviously, you can replace the graph_data.xml file with a dynamic Web page: as long as the returned data has the correct format, the graphic control has little to do with it. This applies to all examples in this article. In fact, you can run all examples of local files in a Web browser without using a Web server (such as Apache Tomcat or IBM®WebSphere®Application Server) or Web programming languages (such as PHP, Microsoft®ASP. NET, Java™2 Enterprise Edition [Java EE]).