APEX ADVANCED TUTORIALS

Introduction toOracle APEX IIVersion 3.2 Workbook

Table of Contents

1. ................................................................................................................................................................Installation! 41.1. .................................................................................................................Download & Unzip Class Files! 41.2. ...........................................................................................................................Login to Your Workspace! 41.3. ..................................................................................................................Import the Starter Application! 4

2. ....................................................................................................................................................JavaScript & Ajax! 62.1. ...............................................................................................................onload Events: Display an Alert! 62.2. ....................................................................................................onblur Events: Change Case to Upper! 72.3. .............................................................................................onblur Events: Change Background Color! 82.4. .......................................................................onkeypress Events: Character Counter & Hide/Show ! 102.5. .........................................................................................................Modify confirmDelete Parameters! 132.6. ........................................................................................................................................Item Validations! 142.7. ...............................................................................................................................Hide & Show Regions! 16

3. ...........................................................................................................................................................................Ajax! 183.1. ..............................................................................................................Create an AutoAssign Function! 183.2. .........................................................................................................Automatically Set Status to Closed! 21

4. ....................................................................................................................................................................Security! 234.1. .........................................................................................................................................Session Timeout! 234.2. ............................................................................................................................Encrypted Session State! 264.3. .......................................................................................................Save Session State Before Branching! 284.4. .............................................................................................................................................Autocomplete! 294.5. ............................................................................................................................Monitoring APEX Logs! 31

5. .............................................................................................................................................Performance Tuning ! 325.1. ...............................................................................................................................................Debug Mode! 325.2. ........................................................................................................................................................Timings! 355.3. ............................................................................................................................Page & Region Caching! 36

6. .....................................................................................................................................................Developer Tools! 376.1. ..................................................................................................................................................Page Locks! 376.2. ...............................................................................................................................................Page Groups! 416.3. .............................................................................................................................................Build Options! 44

7. .........................................................................................................................................................User Interface! 467.1. ...................................................................................................Import the Theme Starter Application! 467.2. .................................................................................................................................Create a New Theme! 477.3. ..................................................................................Set Up a Custom Directory on the HTTP Server! 497.4. ............................................................................................................................Create a Page Template! 507.5. ..........................................................................................................................Create Region Templates! 567.6. ................................................................................................................................Create List Templates! 587.7. ...........................................................................................................................................Create Regions! 59

Introduction to Oracle APEX II Workbook - Version 3.2

Copyright © 2009-2010 Sumneva Page 2

ConventionsThe following typeset conventions are used throughout this document:

Plain TextPlain 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 field 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 UnderlineBold 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 & QuestionsAny comments or questions on this material should be directed to:

[email protected](703) 879-4615

Copyright InformationThis document is Copyright © 2009-2010, by Sumneva. None of it in part or in whole may be reproduced without prior written consent from Sumneva.



mailto:[email protected]?subject=

mailto:[email protected]?subject=

1. I N S T A L L A T I O N

1.1. Download & Unzip Class FilesTo make things easier, most code snippets can simply be copied & pasted from a set of text files. Before we begin, you’ll need to download and expand the ZIP file that contains these files. In some cases, the files may already be on your workstation.

1) Open a new browser window.2) Navigate to the following URL to download the class files:

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 WorkspaceAll 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 ApplicationIf 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 file 1.3_apex.sql, which can be found where you

extracted the class files 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:

If there is any warning or error message present, please notify your instructor.

Your application should have four users:

Username Password Privilege

Scott sumneva Administrator

Shannon sumneva Edit

Isabella sumneva Edit

Owen sumneva 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.



2. J A V A S C R I P T & A J A X

2.1. onload Events: Display an AlertWhen a page loads in APEX or any other HTML-based technology, we can trap that event in JavaScript and execute some code. It’s 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 fields 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 file 2.1_javascript.txt. This file can be found where you unzipped the class files in Exercise 1.2.

5) Copy the entire content of the file 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.



2.2. onblur Events: Change Case to UpperWe can use JavaScript to enhance our applications in a number of basic ways. One example is something that you’ve 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 field 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 file 2.2_javascript.txt. This file can be found where you unzipped

the class files in Exercise 1.2.4) Copy the contents of that file 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 field and hit the tab key. Notice that the entire string should now be in uppercase.



