Carl Backstrom's Blog

As promised I've put up the export of my demo application from Oracle World , for people who were at ODTUG in New Orleans it's pretty much the same application I showed there.

Thanks, for everybody who showed up I had a great time and hopefully was able to give people some ideas. I'll see what the rules are for me putting my slides on slideshare or something like that , but at some point Oracle will putting up the slides and a recording of the session.

Download the Application

Edit

The application will only work in Firefox, but that is only because it was built specifically to show Firebug features.

If you remove anything that says console.log or console.dir it will work in other browsers.

Regards,
Carl

One problem with APEX is it has issues with dealing with text values of greater than 32k, while there is a fairly simple workaround it does have quite a few pieces and there has to be an easier way to do it.

Well in APEX 3.1 there is now an integrated javascript call to take care of this. This example also shows some of our new namespaced javascript objects and functions.

I've created a working example here.

Setting the CLOB
<br />function clob_set(){<br /> var clob_ob = new apex.ajax.clob(<br /> function(){<br /> var rs = p.readyState<br /> if(rs == 1||rs == 2||rs == 3){<br /> $x_Show('AjaxLoading');<br /> }else if(rs == 4){<br /> $s('P159_DROP',p.responseText);<br /> $x_Hide('AjaxLoading');<br /> }else{return false;}<br /> }<br /> );<br /><br /> if(!$v_IsEmpty('P159_CLOB')){clob_ob._set($v('P159_CLOB'))};<br />}<br />

What's happening in the previous piece of javascript is I'm creating a apex.ajax.clob object. This object only takes one parameter when being initialized which is a function , or pointer to a function, to call when the XMLHTTP object's readyState changes. In that return function ,and for all built in APEX asynchronous AJAX calls, p is the XMLHTTP object.

Once the apex.ajax.clob object is created you just call set method giving it a string ._set(String Value);

It will automatically create a collection in your session CLOB_CONTENT and populate the CLOB001 column.

You can then use that in a page or application level process , usually by calling a doSubmit() and submitting the page.

The p.responseText on successful population of the CLOB will be SUCCESS.

Getting the CLOB
<br />function clob_get(){<br /> var clob_ob = new apex.ajax.clob(<br /> function(){<br /> var rs = p.readyState<br /> if(rs == 1||rs == 2||rs == 3){<br /> $x_Show('AjaxLoading');<br /> }else if(rs == 4){<br /> $s('P159_DROP',p.responseText);<br /> $x_Hide('AjaxLoading');<br /> }else{return false;}<br /> }<br /> );<br /> clob_ob._get();<br />}<br />

Getting a CLOB is much the same as setting one. Create the apex.ajax.clob object setting the function to call when p.readyState and then call the ._get() method which doesn't take any parameters.

This solution only deals with one clob at a time and the clob is alway put into the CLOB_CONTENT collection, though dealing with multiple clobs is also much easier, more on that later ;). But it is much easier to work with than the old workaround.

I just watched 2001: A Space Odyssey in the last week in HD. If you've never seen or it's been awhile or never seen it in HD do yourself a favor and check it out it's an amazing movie, though it looks like they were a little off on the dates.

Most of my last couple posts have focused on new APEX 3.1 features. And there have been some good questions in the comments. So I figured I'd go through some of them in a post to make the answers a little easier to find.

Question 1

What is the difference between add() and addParam()

They are used for passing values in slightly different ways and with different results.

.add() should only be used when dealing with a page or application items, anything else will cause an error, things you set with .add() will also automatically be set in the session state.

.addParam() should be used with what we term as parameters, the main difference being is they are not set in session and are only available for that particular request.

Can I set those global variable's values like common items in PL/SQL:
APEX_UTIL.SET_SESSION_STATE(wwv_flow.g_x01,null);
... or is there any more concise way to do it ?

No you can't set these into the session in PL/SQL. Remember those values are temporary and will not be saved past each specific request. If you need to save values from one of these that's the perfect reason to use a application level item, or collection.

Question 2

