Friday, December 12, 2008

how to build a Google Gadget with data fetched from an APEX Application Process

Last week, I release a Google Gadget to publish the weekly release of Insum's Web 2.0 Demos.
I'll explain how I did it.

Google Gadget... what's that?!
It's an XML file defining every aspect of your gadget(module). The words "gadget" and "module" can both be used to describe a Google Gadget.

The gadget definition contains 3 sections:

1)Module Preferences
The general information of my gadget is defined in this section. Here is the list of attributes for which I set values.

I put a default value for the height. Users can update this value using the gadget's settings (build using the "users preferences"). It's also possible to auto-adjust the gadget height.

2)Users Preferences
The settings of my gadget are defined in this section. Here's the list of settings available to the users.

The "itemCount" defines how many items to display. This can be useful if my gadget displays many demos and you don't want the gadget to take too much space on your web page.

The "fHeight" is a flag to set the auto-adjust height to "true" or "false".

The "nHeight" defines the height of the gadget if the auto-adjust height is set to "false".

The HTML/JavaScript code is written in this section.

Load the required APIs:

<script src=""></script>
// Load jQuery
google.load("jquery", "1.2.6", {uncompressed:true});

// Load Google Visualization API
google.load('visualization', '1', {packages: ['table']});

I use Google Visualization API to display the data in a data grid.

Instantiate an "_IG_Prefs" object:
var prefs = new _IG_Prefs(__MODULE_ID__);

We can access the values of the users preferences using the "getInt" and "getString" functions.

Declare the setHeight function

function setHeight() {
_IG_AdjustIFrameHeight(prefs.getInt('fHeight') ? -1 : prefs.getInt('nHeight'));
This function will be called each time the data is refreshed.

Declare the draw function

function draw() {
var url = ""+prefs.getString('itemCount')+"";

_IG_FetchContent(url, function(data) {
data = eval(data);
if ((nb_demo = data.length) > 0) {
var table_data = new google.visualization.DataTable();
table_data.addColumn('string', 'Title');

for (i = 0; i < nb_demo; i++) {
table_data.setCell(i, 0, data[i].url, data[i].title);

table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(table_data, {showRowNumber: true});

// Add our selection handler., 'select', function() {
var row = table.getSelection()[0].row;, 0));

{refreshInterval: 0});

The "_IG_FetchContent" function will call the GET_WEEKLY_RELEASE Application Process. The callback function handle the data returned by the Application Process. I am using JSON to format the data and I use jQuery to parse it. I set the "refreshInterval option" to 0 because I don't want the results to be cached. This is not recommended!!!... I'll put it to 360(6hrs) when I am done modifying my gadget.

To build my first gadget, I was using an iframe to display the page 204 of my application. Because I didn't like the look and feel, I decided to build it using the Google Visualization API and use an APEX Application Process to feed the data.

I hope I'll see other Google Gadget using APEX Application Processes or MOD_PLSQL.

1 comment:

Nat said...

Is there a version of this page , perhaps titled Oracle Application Express and Google visualization for dummies ?'

I tried some of your example but not sure on how to get the organisation chart implemented ?

Please help.