Edit D:\app\Administrator\product\11.2.0\dbhome_1\apex\images\doc\tutorial\javascript.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <!-- Run date = February 23, 2005 16:58:38 --> <meta name="Generator" content=" Oracle DARB XHTML converter - Version 4.1.3 Build 116" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title> How to Incorporate JavaScript into an Application </title> <link rel="stylesheet" type="text/css" href="blafdoc.css" title="default" /> <link rel="stylesheet" type="text/css" href="darbbook.css" title="default" /> <link rel="prev" href="up_dn_files.htm" title="Previous" /> <link rel="next" href="issue_track.htm" title="Next" /> <link rel="up" href="toc.htm" title="Up" /> <link rel="contents" href="toc.htm" title="Contents" /> <link rel="copyright" href="./support/html/cpyr.htm" title="Copyright" /> <link rel="index" href="index.htm" title="Index" /> </head> <body> <div class="header"> <a id="top" name="top"></a> <table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="100%"> <tr> <td align="left" valign="top"> <b>Oracle® HTML DB Guide to Building Applications </b> <br /> <b>Release 2.0 </b> </td> <td valign="bottom" align="right"> <table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="225"> <tr><td> </td> <td align="center" valign="top"><a href="toc.htm"><img src="./support/gifs/toc.gif" alt="Go To Table Of Contents" border="0" /><br /><span class="icon">Contents</span></a></td> </table> </td> </tr> </table> <hr /> <table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="100"> <tr> <td align="center"> <a href="up_dn_files.htm"> <img src="./support/gifs/leftnav.gif" alt="Previous" border="0" /><br /><span class="icon">Previous</span></a> </td> <td align="center"> <a href="issue_track.htm"> <img src="./support/gifs/rightnav.gif" alt="Next" border="0" /><br /><span class="icon">Next</span></a> </td> <td> </td> </tr> </table> </div><!-- class="header" --> <div class="IND"> <!-- End Header --><a id="CIHEBFFC" name="CIHEBFFC"></a><a id="sthref177" name="sthref177"></a> <h1><a name="HTMAD009"></a>How to Incorporate JavaScript into an Application </h1> <p>JavaScript is commonly used in Web applications as logic executed in the Web browser to provide functionality such data validations or dynamic user interface behaviors. Oracle HTML DB provides several ways to include JavaScript libraries and endless ways to incorporate the calling of JavaScript functions into the user interface. </p> <p>This tutorial describes some usage scenarios for JavaScript and includes details about how to implement them in your application. </p> <p class="subhead2">Topics:</p> <ul> <li type="disc"> <p><a href="#CHDGAGGI">Understanding How to Incorporate JavaScript Functions</a> </p> </li> <li type="disc"> <p><a href="#CHDCDAJF">About Referencing Items Using JavaScript</a> </p> </li> <li type="disc"> <p><a href="#CHDDHAFA">Calling JavaScript from a Button</a> </p> </li> <li type="disc"> <p><a href="#CHDHCBEC">Creating a Client Side JavaScript Validation</a> </p> </li> <li type="disc"> <p><a href="#CHDBECCF">Enabling and Disabling Form Elements</a> </p> </li> <li type="disc"> <p><a href="#CHDDCIFE">Changing the Value of Form Elements</a> </p> </li> </ul><a id="CHDGAGGI" name="CHDGAGGI"></a> <div class="sect1"> <!-- infolevel=all infotype=General --><a id="sthref178" name="sthref178"></a> <h2>Understanding How to Incorporate JavaScript Functions </h2> <p>There are two primary places to include JavaScript functions: </p> <ul> <li type="disc"> <p>In the HTML Header attribute of the page </p> </li> <li type="disc"> <p>In a .js file in the page template. </p> </li> </ul> <div class="sect2"> <!-- infolevel=all infotype=General --><a id="sthref179" name="sthref179"></a> <h3>Incorporating JavaScript in the HTML Header Attribute </h3> <p>One way to include JavaScript into your application is add it to the HTML Header attribute of the page. This is good approach for functions that are very specific to a page as well as a convenient way to test a function before you include it in the <code>.js</code> file. </p> <p>You can add JavaScript functions to a page by simply entering the code into the HTML Header attribute of the Page Attributes page. For example, adding following would <code>test</code> function accessible from anywhere on the current page. </p> <pre xml:space="preserve" class="oac_no_warn"><script language="JavaScript1.1" type="text/javascript> function test(){ alert('This is a test.'); } </script> </pre> </div><!-- class="sect2" --> <div class="sect2"> <!-- infolevel=all infotype=General --><a id="sthref180" name="sthref180"></a> <h3>Including JavaScript in a .js File Referenced by the Page Template </h3> <p>In Oracle HTML DB you can reference a <code>.js</code> 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 <code>.js</code> file loads on the first page view of your application and is then cached by the browser. </p> <p>The following demonstrates how to include a .js file in the header section of a page template. </p> <pre xml:space="preserve" class="oac_no_warn"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>#TITLE#</title> #HEAD# <script src="#APP_IMAGES#custom.js" type="text/javascript"></script> </head> <body #ONLOAD#>#FORM_OPEN# </pre> </div><!-- class="sect2" --> </div><!-- class="sect1" --> <a id="CHDCDAJF" name="CHDCDAJF"></a> <div class="sect1"> <!-- infolevel=all infotype=General --><a id="sthref181" name="sthref181"></a> <h2>About Referencing Items Using JavaScript<a id="sthref182" name="sthref182"></a><a id="sthref183" name="sthref183"></a> </h2> <p>When you reference an item, the best approach is to reference by ID. If you view the HTML source of an Oracle HTML DB page in a Web browser, you would notice that all items have an ID attribute. This ID corresponds to name of the item, not the item label. For example, if you create an item with the name <code>P1_FIRST_NAME</code> and a label of <code>First Name</code>, the ID will be P1_FIRST_NAME. </p> <p>Knowing the item ID enables you to use the JavaScript function <code>getElementById</code> 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. </p> <pre xml:space="preserve" class="oac_no_warn"><script language="JavaScript1.1" type="text/javascript"> function firstName(){ 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="javascript:displayValue('P1_FIRST_NAME');" </pre> </div><!-- class="sect1" --> <a id="CHDDHAFA" name="CHDDHAFA"></a> <div class="sect1"> <!-- infolevel=all infotype=General --><a id="sthref184" name="sthref184"></a> <h2>Calling JavaScript from a Button </h2> <p>Calling a JavaScript from a button is a great way to confirm a request. Oracle HTML DB actually uses this technique for the delete operation of most objects. For example, when you delete a button, a JavaScript Alert Box appears asking you to confirm your request. Consider the following example: </p> <pre xml:space="preserve" class="oac_no_warn"><script language="JavaScript1.1" 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> </pre> <p>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 <code>:REQUEST</code> to "Delete," thus performing the delete using a process that conditionally executes based on the value of request. </p> <p>Note that when you create the button you would need to select the Action <span class="bold">Redirect to URL without submitting page</span> . Then, you would specify a URL target such as the following: </p> <pre xml:space="preserve" class="oac_no_warn">javascript:confirmDelete('Would you like to perform this delete action?'); </pre> </div><!-- class="sect1" --> <a id="CHDHCBEC" name="CHDHCBEC"></a> <div class="sect1"> <!-- infolevel=all infotype=General --><a id="sthref185" name="sthref185"></a> <h2>Creating a Client Side JavaScript Validation </h2> <p>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. </p> <p>Creating this type of JavaScript validation involves the following steps: </p> <ul> <li type="disc"> <p>Create a new application on the EMP table. </p> </li> <li type="disc"> <p>Create an item on page 1 called P1_ENAME that has a label of Employee Name. </p> </li> <li type="disc"> <p>Add a function to the HTML Header attribute on page 3 </p> </li> <li type="disc"> <p>Edit the P3_ENAME item on page 3 to call the function </p> </li> </ul> <p class="subhead2">Topics:</p> <ul> <li type="disc"> <p><a href="#CIHCDBIG">Create an Application on the EMP Table</a> </p> </li> <li type="disc"> <p><a href="#CIHIFCBD">Add a Function to the HTML Header Attribute</a> </p> </li> <li type="disc"> <p><a href="#CIHEDCEE">Edit an Item to Call the Function</a> </p> </li> </ul><a id="CIHCDBIG" name="CIHCDBIG"></a> <div class="sect2"> <!-- infolevel=all infotype=General --><a id="sthref186" name="sthref186"></a> <h3>Create an Application on the EMP Table </h3> <p>To create a new application on the <code>EMP</code> table: </p> <ol type="1" start="1"> <li> <p>Navigate to the Workspace home page. </p> </li> <li> <p>Click <span class="bold">Create Application</span>. </p> </li> <li> <p>On Select Creation Method, select <span class="bold">Based on Existing Table</span> and click <span class="bold">Next</span>. </p> </li> <li> <p>On Identify Table/View Owner, select the owner of the <code>EMP</code> table and click <span class="bold">Next</span>. </p> </li> <li> <p>On Identify Table /View Name, select <span class="bold">EMP</span> and click <span class="bold">Next</span>. </p> </li> <li> <p>On Table User Interface Defaults, accept the defaults and click <span class="bold">Next</span>. </p> </li> <li> <p>For Summarize by Column, select the columns <span class="bold">JOB</span>, <span class="bold">MGR</span>, and <span class="bold">DEPTNO</span> and click <span class="bold">Next</span>. </p> </li> <li> <p>On Aggregate by Column, select <span class="bold">SAL</span> and <span class="bold">COMM</span> and click <span class="bold">Next</span>. </p> </li> <li> <p>Accepts the remaining defaults and click <span class="bold">Next</span>. </p> </li> <li> <p>Click <span class="bold">Create</span>. </p> </li> <li> <p>To view the application, click <span class="bold">Run Application</span>. </p> </li> <li> <p>When prompted for a user name and password: </p> <ul> <li type="disc"> <p>For User Name, enter the name of your workspace </p> </li> <li type="disc"> <p>For Password, enter the password for your workspace </p> </li> </ul> <p>The application contains the following pages: </p> <ul> <li type="disc"> <p>a standard report </p> </li> <li type="disc"> <p>an insert form </p> </li> <li type="disc"> <p>an update form </p> </li> <li type="disc"> <p>a success form (indicates when a record is successfully inserted) </p> </li> <li type="disc"> <p> an analysis menu page </p> </li> <li type="disc"> <p>analysis reports </p> </li> <li type="disc"> <p>analysis charts </p> </li> <li type="disc"> <p>a login page </p> </li> </ul> </li> <li> <p>Select <span class="bold">Edit Application</span> from the Developer Toolbar. </p> </li> </ol> </div><!-- class="sect2" --> <a id="CIHIFCBD" name="CIHIFCBD"></a> <div class="sect2"> <!-- infolevel=all infotype=General --><a id="sthref187" name="sthref187"></a> <h3>Add a Function to the HTML Header Attribute </h3> <p>To add function to the HTML Header attribute on page 2: </p> <ol type="1" start="1"> <li> <p>Navigate to the Page Definition for page 2, Insert Form. </p> </li> <li> <p>On the Page Definition, click <span class="bold">Edit Attributes</span>. </p> <p>The Page Attributes appear. </p> </li> <li> <p>In HTML Header, enter the following: </p> <pre xml:space="preserve" class="oac_no_warn"><script language="JavaScript1.1" type="text/javascript"> function notNull(object){ if(object.value=="") alert('This field must contain a value.'); } </script> </pre> </li> <li> <p>Click <span class="bold">Apply Changes</span>. </p> </li> </ol> </div><!-- class="sect2" --> <a id="CIHEDCEE" name="CIHEDCEE"></a> <div class="sect2"> <!-- infolevel=all infotype=General --><a id="sthref188" name="sthref188"></a> <h3>Edit an Item to Call the Function </h3> <p>The next step is to edit the <code>P2_ENAME</code> item and add code to the HTML Form Element Attributes attribute to call the function. </p> <p>To edit the <code>P2_ENAME</code> item to call the function: </p> <ol type="1" start="1"> <li> <p>Navigate to the Page Definition for page 2, Insert Form. </p> </li> <li> <p>Under Items, select <span class="bold">P2_ENAME</span>. </p> </li> <li> <p>Scroll down to Element. </p> </li> <li> <p>In HTML Form Element Attributes, enter the following: </p> <pre xml:space="preserve" class="oac_no_warn">onBlur="javascript:notNull(this);" </pre> </li> <li> <p>Click <span class="bold">Apply Changes</span>. </p> </li> <li> <p>Run the page. If you position the cursor in the <code>Ename</code> field and click <span class="bold">Create</span>, the following message appears: </p> <pre xml:space="preserve" class="oac_no_warn">This field must contain a value. </pre> </li> </ol> </div><!-- class="sect2" --> </div><!-- class="sect1" --> <a id="CHDBECCF" name="CHDBECCF"></a> <div class="sect1"> <!-- infolevel=all infotype=General --><a id="sthref189" name="sthref189"></a> <h2>Enabling and Disabling Form Elements </h2> <p>While Oracle HTML DB 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. </p> <p>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 (deptno = 30). </p> <p class="subhead2">Topics:</p> <ul> <li type="disc"> <p><a href="#CIHIBGGH">Add a Function the HTML Header Attribute</a> </p> </li> <li type="disc"> <p><a href="#CIHGCEGD">Edit an Item to Call the Function</a> </p> </li> <li type="disc"> <p><a href="#CIHGCGCI">Change P3_DEPTNO to a Select List</a> </p> </li> <li type="disc"> <p><a href="#CIHHAGIJ">Create a Call to disFormItems from the Region Footer</a> </p> </li> </ul><a id="CIHIBGGH" name="CIHIBGGH"></a> <div class="sect2"> <!-- infolevel=all infotype=General --><a id="sthref190" name="sthref190"></a> <h3>Add a Function the HTML Header Attribute </h3> <p>To add a function to the HTML Header attribute on page 3: </p> <ol type="1" start="1"> <li> <p>Navigate to the Page Definition for page 3, Update Form. </p> </li> <li> <p>On the Page Definition, click <span class="bold">Edit Attributes</span>. </p> <p>The Page Attributes appear. </p> </li> <li> <p>In HTML Header, enter the following: </p> <pre xml:space="preserve" class="oac_no_warn"><script language="JavaScript1.1" type="text/javascript"> // This function takes in: // 1. A string expression to evaluate. For example: // 'document.getElementById(\'P2_DEPTNO\').value==\'0\' // Notice the quotes are escaped using a "\" // 2. One or more arguments which are item ID's as strings. For example: // ...,'P2_ENAME','P2_SAL'...); // Notice the ID's are the item names, NOT item labels function disFormItems(testString,item1,item2,item3,item4,item5,item6,item7,item8,item9,item10){ if(theTest){ for(var i=1;i<12;i++){ if (arguments[i]){ disItem = document.getElementById(arguments[i]); disItem.style.background = '#cccccc'; disItem.disabled = true; } } } else{ for(var i=1;i<12;i++){ if (arguments[i]){ disItem = document.getElementById(arguments[i]); disItem.disabled = false; disItem.style.background = '#ffffff'; } } } } </script> </pre> </li> <li> <p>Click <span class="bold">Apply Changes</span>. </p> </li> </ol> </div><!-- class="sect2" --> <a id="CIHGCEGD" name="CIHGCEGD"></a> <div class="sect2"> <!-- infolevel=all infotype=General --><a id="sthref191" name="sthref191"></a> <h3>Edit an Item to Call the Function </h3> <p>The next step is to edit the <code>P3_DEPTNO</code> item and add code to the HTML Form Element Attributes attribute to call the function. </p> <p>To edit the <code>P3_DEPTNO</code> item to call the function: </p> <ol type="1" start="1"> <li> <p>Navigate to the Page Definition for page 3. </p> </li> <li> <p>Under Items, select <span class="bold">P3_DEPTNO</span>. </p> </li> <li> <p>Scroll down to Element. </p> </li> <li> <p>In HTML Form Element Attributes, enter the following: </p> <pre xml:space="preserve" class="oac_no_warn">onChange="javascript:disFormItems('document.getElementById(\'P3_DEPTNO\').value!=\'30\'','P3_COMM');" </pre> </li> <li> <p>Click <span class="bold">Apply Changes</span>. </p> </li> </ol> </div><!-- class="sect2" --> <a id="CIHGCGCI" name="CIHGCGCI"></a> <div class="sect2"> <!-- infolevel=all infotype=General --><a id="sthref192" name="sthref192"></a> <h3>Change P3_DEPTNO to a Select List </h3> <p>To change the <code>P3_DEPTNO</code> to display as a select list: </p> <ol type="1" start="1"> <li> <p>Navigate to the Page Definition for page 3. </p> </li> <li> <p>Under Items, select <span class="bold">P3_DEPTNO</span>. </p> </li> <li> <p>Under Display As, select <span class="bold">Select List</span>. </p> </li> <li> <p>Under List of Values: </p> <ol type="a"> <li> <p>From Display Null, select <span class="bold">No</span>. </p> </li> <li> <p>In List of Values definition, enter: </p> <pre xml:space="preserve" class="oac_no_warn">SELECT dname_id, deptno FROM dept </pre> </li> </ol> </li> <li> <p>Click <span class="bold">Apply Changes</span>. </p> </li> </ol> </div><!-- class="sect2" --> <a id="CIHHAGIJ" name="CIHHAGIJ"></a> <div class="sect2"> <!-- infolevel=all infotype=General --><a id="sthref193" name="sthref193"></a> <h3>Create a Call to disFormItems from the Region Footer </h3> <p>Finally, you need to create a call to the <code>disFormItems</code> function after the page is rendered to disable <code>P3_COMM</code> if the selected employee is not a SALES representative. A good place to make this call would be from the Region Footer of the region which contains the items. </p> <p>To disable <code>P3_COMM</code> when the page is first loaded: </p> <ol type="1" start="1"> <li> <p>Navigate to the Page Definition for page 3. </p> </li> <li> <p>Under Regions, select <span class="bold">EMP</span>. </p> </li> <li> <p>Scroll down to Header and Footer Text. </p> </li> <li> <p>In Region Footer Header, enter the following: </p> <pre xml:space="preserve" class="oac_no_warn"><script language="JavaScript1.1" type="text/javascript"> // This code calls the function when the page loads, thus setting the items state correctly. disFormItems('document.getElementById(\'P3_DEPTNO\').value!=\'30\'','P3_COMM'); </script> </pre> </li> <li> <p>Click <span class="bold">Apply Changes</span>. </p> </li> <li> <p>Run the page. </p> </li> </ol> <p>Figure <a href="#CHDJCDDD">Figure 9-1</a> demonstrates the completed form. </p> <div class="figure"> <a id="CHDJCDDD" name="CHDJCDDD"></a><a id="sthref194" name="sthref194"></a> <p class="titleinfigure">Figure 9-1 Completed Form</p> <img src="./img/js_sel.gif" alt="Description of js_sel.gif follows" title="Description of js_sel.gif follows"/> <br /><a id="sthref195" name="sthref195" href="./img_text/js_sel.htm">Description of the illustration js_sel.gif</a> <br /><br /> </div><!-- class="figure" --> </div><!-- class="sect2" --> </div><!-- class="sect1" --> <a id="CHDDCIFE" name="CHDDCIFE"></a> <div class="sect1"> <!-- infolevel=all infotype=General --><a id="sthref196" name="sthref196"></a> <h2>Changing the Value of Form Elements </h2> <p>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 will add a JavaScript function to the HTML Header attribute and then call that function from the first three items </p> <p>To call the function from the first three items: </p> <ol type="1" start="1"> <li> <p>Navigate to the appropriate Page Definition. </p> </li> <li> <p>On the Page Definition, click <span class="bold">Edit Attributes</span>. </p> <p>The Page Attributes appear. </p> </li> <li> <p>In HTML Header, enter the following: </p> <pre xml:space="preserve" class="oac_no_warn"><script language="JavaScript1.1" 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> </pre> </li> <li> <p>Click <span class="bold">Apply Changes</span>. </p> </li> </ol> <p>To call the function from all three items: </p> <ol type="1" start="1"> <li> <p>Navigate to the appropriate Page Definition. </p> </li> <li> <p>For each item: </p> <ol type="a"> <li> <p>Select the item name. </p> </li> <li> <p>Scroll down to Element. </p> </li> <li> <p>In HTML Form Element Attributes, enter: </p> <pre xml:space="preserve" class="oac_no_warn">onChange="javascript:sumItems();" </pre> </li> <li> <p>Click <span class="bold">Apply Changes</span>. </p> </li> </ol> </li> </ol> </div><!-- class="sect1" --> </div> <!-- Start Footer --> <div class="footer"> <hr /> <table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="100%"> <tr> <td valign="bottom" width="33%"> <table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="100"> <tr><td> </td> <td align="center"> <a href="up_dn_files.htm"> <img src="./support/gifs/leftnav.gif" alt="Previous" border="0" /><br /><span class="icon">Previous</span></a> </td> <td align="center"> <a href="issue_track.htm"> <img src="./support/gifs/rightnav.gif" alt="Next" border="0" /><br /><span class="icon">Next</span></a> </td> </tr> </table> </td> <td class="copyrightlogo"> <a href="./support/html/cpyr.htm"> <span class="copyrightlogo"> Copyright © 2005, Oracle. All rights reserved. </span> </a> </td> <td valign="bottom" align="right" width="33%"> <table class="simple oac_no_warn" summary="" cellspacing="0" cellpadding="0" width="225"> <tr><td> </td> <td align="center" valign="top"><a href="toc.htm"><img src="./support/gifs/toc.gif" alt="Go To Table Of Contents" border="0" /><br /><span class="icon">Contents</span></a></td> </table> </td> </tr> </table> </div><!-- class="footer" --> </body> </html>
Ms-Dos/Windows
Unix
Write backup
jsp File Browser version 1.2 by
www.vonloesch.de