There's something I don't get.
Why do you need a temp item at all?

Mainly because it's much easier to build reusable/generic AJAX components that can be used in multiple applications. It's also going to be a big part of how the AJAX component for custom item and regions types will be implemented, more on that later. Don't get me wrong there are very good reasons sometimes to use an application or page item but many times it's not.

A quick rule of thumb is if you want to save a value into session use the application or page items, if you just passing values, use the generic ones.

Question 3

There is also g_widget_name, g_widget_num_return and g_clob_01. Could you explain them also?

g_widget_num_return I just plain missed this, my bad. Many times when I was building something using these new handy parameters it just seemed like I was also adding a number to set the number of return values, instead of wasting one of my x01-x10 we added another one. I've update my code example and the blog posting to show this.

I skipped g_widget_name on purpose as it will be used in a slightly different way in the future. You can absolutly use it now to pass values and it it won't break anything, in fact I'm working on an example that does just that.

g_clob_01 That one at the moment is unused, and might be removed, so I'd stay away from it. If you need to hold on to a specific CLOB the best way is to create a collection and use the clob column in that.

Thanks, for the questions, Matjaz , Anonymous and Mark

Also Doug Gault yet again is the first to to figure out one of my slightly obscure cultural references , good job Doug!

This is a small feature but fixes something that has always bugged me.

In Application Express there is the Start Stop Table item. Which is very useful for form layout especially when building forms with large textarea's.

The problem was there was no way easy way access the Start Stop Table itself with javascript or CSS since it didn't have any discerning attributes. Well that has all changed in APEX 3.1 as the Start Stop Table gets some of the same attributes as a regular item does.

Start Stop Table's will get the id attribute set to the Item Name just like regular items , Start Stop Tables will also insert attributes from HTML Form Element Attributes property , agian just like a regular APEX item.

You can see a very simple usage example here http://apex.oracle.com/pls/otn/f?p=11933:137.

I can definitely see this being used for some more dynamic and just plain prettier forms and layouts, there are a few spots in the APEX builder slated to get some treatment from this.

As with my last few posts , and my next couple, this isn't the most WizBang feature but the impact if properly used can be huge.

So I mentioned in my last post one of my favorite new features in Application Express 3.1 was being able to pass temporary values to OnDemand process, and I showed an example using x01.

Of course passing one value is useful but not as useful as passing 10-13 of them so lets meet the rest.

• x01-x10
• g_widget_mod
• g_widget_action
• g_widget_action_mod

As you can see there are 10 generic variables, x01-x10 plus the placeholders for some more specific functionality, sure you can use g_widget_mod , g_widget_action , g_widget_action_mod to pass just random values but they are there for a different use which I will go over on in another post.

You can see an example of these variables and code running here.
Javascript
<br /><script type="text/javascript"><br /><!--<br /><br />function f_TestOnDemand(pValue){<br /><br /> var get = new htmldb_Get(null,$v('pFlowId'),'APPLICATION_PROCESS=GLOBAL_AJAX',$v('pFlowStepId'));<br /><br /> get.addParam('p_widget_mod',$v('P97_G_WIDGET_MOD'));<br /> get.addParam('p_widget_action',$v('P97_G_WIDGET_ACTION'));<br /> get.addParam('p_widget_action_mod',$v('P97_G_WIDGET_ACTION_MOD'));<br /> get.addParam('p_widget_num_return',$v('P97_G_WIDGET_NUM_RETURN'));<br /><br /> get.addParam('x01',$v('P97_X01')); <br /> get.addParam('x02',$v('P97_X02')); <br /> get.addParam('x03',$v('P97_X03')); <br /> get.addParam('x04',$v('P97_X04')); <br /> get.addParam('x05',$v('P97_X05')); <br /> get.addParam('x06',$v('P97_X06')); <br /> get.addParam('x07',$v('P97_X07')); <br /> get.addParam('x08',$v('P97_X08')); <br /> get.addParam('x09',$v('P97_X09')); <br /> get.addParam('x10',$v('P97_X10')); <br /> gReturn = get.get();<br /> $s('ajax_drop',gReturn);<br /><br />}<br /><br />//--><br /></script><br />