2.3. onblur Events: Change Background ColorIn addition to changing the text within an item, we can also alter an item’s properties with JavaScript. This time, we’ll 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 it’s still null after it loses the focus, it will change the color of the field to pink, denoting to the user that a value is still required. If there is a value in the field, 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 file 2.3_javascript_item.txt. This file can be found where you

unzipped the class files in Exercise 1.2.4) Copy the contents of that file 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 file 2.3_javascript_item_created_by.txt. This file can be

found where you unzipped the class files 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, we’ll 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.



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 file 2.3_javascript_function.txt. This file can be found where you unzipped the class files in Exercise 1.2.

16) Copy the contents of that file into the Enter HTML Text Region Source and click Create Region.

Run your application and tab through each field, leaving them all blank. You should notice that as you leave a blank field, it immediately turns pink. If you go back and enter any text in a pink field and then leave it, it will return to its normal white background color.



2.4. onkeypress Events: Character Counter & Hide/ShowIts 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, there’s little that we can’t 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 pre-canned 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 file 2.4_javascript_body.txt. This file can be found where you unzipped the class files in Exercise 1.2.

4) Copy the entire content of the file into the Page HTML Body Attribute region, replacing all text that is there, and click Apply Changes.

Now that we’ve modified the onload JavaScript, let’s 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 file 2.4_form_element_attribute.txt. This file can be found

where you unzipped the class files in Exercise 1.2.



7) Copy the entire contents of the file 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 file 2.4_div.txt. This file can be found where you unzipped the class files in Exercise 1.2.

9) Copy the entire contents of the file 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.




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 field, 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.



2.5. Modify confirmDelete ParametersAPEX has a number of built-in JavaScript functions, many of which can also be used in your applications. confirmDelete 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 confirmDelete function, should we want to display something more specific 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 confirm dialog.



2.6. Item ValidationsOne 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 first 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 field, we will use the $x_Style JavaScript function to highlight that field, making it easy for the user to correct it.

1) Edit Page 210 of your application.2) Edit the Apply Changes button by clicking on its name.3) In the Optional URL Redirect region, set the Target is a to URL. 4) Locate and open the file 2.6_save.txt. This file can be found where you unzipped the

class files in Exercise 1.2.5) Copy the contents of that file 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 first 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 file 2.6_create.txt. This file can be found where you unzipped the

class files in Exercise 1.2.9) Copy the contents of that file into the URL Target and click Apply Changes.

Next, we have to add the validateItems JavaScript to the page. We’ll again use an HTML region for this.




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 field(s) in question will be highlighted pink.



2.7. Hide & Show RegionsJavaScript 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 modified controlled with JavaScript.

First, let’s 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 Identification region, enter ticketDetails for the Static ID and click Apply

Changes. Please make sure to match the case exactly.

4) Create a new Button by clicking the corresponding icon.5) Select Tickets (1) 10 and click Next.6) Select Create a button in a region position and click Next.7) 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.



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 file 2.7_toggle.txt. This file can be found where you unzipped the

class files in Exercise 1.2.12) Copy the contents of that file 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 ticket’s information, click on Toggle Details. The Ticket Details region should disappear. Clicking on Toggle Details again should restore the Ticket Details region.



3. A J A X

3.1. Create an AutoAssign FunctionAjax, 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, we’ll create an on-demand process that will automatically assign a ticket to the tech with the least amount of tickets assigned to them.

First, let’s add a link next to the Assigned To item that when clicked, will call the JavaScript function autoAssign.

1) Edit Page 210 of your application.2) Create a new Item by clicking on the corresponding icon.3) Select Display Only and click Next.4) Select Display as Text (does not save state) and click Next.5) 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.



10) Set both the New Line and New Field values to No for P210_AUTO_ASSIGN and click Apply Changes.

Next, we’ll add an HTML region that will house the actual JavaScript function.

11) Create a new Region by clicking on the corresponding icon.12) Select HTML and click Next.13) Select HTML again and click Next.14) 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.



Now that we have the link and JavaScript function, the final 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.



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 file 3.1_process.txt. This file can be found where you unzipped the class files in Exercise 1.2.

22) Copy the contents of that file 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.



3.2. Automatically Set Status to ClosedUsing 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 file 3.2_form_element_attribute.txt. This file can be found

