How Does CF/GUI-Object Hierarchy Work?

Some Definitions:

Render a component: Display or present the component on the Browser Window or SVG Viewer.

Application Component or Component-Code: Several lines of code to render the component in the browser or SVG Viewer. This code can contain any combination of languages that are supported by the requesting Browser. These languages may be: HTML, XHTML, DHTML, XAML, JavaScript, CSS, SVG, DOM, XML/XSL etc.

Browser Compatible Code: Remember that each browser may require different set of code-chunks to render the same component. So to render the component, each Agile-template (i.g. GUI-Object)  must send code that can be understood and processed by the requesting browser to render the component as intended. For example, Netscape and Internet-explored needs different DHTML code to present any DHTML components such as Scrollers, Popup-menues or Hierarchical-menus etc.

GUI-Class or Presentation-Template: Web Component Code Generator or Application Component Builder.

To render a component on a browser, the web-server must send Browser Compatible Code. The Web-server can use the Raju's GUI-classes  to generate AC's Code that is also compatible to the requesting Browser.

The GUI-class is a software code that uses all the INPUTS and generates required code to render the component on the requesting browser. There will be one GUI class for each type of Component. That means, One GUI-class for PieChart component, another Class for Hierarchical menu and yet another for Exapandable-menu component etc.. 

However, For Example, the same GUI-Class for Expandable-menu component can be programmed to generate Browser Compatible Code to many browser types like Netscape or InternetExplorer etc. They take browser type as one of the inputs and generate the code compatible with the requesting browser/client at run-time.

How Does Component Hierarchy Work?

Lets see an example of an Expandable GUI Object. Lets call the Component ‘S’.  The Expandable GUI-class takes one or more pairs (each pair contains a parent and a chilled component). It displays the parent components. When user clicks on any parent components, it displays the child component. (Please click here and see the bottom of the page for an Expandable-menu). Also see the pseudo-code given below.

This following pseudo code  illustrates only one level of hierarchy. This can be extended to many levels of hierarchy.  Here, the hierarchy can be created as follows:

  1. The Component ‘S’ can be placed in a cell of a Table GUI-Object.  This Table may be placed in a cell of even larger Table and so on.

  2. The Component ‘B’ can be a large Table GUI-object with many rows and columns. For example, the above component "S" may be placed at row-3 and column-2 by using its method:  B.setCell (3, 2, S)

  3. The each Cell of the Table-component ‘B’ may contain other components or a Table with many cells and so on.

 

Flow chart to generate code for a Container Component

 

Expandable GUI-Class's Pseudo-code

Lets see an example of an Expandable Template-Object. Lets call the Component ‘EM’.  The Expandable Template takes one or more pairs (parent and chilled component pair). It displays the all the parent components. When user clicks on any parent components, it displays the child component. (Please see at the bottom of the web-page for a sample Expandable-menu.)

 

Let us assume user sets 2 pairs of GUI-Objects (P1, C1) and (P2, C2) to the expandable-menu. Here ‘P1’ is GUI-Object for the parent component and ‘C1’ is GUI-Object for the child component in the 1st pair. In the same way ‘P2’ is the parent and ‘C2’ is the child component in the 2nd pair.

 

To present this Expandable component (and all it’s sub-components in a Browser), the Expandable-Object required to generate Browser Compatible Code and place the code in the web page (or document). To make the Expandable-menu work, The GUI-Objects Code generation method (or "CGM") must generate various parts of the code for the Expandable-menu component and code for each of its sub-components.

 

 

The following pseudo code illustrates the CGM's process 

(See Figure below for a sample flow chart)

<The Start of component code for the container component ‘EM’>

When called ‘CGM’ of Container Component ‘EM’, it starts generating 'Presentation-code'.

Start generating code (HTML/DHTML/JavaScript/CSS etc.), To present the component ‘EM’:

<Remember that, It generates Browser Compatible Code for the requesting browser>

<The CGM for ‘EM’ knows exactly where each sub-component code must be placed. It generates the code up to the point where it needs to place each of the sub-component code. Then it requests the sub-component to generate the code. This Example shows for sub-components ‘P1’ and ‘C1’.>
<It may write a delimiter to indicate the start of Sub-component Code>

Presentation-block For “P1” 

HTML/DHTML/JavaScript Code to Present the 1st Sub-Component ‘P1’ goes here:

The component ‘EM’ calls the ‘CGM” of the 1st sub-component ‘P1’ to generate its Code.

The ‘CGM” of ‘P1’ generates and writes Browser Compatible Code and returns

<The ‘CGM’ for ‘EM’ resumes writing the code for the container component ‘EM’.>

<It may write a delimiter to indicate the end of Sub-component Code>
<The Agile-Template for ‘EM’ knows where the next sub-component code must be placed.
It generates the code up to the point where it needs to place the next sub-component code. 
Then it requests the ‘CGM’ of sub-component ‘B’ to generate the code.>
<It may write a delimiter to indicate the start of Sub-component Code>