OnDemand process (GLOBAL_AJAX)
<br />htp.p('wwv_flow.g_widget_mod : ' ||wwv_flow.g_widget_mod);<br />htp.p('wwv_flow.g_widget_action : ' ||wwv_flow.g_widget_action);<br />htp.p('wwv_flow.g_widget_action_mod : ' ||wwv_flow.g_widget_action_mod);<br />htp.p('wwv_flow.g_widget_num_return: ' ||wwv_flow.g_widget_num_return);<br />htp.p('<hr />');<br />htp.p('wwv_flow.g_x01 : ' || wwv_flow.g_x01);<br />htp.p('wwv_flow.g_x02 : ' || wwv_flow.g_x02);<br />htp.p('wwv_flow.g_x03 : ' || wwv_flow.g_x03);<br />htp.p('wwv_flow.g_x04 : ' || wwv_flow.g_x04);<br />htp.p('wwv_flow.g_x05 : ' || wwv_flow.g_x05);<br />htp.p('wwv_flow.g_x06 : ' || wwv_flow.g_x06);<br />htp.p('wwv_flow.g_x07 : ' || wwv_flow.g_x07);<br />htp.p('wwv_flow.g_x08 : ' || wwv_flow.g_x08);<br />htp.p('wwv_flow.g_x09 : ' || wwv_flow.g_x09);<br />htp.p('wwv_flow.g_x10 : ' || wwv_flow.g_x10);<br />

So I'm going through my example application updating different examples new APEX 3.1 features, as I work through them I'll be posting examples of changes.

So the first one are the changes to the basic example for illustrating Ajax using an OnDemand Process.

Javascript
<br /><script type="text/javascript"><br />function f_TestOnDemand(){<br /> var get = new htmldb_Get(null,$v('pFlowId'),'APPLICATION_PROCESS=SimpleExample',0);<br /> get.addParam('x01',$v('P11_TEST'));<br /> gReturn = get.get();<br /> get = null;<br /> gReturn = (!gReturn)?'null':gReturn;<br /> $s('P11_TEXT_DROP',gReturn);<br />}<br /></script><br />

One of the biggest changes , and one of my favorites , is that in older versions of APEX to pass a value to on OnDemand Process in most cases you would need a application level item that was only used for that purpose , this is no longer needed.

This new functionality is illustrated on line 4 where the global variables x01 gets the value of the textarea to post to the process. There are 10 global variables x01 - x10 , and a few others, so you can pass around quite a few values at once, more in later post.

There are a couple calls to $v('ITEM_NAME') which given an item name returns you the value of the given item.

And $s('ITEM_NAME','Some Value') which given an item name and a value set the value of that item.
* These both work with most the basic item types and will be extended support all item types.

OnDemand Process (SimpleExample)
<br />declare<br /> l_value varchar2(4000);<br />begin<br /> l_value := wwv_flow.g_x01;<br /> htp.p('<packet>');<br /> htp.p('<desc>This was just put into one of the global temporary values.</desc>');<br /> htp.p('<payload id="test">'||l_value||'</payload>');<br /> htp.p('</packet>');<br />end;<br />

On line 4 of the OnDemand Process is take getting the value of the global variable. The global variables are only available for that Ajax call and do not get saved into session state.

Simple changes to be sure but they allow for much more generic javascript and easier integration across different application's

While APEX ships with some built in javascript functionality, and very nice javascript functionality if I say so myself ;). We are definitely not everything to everybody, which is on purpose.

There are so many very good 3rd javascript libraries , and we love our 3rd party javascript libraries , out there (extjs , YUI , DOJO and many more) that we don't want to be making that choice for developers since the proper choice can be different all the way from the image directory level to the workspace , application and even page by page level.

In fact sometimes I feel bad , well not that bad ;), for forcing even our library on developers. In 3.1 our library can be turned on and off on a page by page basis.

