Component Based Software Development Framework

Sample Online-GUI-Class#2: Rotate Banner

The following examples briefly outline simple design and development of Raju’s-GUI-Classes. The example shows a method to build a simple GUI-class: “Rotate Banner”.

// Build an array of Component Factories for subcomponents
String RB_list[] = { CCG1, CCG2, CCG3, CCG4};

//Instantiate & Initialize the container component.
RotateBanner RB = new RotateBanner(RB_list, 4);
RB.CGM(out, request);
// <--- Please click to on the SVG-image see the rotation

The Rotate-banner component displays one component at a time from a list of component. It displays the next component in the list upon user click. Also, it supports a service method for external code. The external code may call this service method to display any component in the list by its index. We first implement the SVG component for the Rotate-banner component 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 displaying new banner. The other function “display_baner()” is the main service function, which is called to hide current banner and display new banner (i.e. component).

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

<g id='banner_id4_UNQID' style='visibility:hidden;'
onclick='rotate_obj_UNQID.display_baner(0)'>
//**************************************************************
<% SubComponent[num].CGM(Out); // Call CGM: Include the Sub-component code %>
// For testing purpose, we are using temporary stock-quote component.
//**************************************************************
</g>

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 Subcomponents and an Array of Subcomponents (e.g. GUI-Objects or Component factories). It uses this information to generate the “Component code”.

Java Class for the RotateBanner

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 few get and set methods for the “Integration Logic”

The java-class’s CGM includes the JavaScript class definition as it is, in the component code. It just uses a for-loop to create code to display each Radio-button. Also, it uses the input information to generate the section-2, which instantiates and initializes the JavaScript object for the component. If Integration-logic uses “setCallBackName” to register a callback (i.e. callback != null), the CGM generated additional code to call the callback-function upon the change in the displayed banner.

Miscellaneous Documents | Privacy Policy | Site Map | Services