Innovative methods to create prefabricated Ajax building blocks and next generation platforms (e.g. Browsers and Plug-ins) are emerging this year that could help us build graphics intensive applications that are better than those possible on the traditional desktop platforms such as Windows/VC++, Java/Swing or UNIX/Motif at less cost.

There are three online platform emerging in the near future: Microsoft’s XAML, Adobe’s MXML/Flex/Flash and Firefox’s XUL+SVG. None of them are fully there yet.

The main missing piece that is preventing us from building superior online GUI applications is lack of reusable Ajax GUI classes, akin to Windows GUI-API or Java/Swing. If we can build better GUI classes or widgets than possible in traditional desktop GUI platforms, then there is no reason why we cannot build better Online graphics intensive applications than possible on the traditional GUI platforms.

Site Map One of the objective of the web site is to present innovative methods to design wide range of reusable GUI classes (e.g. Java Classes for JSP/Servlets), which dynamically generate custom data driven Ajax component (e.g. DHTML or SVG code runs in the Browser). For example, if one wishes to build Air Traffic monitoring system for many cities, he must build a reusable Airplane GUI class  that can be used as follows to display Ajax component for each flight in a web page:

// Of course, Instantiate and initialize the GUI Component
Airplane Al1 = new Airplane( aci, "UA486","B737", 1, "get_info.jsp");
// Where, Upon clicked on flight-image, uses Ajax to gets data from get_info.jsp

// Set callback that calls a method of a table components to display its data.
Al1.setCallBackName("flight_info_table.Display_info");
// As you can notice, this component can communicate with any
// other component in the web page or vice versa.
// The component must collaborate with other components in the web page
// which is a necessary requirement for any viable GUI component.

// Set initial location. However, this component uses Ajax techniques to get new
//location from the given URL (i.e.get_loc.jsp) every few seconds and moves itself.
Al1.set_location (90, 50, -40, "get_loc.jsp");

// If you notice the following Air Traffic example, it displays only 2 lines.
// Up on mouseover, it shows 4 lines, the following are the 2 additional new lines.
Al1.setSmallMessages("LAX-to-JFK", "Radio Ch#36");

Al1.CGM(out);  // Include SVG code to show the Flight in the Web page.

Note: Please Download Adobe's SVG Viewer 3.0 to view the SVG components.

          The above Airplane GUI Class is used to build the following sample Air Traffic monitoring system: Please visit http://cbsdf.com/technologies/demo-links/Atc3Cityes/air-trf-cont.html for code description; and to see a live moving flights example: Please click here for three-cities. (How is it possible for any one else to create such real-time data-driven web application?)

One needs to get (from database) the list of flights in the Air space at run time and create GUI Object for each flight in a loop. If each city's Air space has 100 flights, one must need reusable building blocks to build data driven real-time applications. (Note: Each flight asynchronously talks to server to update its location and upon-click displays its data.)

Although, the GUI Classes are build in Java, one may create similar GUI classes for other languages such as .NET/C#.  Although it is certainly possible to build this application in HTML/DHTML, which uses lame GIF images that look like cheap imitation to good quality desktop applications.

Imagine how great it would look: if Google maps were built using top quality vector graphics (e.g. SVG or Flash). They could have created superior interactivity and responsiveness for each vector, such as, a line, poly-line, arc or shape (For example, that are used to show each street or landmark).

         It is certainly possible to build GUI Classes for DHTML components as demonstrated by the tested working prototype components below. These GUI-Classes embed JavaScript in the component code, so that they can function like desktop GUI components. Unfortunately there is a main basic limitation prevents the GUI-API for DHTML from matching Java/Swing ... 

         For example, in the HTML pages, it is nearly impossible to use GIF images to show all possible minor variation of Flight image (please see above air-traffic-control), such as, colors, make-model and angular rotation to indicate its direction. But, vector graphics can accomplish all these by embedding just few lines of JavaScript code, along with the primitive vector graphics instructions to draw the Flight image. Each of those visual-effects or variations in the image are accomplished by changing just an attribute.

