Академический Документы
Профессиональный Документы
Культура Документы
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
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.
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.
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.
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.
7) Make sure that Install Supporting Objects is set to Yes and click Next.
8) Click Install.
If there is any warning or error message present, please notify your instructor.
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.
Take some time to become familiar with the application, if you have not done so already.
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.
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.
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.
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.
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.
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.
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.
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.
14) Locate and open the file 2.4_javascript_function.txt. This file can be found where
you unzipped the class files in Exercise 1.2.
15) Copy the contents of that file into the Enter HTML Text Region Source and click Create
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.
For example, you could use: ‘Are you sure that you wish to delete this
ticket? This operation can not be undone.’
Run page 210 and click on the Delete button. Notice that you should now see your custom
message in the confirm dialog.
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.
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.
14) Locate and open the file 2.6_javascript_function.txt. This file can be found where
you unzipped the class files in Exercise 1.2.
15) Copy the contents of that file into the Enter HTML Text Region Source and click Create
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.
First, let’s associate a static ID with the Ticket Details region, so that we can manipulate it with
JavaScript.
9) Set the Position to Region Template Position #CLOSE#, enter 10 for the Sequence 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 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.
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>
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.
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.
15) Locate and open the file 3.1_javascript.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.
Now that we have the link and JavaScript function, the final step is to add the Application
Process.
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.
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.
Next, we’ll add another HTML region that will house the actual JavaScript function.
9) Locate and open the file 3.2_javascript.txt. This file can be found where you unzipped
the class files in Exercise 1.2.
10) Copy the contents of that file into the Enter HTML Text Region Source and click Create
Region.
Now that we have the link and JavaScript function, the final step is to add another Application
Process.
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.
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. 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.
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.
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
The next region will be almost identical to the first, but it will be used the when the session itself
is exceeded.
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.
Tickets - &P210_SUBJECT.
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.
Now that we have see the session state two different ways, let’s enable session state encryption
for P210_SUBJECT.
16) In the Security region, set Store value encrypted in session state to Yes and click Apply
Changes.
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.
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.
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.
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”.
Let’s try to enter “Win” again and see what happens now that Autocomplete is disabled.
First, let’s generate some false records in the APEX login table.
Next, let’s recreate our authentication function and include calls to the
SET_AUTHENTICATION_RESULT API call.
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) 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.
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.
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:
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
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.
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.
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. 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) 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.
7) Click on the check box associated with Page 200 to select it as the page you wish to lock.
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:
1) Click the Administer Locks link, which can be found in the Tasks region on the right hand
side of the page.
5) Notice that your changes will be displayed in the Locked Pages report:
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.
Public Pages
Reporting
Special Pages
Ticket Management
Page group assignments can be made by selecting a Page Group, checking the corresponding
pages and then clicking Assign Checked.
We can use these new groups to view pages in our application in a number of different ways.
We now see only those pages that are associated with the page group Public Pages.
This time, we see the page groups as folders. The number in parenthesis denotes the number of
pages within that group.
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.
Next, we’ll associate this build option to the Interactive Report on Page 300.
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.
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 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.
7) Make sure that Install Supporting Objects is set to Yes and click Next.
8) Click Install.
You will now have two themes in your application - Red and Extreme Theme.
Next, we’ll switch themes. This will set the starter application to use the new Theme that you just
created.
Since our Page Template is completely blank, running the application at this point will produce a
blank screen. This is expected behavior.
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
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.
<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>
<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:
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.
<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>
<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:
We’ll start with the Region Template that will hold the lists on the left side of the site.
<h3>#TITLE#</h3>#BODY#
Next, we’ll create a region template that can be used for any type of content.
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>
<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>
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.
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.
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.