The Model (and the Dirty Job of Garbage Collection)
GI provides a high level of abstraction in its Application Object Model. Its application model, counter-intuitively also called DOM in GI's APIs, is in fact not the HTML Page DOM, but instead a hierarchical model of application components. GI treats the HTML page DOM as part of its View. As a result, instead of dealing with a browser's DIVs, SPANs, TRs, and TDs, you build your application with GUI widgets such as editable data grids, tree views, menu bars, and dialog boxes. This abstraction also automates memory management, a pain point in many JavaScript applications. When removed from the model, GI widgets and data clean up after themselves like Java's garbage collection process. GI also provides a common data model called Common Data Format (CDF). This is a normalized means of expressing data that supports dual XML and JavaScript APIs for the same data. So, even if data is added as JSON, the data can still be fed directly to the XML and XSL processor to generate the view 10 times as fast as JavaScript.

The View
To generate the GUI you see on screen, GI takes values expressed in the AOM and data in the CDF and processes them with XSL to generate the View more rapidly. The AOM values are poked dynamically into the XSL as parameters just before the modified XSL template is merged with the CDF data's XML instance to generate the updated HTML for the view. By avoiding excessive string and DOM manipulation and using instead the compiled XML/XSL processes, GI can quickly render extensive application GUIs in the browser.

The view processing models also have built-in asynchronous processing capabilities that assist with overcoming bottlenecks that can arise from JavaScript's single-threaded model. GI's components know how to stage portions of the View to render in sequence so that the overall View rendering time is accelerated. Yes, it's counter-intuitive to think that delaying parts of the GUI rendering would result in faster overall rendering, but it's true. Rendering time slows as the CPU gets overloaded too quickly. Therefore it's faster to stage new processes with slight delays to prevent the CPU from spiking during rendering. The effect is analogous to the metering lights used at busy highway on-ramps - by slowing the rate at which the next car gets onto the highway, traffic jams are avoided and the overall speed of the traffic accelerated.

The Controller
TIBCO GI provides a core controller instance for each application, providing access to both the model and the view. For the application logic itself, it provides object-oriented concepts such as packages and classes into which you can organize and modularize the logic for your specific applications. This modularization lets you load and unload functionality as needed by the app and not have to preload the whole thing upfront. This strategy, used by many desktop app developers, enables faster start-up, and adds features when needed to manage memory footprints over time. Like all leading AJAX toolkits, GI's own JavaScript packages, classes and APIs hide the differences between JavaScript and XML/XSL features of Mozilla and Internet Explorer to provide a single framework so that the same application can work in multiple browsers.

Do Try This At Home
A simple example will help demonstrate the tremendous performance edge that this model brings to Internet applications. We'll create a simple application in GI to render World Oil Consumption data on screen. The data is from the statistical review section on BP's www.bp.com/statisticalreview Website. We've created an XML file using the data shown for each country for every year since 1965. On screen, the first column will be the geographical region, followed by a column for the country name and then columns for each year's consumption. In each row, we'll make the number red if it's more than the previous year and green if it's less. We'll also append a row at the end showing the world totals for each year. GI's Matrix component lets us quickly sort by any column to see which country consumed the most in any given year. It also lets us resize and re-order columns. Obviously there's a lot of data in this table, and we'll see how GI's model is able to leverage XML/XSL to render it faster than JavaScript alone. You'll also see how easy it is to create GUI elements such as this one with TIBCO GI; if we tried to do this with JavaScript, not only would it take a very long time to build, develop, and debug, but the logic to change the font colors in each cell depending on the value in the previous cell would make the rendering even slower. GI's Matrix component also gives us features such as sorting, resizing, and re-ordering of columns and selecting a row in the grid, right out-of-the-box, without having to do any extra coding.

The simple steps that follow outline how to create this application.

We'll start with the XML file shown in Listing 1, oilconsumption.xml (only one row of data is shown here). A complete example is available for download http://power.tibco.com/forums/search.jspa?objID=c8&q=oilconsumption. We'll use a simple XSL stylesheet to convert this data into the CDF required by GI. The XSL stylesheet to do that conversion, oilconsumptionmatrixtotal.xsl, is shown in Listing 2. Please note that if you don't want to author XSL directly, GI's XML Mapping utility lets you visually configure transformations of XML data to CDF and can run the transformation for you as XSL.

We could have used the CDF format for our data in which case we wouldn't need this transformer. Data for this example, however, is in a format that's returned directly from databases such as MySQL or Oracle.

GI supplies the larger XSL stylesheet to render the Matrix component on screen by merging the CDF data with the XSL for Matrix control. Recall that XSL has had the parameters of the Matrix control put into it before executing. At the level of each cell in the Matrix we can also embed small XSL fragments to implement additional presentation logic specific to our requirements. This micro XSL is put in the appropriate columns as a Value Template that will provide our visual colorations for the cells as shown in Listing 3. (valuetemplate1966.xsl - The listing here is for the column for year 1966 - value template in each column will be similar except that the test condition will be changed appropriately for each column).

Step One: create a new project
Launch GI Builder (an open source download to be found at http://developer.tibco.com/gi and create a new project by selecting Project->New Project and supplying a name (e.g., oilconsumption). GI will create a folder hierarchy under the root folder called "oilconsumption." Drop oilconsumption.xml into the folder named "xml" and put oilconsumptionmatrix.xsl in the folder called "xsl."