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. 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:
|
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 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’.> |
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> |
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’.> <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: //===================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. EM.CGM( RequestParameters, out); // Call the CGM of the component
‘EM’. out.println(“<TR>”);// The HTML code to indicate the start
of Table Row. out.println(“ Good Bye! “); // Just print Good Bye!. 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! |