Apex Advanced Tutorials

Introduction to Oracle APEX II
Version 3.2 Workbook
Introduction to Oracle APEX II Workbook - Version 3.2
Table of Contents
1. Installation! ................................................................................................................................................................4 1.1. Download & Unzip Class Files!.................................................................................................................4 1.2. Login to Your Workspace!...........................................................................................................................4 1.3. Import the Starter Application!..................................................................................................................4 JavaScript & Ajax!....................................................................................................................................................6 2.1. onload Events: Display an Alert!...............................................................................................................6 2.2. onblur Events: Change Case to Upper!....................................................................................................7 2.3. onblur Events: Change Background Color!.............................................................................................8 2.4. onkeypress Events: Character Counter & Hide/Show !.......................................................................10 2.5. Modify conrmDelete Parameters!.........................................................................................................13 2.6. Item Validations!........................................................................................................................................14 2.7. Hide & Show Regions! ...............................................................................................................................16 Ajax! ...........................................................................................................................................................................18 3.1. Create an AutoAssign Function!..............................................................................................................18 3.2. Automatically Set Status to Closed!.........................................................................................................21 Security!....................................................................................................................................................................23 4.1. Session Timeout!.........................................................................................................................................23 4.2. Encrypted Session State!............................................................................................................................26 4.3. Save Session State Before Branching! .......................................................................................................28 4.4. Autocomplete!.............................................................................................................................................29 4.5. Monitoring APEX Logs!............................................................................................................................31 Performance Tuning !.............................................................................................................................................32 5.1. Debug Mode! ...............................................................................................................................................32 5.2. Timings! ........................................................................................................................................................35 5.3. Page & Region Caching!............................................................................................................................36 Developer Tools!.....................................................................................................................................................37 6.1. Page Locks!..................................................................................................................................................37 6.2. Page Groups! ...............................................................................................................................................41 6.3. Build Options!.............................................................................................................................................44 User Interface!.........................................................................................................................................................46 7.1. Import the Theme Starter Application!...................................................................................................46 7.2. Create a New Theme!.................................................................................................................................47 7.3. Set Up a Custom Directory on the HTTP Server!..................................................................................49 7.4. Create a Page Template!............................................................................................................................50 7.5. Create Region Templates!..........................................................................................................................56 7.6. Create List Templates! ................................................................................................................................58 7.7. Create Regions!...........................................................................................................................................59
2.
3.
4.
5.
6.
7.
Copyright 2009-2010 Sumneva

Page 2
Conventions
The following typeset conventions are used throughout this document: Plain Text Plain text is nothing more than standard, narrative text. No special actions are required. Fixed Width! Fixed width is used to denote input required from the user. When something is in the fixed width font, that text should be entered into the corresponding eld or region. Bold Bold is used to indicate that you should perform an action, such as clicking a link or pressing a button, which corresponds to the value of the Bold text. Bold Underline Bold Underline is used to refer to a label or section of a page. Bold Underline labels will typically denote where an action should occur, not the action itself.
Comments & Questions

Any comments or questions on this material should be directed to: Sumneva info@sumneva.com (703) 879-4615
Copyright Information
This document is Copyright 2009-2010, by Sumneva. None of it in part or in whole may be reproduced without prior written consent from Sumneva.

Page 3
1.
INSTALLATION
1.1. Download & Unzip Class Files

To make things easier, most code snippets can simply be copied & pasted from a set of text les. Before we begin, youll need to download and expand the ZIP le that contains these les. In some cases, the les may already be on your workstation. 1) Open a new browser window. 2) Navigate to the following URL to download the class les: http://sumneva.com/c/sumneva/training/intro2.zip 3) Unzip the contents to your desktop or anywhere on your hard drive that is easily accessible.
1.2. Login to Your Workspace

All of the work that you will do will occur in your workspace. Each workspace is mapped to its own schema, and each student has their own workspace, so nothing you can do can impact anyone else in the class. 1) Navigate to the URL provided by the instructor. 2) Using the credentials either found in your workbook or provided by your instructor, log in to your workspace.
1.3. Import the Starter Application

If you did not just take Introduction to Oracle APEX I, then you will need to complete this step. 1) Click on the Application Builder tab. 2) Click Import. 3) Click Browse and locate and select the le 1.3_apex.sql, which can be found where you extracted the class les in Section 1.1. 4) Click Next. 5) Click Next again. 6) Select your Parsing Schema, set the Build Status to Run and Build Application, set Install As Application to Auto Assign New Application ID and click Install.

Page 4
7) Make sure that Install Supporting Objects is set to Yes and click Next. 8) Click Install. At this point, you should see the following screen:
If there is any warning or error message present, please notify your instructor. Your application should have four users: Username Scott Shannon Isabella Owen Password sumneva sumneva sumneva sumneva Privilege Administrator Edit Edit View
Administrators will be able to do everything in the system, including managing users and access control lists. Edit users will be able to change any data, but will not be able to manage users and access control lists. All view users will be able to do is view transactional data. 9) Run your application and sign on as Scott. Take some time to become familiar with the application, if you have not done so already.

Page 5
2.
JAVASC R I P T
&
A JAX
2.1. onload Events: Display an Alert

When a page loads in APEX or any other HTML-based technology, we can trap that event in JavaScript and execute some code. Its quite useful to run some sort of initialization routine or hide items & regions that should not appear when a page is initially loaded. In this exercise, we are going to simply add an alert to the onload event. When the user clicks Submit a Ticket, a JavaScript alert will advise them to complete all elds in the form that is about to be displayed. 1) Edit Page 2 of your application. 2) Edit the Page Attributes. This can be done by clicking the pencil icon in the Page region under Page Rendering.
3) In the Display Attributes region, set the Cursor Focus to Do Not Focus Cursor.
4) Locate and open the le 2.1_javascript.txt. This le can be found where you unzipped the class les in Exercise 1.2. 5) Copy the entire content of the le into the Page HTML Body Attribute region, which is part of the HTML Body Attribute region and click Apply Changes.
Now, run page 2, and notice that a JavaScript alert will popup as soon as the page renders.

Page 6
2.2. onblur Events: Change Case to Upper

We can use JavaScript to enhance our applications in a number of basic ways. One example is something that youve already seen in APEX: as soon as the user types in a value and tabs to the next one, we can uppercase that entire value. This is done using the onblur event. Onblur occurs when a eld loses the focus; in other words, they have moved the cursor to another item or have clicked on some white space on the page, thus blurring the item that previously had the focus. 1) Edit Page 2 of your application. 2) Edit the item P2_CREATED_BY by clicking on its name. 3) Locate and open the le 2.2_javascript.txt. This le can be found where you unzipped the class les in Exercise 1.2. 4) Copy the contents of that le into the HTML Form Element Attributes, which is in the Element region and click Apply Changes.
5) Run Page 2 and enter some lowercase text into the Created On eld and hit the tab key. Notice that the entire string should now be in uppercase.

Page 7
2.3. onblur Events: Change Background Color

