Integrating ExtJS Javascript Library into Oracle APEX

Do you want to know how you can integrate the ExtJS Javascript Library into Oracle Application Express (APEX)?

Mark Lancaster has set up an ExtJS example application showing the integration and how such an Oracle APEX application could look like. Check it out!

« ... Read full posting ... »

Integrating a Slider Control into Oracle APEX

Oracle Application Express (APEX) doesn't come with a built-in Slider Control widget, but it's quite easy to integrate one of the existing Javascript libraries like the Tigra Slider Control. See there example page 1 and page 2 for how the sliders can look like. But you can also use your own images for the slider.

What are the steps to integrate it?

1. Copy the slider.js onto your web server or upload it into Shared Components\Static Files
2. Upload the images you want to use for the slider onto your web server or into Shared Components\Images. In my case it's sldr5h_bg.gif and sldr5h_sl.gif
3. Add the following code into Edit Page Attributes\HTML Header

   <script type="text/javascript" src="#APP_IMAGES#slider.js"></script>

   Note: Replace #APP_IMAGES# if you didn't upload the files to the Shared components. If you didn't assign the files to the application, use #WORKSPACE_IMAGES# instead.
4. Create a text item on your page. For example named P1_VALUE
5. Set the HTML Form Element Attributes property to

   onchange="A_SLIDERS[0].f_setValue(this.value);"

6. Set the Pre Element Text property to

   <table><tr><td>

7. Add the following code

   </td><td>
   <script type="text/javascript">
   (function(){
     var A_Slider = {
       'b_vertical' : false,
       'b_watch': true,
       'n_controlWidth': 149,
       'n_controlHeight': 17,
       'n_sliderWidth': 9,
       'n_sliderHeight': 17,
       'n_pathLeft' : 1,
       'n_pathTop' : 0,
       'n_pathLength' : 138,
       's_imgControl': '#APP_IMAGES#sldr5h_bg.gif',
       's_imgSlider': '#APP_IMAGES#sldr5h_sl.gif',
       'n_zIndex': 1
     }
     var A_SliderInit = {
       's_form' : 0,
       's_name': 'P1_VALUE',
       'n_minValue' : 1,
       'n_maxValue' : 18,
       'n_step' : 1
     }
     new slider(A_SliderInit, A_Slider);
   })();
   </script>
   </td></tr></table>

   into the Post Element Text property and replace the red marked code parts. See the documentation for the different settings.

That's it, you are already done! It's now time to run your page to try it out.

See my example slider application for a working example.

Update on 26-Jan-2008: I have changed the original example to use just one field. That's better, because in the original example which used a second field with the Begin On New Line set to No, it could result in a detached slider if there are other fields which also use Begin On New Line=No. I'm now wrapping a table around both elements (text field and slider) to tight them together.

« ... Read full posting ... »

Add Double Click to Oracle APEX Shuttle Widget

Do you want to improve the usability of the Oracle APEX Shuttle Widget a little bit?

Let's enhance it by adding support for double click. It will allow users to double click on an entry in one of the two lists of the shuttle, to move the selected entry to the other list as they would normally do with the corresponding icons. I think that's a little bit more convenient and faster than using the icons.

There comes the necessary code.

1. Create a Page Item of type "Shuttle"
2. Add the following code into the "Post Element Text" property of that page item.

   <script type="text/javascript">
   (function(){
     var vName = "#CURRENT_FORM_ELEMENT#".substr(2);
     $x("#CURRENT_ITEM_NAME#").ondblclick   = new Function("g_Shuttlep_"+vName+".remove();");
     $x("#CURRENT_ITEM_NAME#_2").ondblclick = new Function("g_Shuttlep_"+vName+".move();");
   })();
   </script>

3. That's it, you are done. Quite simple and easy, isn't it?

I already tried to influence Carl a little bit to add that small little feature to Oracle APEX 3.1, let's see if I was successful :-)

« ... Read full posting ... »

Add colors or images to your select list

Some time ago I was asked if it's possible to set the background color of the entries of a select list.

Sure why not! I thought I had already answered the question before, so I searched on the OTN forum but didn't find my posting. No problem, shouldn't be too hard to find the solution again.

