Raju's GUI Classes are highly flexible, yet simple to Build & Use

The power of the ready-to-assemble and replaceable parts is, the ease at which one can build component hierarchies. One could employ intelligent and highly customizable GUI Classes to build parts of large image (i.e. interactive component). This substantially cuts development effort (once we have sufficient number of fine grained reusable GUI building blocks, by using them again and again).

For example, consider a pie chart has three parts: a Title, Legend, pop-up tool-tips and of course the Pie-chart. How can we make each part, for example the Title, highly customizable?

Answer is quite simple, just allow any CCG (GUI or CF Object) for the Title:
PieChart.setTitle(CCG_for_Title); 
Isn't it Simple to Use & Highly Flexible/Customizable?

The CF for title can be any other GUI Component: It can be a scrolling stock ticker that gets stock quotes using Ajax methods; or any other chart such as line chart. No restrictions, what so ever (except of course the space allotted on the screen, if don't wish to see the Title component in scrolled area-please see below). This same technique can be used for each of the subcomponents.

Please install Adobe's SVG-Viewer 3.0 (ASV3.0) plug-in from Adobe-site to view the SVG Components (& Proof): http://www.adobe.com/svg/viewer/install/

Please move the mouse over to the Legends. 
Also move on to bars in the bar charts (both the main bar chart and popup bar charts).

Layout Code in JSP format for a chart that has following parts:
Title, Legend and of course Chart (This format may be used in a GUI Class's CGM)

The above JSP code is equivalent to the following 3-lines

Please Scroll the Legends. If a component is bigger than the place allocated, it is possible to display it automatically  in scrolled area

The GUI Class for the above Tab component can be designed to take an array of subcomponents and an array that contains Titles/CCGs for the respective tabs.

For example:  (The following CFs/CCGs for the charts are usually Dynamic Data Driven)
AgileTemplates CCGs[] = {Bar, AreaChart, StockChart}; // Array of CCG-Objects
String Titles[] = {"Bar Charts", "Percentage Area Chart"  ,"Stock Chart"}; //Tab-Titles
Tab_GUI_Widget Tab = new Tab_GUI_Widget(CCGs, Titles); // Input subcomponents
Tab.CGM(out); // Call CGM to get its code. (or Tab may be passed as a subcomponent)

Please notice the unprecedented ease for building Component hierarchies!
Which is essential to build the "Loosely Coupled" component based process!

Note: To understand how it works, please think each part (i.e. subcomponent) is just a GIF image. JavaScript is embedded to make them intelligent and interactive, but JavaScript should not let you think that they are different from ordinary GIF images. We demonstrated many example to prove that, absolutely there is no reason left why XML images need to be treated differently than GIF images. Now you should not have any problem to imagine, how to combine various parts (i.e. image fragments) as Lego blocks  to build larger and larger image hierarchy.

Many smart people trouble understanding simple logic: To build superior online GUI applications, we need superior reusable Ajax GUI-Classes than possible for any traditional GUI platforms such as Java/Swing or Windows/VC++.Aren't we building the desktop GUI applications for nearly quarter century? Then don't we know, what is the required capabilities for a complete reusable GUI Class? The web site has more than sufficient evidence to prove that it is possible to create reusable GUI Class for any GUI component one can find on any traditional GUI applications.

One needs to compose many GUI components to build the Applications. The cost and complexity of the application is directly proportional to the cost of composing or integration of the components. No other GUI platform can offer simpler or better ways for composing component hierarchies or abstractions. Hence Raju’s GUI-API can offer superior GUI platform than possible for the traditional GUI platforms.

Although, any new framework takes time to master, the CBSDF is the most easy to work with and takes less time to master than any other GUI frameworks.

Just instantiate, use simple set-methods to input data/subcomponents to initialize and call its CGM to display great interactive GUI Component 
... Can it be any Simpler?

What else the Online GUI-API needs to be widely used and successful? ...
May be it needs a celebrity endorsement? ... How about Jennifer Aniston?

Future web applications will be richer than the rich desktop applications!

Appendix-A

The Raju’s GUI framework offers excellent component reuse and flexibility for the GUI Widget designers and end users. The objective of the following is to show how one may be able to build large GUI Widgets using one or more fine-grained GUI Widgets.

To illustrate this, lets consider an example of how a Chart component vendor may create reusable GUI Widgets for many charts. Usually charts support many layout options, some of them are shown in the following figure.

The following is pseudo code for a generic Chart Class, which implements most of the Chart functionality and layout. It uses fine-grained Widgets to build subcomponents such as Legend, ToolTip and Title.

// Copyright(c) 2004 All Rights Reserved...Raju Chiluvuri
package com.agile.libtemplate;
// The objective of the Pseudo code only illustrate a sample method
// How one may use fine-grained GUI widgets to build large GUI
// Widgets . The fine graind Widgets are: Legend, ToolTip and Title.
import java.io.*;
import java.util.*;
import javax.servlet.http.HttpServletRequest;

public class BasicChart extends AgileTemplate   {
     public   BasicLegend   Legend    =    null;
     int      leg_x = 0, leg_y = 0;

     Object   Title     =    null;
     int      tit_x     = 0, tit_y = 0;

     int      chart_x   = 0, chart_y = 0;
     int      x_size, y_size;

     public   ToolTip     Tips[]    = null;

     // Constructor, which also initializes the Object.
     public BasicChartParts(AC_Info ACI)   {
          super(ACI);
          BasicLegend Legend = new BasicLegend();
     }

     int  setLegentNames(Strings  names[], int count, int colors[]) {
          // Let the Legend Class worry about these configurations.
          Legend.setTitles(Strings names[], int count);
          // if colors are null, it uses default color boxes
          if(colors != null) Legend.setColors(colors);
                 // Note "Legend" is public, so user is free to create his own or directly set
                 //  Values. Ex: Chart1.Legend.setTitles(names,cnt); -- We have an elegant
                 // "Component Factory" abstraction to handle Encapsulation/Hiding.
     }
     int  setLegentNames(Strings  names[],int count,Object icons[]){
          // Let the Legend Class worry about these configurations.
          Legend.setTitles(Strings names[], int count);

          // if special icons/components need to be used.
          // For example, in a Zoo budget, one may use animal images
          // or popup-windows (instead of default dull-old  squares)
          if(icons != null)  Legend.setSubComponents(icons);
     }

     // Caliculates the layout coordinates
     int setLayout(int LayOutCode, int hight, int width) {
          x_size = width;
          y_size = hight;
          if(LayOutCode = TITLE_AT_TOP_LEGEND_ATBOTTOM) {
              // Based on hight and width, caliculate the locations
              // and set leg_x, leg_y, tit_x, tit_y
          } else {
          // there can be multiple Layouts.
          // Legend may be places Horizontally at Top, Bottom
          // Legend can be placed Vertically at Left, Right
          // Title can be placed at top or bottom     }
     }
     int  setTitle(Object tit)         {    Title = tit; };
     // If one wish to display non-default tool-tips
     int  setToolTips(Object ttips[])  {    Tips = ttips; };

     // The Pseudo Code Generation Method: CGM
     // To make pseudo code easily readable & see the its structure,
     // I am using JSP format (XML code must be placed in println())

     public int CGM (PrintWriter out) {
<g transform="translate(0,0)">
     // Location to Place the Title of the chart
     <g transform="translate(tit_x, tit_y)">
          <%GetComponentCode(Title,out);%>//Call CGM to place Title
     </g>
     // Location to Place Code for Chart
     <g transform="translate(chart_x,chart_y)"> //Chart's area
          <% chart_CGM(out); %>
     </g>                    // End Drawing Area for chart
     // Location to Place the Code for the Legend
     <g transform="translate(leg_x,leg_y)">
          <% GetComponentCode(Legend,out); %> // call CGM-Code Generation Method
     </g>
     if(Tips != null) <% generate_tips_components(out); %>  

     // Here includes "integration logic" to generate communication
     // code for the subcomponents to collaborate with each other
     generate_communication_code(PrintWriter out);
</g>
          return 0;
     }// END of the CGM()

     // The Chart component must implement this Abstract method.
     abstract int chart_CGM(PrintWriter out);
     abstract int generate_communication_code(PrintWriter out) { }

// The following two methods must be implemented in this class
     int generate_tips_components(PrintWriter out) { }

  // Please see the note below. This function writes code for
  // the subcomponents. All we need to include is code for
  // subcomponent. It can be a GUI Widget or pure SVG code,
     // which can be just printed.
  int GetComponentCode(Object accg, PrintWriter out) {
     int status = 0;

    //Just find a way to get code for component/image (nothing fancy)
      if(accg instanceof AgileTemplate) // If CCG, call CGM
          status = ((AgileTemplate)accg).CGM(out);
      //  else //If don't mind supporting GUI-API from other vendors
      //  if(accg instanceof Vendor1Template)
      //    status=((Vender1Template)accg).V1_CGM(out,doc_info);
          else
              out.println(accg); // Use default print/"toString"
     return(status);
     // This method is in the base-class so that all Derived-Classes may use it to get subcomponent code.
   }
}// END of the Class Definition.

Then one needs to implement the Chart to fill the chart area. The following is pseudo code for bar chart. Since all the generic functionality is implemented in the base class, there is very little else is left for this class.

// Copyright(c) 2004 All Rights Reserved...Raju Chiluvuri
package com.agile.libtemplate;
// Since most of the generic behavior is captured in the
// Chart's base class; The work left for each Chart is minimal.
// From experience, I know junior programmers can implement
// one chart in a day. (Once all the basic Widgets are ready).
// Of course, it had taken over 3 months to learn SVG and
// JavaScript for them to come up to speed (first time).
import java.io.*;
import java.util.*;
import javax.servlet.http.HttpServletRequest;

// Other basic Widgets and utilities, such as
// "X-Y Axis and lables" and"Time Scale on X-Axis"
// are not discussed here.
public class BarChart extends BasicChart   {
     int       Values[];
     int       count;

     // Constructor, which also initializes the Object.
     public BarChart (AC_Info ACI, int vals[], int cnt)   {
          super(ACI);
          Values    = vals;
          count     = cnt;
     }

     //The following methods are called in the CGM of base class.
     int chart_CGM(PrintWriter out) {
          // Write code to generate the Bar Chart.
     }
     int generate_communication_code(PrintWriter out) {
          // Write code to integrate the sub-components.
          // For example, set callback for mouse-over events on
          // Legends and call service methods of chart to Blink.
          // An other example, set callback on mouse-over events
          // and call Show ToolTips or information table etc.
     }
}// END of the Class Definition.

Note for the function GetComponentCode: All of our GUI Widgets can take either GUI Widgets or pure raw SVG/HTML code for most subcomponents. For example, one may pass a GUI Objects or SVG code for chart Title. For example:

String TitleText = "Quarterly Profit and revenues for 2004 to 2006";
String Title = "<text x='270' y='18' style='font-weight:bold;font-style:normal; text-anchor: middle ;font-family:Verdana;font-size:14.0;fill:white'> " + TitleText + "  </text>";

The raw SVG statement eliminates nearly 10 calls to set each style attribute for GUI Widget for Text. On the other hand this raw SVG approach may not be portable to different viewers.

However, we feel that for HTML the raw HTML is better for many cases. I wanted to give full flexibility, while providing higher level component abstraction. I think, Java developers should have basic knowledge of HTML and should be able to use it, if they feel it necessary. These ideas are reflected in my first prototype testing of GUI Widget for HTML Table (That was badly coded, because it was only to see, if it really works). Please click here for sample GUI Widget for HTML table.

Choice is great thing. If I am the architect of GUI Widgets, you know what I do. But others vendors may prevent developers from using raw HTML/SVG code. Developers can choose what ever best suites his needs.

In fact, the choice is not either this or that. One can use some Objects from one vendor's GUI-API and others from another's GUI-API in the same page (as shown in the function GetComponentCode). Raju's GUI-API can co-exist with any other frameworks. For example, one may even use just one GUI Object in his application along with other Ajax frameworks. Just instantiate, initialize and call its CGM() ... Isn't it simple?

Please download class library, which contains base classes & utilities. The total code is about 300 lines. That's it. One can start creating great Ajax GUI classes in no time, if he gets license from Pioneer-soft. He owns his source code and no vendor lock-in.