Friday, 17 August 2007

New Oracle Magazine APEX / AJAX article

Just found an interesting article by David Peake (APEX product manager), in the September / October '07 edition of Oracle magazine, entitled 'Express 2.0'. This gives a brief introduction into implementing AJAX based functionality into APEX applications, and then goes onto a step-by-step example on how to implement dynamic tooltips.

Worth a look.

Update: David has just started his own blog so be sure to add it to your feeds!!

Tuesday, 7 August 2007

Javascript debugging, an alternative to alert()

This is a simple trick to provide a more flexible approach for displaying debugging output when working on javascript code in your APEX applications. It uses a couple of debugging javascript functions, print() and println() which will show your debug messages in the current page's footer. This allows for multiple messages to be output without having to click through each one, as is necessary with the alert() function. With other benefits too such as being able to copy the text output which is not possible with alert().

1. First add the following line to your 'Page Template > Definition > Footer', at the beginning:
<div id="debug"></div>
(It doesn't really matter where this goes in the 'Footer' code, as long as it's before the closing </body> tag.)

2. Then we need to make the following two javascript functions available for use in your application. (The recommended approach would be to store them in a '.js' file and place this file on your web server.)
//print output messages to your page
function print(p_value){
$x("debug").innerHTML = $x("debug").innerHTML +
//print output messages to your page with a line break
function println(p_value){
$x("debug").innerHTML = $x("debug").innerHTML +
p_value + '<br/>';

3. You can then call either print() or println() from within your javascript code.

Happy debugging!

Do you Firebug? Then there is a simpler way!

If you use Firefox with Firebug, then another way of debugging is to use the built-in Console API. This details some very useful calls such as:

console.log - Writes a message to the Firebug console

console.trace - Writes an interactive stack trace to the Firebug console with information about the calling function and also the parameters passed to the function. It is interactive in the sense that you can click the function name to take you straight to the function source, very nice!

This API provides more calls as well which look very useful, so it's worth taking a look.

(Thank you Carl!)