My first attempt was to use the span tag with the style attribute in the lov query, like

SELECT '<span style="background-color:red">'||
       DESCRIPTION||
       '</span>' AS D
     , OID       AS R
  FROM REQUEST_STATUS
 ORDER BY OID

Nice try, but it didn't work, because the span tag is ignored for select list elements.

My next attempt was to change the option tag which Oracle Application Express (APEX) generates. Like with the following lov query

SELECT DESCRIPTION AS D
     , OID||'" style="background-color:red' AS R
  FROM REQUEST_STATUS
 ORDER BY OID

Great that worked, the select list showed the red background color. But wait! For existing records the current select list entry wasn't displayed anymore.

Why? Because I modified the index column by adding the " style=..., so Oracle Application Express (APEX) wasn't able to map the database column value to the select list entry anymore. So that wasn't really a working solution.

I think the only really working solution is to use some JavaScript code in the "Post Element Text" property of the page item.

<script type="text/javascript">
$x("P5_STATUS")[2].style.backgroundColor = "yellow";
$x("P5_STATUS")[3].style.backgroundColor = "red";
</script>

The APEX Javascript function $x will return an array with all the options of a select list. The array starts with 0. As you can see it's quite easy to change the style of a single option and assign a different background color to it.

BTW, if you have a Firefox only environment, you can also assign images. Too bad that Internet Explorer doesn't support it. The code for example would be:

<script type="text/javascript">
$x("P5_LANGUAGE")[1].style.background = "transparent url(uk.png) no-repeat";
$x("P5_LANGUAGE")[1].style.paddingLeft= "30px";
$x("P5_LANGUAGE")[2].style.background = "transparent url(de.png) no-repeat";
$x("P5_LANGUAGE")[2].style.paddingLeft= "30px";
</script>

BTW, you can also put the stuff into a CSS and assign a class to the option.

Don't think that I really have solved that in the past, must have been something else with select lists. :-)

« ... Read full posting ... »

Slightly different behavior of $x in Oracle APEX 3.0

Just noticed a slightly different behavior of $x in Oracle APEX 3.0.

Probably many of you just use it to pass the id-string of an element (eg. $x("P4_TEST")) to this function to get the object of this field/div/... id, but you can also call it with an object and in that case the function will just return the object which has been passed in.

You may ask when do you need that? You need it if you write more generic JavaScript code where you have for example a function with the following example code

function getWhatEver(pField)
{
  var vField = $x(pField);
  // do what ever we want with vField
};

If the caller has already the field object, then he just can pass it in and the function doesn't have to do another lookup for the field

getWhatEver(vFieldVariable);

If the caller doesn't have one, he can still call it with the id string

getWhatEver("P4_TEST");

and the $x function will do the necessary lookup.

The above described behavior still works for objects of node type 1 (Node.ELEMENTNODE), but with Oracle APEX 3.0 it doesn't work if you pass in for example the window object, in that case the $x function will return false.

I had a function which can add/register events (eg. onkeypress, ...) to each object, but in APEX 3.0 it failed when called with the window object.

So just be aware of this changed behavior!

« ... Read full posting ... »

JavaScript compressor/packer

Are you doing JavaScript development and your JavaScript code has grown and grown? Have you ever looked at the available JavaScript compressors/packers?

On the weekend I have found a really nice one, it's available as online version at http://dean.edwards.name/packer/ or can also be downloaded as .NET stand alone and it's FREE!!!

I did a test and used it to compress the JavaScript files of my Oracle APEX - ApexLib development framework and the result is really astonishing!

All my JavaScript libraries together (with comments, ...)	95.465 bytes
All my JavaScript libraries together where I manually removed all comments	44.120 bytes
Compressed with the above tool	19.161 bytes

Note: Don't forget to read the help for the tool, because your scripts have to comply to some restrictions.

So there is no excuse anymore not to comment your JavaScript code or to use 1 or 2 digit variable/method names, just to save a few bytes! Always remember that you have to maintain that code in a few months...

« ... Read full posting ... »

Accessing Tabular Form cell with JavaScript

Today there was a thread on the OTN forum about how to access a Tabular Form cell with JavaScript and I thought it might be of general interest.

Scenario