Presentation-block For “C1” 

HTML/DHTML/JavaScript Code to Present the 1st Sub-Component ‘C1’ goes here:

The component ‘S’ calls the ‘CGM” of the 1st sub-component ‘C1’ to generate its Code.

The ‘CGM” of ‘C1’ generates and writes Browser Compatible Code and returns

<The ‘CGM’ for ‘EM’ resumes writing the code for the container component ‘EM’.>

 

<The ‘CGM’ for the container component ‘EM’ repeats this process until it generates the code to all the remaining sub-components.>

 

<Notice how it uses the ‘CGM’ of each sub-component to generate the code. Each ‘CGM’ generates requesting browser compatible code. >

<Finally, the ‘CGM’ resumes writing the remaining Code for the Container component ‘EM’.>
<It may register the component-type and successful-creation-event in the Class-tracking object  for the page. This is required for some components. For example, if the component is used many times in the page, the ‘CGM’ may use this information to avoid writing common ‘javascript’ functions or Class-definitions again etc. >

<The end of component code for the container component ‘EM’>

 

 

The above pseudo code illustrates only one level of hierarchy. This can be extended to many levels of hierarchy.  Here, the hierarchy can be created as follows:

 

·        The Component ‘EM’ can be passed to a cell of a Table-Object or passed to other GUI components.

·        This component that contains ‘EM’ may be placed in a cell of even larger Table and so on.

·        The sub-components ‘P1’ and ‘C1’ can be a large Table or a large Template component, which may be container components for other sub-components and so on.

 

Note: This kind of hierarchy can go to many levels with few limitations. Passing one component (or GUI-Objects) to other component is simple and seamless process for the user of the GUI components.

 

 

The code below illustrates how this component ‘EM’

can be placed in a Cell of a HTML-Table Component

Simple Table that contains the component “EM”

The following sample code illustrates how this container component ‘EM’ may be used in a Table-cell. This contains 2 examples. The 1st example shows how ‘EM’ can be placed in a table cell. The 2nd shows how the Table-Template component to achieve the same result.

 

This presents Java code in JSP/Servlet, that present a simple 2 by 1 Table Component: Where:
      Row#1 : The Expandable-Template component ‘S’ illustrated in the above pseudo code.
      Row#2:  Text to say “Good Bye”.

 

//===================Example code starts here=================

out.println(“<TABLE>”); // The HTML code to indicate the start of HTML Table.

out.println(“<TR>”);// The HTML code to indicate the start of Table Row.
out.println(“<TD>”); // The HTML code to indicate the start of Table Cell.

EM.CGM( RequestParameters, out); // Call the CGM of the component ‘EM’.
out.println(“</TD>”); // The HTML code to indicate the end of Table Cell.
out.println(“</TR>”); // The HTML code to indicate the end of Table Row.

 

out.println(“<TR>”);// The HTML code to indicate the start of Table Row.
out.println(“<TD>”); // The HTML code to indicate the start of Table Cell.

out.println(“ Good Bye! “); // Just print Good Bye!.
out.println(“</TD>”); // The HTML code to indicate the end of Table Cell.
out.println(“</TR>”); // The HTML code to indicate the end of Table Row.

 

out.println(“</TABLE>”); // The HTML code to indicate the end of HTML Table.

 

//=========The alternative method that uses Table-WCCG============

//The following Java code that uses Table-Template and generates same result as above:

TableCG tab = new TableCG(2,1); // Create a table with 2 rows and 1 column.

 

tab.setCell(1,1,EM); // Pass the PBG-Object fot the component ‘EM’ to cell (1,1);

tab.setCell(2,1, “ Good bye! ”); // Pass just a string to the cell (2,1);

 

// Now user can call this following method any time to generate code for the Table:

tab.CGM( RequestParameters, out); //Call the Code Generation Method.

 

//Please notice that, we haven’t called EM.CGM(RequestParameters, out);

//The parent Table component calls the “CGM()” method of each of it’s

//sub-components at appropriate location, so that the presentation-block

//of the sub-component is properly placed in it’s cell.

======================================================

 

Note: Please notice the parameters for the CGM() method. One is the output-stream ‘OUT’ and any thing written to it is appended to the web page document currently under creation.

It has another parameter ‘RequestParameters’, which contains information about the requesting-browser and application developer may optionally store requesting user’s username, privileges and preferences etc.

Please, understand that these two parameters are passed to all the CGM() methods of it’s sub-components. They in turn, pass the parameters to their sub-components and so on. So, every CGM() has access to the information, such as, browser-type so that they could create browser compatible code.

 

 

This kind of component hierarchy could go forever. Instead of calling tab.CGM(), you could pass this table to a cell of an hierarchical-menu(HM). You could use the HM in-turn as a sub-component in a pop-up tool-tip, and so on. I thing, You got the picture!