Partial Page Refresh ($a_report) and jQuery 1.3 new methods LIVE/DIE

If you are using "Partial Page Refresh" to navigate through the pages of a report, the new methods live and die should be useful.

The "Partial Page Refresh" functionality uses the JavaScript function $a_report to request the report's body and then refresh the report without refreshing the whole page (AJAX).

Before, we were able to bind a click event to DOM elements. The click event was not propagating itself to new DOM elements created dynamically after the bind action.
For example: if you bind the click event to every rows of your report, you have to bind the click event to new rows generated after calling the function $a_report.

Now, we are able to bind a live event to our DOM elements. The click event is now able to propagate itself to new DOM elements created dynamically after the bind action.

You can try a working example of jQuery Event Live in APEX.

Happy Web 2.0 coding! :)

jQuery 1.3 - new release

Good news everyone! A new release of jQuery saw the day.
Find more information about jQuery 1.3 on the official website.

The major new features are:

* Sizzle: A sizzlin’ hot CSS selector engine.
* Live Events: Event delegation with a jQuery twist.
* jQuery Event Overhaul: Completely rewired to simplify event handling.
* HTML Injection Rewrite: Lightning-fast HTML appending.
* Offset Rewrite: Super-quick position calculation.
* No More Browser Sniffing: Using feature detection to help jQuery last for many more years to come.

For more information, read the jQuery 1.3 release documentation.

I'll try to do demos showing the new features in the upcoming days...

Happy coding!

Generate a "tag cloud" using DynaCloud (jQuery Plugin)

To make your application look more Web 2.0, it's a good idea to add a Tag Cloud section on some pages. ;)
I did a little search for a jQuery plugin that can do the job and I found DynaCloud.

You can include a Tag Cloud on your page in 4 steps.

1) Add on your page a container for the tag cloud. For good results create an HTML Region and put the following code in the region source. (Set the template to Sidebar Region)

<div id="dynacloud" style="font-size:12px;"></div>

2) Load jQuery using Google AJAX Libraries API

<script src="http://www.google.com/jsapi"></script>
<script>
   // Load jQuery
   google.load("jquery", "1.2.6", {uncompressed:false});
</script>

3) Load DynaCloud Plugin

<script src="&WORKSPACE_IMAGES.jquery.dynacloud-4.js"></script>

4) Add CSS styles to display the Tag Cloud

<style type="text/css">
    div#dynacloud {
        font-size:5px;
    }    
    div#dynacloud a span{
        font-size:1em;
    }    
    .highlight { background-color: yellow }
</style>

5) Configure the settings of DynaCloud. When the page his loaded, add the CSS class "dynacloud" to your page reports regions. And finally, generate the tag cloud.

<script>
    $.dynaCloud.sort = false;

    $().ready(function() {
        $('.t4ReportsRegion').addClass("dynacloud");
        $('.dynacloud').dynaCloud();
    });
</script>

You can see my working example of a Tag Cloud in APEX.


Talking about clouds, here in Montreal it's snowing... they announced 15-30cm of snow for today. Tonight traveling back home will be long! ;)

Google AJAX Feed API

I'll start the year by showing you how to add a simple feed reader to your page.
For my demo, I decided to use the feed from the "official" Apex Blog Aggregator.

Using Google AJAX Feed API, you can easily load and parse feeds. Using Google Visualization API, you can easily display the information in a datagrid.



For more information, consult my online demo of the Google AJAX Feed API in Oracle APEX.

Happy New Year

Dear APEX Community,

I want to wish you a Happy New Year.
For 2009, I wish you many many many APEX projects.

2009 will be full of APEX demos and tutorials! :D

Take care