Apex Advanced Tutorials PDF

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
2. 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 confirmDelete Parameters!.........................................................................................................13
2.6. Item Validations!........................................................................................................................................14
2.7. Hide & Show Regions!...............................................................................................................................16
3. Ajax!...........................................................................................................................................................................18
3.1. Create an AutoAssign Function!..............................................................................................................18
3.2. Automatically Set Status to Closed!.........................................................................................................21
4. 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
5. Performance Tuning !.............................................................................................................................................32
5.1. Debug Mode!...............................................................................................................................................32
5.2. Timings!........................................................................................................................................................35
5.3. Page & Region Caching!............................................................................................................................36
6. Developer Tools!.....................................................................................................................................................37
6.1. Page Locks!..................................................................................................................................................37
6.2. Page Groups!...............................................................................................................................................41
6.3. Build Options!.............................................................................................................................................44
7. 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
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 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 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 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 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 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.

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

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

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

2) Edit the item P2_CREATED_BY by clicking on its name.
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.

Page 7
2.3. onblur Events: Change Background Color

In 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.

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.

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

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

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

Page 10
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.


Page 11
13) Enter JavaScript - countCharacters for the Title, set the Region Template to No
Region.
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.

Page 12
2.5. Modify confirmDelete Parameters

APEX 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.

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.

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

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


Page 14
13) Enter JavaScript - validateItems for the Title, set the Region Template to No
Region.
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.

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 modified controlled with
JavaScript.
First, let’s associate a static ID with the Ticket Details region, so that we can manipulate it with
JavaScript.

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.

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

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

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.

Page 18
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.

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.
Region.
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.

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

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.

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.

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.
Region.
Now that we have the link and JavaScript function, the final step is to add another Application
Process.

Page 21

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

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

7) Create a new HTML region by clicking on the corresponding icon.
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.

Page 23
11) Locate and open the file 4.1_idle_timeout.txt. This file can be found where you
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.

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
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_TIMEOUT
22) Click Create Region.

Page 24
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

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

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.

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.

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) 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.

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

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

Page 29
Next, we’ll disable Autocomplete and try to enter another Subject that starts with “win”.

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.

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, 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
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:

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

2) Scroll to the bottom of the page to find 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) 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 URL

If 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 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 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 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 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.

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

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:

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

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

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.
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 Pages
Reporting
Special Pages
Ticket Management
Upon completion you should have 5 groups:

Page 41
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:

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

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.

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.

Page 44
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.

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

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

Page 47

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.

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

It’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:

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

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

We’ll start to make our template APEX-friendly by first converting the static tabs into dynamic
ones.

2) Click Templates
3) 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><a href="#">products</a></li>
<li><a href="#">about us</a></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>

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

Page 52
7.4.3. Create Region Positions

Next, 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>

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

Page 55
7.5. Create Region Templates

Now 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.

2) Click Templates
3) Click Create.
4) Select Region 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.

2) Click Templates
3) Click Create.
4) Select Region 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, we’ll create a custom List Template for the lists on the left side of the page.

2) Click Templates
3) Click Create.
4) Select List 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>

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

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, we’ll create a new list based on a pre-configured list in your application.

Page 59

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 PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Apex Advanced Tutorials PDF

Uploaded by

Copyright:

Available Formats

Introduction to

Copyright © 2009-2010 Sumneva

Comments & Questions

Copyright © 2009-2010 Sumneva

1) Open a new browser window.

1.2. Login to Your Workspace

1) Navigate to the URL provided by the instructor.

1.3. Import the Starter Application

1) Click on the Application Builder tab.

Copyright © 2009-2010 Sumneva

At this point, you should see the following screen:

Your application should have four users:

Username Password Privilege

Scott sumneva Administrator

Shannon sumneva Edit

Isabella sumneva Edit

Owen sumneva View

9) Run your application and sign on as Scott.

Copyright © 2009-2010 Sumneva

2. JAVASC R I P T & A JAX

1) Edit Page 2 of your application.

Copyright © 2009-2010 Sumneva

2.2. onblur Events: Change Case to Upper

1) Edit Page 2 of your application.

Copyright © 2009-2010 Sumneva

2.3. onblur Events: Change Background Color

1) Edit Page 2 of your application.

5) Edit the item P2_DESCR by clicking on its name.

10) Click Apply Changes.

11) Create a new Region by clicking on the corresponding icon.

Copyright © 2009-2010 Sumneva

Copyright © 2009-2010 Sumneva

2.4. onkeypress Events: Character Counter & Hide/Show

1) Edit Page 2 of your application.

5) Edit P2_DESCR by clicking on its name.

Copyright © 2009-2010 Sumneva

10) Create a new Region by clicking on the corresponding icon.

Copyright © 2009-2010 Sumneva

Copyright © 2009-2010 Sumneva

2.5. Modify confirmDelete Parameters

1) Edit Page 210 of your application.

4) Scroll to the top of the page and click Apply Changes.

Copyright © 2009-2010 Sumneva

2.6. Item Validations

1) Edit Page 210 of your application.

10) Create a new Region by clicking on the corresponding icon.

Copyright © 2009-2010 Sumneva

Copyright © 2009-2010 Sumneva

2.7. Hide & Show Regions

1) Edit Page 210 of your application.

4) Create a new Button by clicking the corresponding icon.

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

Copyright © 2009-2010 Sumneva

10) Set Target is a to URL.

Copyright © 2009-2010 Sumneva

1) Edit Page 210 of your application.

7) Click Create Item.

8) Click on the “two triangles” icon in the Items region.

Copyright © 2009-2010 Sumneva

11) Create a new Region by clicking on the corresponding icon.

17) Edit the Shared Components of your application.

Copyright © 2009-2010 Sumneva

23) Click Create Process.