But I digress, if you have filesystem access integrating in a 3rd party library is as easy as any other web page you just include in your path.

But if you are in a hosted environment, you need to pick a library or build of a library that is all in one file.

jQuery is a good example of a 1 file library that can be easily integrated into APEX using #WORKSPACE_IMAGES# or #APP_IMAGES# . And I've created a very simple example here to show that it works , http://apex.oracle.com/pls/otn/f?p=11933:151

I'm going to be looking into different ways of including in other libraries that require a directory structure when you don't have file system access, I think XDB might be helpful here, but if someone has already solved this particular problem please comment or blog about it as it will be very helpful to quite a few people.

Wow a real APEX posting can you believe it?


So I got an email from Alistair Laing asking about a certain example of mine , (AJAX) Report Pull.


He rightfully pointed out that if you used one the AJAX enabled report templates the AJAX pagination worked but the sorting wouldn't work, sometimes.

The reason for this is that the AJAX templates are a HACK! That's right I said it ,I can because I built them, sure they are a successful , well used, robust HACK but a HACK none the less.


The issue with the sorting not working is because the header links are rewritten when the page loads so that the headers no longer have normal links but have AJAX enabled links. The pagination doesn't have this issue because the AJAX code is hardcoded in and to make matters worse if you paginate first then the sorting does get rewritten to be AJAX, I told you it was a HACK.

But have no fear with just a little bit more effort you can make it sorting work as it should , Ajax Region Pull & Pagination

There are a few differences between the first example and the second example.

The main part being the javascript code on the pulling page (149)
<br /><script type="text/javascript"><br />function dhtml_GetReport(pThis){<br /> var l_Val = html_SelectValue(pThis);<br /> /*<br /> Request value of the AJAX request is being set to RP so that and a process on the page has 150 has been enabled to Reset Pagination if the Request Value is RP<br /> */<br /> var get = new htmldb_Get(null,$x('pFlowId').value,'RP',150);<br /> get.add('P150_DEPT',l_Val);<br /> /*<br /> The clip values have been changed to make sure that the only thing that is inserted into page 149 is the report code an nothing else this to make sure the proper dom elements can be queired.<br /> */<br /> gReturn = get.get(null,'<clip>','</clip>');<br /> get = null;<br /> $x('ReportDrop').innerHTML = gReturn;<br /> /*<br /> The following code gets the REGION ID of the Region you just grabbed and then initlizes the headers to be AJAX based.<br /> */<br /> init_htmlPPRReport($x('ReportDrop').getElementsByTagName('DIV')[0].id.replace('report',''));<br /> return;<br />}<br /></script><br />
On the report page (150) create a Before Header Reset Pagination Process that resets the pagination if the REQUEST is RP

On the Report Region put <clip> in the Region Header and </clip> in the Region Footer.

There are a few other ways to do this but this is the way that most closely mirrored the original example.

I have updated my Example Application Export so this is there to dig through.

Something to look forward to.

In 3.1 all of this has been fixed with the inclusion of one SUPER EXCITING new declarative report attribute.



I mean look at that! It's a thing of beauty isn't it ;) and better yet it supports all of APEX's pagination types.



EDIT: if you cut and paste the code snippet you will get all the code. I need to adjust the layout of this blog or get one of those nifty code highlighting javascript widgets.

Patrick Wolf has released another version of his Oracle APEX Builder Plugin. If your working with APEX do yourself a favour and try it out.

http://inside-apex.blogspot.com/2007/10/oracle-apex-builder-plugin-v17-release.html

I should just mail CC blogger on some of my emails so they automatically get posted.

Hello,

If you have a tabular form or some sort of report where the first column is a checkbox I've created a js shortcut that will check all the checkbox items in the first column (one of the requests from 3.0 instance) just add the following as the header of the first column .

<input type="checkbox" onclick="$f_CheckFirstColumn(this)" />

If you have other places where a check all option seems appropriate, but is different than this tabular form solution please contact me and I can help set it up.