In addition to changing the text within an item, we can also alter an items properties with JavaScript. This time, well add a call to a function at the item level rather than a single command. That function will inspect the value of the item, and if its still null after it loses the focus, it will change the color of the eld to pink, denoting to the user that a value is still required. If there is a value in the eld, then it will change the color back to white. 1) Edit Page 2 of your application. 2) Edit the item P2_SUBJECT by clicking on its name. 3) Locate and open the le 2.3_javascript_item.txt. This le can be found where you unzipped the class les in Exercise 1.2. 4) Copy the contents of that le into the HTML Form Element Attributes, which is in the Element region and click Apply Changes.
5) Edit the item P2_DESCR by clicking on its name. 6) Copy the contents of 2.3_javascript_item.txt - which should still be in your buffer into the HTML Form Element Attributes, which is in the Element region and click Apply Changes. 7) Edit the item P2_CREATED_BY by clicking on its name. 8) Locate and open the le 2.3_javascript_item_created_by.txt. This le can be found where you unzipped the class les in Exercise 1.2. 9) Copy the contents of 2.3_javascript_item_created_by.txt into the HTML Form Element Attributes and click Apply Changes.
10) Click Apply Changes. At this point, we have added the onblur event to all three display items on the page. Next, well have to add the actual function that it refers to. 11) Create a new Region by clicking on the corresponding icon. 12) Select HTML and click Next. 13) Select HTML again and click Next.

Page 8
14) Enter JavaScript - itemNotNull for the Title, set the Region Template to No Template, set the Display Point to Before Footer, enter 0 for the Sequence and click Next.
15) Locate and open the le 2.3_javascript_function.txt. This le can be found where you unzipped the class les in Exercise 1.2. 16) Copy the contents of that le into the Enter HTML Text Region Source and click Create Region.
Run your application and tab through each eld, leaving them all blank. You should notice that as you leave a blank eld, it immediately turns pink. If you go back and enter any text in a pink eld and then leave it, it will return to its normal white background color.

Page 9
2.4. onkeypress Events: Character Counter & Hide/Show

Its easy to include some basic and even sophisticated business rules in JavaScript. Because we have almost complete interactive control over the layout of a page, theres little that we cant achieve with JavaScript. In this exercise, we are going to implement a character counter. When the user enters 200 or more characters, the JavaScript function will enable or show a DIV region. This DIV region has a precanned message embedded in it, warning that the users is getting close to the maximum number of characters allowed. In addition to displaying the message, it will also change the text color from black to red. If the user reaches 250 characters, then an alert is displayed and the user will not be allowed to enter any more text. 1) Edit Page 2 of your application. 2) Edit the Page Attributes. This can be done by clicking the pencil icon in the Page region under Page Rendering.
3) Locate and open the le 2.4_javascript_body.txt. This le can be found where you unzipped the class les in Exercise 1.2. 4) Copy the entire content of the le into the Page HTML Body Attribute region, replacing all text that is there, and click Apply Changes.
Now that weve modied the onload JavaScript, lets create the DIV, which will be associated with the P2_DESCR item. 5) Edit P2_DESCR by clicking on its name. 6) Locate and open the le 2.4_form_element_attribute.txt. This le can be found where you unzipped the class les in Exercise 1.2.

Page 10
7) Copy the entire contents of the le into the HTML Form Element Attribute item - which can be found in the Element region - replacing any and all text that is there.
8) Locate and open the le 2.4_div.txt. This le can be found where you unzipped the class les in Exercise 1.2. 9) Copy the entire contents of the le into the Post Element Text item - which can be found in the Element region - and click Apply Changes.
Finally, we have to add another JavaScript function to the page which will be called when any characters are added or removed from the P2_DESC item. 10) Create a new Region by clicking on the corresponding icon. 11) Select HTML and click Next. 12) Select HTML again and click Next.

Page 11
13) Enter JavaScript - countCharacters for the Title, set the Region Template to No Template, set the Display Point to Before Footer, enter 0 for the Sequence and click Next.
Run your application. Once you enter 225 characters in the Description eld, you should see the warning appear and the text will change to red. If you continue and enter 250 characters, you will get an error message and not be allowed to add any additional text.

Page 12
2.5. Modify conrmDelete Parameters

APEX has a number of built-in JavaScript functions, many of which can also be used in your applications. conrmDelete is used anytime you create a form on a table; APEX will associate it with the Delete button, so that when a user clicks Delete, they will get one last chance to change their mind. We can change the message that is passed to the conrmDelete function, should we want to display something more specic to our users. 1) Edit Page 210 of your application. 2) Edit the Delete button by clicking on its name. 3) In the URL Target - which can be found in the Optional URL Redirect region - replace the string htmldb_delete_message with a new one of your choice. Be sure to enclose your text in single quotes. For example, you could use: Are you sure that you wish to delete this ticket? This operation can not be undone.
4) Scroll to the top of the page and click Apply Changes. Run page 210 and click on the Delete button. Notice that you should now see your custom message in the conrm dialog.

Page 13
2.6. Item Validations

One of the most common uses of JavaScript is to validate items without making a round-trip back to the server. This approach can easily be adapted to APEX by using some of the APEX JavaScript libraries. Instead of submitting the page, we can alter the Apply Changes and Create buttons to rst call a JavaScript function that will validate that each item has a value. Upon successful validation, then and only then will the JavaScript submit the page using the doSubmit APEX JavaScript function. If the user did not provide a value for a eld, we will use the $x_Style JavaScript function to highlight that eld, making it easy for the user to correct it. 1) 2) 3) 4) Edit Page 210 of your application. Edit the Apply Changes button by clicking on its name. In the Optional URL Redirect region, set the Target is a to URL. Locate and open the le 2.6_save.txt. This le can be found where you unzipped the class les in Exercise 1.2. 5) Copy the contents of that le into the URL Target and click Apply Changes.
6) Edit the Create button under the Tickets region by clicking on its name. This should be the rst Create button in the list, as there are two of them. 7) In the Optional URL Redirect region, set the Target is a to URL. 8) Locate and open the le 2.6_create.txt. This le can be found where you unzipped the class les in Exercise 1.2. 9) Copy the contents of that le into the URL Target and click Apply Changes. Next, we have to add the validateItems JavaScript to the page. Well again use an HTML region for this. 10) Create a new Region by clicking on the corresponding icon. 11) Select HTML and click Next. 12) Select HTML again and click Next.

Page 14
13) Enter JavaScript - validateItems for the Title, set the Region Template to No Template, set the Display Point to Before Footer, enter 0 for the Sequence and click Next.
Run your application and attempt to either create or save a ticket without specifying a Subject and/or Description. Notice that not only will you get an alert, but the eld(s) in question will be highlighted pink.

Page 15
2.7. Hide & Show Regions

JavaScript is not limited to just items. We can manipulate the property of anything in the DOM, or on the page. Regions are also something that are just as easily modied controlled with JavaScript. First, lets associate a static ID with the Ticket Details region, so that we can manipulate it with JavaScript. 1) Edit Page 210 of your application. 2) Edit the Ticket Details region by clicking on its name. 3) In the Identication region, enter ticketDetails for the Static ID and click Apply Changes. Please make sure to match the case exactly.
4) 5) 6) 7)
Create a new Button by clicking the corresponding icon. Select Tickets (1) 10 and click Next. Select Create a button in a region position and click Next. Enter TOGGLE_DETAILS for the Button Name, Toggle Details for the Label, set the Action to Redirect to URL without submitting page and click Next.
8) Set the Button Template to Button and click Next.