You have a Tabular Form with 3 columns (Amount, Tax, Total) and want to populate the Total column with the sum of Amount and Tax as soon as Tax has been entered.

Solution?

For "normal" page items there are lot of solutions on the OTN forum, where you just use

html_GetElement('P1_TOTAL').value =
  parseInt(html_GetElement('P1_AMOUNT').value, 10) +
  parseInt(html_GetElement('P1_TAX').value, 10);

But how does it work for Tabular Forms? Quite similar!

Add the following JavaScript code into the

1. Page HTML Header property:

   <script type="text/javascript">
   function calculateTotal(pThis)
   {
   var vRow = pThis.id.substr(pThis.id.indexOf('_')+1);
   html_GetElement('f03_'+vRow).value =
       parseInt(html_GetElement('f01_'+vRow).value, 10) +
       parseInt(html_GetElement('f02_'+vRow).value, 10);
   }
   </script>

2. Tabular Form Element/Element Attributes property of the TAX column:

   onchange="calculateTotal(this);"

f01, f02 and f03 (case sensitive!) in the JavaScript code has to replaced by the field ids APEX is using to reference the tabular form column. The are equal to the numbering of the Apex_Application.g_fxx arrays.

The easiest way to get them is to view the HTML source APEX generates, or use tools like FireBug - use the Inspect feature.

Happy JavaScripting!

« ... Read full posting ... »

Firebug - must have for JavaScript/Web developers

If you are a JavaScript developer or create your web-pages with CSS, then the Firefox add-on Firebug is a must have for you!

There is a new beta available, with lot of features, compared to the one hosted by the Firefox extension web-site.

Never heard of Firebug? Check out Dr. Dobb's - AJAX Debugging with Firebug, there is also a good feature overview on the Firebug web-site.

Two things I want to highlight:

• The JavaScript debugger, with breakpoints (also conditional), variable watching, ...
• The inspect feature, where you can click on any element on your HTML page and it will show you the DOM tree, the CSS infos, ...
• But there so many more nice features, just look around...

Couldn't imagine doing my ApexLib Framework development without that tool!

« ... Read full posting ... »

One small step for a man, one giant leap for mankind

Just kidding :-) I was just looking for an eye catcher...

Maybe you have already seen my announcement that I have released v0.17 of the ApexLib Framework, which contains a lot new features.

The previous features in the Framework mostly concentrated on improvements of Oracle APEX on the server, so that's easier to access Tabular Forms or do automatic validation of date picker or numeric items. The main idea was to make APEX applications more secure without having to do a lot of additional coding. Quoting from Securing Web Applications

The #1 rule that all web developers should never forget is "Don’t trust end-user data!". With this in mind, when designing html forms it is extremely important to have appropriate server-side validations for every field.

I will probably add more server-side checks on the server, just to make sure.

But my long term goal was always to bring more interactivity to the browser, without having to submit the page. The first step was the AJAX enabled Generic solution for cascading lovs, the next step is now

Out-of-the-box client side validation for required-, date picker- and numeric items

No additional JavaScript code has to be written to do that anymore, it's automatically generated and done by the ApexLib Framework.

Check out the example page!

What will you see there?

• Immediate check of a required field as soon as you leave the field. It's a "soft" check which just shows an inline error message (no ugly alert boxes), informing the user that the field is required.
• Immediate check of date and number fields if the entered value matches to the defined format mask. It's a "hard" check, at least on IE the cursor will stay in the field. IE isn't spec conform here, but in that case it's good that it isn't :-)
• Date and number values are formated according to the format mask. Eg it will fill up the cents with 0 if you only have entered a full dollar amount, or it will add the currency sign (Oracle validation would fail if you don't enter the currency sign!) and so on.
• As soon as you correct the error, the error message is removed so that the user gets a visual feedback that the error has been fixed.
• All the checks are NLS aware, so if your database settings return the Euro sign or use a comma instead of the period for the decimal point, the library will handle that. It should also support all the different date format masks. Also the weird American ones with AM/PM and the month at be beginning... ;-)
  
• When the user tries to submit the page, the above checks will be done again. If one of the checks fails the submit is aborted until the user corrects the error.
• The library is aware of existing onchange/onblur events which are registered for the fields and executes them after its checks.
  