Regards,
Carl

I had someone internal at Oracle ask for an Accordion widget in APEX. I figured everybody else code use something like this so I figured I'd build out an example in the standard place.

I think the best and easiest way to do this is to base it on a Report Row Template.

There are some caveats to this example.

The first being that #REGION_STATIC_ID# isn't properly substituted in a Report Row Template, I put it in anyway since at some point it will be. All you have to do is surround the report with element with an id or give the report itself an id , this actually isn't a bad idea as I figure most people will only want one of these per page.

The second is if you put multiple accordions on a page the row id has to be unique which is pretty easy to do in the SQL statement.


The accordian can be instatied on page load like this
pAccordian = new Accordion('accordion',true);

The first parameter is the id for the surrounding element.
The second parameter chooses between firing onmouse over (true) or onclick (false).

So here you go,

http://apex.oracle.com/pls/otn/f?p=11933:130

Enjoy

Just a quick post on a handy online tool.

JSLint while writing javascript sometimes it's easy to take short cuts like if statements without brackets or not ending your lines with semicolons. Plus it's just nice knowing that your dotting your i's and crossing your t's.

I've used it before but after seeing again all the small errors in some of my javascript I've decided to specifically run all my code through it now as a practice.

Documentation : http://www.jslint.com/lint.html

Tool : http://www.jslint.com/

That's right people I've I have the hottest new product for the Oracle APEX community available now!

With some all new functionality but with that slick old school style.

You will receive a working AJAX based ranking system, a AJAX based commenting system (aka: shoutbox) and an reworked AJAX Collection Control (that actually works) plus many other features and enhancements.


! BUT THATS NOT ALL !

Starting with this version I'll also throw in a SQL scripts to install and deinstall all the objects needed to support this application , that's right no more hunting from page to page making sure the examples have the proper tables or procedures! You might ask yourself how can this get any better?

! WELL LET ME TELL YOU !

Sample Data! That's right not only do you get the application! Not only do you get the supporting schema objects! But if you act now you will get your very own copy of the sample data as seen on the Original OTN Sample Application

And what would you expect to pay for this? Hundreds? Thousands? No this is provided to you the people for free thats right absolutely free what can be a better deal than that!

Oh and I'll throw in a readme.txt file as well just because I like you ;)

Pick yours up today.

http://apex.oracle.com/pls/otn/f?p=11933:22

I've added two new features/examples to my Example Application and they can be found on right side of every page.

One is a Ajax based Commenting system and another is an Ajax based Rating system. They are both very simple to implement. Even though the ones I built are tied to Application and Page ID's the table structure can easily be adjusted to apply them to any situation.

A nice additions to these features would be to only allow for one rating per user per page and to automatically populate the comment authors name. This would require me to create a login which is just overkill for my example application but for anyone implementing these solutions it is defiantly features worth adding.

The code can be found on these two pages.

Rating System : http://apex.oracle.com/pls/otn/f?p=11933:5


Comment System : http://apex.oracle.com/pls/otn/f?p=11933:124


The commenting system is open so please use a little restraint in using it, I don't want to have to be spending to much time administrating comments at the same time commenting on my samples would help me and everybody else.

EDIT:
Talk about a timely article :) Study: 38 Percent Of People Not Actually Entitled To Their Opinion

Well I finally broke down and started writing up the documentation for the Javascript API.

http://apex.oracle.com/pls/otn/f?p=38704:1

I started on this application last week as an way to start cleaning up our library for the next release and figured hey I can kill 2 birds with one stone!

I can give users the documentation they want, I can easily see where overlaps ,notice the 4 different shortcuts for setting a value :).

I even added in a nifty AJAX commenting system , well AJAX after the first post, for each function so people can add comments links and such for their own examples, actually I like the commenting system so much I'm going to add it to my Samples Application next week so people can comment on my examples.

Well if your interested you can keep checking back on that application to see how the it's progressing, I'm aiming to have a first cut of the documentation done by next Friday but as usual it depends on how many things pop up between now and then.