| Oracle® Database Express Edition 2 Day Plus Application Express Developer Guide Release 2.1 Part Number B25310-01 |
|
|
View PDF |
| Oracle® Database Express Edition 2 Day Plus Application Express Developer Guide Release 2.1 Part Number B25310-01 |
|
|
View PDF |
Adding JavaScript to a Web applications is a great way to add features that mimic those found in client/server applications without sacrificing all of the benefits of Web deployment. Oracle Application Express includes multiple built-in interfaces especially designed for adding JavaScript.
Remember that JavaScript is not appropriate for data intensive validations. For example, to verify that a name is contained within a large database table, you would need to pull down every record to the client, creating a huge HTML document. In general, complex operations are much better suited for server-side Application Express validations instead of JavaScript.
This tutorial describes some usage scenarios for JavaScript and includes details about how to implement them in your application.
This section contains the following topics:
There are two primary places to include JavaScript functions:
In the HTML Header attribute of the page
In a .js file in the page template.
Topics in this section include:
One way to include JavaScript into your application is add it to the HTML Header attribute of the page. This is a good approach for functions that are specific to a page as well as a convenient way to test a function before you include it in the .js file.
You can add JavaScript functions to a page by entering the code into the HTML Header attribute on the Page Attributes page.
To add JavaScript code in the HTML Header attribute:
On the Database Home Page, click the Application Builder icon.
Select an application.
Select a page.
Click Edit Attributes.
Scroll down to HTML Header.
Enter code into HTML Header and click Apply Changes.
For example, adding the following would test a function accessible from anywhere on the current page.
<script type="text/javascript">
function test(){
window.alert('This is a test.');
}
</script>
In Oracle Application Express you can reference a .js file in the page template. This approach makes all the JavaScript in that file accessible to the application. This is the most efficient approach since a .js file loads on the first page view of your application and is then cached by the browser.
The following demonstrates how to include a .js file in the header section of a page template. Note the line script src= that appears in bold.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>#TITLE#</title>
#HEAD#
<script src="http://myserver.myport/my_images/custom.js" type="text/javascript"></script>
</head>
<body #ONLOAD#>#FORM_OPEN#
See Also:
"Customizing Templates" in Oracle Database Express Edition Application Express User's GuideWhen you reference an item, the best approach is to reference by ID. If you view the HTML source of an Oracle Application Express page in a Web browser, you would notice that all items have an id attribute. This ID corresponds to the name of the item, not the item label. For example, if you create an item with the name P1_FIRST_NAME and a label of First Name, the id would be P1_FIRST_NAME.
Knowing the item ID enables you to use the JavaScript method getElementById() to get and set item attributes and values. The following example demonstrates how to reference an item by ID and display its value in an alert box.
<script type="text/javascript">
function firstName(){
window.alert('First Name is ' + document.getElementById('P1_FIRST_NAME').value );
}
// or a more generic version would be
function displayValue(id){
alert('The Value is ' + document.getElementById(id).value );
}
</script>
// Then add the following to the "Form Element Attributes" Attribute of the item:
onchange="displayValue('P1_FIRST_NAME');"
Calling a JavaScript from a button is a great way to confirm a request. Oracle Application Express uses this technique for the delete operation of most objects. For example, when you delete a button, a JavaScript message appears asking you to confirm your request. Consider the following example:
<script type="text/javascript">
function deleteConfirm(msg)
{
var confDel = msg;
if(confDel ==null)
confDel= confirm("Would you like to perform this delete action?");
else
confDel= confirm(msg);
if (confDel== true)
doSubmit('Delete');
}
</script>
This example creates a function to confirm a delete action and then calls that function from a button. Note that the function optionally submits the page and sets the value of the internal variable :REQUEST to Delete, thus performing the delete using a process that conditionally executes based on the value of request.
Note that when you create the button you would need to select Action Redirect to URL without submitting page. Then, you would specify a URL target such as the following:
confirmDelete('Would you like to perform this delete action?');
Client side validations give immediate feedback to users using a form. One very common JavaScript validation is field not null. For example, you can create a function in the HTML Header attribute of a page and then call that function from an item.
Creating this type of JavaScript validation involves the following steps:
Create a new application on the EMPLOYEES table.
Create an item on page 1 called P2_LAST_NAME that has a label of Last Name.
Add a function to the HTML Header attribute on page 2
Edit the P2_LAST_NAME item on page 2 to call the function
Topics in this section include:
To complete this exercise, you need to log in to the sample database user account HR. Oracle Database Express Edition (Oracle Database XE) comes with a sample database user account called HR. This user owns a number of database tables in a sample schema that can be used to create applications for a fictional Human Resources department.
For security reasons, the HR user account is locked after installation. To learn how to unlock it, see "About the HR Account".
To create a new application on the EMPLOYEES table:
On the Database Home Page, click the Application Builder icon.
Click Create.
For Method, select Create Application.
For Name:
In Name, enter a name that describes the application.
For Application, accept the default.
For Create Application, select From scratch.
For Schema, accept the default.
Click Next.
Add a blank page, containing a report:
Under Select Page Type, select Report and Form.
From Table Name, select EMPLOYEES.
Click Add Page.
The new pages display at the top of the page. Next, change the name of page 2 to Update Form.
To change the name of page 2:
Under Create Application at the top of the page, click the page name Employees for page 2 as shown in Figure 9-1.
The Page Definition appears.
In Page Name, enter Update Form and click Apply Changes.
Click Next.
For Tabs, select One Level of Tabs and click Next.
For Shared Components, accept the default, No, and click Next.
For Attributes, accept the defaults for Authentication Scheme, Language, and User Language Preference Derived From and click Next.
For User Interface, select Theme 2 and click Next.
Click Create.
The Application home page appears. Note the new application contains three pages:
1 - EMPLOYEES
2 - Update Form
101 - Login
To view the application:
Click the Run Application icon as shown in Figure 9-2.
When prompted for a user name and password, enter hr for both and click Login.
A standard report appears. To view the update form click either the Create button or Edit icon.
Click Edit Application on the Developer toolbar.
Next, you need to add a function to the HTML Header attribute on page 2 that displays a message when the Last Name field does not contain a value.
To add a function to the HTML Header attribute on page 2:
On the Application home page, select 2 - Update Form.
The Page Definition appears.
Click Edit Attributes.
The Edit Page attributes page appears.
Scroll down to HTML Header. Note that HTML Header already contains a script.
In HTML Header, scroll down and enter the following script after the </script> tag:
<script type="text/javascript">
function notNull(object){
if(object.value=="")
alert('This field must contain a value.');
}
</script>
Scroll back to the top of the page and click Apply Changes.
Next, you need to edit the P2_LAST_NAME item to call the function. In the running form, the P2_LAST_NAME item displays as the Last Name field.
To edit the P2_LAST_NAME item to call the function:
Navigate to the Page Definition for page 2 - Update Form.
Under Items, select P2_LAST_NAME.
Scroll down to Element.
In HTML Form Element Attributes, enter the following:
onblur="notNull(this);"
Scroll back to the top of the page and click Apply Changes.
The Page Definition appears.
Navigate to page 1. Enter 1 in the Page field and click Go.
Click the Run Page icon in the upper right corner.
When the application appears, click Create.
The Update Form appears.
Position your cursor in the Last Name field and click Create. The following message appears:
This field must contain a value.
While Oracle Application Express enables you to conditionally display a page item, it is important to note that a page must be submitted for any changes on the page to be evaluated. The following example demonstrates how to use JavaScript to disable a form element based on the value of another form element.
First, you write a function and place it in the HTML Header attribute of the page containing your update form. Second, you call the function from an item on the page. The following example demonstrates how to add a JavaScript function to prevent users from adding commissions to employees who are not in the Sales Department (P2_DEPARTMENT_ID = 80).
Topics in this section include:
To add a function to the HTML Header attribute on page 2:
Navigate to the Page Definition for page 2.
On the Page Definition, click Edit Attributes.
The Page Attributes appear.
Scroll down to HTML Header.
In HTML Header, scroll down and enter the following script after the last </script> tag:
<script language="JavaScript1.1" type="text/javascript">
function html_disableItem(nd,a){
var lEl = document.getElementById(nd);
if (lEl && lEl != false){
if(a){
lEl.disabled = false;
lEl.style.background = '#ffffff';
}else{
lEl.disabled = true;
lEl.style.background = '#cccccc';
}}
return true;}
function disFormItems(){
var lOptions = document.getElementById('P2_DEPARTMENT_ID').options
var lReturn;
for(var i=0;i<lOptions.length;i++){
if(lOptions[i].selected==true){lReturn = lOptions[i].value;}
}
var lTest = lReturn == '80';
html_disableItem('P2_COMMISSION_PCT',lTest); }
</script>
Click Apply Changes.
The next step is to edit the P2_DEPARTMENT_ID item and add code to the HTML Form Element Attributes attribute to call the function.
To edit the P2_DEPARTMENT_ID item to call the function:
Navigate to the Page Definition for page 2.
Under Items, select P2_DEPARTMENT_ID.
Scroll down to Element.
In HTML Form Element Attributes, enter the following:
onchange="disFormItems()"
Click Apply Changes.
To change the P2_DEPARTMENT_ID to display as a select list:
Navigate to the Page Definition for page 2.
Under Items, select P2_DEPARTMENT_ID.
Under Display As, select Select List.
Scroll down to List of Values.
Under List of Values:
From Display Null, select No.
In List of Values definition, enter:
SELECT department_name, department_id FROM departments
Click Apply Changes.
Finally, you need to create a call to the disFormItems function after the page is rendered to disable P2_COMMISSION_PCT if the selected employee is not a Sales representative. A good place to make this call would be from the Page HTML Body Attribute.
To create a call to the disFormItems function:
Navigate to the Page Definition for page 2.
Click Edit Attributes.
Scroll down to On Load.
In the Page HTML Body Attribute, enter the following:
onload="disFormItems()"
Click Apply Changes.
Run the page by clicking the Run Page icon.
Figure 9-3 demonstrates the completed form. Note that Department ID displays as a select list. Also notice that the Commission Pct field is unavailable since the Department ID is Administration.
In the following example, there are four text boxes in a region. The fourth text box contains the sum of the other three. To calculate this sum, you add a JavaScript function to the HTML Header attribute and then call that function from the first three items
To call the function from the first three items:
Navigate to the appropriate Page Definition.
On the Page Definition, click Edit Attributes.
The Page Attributes appear.
In HTML Header, enter the following:
<script type="text/javascript">
function sumItems(){
function getVal(item){
if(document.getElementById(item).value != "")
return parseFloat(document.getElementById(item).value);
else
return 0;
}
document.getElementById('P1_TOTAL').value =
getVal('P1_ONE') + getVal('P1_TWO') + getVal('P1_THREE');
}
</script>
Click Apply Changes.
To call the function from all three items:
Navigate to the appropriate Page Definition.
For each item:
Select the item name.
Scroll down to Element.
In HTML Form Element Attributes, enter:
onchange="sumItems();"
Click Apply Changes.
