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 ... »

Using tooltips in Oracle APEX applications

That's maybe an old tip and probably everybody already knows it, but because I just answered that question on the OraFAQ forum, I wanted to share it with you in case you didn't know.

Maybe you have already noticed that in the Oracle APEX Builder at some pages a tooltip is used. For example for the icons on the Drag and Drop Layout page. This tooltip functionality can be reused in your own applications. You just have to add

onmouseover="toolTip_enable(event,this,'This is a tooltip')"

into the "Attributes" property of your HTML button or into the "HTML Form Element Attributes" property of your page item. In the end you can attach it to any HTML element. But I think you got the idea how it works.

« ... Read full posting ... »

Setting a "Case Restriction" for Page Items/Tabular Form Columns

That's the last posting about new features in the 1.02 release of the ApexLib Framework.

Ever wanted to set a case restriction (uppercase/lowercase/capitalize) for a field like you can do it in Oracle*Forms with the "Case Restriction" property?

Here you go!

There are three new ApexLib hints called

• $APEXLIB_UPPERCASE$
• $APEXLIB_LOWERCASE$
• $APEXLIB_CAPITALIZE$

which can be set in the Page Item Comment or for Tabular Form Columns in the "Link Attributes" property.

If you set such a hint, the ApexLib Framework will automatically generate the necessary code for the browser and will also make sure that the values are stored with the correct case restriction when the page is submitted.

You can test this feature on the ApexLib Feature Demonstration site.

« ... Read full posting ... »

Hide "Select All" checkbox of row selector

In the last release of the ApexLib Framework I have also added a sometimes useful API to hide the "Select All" checkbox of the row selector of an Tabular Form. This can be useful to prevent the user from selecting all records for delete.

You just have to call

ApexLib_Browser.hideSelectAll;

in a page level process with the following settings:

• Type: PL/SQL
• Sequence: 1
• Process Point: On Load - Before Footer

You can test this feature on the ApexLib Feature Demonstration site.

« ... Read full posting ... »

Restrict input length of Tabular Form columns

One problem with Tabular Form Column is that they don't have a "Maximum Width" property as Page Items do. APEX automatically generates a maxlength=2000 for all columns. What is the result? The user gets a


when he enters a too long value. Not really nice, isn't it? And now he has to start counting so that he knows where to cut of...

That's why I have added the new ApexLib hint $APEXLIB_MAX_LENGTH=length$ eg. $APEXLIB_MAX_LENGTH=40$ to restrict the enterable input length. The ApexLib Framework will automatically generate the necessary HTML attributes and also verify the length when the page is submitted.

This hint has to be set in the "Link Attributes" property of the Tabular Form column, as the other Tabular Form hints like $APEXLIB_REQUIRED$, ...

You can test this feature on the ApexLib Feature Demonstration site.

« ... Read full posting ... »

Tabular Form record navigation with Up/Down key

I have added another small usability enhancement to the ApexLib Framework.

When you call the API

ApexLib_Browser.checkForUpDownKey;

it will register the keys Up and Down to navigate to the previous/next record in a Tabular Form. This should work for manually build (with Apex_Item) and also for the default updateable Tabular Forms.

It is by intention that the Up/Down key doesn't work on textareas and select lists, because on that type of field the Up/Down is used by the widget.

Try it out on the ApexLib Feature Demonstration site.

.

« ... Read full posting ... »

Non navigable Date Picker-/Lov/Image Button Icons

I still remember my "usability experience" when I first tried out Oracle APEX and created a form with a Date Picker and a Lov and run the page afterwards.

I had to click tab twice to go from a Date Picker or Lov item to the next item, because the Icon next to the field got the focus.

I was scratching my head and thinking, "Is that the Web-Experience and the easy of use, every manager and Java/JSP/JSF/PHP/... developer is talking about?".

With that kind of usability should I really throw away our rich-Web-client Oracle*Forms and give the users that kind of interface which they have to use each day long to enter data into the system?

On the OTN forum I read that some are using the HTML tabindex property for each field to get the desired behavior that the icons are skipped, but that's a lot of work...

That's where a new functionality of the ApexLib Framework comes into play.

With the new APIs

• ApexLib_Browser.setLovIconsNonNavigable
• ApexLib_Browser.setLRButtonIconsNonNavigable

it's possible to disable the Date Picker/Lov Icons and for Image generated Buttons the left and the right link. Maybe you have already noticed that you have to press 3 times tab to navigate to the next button...

The API

• ApexLib_Browser.checkForLovKey

registers the key combination "Alt+Down" or "Apple+Down" for each Date Picker/Lov field to be able to open the popup with a key combination as the users from an Oracle*Forms environment are used to.

Try this new enhancements at the ApexLib Feature Demonstration site.

It should work at least with IE 6.0 and FF 2.0. There is only one behavior with Firefox which I haven't solved yet, when you click the Date Picker item with the mouse, the ApexLib framework set the focus onto the attached field. When the user now presses tab, it sometimes happens that the Date Picker/Lov icon get's the focus! Maybe someone has a solution for that.

Please let me know if it also works with other browsers. Thanks!

« ... Read full posting ... »

Resizeable Textarea

Some time ago there was an interesting posting on the OTN forum about integrating resizeable textareas into APEX (especially into the Application Builder).

I thought that is a nice and useful feature, so I adapted it a little bit and integrated it into the new release of the ApexLib Framework.

Check it out on the ApexLib Feature Demonstration page.

How to use it in your application?

Just add the ApexLib hint $APEXLIB_V_RESIZE$ into the "Comment" property of your Page Item or the "Link Attributes" property of your Tabular Form column.

If you want that all your textareas in your application are resizeable, you can also add a call to

ApexLib_Browser.setTextareaProperty
  ( pProperty => ApexLib_Browser.VERTICAL_RESIZEABLE
  );

in your "ApexLib - Before footer" region of page 0.

I have tested this feature with IE 6.0/7.0 and Firefox 2.0, please let me know if it also works with other browsers. Thanks!

« ... Read full posting ... »