The rules if a required check is generated are the same as for Automatic required and date picker/format mask check for page items and Plug & play tabular form handling. Please help me finding browser issues (tested with Firefox 2.0 and some basic tests with IE 6.0). I also want to see if the format mask checks I implemented in Javascript work for all the combinations out there. And it the inline error display also works with other themes and userdefined label templates. So readers, please test and give me feedback!

Client Side JavaScript library

Man the JavaScript stuff was a lot of work, you really appreciate the build in TO_DATE and TO_NUMBER and it's flexibility when you have to implement that by yourself. At least I haven't found a JavaScript validation toolbox which is compatible with the format mask settings of Oracle.

I'm really new to JavaScript, just started 1 1/2 month ago and I'm currently on page 351 (total 994) of the JavaScript - The Definitive Guilde. So if you look at my code and think, man are you crazy, why you write that much code to do that, it's a simple regular expression and you are done! Please let me know! I have already done some refactoring of the ApexLib.js library, so that the code is stored in it's own namespace and I think the new modularization will be quite stable for some time. The structure of the server side packages should also be stable now.

Want to have this client side checks in your application?

Read the "How to integrate" posting I have done. That's all, the rest is done by the Framework.

Note: It's build that way that you can also apply it to an existing application. It will just enhance it.

Doesn't work as expected?

Please read the FAQ on the Automatic required and date picker/format mask check for page items postings for debugging and some basic tests. Still doesn't work? Send me an e-mail (can be found in my profile) or write an comment.

Roadmap for future development

Next step will be to do the same checks for tabular forms. After that I will try to add some more client side checks. Eg some of the validations which have been defined for the page.

« ... Read full posting ... »

Firefox add-ons I use for APEX development

If you are using Firefox for your APEX development you may want to check out my list of add-ons I'm currently using for the web development. If you have any useful add-ons you are using, drop me a note!


FireBug

If you are doing JavaScript programming than this add-on is a MUST. Because it provides a JavaScript debugger and that's really sometimes necessary, especially if you just started writing JavaScript as I do.

Download it at https://addons.mozilla.org/firefox/1843/

View formatted source

Very useful add-on to visually see which DIVs, SPANs, TABLEs, ... are building up your HTML page. And the best is it shows you the CSS-style sheet info for each HTML element when you move your mouse over it. That includes in which CSS-file and line number the style info has been defined. Very useful if you want to look how others are building there stuff... :-)

Activate it through Tools/View formatted source/Enable inline mode. If you click on the "source" tags, a new window will be opend with a tree structure of you HTML page. If you move your mouse over an element it will show you the CSS info.

On the Firefox addon page no V2.0 version is available, but somebody did a hack
so that it also works with V2.0, check it out at http://mcuadros.es/2006/10/25/extension-view-formatted-source-en-firefox-20/

Download it at https://addons.mozilla.org/firefox/697/ or at http://mcuadros.es/2006/10/25/extension-view-formatted-source-en-firefox-20/

Live HTTP Headers

With this addon you see what's going on in the background, what data is transfered from and what is coming back from the server.

Download it at https://addons.mozilla.org/firefox/3829/

View cookies

It adds a tab to the Page Info dialog box, which shows the cookies of the current web-page.

Download it at https://addons.mozilla.org/firefox/315/

Web Developer

Just downloaded and installed this add-on. Very feature rich, lot of options, ...
Will see how useful it is during development.

Download it at https://addons.mozilla.org/firefox/60/

« ... Read full posting ... »

Integrating the HTML editor FCKEditor and adding fuzzy logic search

The German APEX community website has just released a new edition of there How-To articles.

This edition has two articles about Integrating the HTML editor FCKEditor and Adding fuzzy logic search to your APEX application.

« ... Read full posting ... »

Want to integrate a fancy Thumbnail Viewer in your application?

Then you have to check out the blog of Dimitri Gielis! A month ago he did a posting about how to integrate the Highslide JS thumbnail viewer (check out there homepage, they have a nice demonstration gallery) into an APEX application.

If you haven't attended Oracle Open World 2006 in SF (like me), you have to check out his diary about OOW. You feel as if you have been there! :-)

« ... Read full posting ... »