Page 16
9) Set the Position to Region Template Position #CLOSE#, enter 10 for the Sequence and click Next.
10) Set Target is a to URL. 11) Locate and open the le 2.7_toggle.txt. This le can be found where you unzipped the class les in Exercise 1.2. 12) Copy the contents of that le into the URL Target and click Next.
13) Set the Condition Type to Value of Item in Expression 1 is NOT NULL, enter P210_TICKET_ID in Expression 1 and click Create Button. Run your application and edit any ticket. When you see the tickets information, click on Toggle Details. The Ticket Details region should disappear. Clicking on Toggle Details again should restore the Ticket Details region.

Page 17
3.
A JAX
3.1. Create an AutoAssign Function

Ajax, which stands for Asynchronous JavaScript & XML, has become very popular with the introduction of Web 2.0. Think of Ajax as extending client-server like behavior to HTML applications. In this example, well create an on-demand process that will automatically assign a ticket to the tech with the least amount of tickets assigned to them. First, lets add a link next to the Assigned To item that when clicked, will call the JavaScript function autoAssign. 1) 2) 3) 4) 5) Edit Page 210 of your application. Create a new Item by clicking on the corresponding icon. Select Display Only and click Next. Select Display as Text (does not save state) and click Next. Enter P210_AUTO_ASSIGN for the Item Name, set the Region to Tickets (1) 10 and click Next.
6) Set the Label Template to Optional Label, enter the following text for the Label and click Next: <a href="javascript:autoAssign();">Auto-Assign</a> 7) Click Create Item. The Auto-Assign link is at the bottom of the form. It makes more sense to have it immediately to the right of the Assigned To item. 8) Click on the two triangles icon in the Items region. 9) Using the upwards-pointing icon, move the P210_AUTO_ASSIGN item so that it appears just after the P210_ASSIGNED_TO item.

Page 18
10) Set both the New Line and New Field values to No for P210_AUTO_ASSIGN and click Apply Changes.
Next, well add an HTML region that will house the actual JavaScript function. 11) 12) 13) 14) Create a new Region by clicking on the corresponding icon. Select HTML and click Next. Select HTML again and click Next. Enter JavaScript - autoAssign for the Title, set the Region Template to No Template, set the Display Point to Before Footer and the Sequence to 0 and click Next.
15) Locate and open the le 3.1_javascript.txt. This le can be found where you unzipped the class les in Exercise 1.2. 16) Copy the contents of that le into the Enter HTML Text Region Source and click Create Region. Now that we have the link and JavaScript function, the nal step is to add the Application Process. 17) Edit the Shared Components of your application. 18) In the Logic region click Application Processes. 19) Click Create.

Page 19
20) Enter autoAssign for the Name, set the Point to On Demand: Run this application process when requested by a page process and click Next.
21) Locate and open the le 3.1_process.txt. This le can be found where you unzipped the class les in Exercise 1.2. 22) Copy the contents of that le into the Process Text and click Next.
23) Click Create Process. Run your application and click on the Auto-Assign link, which should be located immediately to the right of the Assigned To item. The value of Assigned To should change to the Tech who has the least amount of tickets assigned to them.

Page 20
3.2. Automatically Set Status to Closed

Using a similar technique as we did in the last exercise, we can add another Ajax call that will automatically set the Status of a ticket to Closed anytime that a Closed Date has been selected. We have to use Ajax here, as we can never be sure what the corresponding STATUS_ID for Closed is, so a quick query of the database using the get_status function will return the proper ID. 1) Edit Page 210 of your application. 2) Edit the item P210_CLOSED_ON by clicking its name. 3) Locate and open the le 3.2_form_element_attribute.txt. This le can be found where you unzipped the class les in Exercise 1.2. 4) Copy the contents of that le into the HTML Form Element Attribute eld - which can be found in the Element region - and click Apply Changes.
Next, well add another HTML region that will house the actual JavaScript function. 5) 6) 7) 8) Create a new Region by clicking on the corresponding icon. Select HTML and click Next. Select HTML again and click Next. Enter JavaScript - setStatusClosed for the Title, set the Region Template to No Template, set the Display Point to Before Footer and the Sequence to 0 and click Next.
9) Locate and open the le 3.2_javascript.txt. This le can be found where you unzipped the class les in Exercise 1.2. 10) Copy the contents of that le into the Enter HTML Text Region Source and click Create Region. Now that we have the link and JavaScript function, the nal step is to add another Application Process.

Page 21
11) 12) 13) 14)
Edit the Shared Components of your application. In the Logic region click Application Processes. Click Create. Enter setStatusClosed for the Name, set the Point to On Demand: Run this application process when requested by a page process and click Next.
15) Locate and open the le 3.2_process.txt. This le can be found where you unzipped the class les in Exercise 1.2. 16) Copy the contents of that le into the Process Text and click Next.
17) Click Create Process. Run your application and edit a ticket whose status is not Closed. Set a closed date with the Date Picker and notice that as soon as you select the date, the status will automatically be changed to Closed.

Page 22
4.
SEC U R ITY
4.1. Session Timeout

APEX 3.2 allows a developer to easily set the session timeout values for both maximum session duration and idle session duration. These can be set on an application basis, so more secure applications can have shorter durations than less secure ones. Well test this out by setting the values to unrealistically low values, so that we can expedite our test cases. 1) 2) 3) 4) Navigate to the Shared Components of your application. In the Application region, click on Denition. Click on the Security tab. In the Session Timeout region, enter the following values: Maximum Session Length in Seconds Session Timeout URL Maximum Session Idle Time in Seconds Idle Timeout URL 5) Click Apply Changes. Next, well add two regions to Page 1 which will inform the user as to why they were logged out; either due to exceeding total session time or exceeding session idle time. 6) 7) 8) 9) 10) Edit Page 1 of your application. Create a new HTML region by clicking on the corresponding icon. Select HTML and click Next. Select HTML again and click Next. Enter Idle Time Exceeded for the Title, set the Region Template to No Template, set the Display Point to After Header and click Next. 20 f?p=&APP_ID.:1::SESSION_TIMEOUT 10 f?p=&APP_ID.:1::IDLE_TIMEOUT

Page 23
11) Locate and open the le 4.1_idle_timeout.txt. This le can be found where you unzipped the class les in Exercise 1.2. 12) Copy the contents of that le into the Enter HTML Text Region Source and click Next.
13) Set the Condition Type to Request = Expression 1 and enter the following for Expression 1: IDLE_TIMEOUT
14) Click Create Region. The next region will be almost identical to the rst, but it will be used the when the session itself is exceeded. 15) 16) 17) 18) 19) 20) 21) 22) Create a new HTML region by clicking on the corresponding icon. Select HTML and click Next. Select HTML again and click Next. Enter Session Time Exceeded for the Title, set the Region Template to No Template, set the Display Point to After Header and click Next. Locate and open the le 4.1_session_timeout.txt. This le can be found where you unzipped the class les in Exercise 1.2. Copy the contents of that le into the Enter HTML Text Region Source and click Next. Set the Condition Type to Request = Expression 1 and enter the following for Expression 1: SESSION_TIMEOUT Click Create Region.

