The following is an example for a Drawing Area (or Canvas). This GUI-Class may take many GUI-Objects and presents the Objects at given location.

This illustrates the simple steps for creating component hierarchy!
(Please download Adobe's SVG Viewer, if you don't see SVG component below)

Note: Please scroll right (in all SVG canvases in below hierarchy) to see other subcomponents. The canvas (or Drawing) area may contain other Canvas-areas as subcomponents. The Scroll-bars may be dynamical appear if the Canvas size is bigger than the allotted size to display the component.



Sample Pseudo Code to use the GUI-Class for Canvas

int x_size, y_size;  // This gives the size of the Canvas or Drawing Area
int width, height;     // This gives the area allocated on the screen.
//Note: Scroll bars appear, if Canvas size is bigger than area allocated on the screen.

// The following statement instantiates the Canvas's GUI-Object.
CanvasTemplate CanvasObj1 = new CanvasTemplate (x_size, y_size, width, height);

//Now, to add each component to the Canvas's Object, use its methods. For example:
CanvasObj1.addComponent ( CCG_Obj,  x_loc,  y_loc);
//Where, CCG_Obj is Component's Code Generator Object (e.g. GUI-Object or CF)
// And the x_loc & y_loc gives the location of the component in the Canvas

Sample Pseudo Code: Implementation of a simple Canvas-class

// The Canvas GUI-Class may save data for each CCG_Obj in the following arrays:
int count = 0; // maintain the count of the components to draw.
int x_locs[], y-locs[]
AgileTemplates CCG_List[]

// Method to add a subcomponent to the Drawing Area
int addComponent  (CCG_Obj, x_loc, y_loc) {
             x_loc_lst[count] = x_loc;     y_loc_lst[count] = y_loc;
             CCG_List[count++] = CCG_Obj;
}

//Then the Canvas's Code Generation Method or "CGM" may use the
//following for-loop to present the components at appropriate locations.
for( int i = 0; i < count; i++) {       
       // The "transform" attribute determines Component's Location 
      Out.println(“ <g transform=’translate(" + x_loc_lst[i] ", " + y_loc_lst[i]  +")’> ”);
      CCG_List[i].CGM(Out);  // Include the code for the subcomponent.
      Out.println("</g>");  // "Out" is the file stream to write SVG-Code.
}
Note: Of course, container components (e.g. canvas) that manage the lay-out of subcomponents may need to calculate the x_loc and y_loc.

Note: Most SVG programmers could see how this works. Building component hierarchy is very simple, as you could see in this example. Each "G" (or SVG) tag creates a NODE for the DOM-tree, which in turn contain many other sub-trees.

As you can see above: some of the subcomponents to the Drawing-Area are in-turn other Drawing-areas, and so on.

If the "CFs" for all charts are ready, this kind of component hierarchy can be created in minutes. It requires only "Two line of code" to add each-chart:
PortifolioChart Portifolio = new PortifolioChart (User_account_number);
CanvasObj1.addComponent ( Portifolio,  x_loc,  y_loc);

As you can see below, the Code-generator objects (e.g. GUI or CF) can be assembled in minutes to build an application. Then, if requirements change they can be disassembled and reassembled again in minutes. Any CF at any DOM-Tree node may be removed in minutes.

Try to do this on any of your favorite desktop GUI platform and you shell quickly realize that it is not possible to pass large subcomponents (i.e. if the subcomponent contains subcomponents of it's own).

Hence, it is impossible to build traditional GUI applications by assembling "loosely coupled" components. This is Extremely Important Point. 

Now a Larger canvas to use this and other Canvas as subcomponents:
int x_sz, y_sz;  // This gives the size of the Canvas or Drawing Area
int width, height;     // This gives the area allocated on the screen.
//Note: Scroll bars appear, if Canvas size is bigger than area allocated on the screen.

// The following statement instantiates the Canvas's GUI-Object.
CanvasTemplate LargerCanvas1 = new CanvasTemplate (x_sz, y_sz, width, height);

//Now, to add each component to the Canvas's Object, use its methods. For example:
LargerCanvas1.addComponent ( CanvasObj1,  x_loc1,  y_loc1);
LargerCanvas1.addComponent ( CanvasObj2,  x_loc2,  y_loc2);
 LargerCanvas1.addComponent ( CanvasObj3,  x_loc3,  y_loc3);
// And the x_loc & y_loc gives the location of the component in the Canvas

Now this larger component "LargerCanvas1" and other components can be used by any other container components, for example a Tab-GUI Object (e.g. BigTAB_Obj). Even Chart component may use this BigTAB_Obj as a subcomponent, for example in place of its Title. Notice how simple it is to build DOM-Tree for XML-GUI components.

Likewise, we may use "DIV" tag to create DOM-tree for the component-hierarchy in IE/DTHML as shown in links at 3 and 4 in this demo web page

Click here for an Useful Continuation Example