P.S. As far as coding, one can treat the SVG-images just like GIF-images. However, we can embed JavaScript in the SVG to make it far more interactive and intelligent (e.g. asynchronously talk to server to update itself). It is really soooo Cool! Just imagine the unlimited possibilities, if one can use a "Component Factory" to custom create data-driven SVG-image and ability to embed intelligent code ... Each SVG-image in the webpage can be a custom 3D animated Button, Menu, Chart, Map, Tree or Dial  ... It can be animated character like Mario, race-car or self-transforming-UFO in a video game ... it can be any thing one wants it to be and perhaps much more.

         Hence, future graphics intensive online applications and games likely use top quality Vector Graphics such as XAML, SVG or X3D. It is certainly possible to build a reusable GUI widget for any graphics component, which can be proved using proof of concept examples in the web page (Caution: Unfortunately the DHTML components never tested on and may not work on Firefox. But most of them were tested in the year 2000 on Netscape 3.0 when they were created and found to be cross browser compatible as intended): http://cbsdf.com/technologies/demo-links/demo-links.htm

Important Note: Please review the JSP code in the web page  below the examples to see real-time data driven nature of the components and how simple it is to build complex component hierarchies.

           In fact it is possible to build more flexible GUI widgets than possible on the desktop platforms. The components require far less code to assemble hence substantially cuts development and maintenance costs. For example, most subcomponents for a container component can be a complex component having large subcomponents of its own, as shown in the DHTML examples:

1. http://cbsdf.com/technologies/demo-links/DHTML_Demo/EXAMPLE1/ie_float1a.html

2. http://cbsdf.com/technologies/demo-links/DHTML_Demo/EXAMPLE1/ie_floats2a.html

3. http://cbsdf.com/technologies/demo-links/DHTML_Demo/EXAMPLE1/present_mix.html

To learn how to create Raju's online GUI Classes please review the following web pages in the Section-C of the technologies web page:
A Simple GUI Class to start: http://cbsdf.com/technologies/GUI-class1.htm  
GUI Class for the Airplane: http://cbsdf.com/technologies/GUI-Class3.htm 
A Sample Application: http://cbsdf.com/technologies/air-traffic-control.htm 
More Examples: http://cbsdf.com/technologies/sample-download-folder.htm 

            Likewise, if one wishes to build simulate real-time battlefield he should build reusable Ajax GUI classes such as Jet fighters, Helicopters, Ships and armed personal carriers. It would take about a day to build each Ajax GUI Class, judging from the experience of building, the Ajax GUI Class for Airplane, which has taken less than a day to build and has about 200 lines of code. 

           Applications may model real-time Visual simulation of dynamic systems and environments, such as real time Weather patterns, geographical-features, Air-Traffic monitors and decision support or real time data analysis systems. Consider an application that displays moving taxis on a vector based city map. The map and taxis must be redrawn frequently, since taxis are rarely stationary. Also, it should depict many pieces of data and states such as vacant, location, occupied or unavailable etc. In this application, an GUI Object could simulate (or represent) the taxi (a cab).

          For another example, Power-grid or plant operators deal with many simultaneous measurements and controls that require frequent, expert attention. Here, the operator interacts with GUI-components (e.g. dials, sensor-tuners, measuring meters or scales etc.) in order to control or to change settings. An GUI Object for Dial-Control contains code, not only to display reading of current setting, but also Ajax methods to register server callbacks. If operator changes the setting of the Dial, it calls the Ajax callback to notify the change and provides value of the new setting or parameter.

          The same GUI Class can take the type of the browser (e.g. XAML or SVG) as one of the inputs and create appropriate code. I have done this to create many DHTML components in the year 2000 and it worked perfectly, even with partial DOM support in Netscape 3.0. An experienced SVG programmer can create even complex GUI Class such as shown in the following web page in couple of days:  http://cbsdf.com/technologies/demo-links/Demo-SVGS/misc-charts.html