Page 24
All thats left is to test your applications session timeout values. 23) Run your application and click Logout. 24) Simply click around your application, counting off 20 seconds. Once the 20 second maximum session time is exceeded, you should be logged out and the Session Timeout message should be displayed.
25) Login to your application again. This time, do nothing but count to 10 or so. 26) Click on any tab or link. This time, you should be logged out, but the message will note that the session idle time was exceeded.
Before we nish this exercise, lets reset the session timeout parameters to less articial levels. 27) 28) 29) 30) Navigate to the Shared Components of your application. In the Application region, click on Denition. Click on the Security tab. In the Session Timeout region, enter the following values: Maximum Session Length in Seconds Session Timeout URL Maximum Session Idle Time in Seconds Idle Timeout URL 31) Click Apply Changes. 100000

Page 25
4.2. Encrypted Session State

New to APEX 3.2, you can now encrypt item values that are stored in session state. While this wont protect them against an end user, it will keep them protected in the logs and database backups. Since applying this feature is so simple, it should be considered for any sensitive data that is used with APEX. 1) Edit Page 210 of your application. 2) Edit the Tickets region by clicking on its name. 3) Enter the following for the Title, replacing all text that is currently there: Tickets - &P210_SUBJECT. 4) 5) 6) 7) 8) Click Apply Changes. Run your application and edit any existing ticket. Click Apply Changes. This will set the value of P210_SUBJECT in session state. Click on the Session link in the developers toolbar at the bottom of the page. Enter 210 for the Page and click Go. Notice that the value for P210_SUBJECT is visible.
We can also inspect the same values as an APEX Administrator. 9) Click on the Home link in the developers toolbar at the bottom of the page. 10) In the Administration region on the right side of page, click on Monitor Activity.
11) Under Sessions, click Active Sessions. 12) Locate the Session ID that you were using while running your application. It may help to sort by Owner or Created. Once found, click on the Session ID. 13) Notice that in the Session State Item Values report, the item P210_SUBJECT should be present and contain a clear text value, just as it did in the session state window.
Now that we have see the session state two different ways, lets enable session state encryption for P210_SUBJECT. 14) Edit Page 210 of your application. 15) Edit the item P210_SUBJECT by clicking on its name.

Page 26
16) In the Security region, set Store value encrypted in session state to Yes and click Apply Changes.
17) 18) 19) 20)
Run your application and logout. Log back into your application and edit any ticket, then click Apply Changes. Click on the Session link in the developers toolbar at the bottom of the page. Enter 210 for the Page and click Go. Notice that the value for P210_SUBJECT is no longer visible, as it is represented by *****.
We can also check the item via the Administrators reports. 21) 22) 23) 24) Click on the Home link in the developers toolbar at the bottom of the page. In the Administration region on the right side of page, click on Monitor Activity. Under Sessions, click Active Sessions. Locate the Session ID that you were using while running your application. It may help to sort by Owner or Created. Once found, click on the Session ID. 25) Notice that in the Session State Item Values report, the item P210_SUBJECT should be present and contain *****, as the value is now encrypted.
At this point, the value for P210_SUBJECT for all users will be stored in an encrypted format in the database, making it impossible for even an administrator or DBA to view the data.

Page 27
4.3. Save Session State Before Branching

Save Session State Before Branching is another new APEX 3.2 security enhancement. Its goal is to eliminate using the URL to pass parameters from one APEX page to another. This feature will set the corresponding values upon a page submit before the next page is rendered, so there is no change in functionality. Parameters passed through the URL could be manipulated by malicious users or give users an insight to variable names of an application, which they could then use in turn, to exploit a weakness. Dont fall victim to security by obscurity - this feature is intended to mask item names & values, not protect against the manipulation of such. A dedicated, intelligent hacker can still manipulate APEX items even if this feature is enabled. You should consider implementing Session State Protection in addition to Save Session State Before Branching for a more secure solution. Well turn on Save Session State Before Branching for the Next and Previous branches on page 210. 1) Run your application and edit any ticket. 2) Click either the Next or Previous record button. Notice the URL includes reference to P210_TICKET_ID. 3) Edit Page 210 of your application. 4) Edit the rst Before Computation Branch. 5) In the Action region, check save session state before branching and click Apply Changes.
6) 7) 8) 9)
Edit the second Before Computation Branch. In the Action region, check save session state before branching and click Apply Changes. Run your application and edit any ticket. Click either the Next or Previous record button. Notice the URL no longer includes any reference to P210_TICKET_ID.

Page 28
4.4. Autocomplete
Autocomplete is an HTML feature that will remember previous entries that you have made & submitted. Its designed in order to make things more convenient for the end user, with the goal of less typing in mind. However, this feature quickly becomes a liability when sensitive data is not only stored on the client but is easily recalled. In APEX 3.2, we can now easily disable Autocomplete at the page level simply by changing an option. 1) Run Page 210 of your application. 2) Create a new Ticket and remember the value that you used for the Subject. For this example, well enter Windows Update Failed.
3) Create another Ticket and enter part of the previous subject and hit the down arrow key. In our example, well just enter Win. Notice how the previous Subjects that started with Win are displayed. You can press the down arrow, select a previous entry, and hit return to accept it.

Page 29
Next, well disable Autocomplete and try to enter another Subject that starts with win. 4) Edit Page 210 of your application. 5) Edit the Page Attributes. 6) In the Security region, set Form Auto Complete to Off and click Apply Changes.
Lets try to enter Win again and see what happens now that Autocomplete is disabled. 7) Run Page 210 of your application. 8) Create another Ticket and enter part of the previous subject and hit the down arrow key. Notice that this time, you will not see any previous values.

Page 30
4.5. Monitoring APEX Logs

APEX will automatically monitor all login attempts to an application. However, if you are not using the built-in APEX credentials, the result that APEX records is misleading, as it seems that all attempts are successful. If we augment our custom authentication scheme to include calls to APEX_UTIL.SET_AUTHENTICATION _RESULT, we can gather more accurate data as to what the true result of the authentication action is. First, lets generate some false records in the APEX login table. 1) 2) 3) 4) 5) 6) 7) Run your application and log out. Login with an invalid password. Login with a non-existent username, such as FAKE_USER. Click Home in the developers toolbar. Under the Administration region, click on Monitor Activity. In the Login Attempts region, click Login Attempts. Notice that both of our unsuccessful login attempts were recorded as Normal, successful authentication:
Next, lets recreate our authentication function and include calls to the SET_AUTHENTICATION_RESULT API call. 8) 9) 10) 11) 12) 13) 14) 15) 16) 17) 18) 19) 20) 21) Edit any page of your application. Click on the SQL Workshop tab. Click on SQL Commands. Locate and open the le 4.5_function.txt. This le can be found where you unzipped the class les in Exercise 1.2. Copy the contents of that le into the SQL Workshop and click Run. Navigate back to the Application Builder by clicking its tab. Click on your application. Click on the Run icon. Login with an invalid password. Login with a non-existent username, such as FAKE_USER. Click Home in the developers toolbar. Under the Administration region, click on Monitor Activity. In the Login Attempts region, click Login Attempts. Notice that both of our unsuccessful login attempts were recorded properly this time:

Page 31
5.
P E R F O R MA NCE
T U N I N G
5.1. Debug Mode

Debug mode allows you to see the exact steps APEX takes to process and render pages, including how long it take to complete each step. When in development mode, you can turn debug on using the Debug link on the developer tool bar.
5.1.1. Debug Mode Using the Developers Toolbar

1) Run Page 1 of your application. 2) Scroll to the bottom of the page to nd the Developers Toolbar.
3) Click on the Debug link in the developer toolbar 4) The page will refresh and present you with the debug information appropriate to the page you were on. For the purposes of this exercise we assume you were on Page 1 of the Help Desk application.

Page 32
5) 6) 7) 8)
Work your way from top to bottom of the page and read through the debug information. Identify how long it took to render the different sections of the page. Did this page have an ACCEPT section in its debug section? Why or why not? Click on the No Debug link to turn the debug output off.
5.1.2. Debug Mode Using the URL

If youre not already signed on to APEX as a developer, it is possible to turn debug on by altering the URL, so as long as Debug has not been disabled for the application. 1) Run your application and navigate to the Submit a Ticket page in your application using the Actions region on the right had side of the page.
2) The resulting URL will look something like this: http://localhost/apex/f?p=118:2:3233657250736565::NO:2:: 3) Change the NO to a YES, so that your URL now looks like this: http://localhost/apex/f?p=118:2:3233657250736565::YES:2:: Note: Your Session ID will be different than the one above; do not attempt to alter that. 4) With your cursor still in the Location Bar, hit return to re-run the page. This time you should be able to see the Debug information inline with the rest of the page. Again, work your way from top to bottom of the page and read through the debug information. 5) Next, ll in the form with the following information: Subject: Debug Test Description: This is a test of debug mode. Created By: SCOTT

Page 33
6) Click the Create Ticket button. The new ticket will be created and the screen will refresh with debug mode turned off. 7) Return to debug mode using either the Developer Toolbar or by editing the URL. 8) Examine the debug information presented, looking specically for the ACCEPT section, assignment of values, validations, processes and branches. Below is sample debug output from inserting a record into the TICKETS table from Page 2:
0.07: A C C E P T: Request="CREATE" 0.09: Metadata: Fetch application definition and shortcuts 0.09: NLS: wwv_flow.g_flow_language_derived_from=FLOW_PRIMARY_LANGUAGE: wwv_flow.g_browser_language=en-us 0.09: alter session set nls_language="AMERICAN" 0.09: alter session set nls_territory="AMERICA" 0.09: NLS: CSV charset=WE8MSWIN1252 0.09: ...NLS: Set Decimal separator="." 0.09: ...NLS: Set NLS Group separator="," 0.09: ...NLS: Set date format="DD-MON-RR" 0.09: ...Setting session time_zone to -04:00 0.09: Setting NLS_DATE_FORMAT to application date format: DD-MON-YYYY 0.09: ...NLS: Set date format="DD-MON-YYYY" 0.09: ...Determine if user "SSPENDOL" workspace "6934514976401972" can develop application "118" in workspace "6934514976401972" 0.09: Session: OK to reuse builder session for user:nobody 0.10: Fetch session state from database 0.10: ...Check session 3233657250736565 owner 0.10: Setting NLS_DATE_FORMAT to application date format: DD-MON-YYYY 0.10: ...NLS: Set date format="DD-MON-YYYY" 0.10: ...Check for session expiration: 0.10: ...Metadata: Fetch Page, Computation, Process, and Branch 0.10: Session: Fetch session header information 0.10: ...Metadata: Fetch page attributes for application 118, page 2 0.11: ...Validate item page affinity. 0.11: ...Validate hidden_protected items. 0.12: ...Check authorization security schemes 0.12: Session State: Save form items and p_arg_values 0.12: ...Session State: Save Item "P2_TICKET_ID" newValue="" "escape_on_input="N" 0.12: ...Session State: Save Item "P2_SUBJECT" newValue="Debug Mode" "escape_on_input="N" 0.14: ...Session State: Save Item "P2_DESCR" newValue="This is a test of debug mode." "escape_on_input="N" 0.14: ...Session State: Save Item "P2_CREATED_BY" newValue="SCOTT" "escape_on_input="N" 0.14: ...Session State: Save Item "P2_STATUS_ID" newValue="2" "escape_on_input="N" 0.15: Processing point: ON_SUBMIT_BEFORE_COMPUTATION 0.15: Branch point: BEFORE_COMPUTATION 0.15: Computation point: AFTER_SUBMIT 0.15: Tabs: Perform Branching for Tab Requests 0.15: Branch point: BEFORE_VALIDATION 0.15: Perform validations: 0.16: ...Item Not Null Validation: P2_SUBJECT 0.16: ...Item Not Null Validation: P2_CREATED_BY 0.16: ...Item Not Null Validation: P2_DESCR 0.16: Branch point: BEFORE_PROCESSING 0.16: Processing point: AFTER_SUBMIT 0.16: ...Process "Process Row of TICKETS": DML_PROCESS_ROW (AFTER_SUBMIT) #OWNER#:TICKETS:P2_TICKET_ID:TICKET_ID|I 0.23: ...Process "reset page": CLEAR_CACHE_FOR_PAGES (AFTER_SUBMIT) 2 0.23: Nulling cache for application "118" page: 2 0.24: Branch point: AFTER_PROCESSING 0.24: ...Evaluating Branch: AFTER_PROCESSING type: "REDIRECT_URL" button: (No Button Pressed) branch: (Unconditional) 0.24: ...Unconditional branch taken

Page 34
5.2. Timings
To report the time it takes to render a specic region, you can use the #TIMING# substitution variable in the footer of the region. The #TIMING# string will print out the duration that it took to create the respective region at the bottom of the region. This is a useful technique to keep you as a developer in check, as if you deploy this in production, alert users may notice if the time it takes to render a region increases. 1) Edit Page 1 of your application. 2) Edit the Current Open Issues region by clicking on its name. 3) In the Header and Footer region, enter the following in the Region Footer: This report took #TIMING# seconds to render. 4) Scroll to the top of the page and click Apply Changes. 5) Run Page 1 and notice the new timing information at the bottom of the report:

Page 35
5.3. Page & Region Caching

If you have pages or reports/regions that are slow to render but dont need to be 100% up to date, you can use APEXs built-in caching mechanism. When enabled, APEX will cache either a region or page and store it internally. When that page or region is called from a user, if the cache has not expired, APEX will used the cached copy, thus improving performance dramatically. APEX is smart enough to not cache references to Session IDs; it will still dynamically generate them on a per-user basis so that thinks like column links will still work when pages and regions are cached. 1) Edit Page 1 of your application. 2) Edit the Current Open Issues report by clicking on its name. 3) In the Caching region, set Caching to Cached by User, set Timeout Cache After to 1 minute, and click Apply Changes.
4) 5) 6) 7)
Run Page 1 and make a mental note of the number of records. Navigate to the Edit Tickets page, and either delete a ticket or change the subject of a ticket. Quickly navigate back to the Home page, and notice that your changes are not yet visible. Run the Home Page in debug mode; note that the Current Open Issues region is being retrieved from the cache.
8) Wait roughly 1 minute and reload the Home page. At this point, you should see your changes. 9) If you wait another minute and run the page in debug mode, you should see the following:

Page 36
6.
DE V E LO PE R
T O O LS
6.1. Page Locks

Most APEX applications will likely have only one developer, so contention for pages is not an issue. However, at some point, you will need to deal with multiple developers working on the same application at the same time, potentially from different locations. Enter Page Locks. Page Locks allow developers to reserve a page or pages so that only they can make changes to them. Page Locks will also identify who has locked a page, so that a developer can contact the owner of the lock, should they need it released. APEX administrators can also unlock any page, so ensure that your developers are not APEX Administrators, as it would be trivial to circumvent this feature if that were the case.
6.1.1. Create a Second Workspace Developer

To truly test this feature, we need at least two APEX users. Thus, well create a second APEX users and give them only developer privileges. 1) 2) 3) 4) 5) Edit any page of your application. Click on the Home tab. In the Administration region, click on Manage Application Express Users. Click the Create button. Enter lock_demo for the Username, Password and Conrm Password. Enter demo@sumneva.com for the Email Address.
6) In the Developer privileges region, ensure that User is a developer is set to Yes and User is a workspace administrator is set to No.

Page 37
7) In the Account Control region, ensure that Require Change of Password On First Use is set to No and click Create User.
6.1.2. Locking a Page

First, well logout of our workspace and log in as the user we just created. 1) Edit any page of your applicaiton. 2) Logout of your workspace by clicking the Logout link in the upper-right corner of the page.
3) Click the Login link. 4) Login using the credentials that you just created.
5) Navigate to Page 200 of your application. 6) In the upper right hand corner of the Application Builder, click on the Open Lock icon to initiate a page lock.
7) Click on the check box associated with Page 200 to select it as the page you wish to lock.

Page 38
8) Click the Lock Checked button to lock the selected page. 9) APEX will require you to enter a Comment about the page(s) that you are about to lock. Enter a comment and click Lock Page(s).
10) If you edit Page 200 now, the lock icon should be closed; this indicates that this page is locked.
11) Logout of your workspace and log back in as the Workspace Administrator. These are the credentials that were provided to you at the beginning of the class. 12) Edit Page 200 of your application. Notice that the lock icon is closed, as this page is locked by the other developer. If you hover your cursor over the lock, it will display which user owns the lock. Also, notice that all of the create icons are not being displayed. You can still edit components on this page, but no changes will be allowed. 13) Click on the closed lock icon. You should see the following:
6.1.3. Managing Page Locks

Since you are currently logged in as the APEX Administrator, you have the capability to manage and release any page lock within your workspace. 1) Click the Administer Locks link, which can be found in the Tasks region on the right hand side of the page.

Page 39
2) You should now see a report of all locked pages:
3) Click the Edit icon for Page 200. 4) Change the Comment and set Locked By to the user that you are currently logged in as and click Apply Changes.
5) Notice that your changes will be displayed in the Locked Pages report:
Lastly, well remove the lock from Page 200. 6) Click the Edit icon for Page 200. 7) Click the Unlock button. 8) The Locked Pages report should not have any records. Navigate to Page 200 and notice that the lock icon is unlocked and all of the Add icons are visible again.

Page 40
6.2. Page Groups

Page groups allow you to logically group pages in your application. This gives developers a way to view like pages together even though they may not be numbered consecutively. It also helps organize your applications and split the responsibilities among multiple developers. Well start out by creating a few page groups in our application. 1) Navigate to the home page of your application. The quickest way to do this is to click on Application XXX in the breadcrumb region, where XXX represents your Application ID. 2) In the Tasks region on the right hand side, click the Page Groups link. 3) Click the Create button. 4) Enter Administration for the Name and click Create.
5) Repeat steps 3 & 4 to create the following Page Groups: Public Pages Reporting Special Pages Ticket Management Upon completion you should have 5 groups:

Page 41
Next, well assign pages to each of these groups. 6) Under the Tasks region, click on Manage Assignments. 7) Using the form on the Manage Page Group Assignments page, make the following Assignments: Page Group Administration Public Pages Reporting Special Pages Ticket Management Assigned Pages 600, 610 & 620 1, 2 & 3 300, 400 & 500 0 & 101 200, 210, 220 & 230
Page group assignments can be made by selecting a Page Group, checking the corresponding pages and then clicking Assign Checked. The resulting report should look like this:

Page 42
We can use these new groups to view pages in our application in a number of different ways. 8) Navigate to your application home page. 9) Set Group to Public Pages and click Go.
We now see only those pages that are associated with the page group Public Pages. 10) Next, set View to By Group and click Go again.
This time, we see the page groups as folders. The number in parenthesis denotes the number of pages within that group.

Page 43
6.3. Build Options

Build Options are labels that you can dene as shared components. A build option can be set to either included or excluded. Once associated with an APEX component, that component will either render or not, based on the build options status. In addition to setting the status of a build option, the status when an application is exported can also be dened. Thus, you may have a build option called Development that has a status of Include but will change to Exclude when an application is exported. Well create a build option that does just that. 1) 2) 3) 4) Edit the Shared Components of your application. In the Logic region, click on Build Options. Click Create. Enter Development for the Build Option, set the Status to Include, set the Default on Export to Exclude and click Create.
Next, well associate this build option to the Interactive Report on Page 300. 5) Edit Page 300 of your application. 6) Edit the Page Attributes. 7) In the Conguration region, set the Build Option to Development and click Apply Changes.
Notice that APEX will automatically create the opposite build option for each build option that you create. 8) Next, edit the Analysis tab, which can be found in the Shared Components region. 9) In the Conguration region, set the Build Option to Development and click Apply Changes.

Page 44
At this point, we can copy this application to see the Build Option take effect. Exporting and reimporting the application would also have the same result. 10) Navigate to the home page of your application. The quickest way to do this is to click on Application XXX in the breadcrumb region, where XXX represents your Application ID. 11) In the Tasks region on the right side of the page, click Copy Application. 12) Enter Help Desk Copy for the New Application Name and click Next.
13) Click Copy Application. When the copy is complete, run the new application. After you sign on, you should notice that the Analysis tab is not rendering. You can, however, edit Page 300, as it is still a part of your application.

Page 45
7.
U SER
INTERFACE
7.1. Import the Theme Starter Application

Creating a great-looking Oracle APEX application is a lot easier than you think! In fact, you dont have to know anything at all about HTML, CSS, GIF or JPEG - all you really need to know is where to put what. For this exercise, well start with a fairly simple application with only a few of pages. You can enhance this application once the core templates are created. 1) Click on the Application Builder tab. 2) Click Import. 3) Click Browse and locate and select the le 7.1_apex.sql, which can be found where you extracted the class les in Section 1.1. 4) Click Next. 5) Click Next again. 6) Select your Parsing Schema, set the Build Status to Run and Build Application, set Install As Application to Auto Assign New Application ID and click Install.
7) Make sure that Install Supporting Objects is set to Yes and click Next. 8) Click Install. At this point, you should see the following screen:

Page 46
7.2. Create a New Theme

Once you have installed the theme starter application, create a new Theme within that application. 1) Edit the theme starter applications Shared Components. 2) Click Themes. 3) Click Create. 4) Select From Scratch and click Next. 5) Enter a Theme Number and Name and click Create.
You will now have two themes in your application - Red and Extreme Theme. Next, well create a new Page Template. 1) Edit the starter applications Shared Components. 2) Click Templates. 3) Click Create. 4) Select Page and click Next. 5) Select From Scratch and click Next. 6) Enter Main Page for the Name, select the Theme that you just created, and set the Template Class to One Level Tabs and click Create.
Next, well switch themes. This will set the starter application to use the new Theme that you just created.

Page 47
1) Edit the starter applications Shared Components. 2) Click Themes. 3) Click Switch Theme. 4) Select Extreme Theme and click Next. 5) Conrm that there are no errors and click Next. 6) Click Switch Theme. Since our Page Template is completely blank, running the application at this point will produce a blank screen. This is expected behavior.

Page 48
7.3. Set Up a Custom Directory on the HTTP Server

Its recommended that all images and CSS les that support an APEX template be stored in the lesystem. This will greatly increase the performance of your site, as your browser will cache local copies of the images and CSS les the rst time, thus eliminating the need to download them each page view. NOTE: You should skip this section if you are using a workspace hosted by AppsHosting or if advised by your instructor. 1) On the HTTP server, create a custom directory. It can be created anywhere and called anything you like. 2) Within that custom directory, create another directory called extreme. This will allows us to isolate the media les for this exercise. 3) Modify the httpd.conf le and add an alias called c which points to the custom directory. You may have to get the help of the systems administrator, as the HTTP server will need to be bounced after this step. 4) Copy the images directory and its contents and the le style.css from the local Template Assets directory that you unzipped to the extreme directory within your custom directory on the HTTP server. 5) To verify this step was done correctly, enter the following URL into your browser, substituting in your server name: http://servername/c/extreme/images/logo.gif If everything is set up correctly, you should see the following image:

Page 49
7.4. Create a Page Template

One of the best approaches to get started is to simply paste the entire static template into the APEX Page Template and then work backwards, replacing static content with links to dynamic content.
7.4.1. Create a Page Template

1) Edit the starter applications Shared Components. 2) Click Templates. 3) Set the report lter to Extreme Theme, so that you only see the Main Page template. 4) Edit the Main Page template. 5) Enter the following line after the </head> tag and before the <body> tag in the Header:
<link href="/c/extreme/style.css" rel="stylesheet" type="text/css" media="screen" />
6) Open the le body.html from the Template Assets directory, select all of it, and paste it into the Body region, replacing whats there. 7) Click Apply Changes. 8) Run your application. You should see something similar to the following:
At this point, you can see that the template is working within APEX. However, it is 100% static, and clicking on any of the tabs will do nothing, since all of the content is currently coming from the template itself.

Page 50
7.4.2. Create Tab Sub-Templates

Well start to make our template APEX-friendly by rst converting the static tabs into dynamic ones. 1) Edit the starter applications Shared Components. 2) Click Templates 3) Click Main Page. 4) Under the Denition section, locate and select the following text in the Body region: <div id="menu"> <ul> <li id="menuRight"> </li> <li><a href="#">contact us</a></li> <li class="menuBr"> </li> <li><a href="#">services</a></li> <li class="menuBr"> </li> <li><a href="#">products</a></li> <li class="menuBr"> </li> <li><a href="#">about us</a></li> <li class="menuBr"> </li> <li><a id="active" href="#">home</a></li> <li id="menuLeft"> </li> </ul> </div>
5) Replace the entire selection with the following text:
<div id="menu"> <ul>#TAB_CELLS#</ul> </div>
The #TAB_CELLS# string in the above template will be replaced with the actual standard tabs that are dened in your application. Next, well dene the Standard Tabs sub-templates. There are two templates - one for the current tab, and one for the non-current tabs. 6) Scroll down to the Standard Tab Attributes region and paste the following text into the Current Tab region: <li><a id="active" href="#TAB_LINK#">#TAB_LABEL#</a></li>

Page 51
7) Paste the following into the Non Current Standard Tab region and then click Apply Changes.
<li><a href="#TAB_LINK#">#TAB_LABEL#</a></li>
If you run your application now, youll notice that as you click on each tab, you will end up on the corresponding page. Also, the current tab will change to the corresponding tab as you click on it.

Page 52
7.4.3. Create Region Positions

Next, well remove all of the static content from the template and replace it with two APEX region positions - #BOX_BODY# and #REGION_POSITION_01#. We can use these region positions in the Application Builder when laying out the regions on a page. 8) Edit the Main Page template again. 9) Under the Denition section, locate and select the following text in the Body region: <div id="left"> <h3 class="firsth3">Donec laoreet</h3> <ul> <li><a href="#">Scelerisque nisl</a></li> <li><a href="#">Class aptent</a></li> <li><a href="#">Taciti sociosqu</a></li> <li><a href="#">Ad litora torquent</a></li> <li><a href="#">Per conubia nostra</a></li> <li><a href="#">Praesent luctus</a></li> <li><a href="#">Nulla et neque</a></li> </ul> <h3>Proin suscipits</h3> <ul> <li><a href="#">Arcu quis erat</a></li> <li><a href="#">Praesent mollis</a></li> <li><a href="#">Praesent interdum</a></li> <li><a href="#">Suspendisse potenti</a></li> <li><a href="#">Morbi bibendum</a></li> <li><a href="#">Nulla facilisi</a></li> </ul> <h3>Sed interdum</h3> <ul> <li><a href="#">Arcu vitae dolor</a></li> <li><a href="#">Imperdiet vehicula</a></li> <li><a href="#">Nulla sit amet libero</a></li> <li><a href="#">Praesent luctus</a></li> <li><a href="#">Nulla et neque</a></li> <li><a href="#">Proin lobortisue</a></li> </ul> </div>
<div id="left">#REGION_POSITION_01#</div>

Page 53
11) Next, locate and select the following text in the Body region: <div id="right"> <div class="box"> <h3 class="firsth3">Terms of use</h3> <div class="boxleft1"><img src="/c/extreme/images/sample.jpg" width="370" height="217" alt="" /></div> <div class="boxright1"> <p>#BOX_BODY#The template is released under the <a href="http://creativecommons.org/licenses/by/2.5/" target="_blank">Creative Commons Attribution 2.5</a> license. This means it can be used for both private and commercial purposes, edited freely or redistributed as long as you keep the link back to Alpha Studio. The link, however, can be moved to any other place of the site.</p> <p>Do not use the template in connection with sex, violence, discrimination and for other immoral or illegal purposes.</p> </div> <div class="clearing"> </div> </div> <div class="box"> <div class="boxleft2"> <h3>Lorem ipsum</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla hendrerit lacus at metus. Maecenas venenatis rhoncus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p> <p>Proin lobortis nisi nec nisi. Morbi mattis fermentum lectus. Nam vestibulum arcu vulputate ante. Maecenas rutrum dui nec quam.</p> </div> <div class="boxright2"> <h3>Cum sociis natoque</h3> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean rutrum tortor a purus. Quisque convallis nisl ac augue. Nulla aliquam dui. Etiam convallis enim tincidunt erat dapibus tincidunt.</p> <p>Maecenas venenatis rhoncus nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p> </div> <div class="clearing"> </div> </div> </div>