where you unzipped the class files in Exercise 1.2.4) Copy the contents of that file into the HTML Form Element Attribute field - which can be

found in the Element region - and click Apply Changes.

Next, we’ll add another HTML region that will house the actual JavaScript function.

5) Create a new Region by clicking on the corresponding icon.6) Select HTML and click Next.7) Select HTML again and click Next.8) 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.



Now that we have the link and JavaScript function, the final step is to add another Application Process.



11) Edit the Shared Components of your application.12) In the Logic region click Application Processes.13) Click Create.14) 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 file 3.2_process.txt. This file can be found where you unzipped the class files in Exercise 1.2.

16) Copy the contents of that file 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.



4. S E C U R I T Y

4.1. Session TimeoutAPEX 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.

We’ll test this out by setting the values to unrealistically low values, so that we can expedite our test cases.

1) Navigate to the Shared Components of your application.2) In the Application region, click on Definition.3) Click on the Security tab.4) In the Session Timeout region, enter the following values:

Maximum Session Length in Seconds 20

Session Timeout URL f?p=&APP_ID.:1::SESSION_TIMEOUT

Maximum Session Idle Time in Seconds 10

Idle Timeout URL f?p=&APP_ID.:1::IDLE_TIMEOUT


Next, we’ll 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) Edit Page 1 of your application.7) Create a new HTML region by clicking on the corresponding icon.8) Select HTML and click Next.9) Select HTML again and click Next.10) Enter Idle Time Exceeded for the Title, set the Region Template to No Template, set the

Display Point to After Header and click Next.



11) Locate and open the file 4.1_idle_timeout.txt. This file can be found where you unzipped the class files in Exercise 1.2.

12) Copy the contents of that file 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 first, but it will be used the when the session itself is exceeded.

15) Create a new HTML region by clicking on the corresponding icon.16) Select HTML and click Next.17) Select HTML again and click Next.18) Enter Session Time Exceeded for the Title, set the Region Template to No Template, set

the Display Point to After Header and click Next.19) Locate and open the file 4.1_session_timeout.txt. This file can be found where you

unzipped the class files in Exercise 1.2.20) Copy the contents of that file into the Enter HTML Text Region Source and click Next.21) Set the Condition Type to Request = Expression 1 and enter the following for Expression 1:

SESSION_TIMEOUT22) Click Create Region.



All that’s left is to test your application’s 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 finish this exercise, let’s reset the session timeout parameters to less artificial levels.

27) Navigate to the Shared Components of your application.28) In the Application region, click on Definition.29) Click on the Security tab.30) In the Session Timeout region, enter the following values:

Maximum Session Length in Seconds 100000

Session Timeout URL

Maximum Session Idle Time in Seconds

Idle Timeout URL




4.2. Encrypted Session StateNew to APEX 3.2, you can now encrypt item values that are stored in session state. While this won’t 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) Click Apply Changes.5) Run your application and edit any existing ticket.6) Click Apply Changes. This will set the value of P210_SUBJECT in session state.7) Click on the Session link in the developers toolbar at the bottom of the page.8) 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, let’s 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.



16) In the Security region, set Store value encrypted in session state to Yes and click Apply Changes.

17) Run your application and logout.18) Log back into your application and edit any ticket, then click Apply Changes.19) Click on the Session link in the developers toolbar at the bottom of the page.20) 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 Administrator’s reports.

21) Click on the Home link in the developers toolbar at the bottom of the page.22) In the Administration region on the right side of page, click on Monitor Activity.23) Under Sessions, click Active Sessions.24) 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.



4.3. Save Session State Before BranchingSave 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.

Don’t 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.

We’ll 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 first Before Computation Branch.5) In the Action region, check save session state before branching and click Apply Changes.

6) Edit the second Before Computation Branch.7) In the Action region, check save session state before branching and click Apply Changes.8) Run your application and edit any ticket.9) Click either the Next or Previous record button. Notice the URL no longer includes any

reference to P210_TICKET_ID.



4.4. AutocompleteAutocomplete 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,

we’ll enter “Windows Update Failed”.

3) Create another Ticket and enter part of the previous subject and hit the down arrow key. In our example, we’ll 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.



Next, we’ll 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.

Let’s 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.



