There are numerous component venders building and selling graphics classes that generate code (e.g. SVG or Flash) to present data driven components, such as, charts and graphs. Also, one may find in the web, many classes that generate code (e.g. DHTML/JavaScript) to present data driven components, such as, hierarchical-menus.

Most of them could be designed to be Raju’s-GUI-API classes. It won’t be very hard to support one of the main requirements, which is to design the server-side class (e.g. Java Class for JSP) to support the (A) get methods and/or (B) set methods for the “Integration Logic”, for example:

The CCG (Component Code Generator) for the GUI component supports methods, which returns information about the generated AC, such as names of the AC’s service functions. The service functions can be used by external code to request the services of the AC.

The CCG for the GUI component supports methods, which may be used to input information, such as, names of external functions. The CCG uses the input information (e.g. name of an external function) to generate the AC code, so that, the AC communicates or collaborate with external code or other ACs.

Furthermore, the GUI Component code generator must take few simple precautions, for example:

All the global variables and functions must have unique name, so that, it won’t conflict with any other global variable (or function) in the application (e.g. web-page). For example, if names of global variables in two different ACs in the web page are same, those variables said to be in collision and may cause errors. 

To avoid the collision, the GUI Component Code Generator appends a unique string to the global identifiers in the AC’s code. This also avoids collision between function names, if the web page contains two components generated by two Object-instances of same class (e.g. a Pie-char class or a RotateBanner class) 

Likewise, the ID-names for the graphics-elements must be unique. The ID-name is used to search the DOM-tree to find the graphics-elements and manipulate its attributes.

It is recommended that, where ever it is possible, avoid using absolute coordinate system and use relative coordinate systems (with respect to its parent container element), so that, the created component can be easily used as subcomponent.

The following examples briefly outline simple design and development of Raju’s-GUI-Classes. The first example is to build a simple GUI-class for Radio-button group. We first implement the SVG component for the Radio-button group and test it. The sample SVG-code is given below:

The section-1 of the code contains the Class definition, it comprise of data variables, for example, to save the state; and few functions. The function add_callback may be called to register a callback for the component. This function will be called upon new radio-button selection. The other function select_new_button() is called to select new radio-button.

The section-2 instantiates an Object and initializes the Object. The section-3 contains necessary SVG-Code to present each Radio-button. The following SVG-code is used to presents each radio-button:

Please review the SVG-code and it is almost self-explanatory. All the global variables are affixed with “UNQID”, this will be replaced with an unique-id to assure the variables do not conflict with any other variables in the application.

Once the SVG component code it created and tested, it is quite straightforward to create the Java-class. The Java-class usually takes the number of Radio-buttons in the Radio-button group and an Array of Titles. It uses this information to generate the “Component code”.

The Java-class has constructor and other methods to initialize and configure the component. The Java-class supports Code generation method (e.g. CGM), which uses this input information to generate the component. The Java-class also supports the following get and set methods for the “Integration Logic”: (i). setCB_AddMethod (ii). getCB_AddMethodName and (iii). GetButtonSetMethodName.

The java-class’s CGM includes the JavaScript class definition as it is, in the component code. Also, it uses the input information to generate the section-2, which instantiates and initializes the JavaScript object for the Radio-buttons component. Then to generate the section-3, it just uses a for-loop to create SVG-code to display each Radio-button. If Integration-logic uses setCB_AddMethod to register a callback (i.e. callback != null), the CGM generated additional code to call the callback-function upon new radio-button selection.