Page 54
<div id="right">#BOX_BODY#</div>
13) Click Apply Changes. Your page template now has two xed region positions that we can associate regions with via the Application Builder. Running your application now will yield something similar to this, as you do not yet have any content dened:

Page 55
7.5. Create Region Templates

Now that weve removed all of the static content, well start to build it back up again, but this time, well use APEX templates so that we can add any content that we like. Well start with the Region Template that will hold the lists on the left side of the site. 1) Edit the starter applications Shared Components. 2) Click Templates 3) Click Create. 4) Select Region and click Next. 5) Select From Scratch and click Next. 6) Enter List Region for the Title, set the Theme to Extreme Theme, set the Template Class to Sidebar Region and click Create.
7) Edit the List Region template that was just created. 8) Replace all of the text in the Template region with the following and click Apply Changes:
<h3>#TITLE#</h3>#BODY#
Next, well create a region template that can be used for any type of content. 1) Edit the starter applications Shared Components. 2) Click Templates 3) Click Create. 4) Select Region and click Next. 5) Select From Scratch and click Next.

Page 56
6) Enter Narrow Content Region for the Title, set the Theme to Extreme Theme, set the Template Class to Custom 1 and click Create.
7) Edit the Narrow Content Region template that was just created. 8) Replace all of the text in the Template region with the following and click Apply Changes:
<div class="boxleft2"> <h3>#TITLE#</h3> <p>#BODY#</p> </div>

Page 57
7.6. Create List Templates

Next, well create a custom List Template for the lists on the left side of the page. 1) Edit the starter applications Shared Components. 2) Click Templates 3) Click Create. 4) Select List and click Next. 5) Select From Scratch and click Next. 6) Enter List for the Name, set the Theme to Extreme Theme and set the Theme Class to Vertical Unordered List with Bullets and click Create. 7) Edit the List template. 8) Under the Before List Entry region, enter the following for the List Template Before Rows: <ul>
9) Under the Template Denition region, enter the following for both List Template Current and List Template Noncurrent, replacing any existing text:
<li><a href="#LINK#">#TEXT#</a></li>
10) Under the After List Entry region, enter the following for the List Template After Rows:
</ul>
11) Click Apply Changes.

Page 58
7.7. Create Regions

At this point, you can create content regions (reports, charts, static HTML) and associate the newly created templates with them. For example: if we create two static HTML regions and put the rst one in Page Template Body 3, Column 1 and the second on in Page Template Body 3, Column 2, the results are similar to this:
The two regions are quite close to one another. We can add a little space by altering a Page Template Attribute called Region Table. 1) Edit the starter applications Shared Components. 2) Click Templates 3) Edit the Main Page template. 4) Under the region Multi Column Region Table Attributes, enter the following for the Region Table attributes and click Apply Changes:
cellspacing="20"
Re-run your application, and notice that there is more white space surrounding the two regions:
Finally, well create a new list based on a pre-congured list in your application.

Page 59
1) Edit Page 1 of your application. 2) Create a new Region by clicking on the + icon. 3) Select List and click Next. 4) Enter Cities for the Title, set the Region Template to List Region, set the Display Point to Page Template Region Position 1 and click Next.
5) Set the List to Cities and click Create List Region. Re-run your application, and notice that the list in the upper-left looks similar to the original static lists.
At this point, you have the beginnings of a custom APEX theme - all without having to write a single line of HTML or edit a single image. These steps can be applied to almost any static HTML template that you would like to use in APEX. Keep in mind that in order to make your APEX custom theme complete functional, you will need to create additional template types - such as report, label, button and breadcrumb. These can be created using similar techniques discussed in this document.

Page 60

Apex Advanced Tutorials

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Apex Advanced Tutorials

Diunggah oleh

Hak Cipta:

Format Tersedia

Introduction to Oracle APEX II

Version 3.2 Workbook

Introduction to Oracle APEX II Workbook - Version 3.2

Copyright 2009-2010 Sumneva

Introduction to Oracle APEX II Workbook - Version 3.2

Comments & Questions

Copyright 2009-2010 Sumneva

Introduction to Oracle APEX II Workbook - Version 3.2

1.1. Download & Unzip Class Files

1.2. Login to Your Workspace

1.3. Import the Starter Application

Copyright 2009-2010 Sumneva

Introduction to Oracle APEX II Workbook - Version 3.2

Copyright 2009-2010 Sumneva

Introduction to Oracle APEX II Workbook - Version 3.2

2.1. onload Events: Display an Alert

Copyright 2009-2010 Sumneva

Introduction to Oracle APEX II Workbook - Version 3.2

2.2. onblur Events: Change Case to Upper

Copyright 2009-2010 Sumneva

Introduction to Oracle APEX II Workbook - Version 3.2

2.3. onblur Events: Change Background Color

Copyright 2009-2010 Sumneva

Introduction to Oracle APEX II Workbook - Version 3.2

Copyright 2009-2010 Sumneva

Introduction to Oracle APEX II Workbook - Version 3.2

2.4. onkeypress Events: Character Counter & Hide/Show

Copyright 2009-2010 Sumneva

Introduction to Oracle APEX II Workbook - Version 3.2

Copyright 2009-2010 Sumneva

Introduction to Oracle APEX II Workbook - Version 3.2

Copyright 2009-2010 Sumneva

Introduction to Oracle APEX II Workbook - Version 3.2

2.5. Modify conrmDelete Parameters

Copyright 2009-2010 Sumneva

Introduction to Oracle APEX II Workbook - Version 3.2

2.6. Item Validations

Copyright 2009-2010 Sumneva

Introduction to Oracle APEX II Workbook - Version 3.2

Copyright 2009-2010 Sumneva

Introduction to Oracle APEX II Workbook - Version 3.2

2.7. Hide & Show Regions

8) Set the Button Template to Button and click Next.

Copyright 2009-2010 Sumneva

Introduction to Oracle APEX II Workbook - Version 3.2

Copyright 2009-2010 Sumneva

Introduction to Oracle APEX II Workbook - Version 3.2

3.1. Create an AutoAssign Function

Copyright 2009-2010 Sumneva

Introduction to Oracle APEX II Workbook - Version 3.2

Copyright 2009-2010 Sumneva

Introduction to Oracle APEX II Workbook - Version 3.2

Copyright 2009-2010 Sumneva

Introduction to Oracle APEX II Workbook - Version 3.2

3.2. Automatically Set Status to Closed

Introduction to Oracle APEX II Workbook - Version 3.2

11) 12) 13) 14)

Copyright 2009-2010 Sumneva

Introduction to Oracle APEX II Workbook - Version 3.2

4.1. Session Timeout

Copyright 2009-2010 Sumneva

Introduction to Oracle APEX II Workbook - Version 3.2

Copyright 2009-2010 Sumneva