4.5. Monitoring APEX LogsAPEX 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, let’s generate some false records in the APEX login table.

1) Run your application and log out.2) Login with an invalid password.3) Login with a non-existent username, such as FAKE_USER.4) Click Home in the developers toolbar.5) Under the Administration region, click on Monitor Activity.6) In the Login Attempts region, click Login Attempts.7) Notice that both of our unsuccessful login attempts were recorded as Normal, successful

authentication:

Next, let’s recreate our authentication function and include calls to the SET_AUTHENTICATION_RESULT API call.

8) Edit any page of your application.9) Click on the SQL Workshop tab.10) Click on SQL Commands.11) Locate and open the file 4.5_function.txt. This file can be found where you unzipped

the class files in Exercise 1.2.12) Copy the contents of that file into the SQL Workshop and click Run.13) Navigate back to the Application Builder by clicking its tab.14) Click on your application.15) Click on the Run icon.16) Login with an invalid password.17) Login with a non-existent username, such as FAKE_USER.18) Click Home in the developers toolbar.19) Under the Administration region, click on Monitor Activity.20) In the Login Attempts region, click Login Attempts.21) Notice that both of our unsuccessful login attempts were recorded properly this time:



5. P E R F O R M A N C E T U N I N G

5.1. Debug ModeDebug 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 Toolbar1) Run Page 1 of your application.2) Scroll to the bottom of the page to find the Developers Toolbar.

3) Click on the Debug link in the developer toolbar4) 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.



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

5.1.2. Debug Mode Using the URLIf you’re 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, fill in the form with the following information:

Subject: Debug TestDescription: This is a test of debug mode.Created By: SCOTT



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 specifically 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 shortcuts0.09: NLS: wwv_flow.g_flow_language_derived_from=FLOW_PRIMARY_LANGUAGE: wwv_flow.g_browser_language=en-us0.09: alter session set nls_language="AMERICAN"0.09: alter session set nls_territory="AMERICA"0.09: NLS: CSV charset=WE8MSWIN12520.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:000.09: Setting NLS_DATE_FORMAT to application date format: DD-MON-YYYY0.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:nobody0.10: Fetch session state from database0.10: ...Check session 3233657250736565 owner0.10: Setting NLS_DATE_FORMAT to application date format: DD-MON-YYYY0.10: ...NLS: Set date format="DD-MON-YYYY"0.10: ...Check for session expiration:0.10: ...Metadata: Fetch Page, Computation, Process, and Branch0.10: Session: Fetch session header information0.10: ...Metadata: Fetch page attributes for application 118, page 20.11: ...Validate item page affinity.0.11: ...Validate hidden_protected items.0.12: ...Check authorization security schemes0.12: Session State: Save form items and p_arg_values0.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_COMPUTATION0.15: Branch point: BEFORE_COMPUTATION0.15: Computation point: AFTER_SUBMIT0.15: Tabs: Perform Branching for Tab Requests0.15: Branch point: BEFORE_VALIDATION0.15: Perform validations:0.16: ...Item Not Null Validation: P2_SUBJECT0.16: ...Item Not Null Validation: P2_CREATED_BY0.16: ...Item Not Null Validation: P2_DESCR0.16: Branch point: BEFORE_PROCESSING0.16: Processing point: AFTER_SUBMIT0.16: ...Process "Process Row of TICKETS": DML_PROCESS_ROW (AFTER_SUBMIT) #OWNER#:TICKETS:P2_TICKET_ID:TICKET_ID|I0.23: ...Process "reset page": CLEAR_CACHE_FOR_PAGES (AFTER_SUBMIT) 20.23: Nulling cache for application "118" page: 20.24: Branch point: AFTER_PROCESSING0.24: ...Evaluating Branch: AFTER_PROCESSING type: "REDIRECT_URL" button: (No Button Pressed) branch: (Unconditional)0.24: ...Unconditional branch taken



5.2. TimingsTo report the time it takes to render a specific 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:



5.3. Page & Region CachingIf you have pages or reports/regions that are slow to render but don’t need to be 100% up to date, you can use APEX’s 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) Run Page 1 and make a mental note of the number of records.5) Navigate to the Edit Tickets page, and either delete a ticket or change the subject of a ticket. 6) Quickly navigate back to the Home page, and notice that your changes are not yet visible.7) 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:



6. D E V E L O P E R T O O L S

6.1. Page LocksMost 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 DeveloperTo truly test this feature, we need at least two APEX users. Thus, we’ll create a second APEX users and give them only developer privileges.

1) Edit any page of your application.2) Click on the Home tab.3) In the Administration region, click on Manage Application Express Users.4) Click the Create button.5) Enter lock_demo for the Username, Password and Confirm Password. Enter

[email protected] 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.



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, we’ll 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.



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.



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, we’ll 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.



6.2. Page GroupsPage 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.

We’ll 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 PagesReportingSpecial PagesTicket Management

Upon completion you should have 5 groups:



Next, we’ll 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 Assigned Pages

Administration 600, 610 & 620

Public Pages 1, 2 & 3

Reporting 300, 400 & 500

Special Pages 0 & 101

Ticket Management 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:



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.



6.3. Build OptionsBuild Options are “labels” that you can define 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 option’s status.

In addition to setting the status of a build option, the status when an application is exported can also be defined. 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. We’ll create a build option that does just that.

1) Edit the Shared Components of your application.2) In the Logic region, click on Build Options.3) Click Create.4) Enter Development for the Build Option, set the Status to Include, set the Default on

Export to Exclude and click Create.

Next, we’ll 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 Configuration 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 Configuration region, set the Build Option to Development and click Apply Changes.



At this point, we can copy this application to see the Build Option take effect. Exporting and re-importing 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.



7. U S E R I N T E R F A C E

7.1. Import the Theme Starter ApplicationCreating a great-looking Oracle APEX application is a lot easier than you think! In fact, you don’t 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, we’ll 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 file 7.1_apex.sql, which can be found where you

extracted the class files 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:



7.2. Create a New ThemeOnce you have installed the theme starter application, create a new Theme within that application.

1) Edit the theme starter application’s 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, we’ll create a new Page Template.

1) Edit the starter application’s 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, we’ll switch themes. This will set the starter application to use the new Theme that you just created.



1) Edit the starter application’s Shared Components.2) Click Themes.3) Click Switch Theme.4) Select Extreme Theme and click Next.5) Confirm 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.



7.3. Set Up a Custom Directory on the HTTP ServerIt’s recommended that all images and CSS files that support an APEX template be stored in the filesystem. This will greatly increase the performance of your site, as your browser will cache local copies of the images and CSS files the first 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 files for this exercise.

3) Modify the httpd.conf file 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 file 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:





7.4. Create a Page TemplateOne 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 Template1) Edit the starter application’s Shared Components.2) Click Templates.3) Set the report filter 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 file body.html from the Template Assets directory, select all of it, and paste it into the Body region, replacing what’s 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.



7.4.2. Create Tab Sub-TemplatesWe’ll start to make our template APEX-friendly by first converting the static tabs into dynamic ones.

1) Edit the starter application’s Shared Components.2) Click Templates3) Click Main Page.4) Under the Definition 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 defined in your application.

Next, we’ll define 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>



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, you’ll 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.



7.4.3. Create Region PositionsNext, we’ll 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 Definition 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>



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>



http://creativecommons.org/licenses/by/2.5/

http://creativecommons.org/licenses/by/2.5/


<div id="right">#BOX_BODY#</div>


Your page template now has two fixed 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 defined:



7.5. Create Region TemplatesNow that we’ve removed all of the static content, we’ll start to build it back up again, but this time, we’ll use APEX templates so that we can add any content that we like.

We’ll start with the Region Template that will hold the lists on the left side of the site.

1) Edit the starter application’s Shared Components.2) Click Templates3) 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, we’ll create a region template that can be used for any type of content.

1) Edit the starter application’s Shared Components.2) Click Templates3) Click Create.4) Select Region and click Next.5) Select From Scratch and click Next.



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>



7.6. Create List TemplatesNext, we’ll create a custom List Template for the lists on the left side of the page.

1) Edit the starter application’s Shared Components.2) Click Templates3) 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 Definition 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>




7.7. Create RegionsAt 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 first 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 application’s Shared Components.2) Click Templates3) 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, we’ll create a new list based on a pre-configured list in your application.



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.



Documents

APEX ADVANCED TUTORIALS