Integrating jQuery into APEX

jQuery is an open source Javascript library that enables the developer to produce concise, cross browser Javscript quickly and easily.

To integrate jQuery into Application Express you must first download the library from jquery.com. For performance reasons i would recommend downloading the production version.

Once you have downloaded the file you have to upload the file into APEX. Do this using create image within shared components

Now that the jQuery library is stored within APEX you can access it using the following code

<script type=”text/javascript” src=”#WORKSPACE_IMAGES#jquery-1.3.1.min.js”></script>

(you can upload the file to a specific application. if you do so then you must use #APP_IMAGES# instead of #WORKSPACE_IMAGES#)

This code can either placed inside the specific page where it is needed, or accessible to every page by placing it on page zero. If you wish to put it inside a page the sensible place to put it would be in the html header

Or, personally I prefer to place it inside the page template. This can be found within shared components.

For specific uses of jQuery please refer to docs.jquery.com/Tutorials

jQuery datepicker

Oracle’s native datepicker is extremely primative and is in urgent need of an update. I do not like the fact that it pops up a new window, which in my experience can easily be lost behind other windows and forgotten about. Luckily there is a better solution out there, in the form of a jQuery datepicker. This does not require a new window and also does not require much to integrate into an APEX application. Here is a short guide on how to integrate jQuery datepicker into APEX.

The first step is to ensure that you have the jQuery library included in your application. Follow guidelines here to do this. Basically you upload the jQuery Javascript file to application images and include it in your app using the following code

<script type=”text/javascript” src=”#WORKSPACE_IMAGES#jquery-1.3.1.min.js”></script>

In addition to the jQuery library you must also download the jQuery ui package. this can be found at ui.jquery.com/download. jQuery allow you to create a custom download. This has the benefit of reducing the size of the file while still giving you the features that you want to use. When creating the package ensure that you select the ui core and the datepicker widget

 

Once the file has been downloaded, upload the script to the application images and include the script in your application. This is done in the same as the core jQuery file.

As well as including the javascript file you must also include the following CSS files. These are stored inside the theme folder

  • ui.datepicker.css
  • ui.theme.css

Once these files are uploaded to the shared components > images, use the following code to include the css in your application

<link rel=”stylesheet” href=”#WORKSPACE_IMAGES#ui.datepicker.css” type=”text/css”>

<link rel=”stylesheet” href=”#WORKSPACE_IMAGES#ui.theme.css” type=”text/css”>

So far we have the following code in place to include the relevant Javascript and CSS files to allow you to integrate the datepicker

Before creating the datepicker field in the app we must define how jQuery will attach the datepicker functionality to items on our screen. This can be done on an item by item basis but for simplicity i will assign the functionality to all items with the class of “datepicker”

<script>

$(document).ready(function(){

$(“.datepicker”).datepicker({
showOn: “both”,
buttonImage: “#IMAGE_PREFIX#asfdcldr.gif”,
buttonImageOnly: true,
dateFormat: ‘dd/mm/yy’
});

});

</script>

Finally create an item with a type of “text” and assign it a class of datepicker

now when you run the page you should have a date field with a datepicker popup that is infinitly nicer than the in built Oracle datepicker

view example here

Using APEX Authorisation Schemes In PLSQL

APEX allows the developer to define multiple authorization schemes for use throughout the application. Unfortunately APEX, by default, only allows the use of these schemes in certain areas. For example to decide whether a user can see a specific page

or whether a specific page item should be displayed

Luckily there is a way to use the authorization in PLSQL, this is done using the following code

v_bool := apex_util.public_check_authorization(‘AUTHORIZATION_NAME’);

The authorization scheme can now be used on its own, or in a combination with other schemes, as well as being part of more complex logic

jQuery Thickbox

A jQuery thickbox allows you to create a popup region without actually opening a new browser window or tab. The thickbox region can contain some content already on the page, usually hidden when the page is viewed normally, or the content of another page.

Before starting you must have included the jQuery library in your APEX application. For instructions on how to do this check the guide Integrating jQuery into APEX

Once you have jQuery installed successfully you must also download the specific files for the thickbox, these can be retrieved from jquery.com/demo/thickbox/. Download the javascript, css files.

Include the javascript and css files in your application using the following code

<script type=”text/javascript” src=”#WORKSPACE_IMAGES#thickbox.js”></script>
<link rel=”stylesheet” href=”#WORKSPACE_IMAGES#thickbox.css” type=”text/css”>

To use the thickbox to display an existing region do the following

Create a region with “No template” and place the following in the region header

<div id=”thickbox_region” style=”display:none;”>

And close the div in the footer

</div>

Now create some content in the region to give the thickbox some content. For example I will create two items, P2_TEXT and P2_DATE. These items are purely dummy content.

Next, create a region to hold the buttons that will launch the thickbox region. This region does not require any specific settings.

Finally create the button that will launch this region. First create a button with the default regions, then once the button has been created alter the following settings.

For the optional URL redirect enter

javascript:return false;

And for the button attributes enter

class=”thickbox” alt=”#TB_inline?height=300&width=400&inlineId=thickbox_region”

You will notice from the alt tag that you can alter the width and height settings for the tickbox. For details of other settings visit jquery.com/demo/thickbox/

Now when you run the page and click the button the thickbox region should appear like the following example.

To view the above example click here

APEX Statement Of Direction

The link below outlines Oracles plans for Application Express.

http://www.oracle.com/technology/products/database/application_express/apex_sod.html

The key thing that is mentioned is an Oracle Forms to APEX converter. I think this has great potential for converting traditional Forms developers into using APEX. Hopefully this lives up to the hype and generates as much excitement as interactive reports has.

Unfortunately there doesnt seem to be any indication on timescales.

Oracle Application Express 3.2 Released

Oracle Application Express version 3.2 has been released for download here

The most significant addition is the Forms converter

For a walkthrough visit http://www.oracle.com/technology/obe/apex32/apex32frmmigr.htm

Security has also been improved, with the following from the Oracle site

Oracle Application Express, release 3.2 has improved security measures making it more declarative and powerful. Some key enhancements include the ability to:

  • Declaratively encrypt session state
  • Declaratively specify session timeouts for maximum idle time and maximum session duration
  • Create new password item types that enable users to enter passwords without ever saving them to session state.

Other features designed to minimize the exposed footprint include reducing the privileges required by the Oracle Application Express database account, disabling the Database Monitor feature by default, and providing administrators the ability to require HTTPS for the administration and development suite applications. In addition, administrators can now restrict new or updated account passwords to those that have not previously been used for a specified duration and, for new installations, require that service administrator account passwords conform to a strong password policy.

URL Parameters

In most cases the URL is automatically handled by APEX and the developer does not need to understand it. However with more advanced use of APEX comes the need to manually specify certain aspects of the URL. The following is a quick explanation of how the URL is constructed.

For this explanation we will focus on the f?p= part of the URL and explain each specific parameter

f?p=1:2:3:4:5:6:7:8:9

1 – The number or alias of the application you wish to run. The alias can be set in shared components -> definition

To access the current application id, use &APP_ID.

2 – The page number or page alias. The page alias can be set in the page attributes

3 – The session. to access the current session, use &SESSION.

4 – The request term that you want to pass to the destination page

5 – DEBUG. Decide whether the page is run in debug mode or not. either YES or NO

6 – This parameter can accept two values. RP = resets the pagination of the destination page followed by a comma separated list of pages where you wish to reset the cache. So for example if you want to reset pagination and reset the cache for pages 1 and 2 you would include “RP,1,2” for this parameter

7 – Comma separated list of page items to assign values to.

8 – Comma separated list of values to assign to the page items specified at position 7. The values must be in the same order as the page items are

9 – Printerfriendly. Determines if the page is being rendered in printer friendly mode. YES or blank