Component Based Software Development Framework

Separation of Manufacturing (i.e. Generation) & Using
simple "loosely Coupled" Services Of A plug-n-play part

The Component Factory (or “CF”) accesses data from data sources (e.g. database or wire) and custom builds each component for each requesting user at real time. Each component can be generated using one or more Raju's online reusable GUI Widgets. The CF contains code to access data and business logic to build the component for the application (“AC”). The CF may use (e.g. instantiate and initialize) one or more reusable GUI Widgets to generate code, which presents the component in the browser.

For example, lets see how one might build Google financial charts using reusable GUI Classes. (Please visit http://finance.google.com/finance?q=MSFT). The chart can be build using two reusable GUI Classes, a line-chart and a time-scale (as shown by GUI-Obj#1 & GUI-Obje#2 in Fig#1). The CF for the chart uses many Objects to build the customized 'AC'. If we count each call to the Object (e.g. set or get methods) as a coupling code for the Objects, it requires hundreds of lines of coupling code to exchange data between all the objects used in the CF. Hence we say that the Objects are tightly coupled. This kind of tight coupling of ingredients is unavoidable for manufacturing certain basic components. But all the potential spaghetti-code can be encapsulated in an easily Replaceable-Container (*important-Appendix*).

Figure#1: Component Factory To Build Google Stock Chart

When user selects a new time period, the time-scale calls the service method of line-chart to redraw itself for the new time-period. Please notice that it is essential, the GUI components, which run at client, communicate with each other. To make this collaboration work, the component code for the line-chart must support a service method, which can be called to inform new time period selected by the user. The CF also contains code to generate the communication code for the two GUI components.

Figure#2: Generate Communication Code Between
The Gui Components Time-Scale and Line-Chart

Figure#2A: Each reusable GUI Class generates respective component code & copies the code into the webpage

Although it is impossible to avoided tight-coupling of Objects (top part of above Fig#1), it is possible to design the resultant components (e.g. manufactured or finisher-part-bottom of above Fig#1) to support simple “loosely coupled” service oriented interfaces to collaborate with other components.

If one uses this CF for three times (see code at the end), to generate three AC's. If the three code-blocks are included in the application-code, the components will be displayed in the webpage (See Fig#3). But the ACs are not coupled at this time. Then one must add coupling code, so that, they can collaborate or exchange data. Please see the code at the bottom and summary below it.

For example, lets assume a stock analysis application needs to display stock charts for multiple companies and the charts must keep the time-periods for all the charts in sink (Fig#3). If user changes time-period for one company chart, this AC must notify this change to the other two ACs (chart components), so that they can update themselves. It requires one service request call and sends the time-period (e.g. Jan 07, 2005 to Dec 29, 2005 as shown in the figure#3) in the parameters.

Figure#3: Time Period Synchronized Charts

Please notice again that the “container components” that run at client communicate with each other (See bottom of Figure#3A). To make this collaboration work, the component for time-scale must support a service method, which can be called to set new time period. This time-scale component displays new time period and notifies the new time-period to its line-chart component. It usually requires about three lines of coupling code to request services of well-designed components, so they can be called “loosely coupled” components. The following JSP listing has a sample pseudo code:

Pseudo code Listing#1: Code to generate Code Block for the container AC

Relevant Code For The Time Period Synchronized Charts

1.   <% // Instantiate and Initialize the "Component Factories"
2.    StockChar_CF CF1 = new StockChart (ACI, "MSFT");
3.    StockChar_CF CF2 = new StockChart (ACI, "INTC");
4.    StockChar_CF CF3 = new StockChart (ACI, "ORCL");     %>
5.
6.    <script> //Generate communication code, to notify the Change
7.     function synchronize_time_periods ( cf_num, time_obj) {
8.        if (cf_num != 1) <%=CF1.getServiceMethod%>(time_obj, null);
9.       if (cf_num != 2) <%=CF2.getServiceMethod%>(time_obj, null);

10. if (cf_num != 3) <%=CF3.getServiceMethod%>(time_obj, null);

11. } // The IF-statement skips calling Component
12. </script>

13. <% // Register the above function as a Callback.
14. CF1.setTimePeriodChangeCallback ("synchronize_time_periods", 1);

15. CF2.setTimePeriodChangeCallback ("synchronize_time_periods", 2);

16. CF3.setTimePeriodChangeCallback ("synchronize_time_periods", 3);

17. %>

18.
19.   <g transform="translate(0,0)"> <%
20.   CF1.CGM(out); // Get & Write the code-block for the Chart-1 (AC01)
21.    %>   </g>
22.   <g transform="translate(0,250)"> <%
23.   CF2.CGM(out); // Get & Write the code-block for the Chart-2 (AC02)
24.   %>   </g>

25.   <g transform="translate(0,500)">   <%
26.   CF3.CGM(out); // Get & Write the code-block for the Chart-3 (AC03)
27.   %>   </g>

The JSP code instantiates and initializes three CF Objects (lines 2-4), to generate three Application Components for three companies.

Assemble Code-blocks (Lines 19-27): Then the JSP copies each Chart's Code-block into the SVG document (at lines 20, 23 and 26). The X and Y values passed to "translate" attribute of tag "<g>", determines the on screen coordinates for each chart.

Coupling Code (Lines 6-17): The JSP registers function "synchronize_time_periods" as a callback to each Chart (lines 14 to 16). If user changes the 'time-period' in a Chart (using mouse), the AC calls the callback function. This JSP also generates the body for the callback function (lines 7 to 11), which calls service methods of other chart components and passes the new time-period to synchronize their time periods.

Aren't they Real Ideal Loosely Coupled Components?
(Unfortunately Most Component Researchers Don't Get it ... Why?)

It requires just 2 lines to assemble each AC (as shown in the listing#1). If any two ACs needs to collaborate with each other, on average they need 3 to 5 more lines of communication code (e.g. to loosely couple service-provider and service-consumer ACs).

Each AC needs few lines of glue code to couple with the application. For example, CF2 has two lines of dependency (at lines 9 & 15).

Statement at line-15 causes CF2 to include necessary code in its AC (to call the external callback function, when user changes the time-period).
Statement at line-9 calls CF2's method to get the name of AC's service-function. The callback function calls the AC's service-function to synchronize 'time-period'.

We are hard at work to eliminate even the few lines of manual coupling. We created few useful strategies such as publish-and-subscribe, and reusable recipes for coupling based on generic application metaphors. I hope to invent even better ones.

Figure#3A: Each Component Factory generates respective component code & copies the code into the webpage

In the OOP systems, external code interact with each Object by calling its methods. In other words, the Objects interact with each other by calling each other’s methods.

In the component based systems, external code interact with each component to access its services. In other words the components interact with each other by requesting each other’s services.

The Components are excellent higher-level abstraction than the Objects. That is, components can be highly cohesive and independent, which usually offers less than two services. Please click here to see how one can encapsulate Object interactions with in the boundaries of the component and eliminate spaghetti code.