F1488647857 sewtz

ORACLE APPLICATION EXPRESS 4.0
USER INTERFACE DESIGN & THEMES
Marc Sewtz, Oracle Corp.

Introduction
Oracle Application Express (APEX) is a Web application development tool included at no extra cost with all editions of the
Oracle Database 11g. Customers can use Oracle Application Express to build applications quickly and easily right in their
browsers without having to know HTML, Java, or any other code. Oracle Application Express, or Oracle HTML DB, as it
was known originally, was first introduced with the Oracle Database 10g in 2004. In June of 2010, Oracle released Oracle
Application Express 4.0. As one of the largest new releases yet, APEX 4.0 further streamlines the development of database-
centric Web applications and helps reducing the time and complexity of building Web 2.0 applications and reports.
Developing functional, easy-to-use, secure, and fast Web applications requires many different skills. From a good database
design to building a modern and well designed user interface, in most projects, these steps are typically done by different
developers. Often though, the developers in charge for building the user interface is also expected to come up with a good
looking UI. Chances are, these developers may be well versed in the latest Web 2.0 techniques, Ajax, and JavaScript, but
using Photoshop or CSS might not be their area of expertise. For this reason, APEX provides a user interface theme
framework and ships with twenty built-in themes, so that developers can focus on what they do best, and have graphic artists
provide the user interface design.

Figure 1 – Oracle Application Express User Interface Themes

This paper outlines the basic architecture behind themes and the composition of a template, it covers the user interface design
and usability of applications built with Oracle Application Express and the steps involved in getting from the user interface
mock-up created by a graphic artist to an actual APEX user interface theme that every developer can incorporate into their
own applications. The Oracle Online Store, which was built with APEX, is used as a showcase to illustrate the user interface
development process.

www.rmoug.org 1 RMOUG Training Days 2011

Oracle APEX 4.0 – User Interface Design & Themes Sewtz

Oracle Store Overview – http://www.oracle.com/store
Launched in 2009, the Oracle Online Store is designed to make it easier for customers to buy Oracle products online. The
sore provides an intuitive user interface and incorporates best practice e-commerce capabilities. It also has a single,
multilingual, multicurrency platform, capable of providing high-performance global customer self-service. The store was
built with Oracle Application Express and showcases of the power, flexibility, and rapid deployment capabilities of Oracle’s
development tools.

Figure 2 - Oracle Store

The Oracle Store makes use of many of APEX’s built in Web 2.0 features such as AJAX, partial page refresh and interactive
reports, which are used for the intuitive and powerful store search functionality. The store’s user interfaces takes advantage of
APEX’s support for XHTML, which was introduced in APEX 3.2. The store user interface is based on XHTML 1.0 Strict,
which greatly enhances cross browser compatibility and takes advantage of a table-less page layout, using DIV tags and CSS
style sheets to define the page structure and apply the look & feel. The store works in all modern browsers capable of
rendering XHTML, incl. Firefox, Safari, and Internet Explorer.

Other APEX features used by the Oracle store are the built-in globalization capabilities, allowing for standards based
(XLIFF) translation into currently twelve languages and the selection of a variety of store countries with local currency
support. The store also makes use of the built-in support for web services, for instance during the checkout process to validate
the shipping and billing addresses.



Web Presentation Techniques
Oracle Application Express uses standard HTML and CSS style sheets to define the user interface of an application. The user
interface of the APEX IDE and the templates in the themes, which were modernized in APEX 4.0, use a modern DIV based,
table-less web design. Previous versions of APEX as well as older themes used a table-based design to define the structure of
a page, i.e. components such as the header and footer of a page, the tab bars, navigation bars, sidebar regions, etc were all
defined as nested HTML tables. This method of defining the structure of a page has been common practice ever since HTML
tables were standardized in HTML 4.0.

Today it is becoming increasingly common to define the structure of a page using DIV tags along with CSS style sheets and
to limit the use of HTML tables to the display of actual tabular data. Besides a much smaller page weight, improved
maintainability and cross-browser compatibility, using a DIV based structure and moving as many layout definitions as
possible into CSS style sheets also allows for quickly adapting pages to be used with other devices such as mobile phone and
tablets. With APEX 4.0 Oracle transitioned the APEX IDE as well as 12 UI themes to a DIV based page structure. This
transition continues in APEX 4.1 with additional themes, as well as templates for mobile devices.

XHTML
XHTML (Extensible Hypertext Markup Language) is a markup language that conforms to the XML syntax and has the same
depth of expression as HTML. XML is a more restrictive subset of SGML than HTML is and needs to be well-formed. As
such, XHTML documents allow for automated processing using standard XML tools. XHTML 1.0 is essentially a
reformulation of HTML 4.01. The syntax of XHTML is defined using a DTD (Document Type Definition). XHTML 1.0 uses
three formal DTDs corresponding to the three different versions of HTML 4.01.

The Oracle Store uses XHTML 1.0 strict, which is the equivalent to strict HTML 4.01, and includes elements and attributes
that have not been marked deprecated in the HTML 4.01 specification. XHTML 1.0 Transitional is the equivalent of HTML
4.01 Transitional, and includes the presentational elements excluded from the strict version. XHTML 1.0 Frameset is the
equivalent of HTML 4.01 Frameset, and allows for the definition of frameset documents, which had been popular on sites in
the early days of the Web, but are no longer commonly used today.

CSS
CSS (Cascading Style Sheets) is a style sheet language that is used to describe the formatting of a document written in a
markup language such as HTML or XHTML. Its primary use is to enable the separation of the content of a web page from its
presentation. Presentation elements such as colors, fonts, alignment, layout, etc are defined in a CSS file rather than in the
directly in the HTML/XHTML document. This separation provides a more flexible way to control the page layout and allows
for sharing layout definitions across multiple pages. Complexity and repetition in the page structure are reduced. With CSS it
is also possible to present the page content in different styles, making the content readable on a variety of different devices,
including screen readers, which allows for making the content more accessible for users with disabilities, and ideally allows
all users equal access to the information and functionality of the application. CSS was introduced by the World Wide Web
Consortium (W3C) to improve web accessibility and to make HTML code semantic rather than presentational.

Table-less Web Design
Table-less web design is a method of web design and development without using HTML tables to define the structure of a
web page. Often web pages are designed with nested tables within tables. Resulting HTML documents are generally larger
than documents with a simpler formatting and require more bandwidth. A nested table based structure is also more difficult to
process by screen readers and search engines.

With a table-less design, DIV tags are used to define the structure of a page, incl. navigational components, regions, sidebars,
etc. A table-less design does not however exclude the use of tables. There are many places where the use of tables is still
considered appropriate, such as the display of tabular data and displaying content, such as form elements in a grid. APEX
currently displays form elements in a table grid, which allows for easy drag and drop form layout by the developer.



The use of a table-less web design provides a number of advantages:

• Accessibility: Section 508 and other legislation require applications to be accessibly to people with disabilities. And
while APEX allows for building section 508 compliant applications, a table-less web design is a way to considerably
improve accessibility and usability by providing a more logical page structure that is easier to process for screen
readers and other devices.

• Bandwidth: A table-less web design can potentially decrease the bandwidth requirements when loading a web page.
Performance improvements can be realized mainly by moving formatting elements into external style sheets, where
the browser can cache them. Additionally, a table-less design generally requires less mark-up code in the document
itself.

• Maintainability: With a table-less web design most if not all formatting information can be stored in one place, the
CSS document. This makes changes to the user interface much easier to implement and propagate across multiple
applications and instances using the same user interface theme.

Oracle Application Express User Interface Design
Oracle Application Express Themes
APEX themes are collections of templates that can be used to define the layout and style of an entire application. The idea
behind a theme is to provide a complete set of templates that accommodate every UI pattern that may be needed in an
application. Templates are organized first by type (breadcrumb, button, calendar, label, list, page, popup list of values, region,
and report) and then by template classes, identifying the purpose of the each template within that type. Each template type
provides a group of standard classes and eight custom classes. These classifications enable APEX to map templates among
themes, making it easy to quickly change the entire look and feel of an application.

Oracle Application Express ships with an extensive theme repository. Themes can be added to the theme repository as
follows:

• Workspace administrators can create Workspace themes. Workspace themes are available to all developers within
the workspace.

• Instance administrators can create public themes. Public themes are added using the APEX administration services.
Once added, these themes are available to all workspaces and developers.

Page Layout
APEX renders pages by combining templates with application components defined by the developer and data in the database.
The overall framework (or structure of a page) is determined by the page template. For example, the page template controls if
a page uses tabs and a navigation bar. It can also define if a page includes a bar on the left side that serves as a placeholder
for navigation or secondary content. Finally, a page template can include definitions of region positions, which enable precise
control over placement of regions using HTML tables or DIV tags with CSS style sheet definitions. The page template itself
is composed of standard HTML mark-up combined with substitution strings, which are substituted with the appropriate
components at run time.

Developers add content to a page by creating a region. A region is an area of a page that serves as a container for content.
Each region contains a different type of content such as HTML, a report, a form, a chart, a list, a breadcrumb, PL/SQL, a tree,
a URL, or a calendar. Each page can have any number of regions. The appearance of a region is defined through a specific
region template. The region template controls the look of the region, the size, determines whether there will be a border or a
background color, and what type of fonts to display. A region template also determines the standard placement for any
buttons placed in region positions.



Regions can be used to group page controls such as items and buttons, they can contain very little additional HTML and only
display the actual content, or they can contain elaborate formatting to frame content within tables, DIV tags or images.
Regions are displayed in the page body, following the region display sequence. They can also be explicitly placed in
positions defined in the page template. As with all components in APEX, regions can be shown conditionally, based on a
wide variety of condition types and authorization schemes.

Incorporating images and style sheets
Most templates in APEX reference classes defined in a CSS style sheet and often also include images references. Style sheets
and image files that ship with APEX are generally stored in an images directory in the middle tier. Custom images and style
sheets can be loaded into the middle tier as well, or loaded directly into APEX through the browser and stored in the Oracle
Database. Depending on the configuration of APEX and the version of the Oracle database, the images directory is either
located on the file system of the HTTP Server or in Oracle XDB when using then PL/SQL Gateway as the web server in
Oracle XE and Oracle 11g.

Images can be included in a number of places throughout an application. Most commonly, images are referenced as part of
templates but can also be embedded in specific regions. For images stored on the file system, the image reference is typically
prefixed by #IMAGE_PREFIX#. The physical location of #IMAGE_PREFIX# is defined in the application attributes, and in
most cases points to a location like this:

http://host.domain:port/i/

The following syntax can be used to reference an image in a template or region:

<img src="#IMAGE_PREFIX#go.gif">

When referencing custom images that are loaded to the file system, such as those used for the Oracle Store theme, the
#IMAGE_PREFIX# is followed by the directory where the custom images are stored:

<img src="#IMAGE_PREFIX#oracle_store/banner.gif">

Alternatively images and style sheets can be loaded into the database under shared components of an APEX application.
Loading images as shared components has the advantage that they can be bundled with the application export file, so when
deploying in APEX application from one instance to another or when distributing an APEX application to a customer, the
images are brought across. Another advantage is that the developer does not require access to the web server’s file system.
This is particularly important in hosted environments such as apex.oracle.com, where typically access to the file system is not
available.

APEX images that are stored as shared components are divided into two categories:

• Workspace images, which are available to all applications for a given workspace, they are prefixed with
#WORKSPACE_IMAGES#

• Application images, which are available for only one application, they are prefixed with
#APPLICATION_IMAGES#



Designing and building the Oracle Store UI with Oracle Application Express
Designing the user interface of a Web application
When developing applications with APEX, developers have a choice of 20 built-in user interface themes that ship with the
product, customers can customize these themes to meet their needs and they can also create new themes from scratch to
achieve specific looks, e.g. to match a company’s corporate design or implement the mock-up provided by a graphics artist.
For the Oracle Store the user interface was created in a multi-step process. The initial layout was created using Adobe
Photoshop. Using Photoshop the main store pages were mocked-up and stored as static images. The images were then
transformed into static HTML files. And lastly these static HTML pages were translated into APEX templates and CSS style
sheets.

Figure 3 – Photoshop layered Store Mock-Up

When creating Web site mock-ups using Photoshop it is helpful to take advantage of nested layers and use these layers to
mimic the intended document structure of the final HTML page. This way the different graphical elements can already be
organized by position on the page, like header, sidebar, main content area, etc. This makes is much easier to create the
individual images later when transforming the mock-up into static HTML. This technique also allows to more easily create
different mock-ups for different pages, i.e. starting with the homepage mockup, it will be much easier to remove the
homepage specific elements and add elements for e.g. checkout pages, search pages, etc.



Transforming a design mock-up into APEX Templates
Defining the page structure
Page templates in APEX define the appearance of individual pages, including the placement of page controls and
components. Each page template is divided into three sections: Header, Body, and Footer. The most basic template must
include the substitution string #BOX_BODY# in the Body attribute. When the page is rendered, the Application Express
engine replaces #BOX_BODY# with HTML to display the regions on that page.

The Oracle Store mock-up defines two types of general page layouts, one layout with a main content area and a left-hand
sidebar and another layout with a main content area and sidebars both on the left and right-hand side. The left-hand sidebar in
the store is used to display a search box and a product category menu. Both are shown on all pages that include this sidebar.
The right-hand sidebar is used to show the contents of the shopping cart – once items have been put into the cart, and also
customer service contact information and in some cases, banner ads.

Sidebars are typically defined by dividing a page into multiple columns. A multi-column page can be created by using a page
template that contains either a multi-column table or uses CSS and DIV tags. The following example demonstrates how to
create a page with sidebars on the left and ride using HTML tables and specify a region position using the
#REGION_POSITION_XX# substitution string in each column. This code is defined in the body section of a page-level
template.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body #ONLOAD#>
#FORM_OPEN#
<table style="width:100%">
<tr>
<td style="width:200px;padding:5px;">#REGION_POSITION_01#</td>
<td style="padding:5px;">#REGION_POSITION_02##BOX_BODY#</td>
<td style="width:200px;padding:5px;">#REGION_POSITION_02#</td>
</tr>
</table>
<br />
#FORM_CLOSE#
</body>
</html>
The region positions that are defined in a page template are substituted by the actual content at runtime and are also used to
derive display points when running the create region wizards and when editing a region. There are up to eight specific region
positions available. Additionally, content can be placed into the #BOX_BODY#. The #BOX_BODY# positions regions
relative to each other. When placing regions into the box body there are three sections available for vertical separation.
Regions in the box body can also specify a column IDs for displaying columns horizontally aligned. Additional substitution
strings are documented on the page template edit page. Depending on the structure of the page, substitution stings can be
used to allocate space for navigation, tabs and message, like notifications and errors.

An alternative to the table based page structure shown above is using DIV tags with CSS style sheets. A DIV tag based
design is easier to process by a variety of clients and devices, such as for example screen readers. This design allows for
easier modification of an application’s user interface by updating the CSS style sheet, rather than editing multiple templates
and propagating template changes across subscribed applications on potentially multiple instances.



The following HTML code sample produces a very similar page structure to the table based sample shown above. There’s a
left-hand sidebar for #REGION_POSTION_01#, a right-hand sidebar for #REGION_POSITION_03# and a main content
area for #REGION_POSITION_02# and #BOX_BODY#. The actual positioning of the regions, and layout attributes are
defined in an external style sheet called demo.css and thus can be easily modified and adapted for different clients.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="demo.css" type="text/css" />
</head>
<body>
<div id="main">
<div id="left-sidebar">#REGION_POSITION_01#</div>
<div id="body">
<div id="two-col">
<div id="right-sidebar">#REGION_POSITION_02##BOX_BODY#</div>
<div id="content">#REGION_POSITION_03#</div>
</div>
</div>
</div>
</body>
</html>
Using the CSS definitions below, the following page structure can be implemented, with fixed-width left and right-hand
sidebar and a variable width main content area.

Figure 4 - CSS based three column layout
#main {
height: 1%; overflow: hidden; padding: 10px 10px 10px 250px;
}
#left-sidebar {
display: inline; float: left; width: 180px;
margin: 0 0 0 -240px; padding: 10px
}
#body {
float: right; width: 100%; padding: 10px;
}
#two-col {
height: 1%; overflow: hidden; padding: 10px 250px 10px 10px;
}
#content {
float: left; width: 100%; padding: 10px;
}
#right-sidebar {
display: inline; float: right; width: 180px;
overflow:hidden; margin: 0 -240px 0 0; padding: 10px
}



Rounded Corner Regions
The following graphic shows a rounded corner region as it is used in the Oracle Store. This particular type of region is used
as a fixed-width sidebar, with variable height for the content. This sample illustrates how the HTML used for the actual web
page can be minimized and how CSS can be used to achieve visual effects, such as gradients, borders, etc.

Figure 5 - Sample Rounded Corner Region using CSS

The following code snippet from the web page constitutes the entire HTML mark-up and text needed to render the region
shown above:

<div class="region"><div>
<h2>Sample Region</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempo
incididunt ut labore et dolore magna aliqua.</p>
</div></div>

To achieve the rounded corner region look, the following CSS classes are defined in a separate CSS file. The first class called
.region defines a background image that draws the left and right borders of the region. The next section defines a background
images for DIV areas within the context of .region. This background images is placed at the bottom of the DIV area and
draws a gradient background. And for H2 tags used within the context of .region, another background image is defined to
draw the region header. The other attributes show below define margines, fonts, etc.

.region {
background: url(bg-menu.gif); margin: 8px 0 0; overflow: hidden; width: 183px;
}
.region div {
background: url(bg-menu-b.gif) no-repeat 0 100%; padding: 0 0 4px;
}
.region h2 {
background: url(bg-h3.gif); margin: 0; width: 183px; height: 26px;
overflow: hidden;line-height: 26px; text-indent: 11px; font-size: 11px;color: #000; }
.region p {
margin: 0; padding: 4px 10px;
}

Category Menu using CSS Sprites
When working with CSS style sheets, images for buttons, gradient backgrounds, etc are typically defined as background
images in the CSS file. Often each image corresponds to a file on the server’s file system. In some cases, where mouse-over
effects are used, several image files might be required for a single element. Each image shown on a web page results into an
additional HTTP request, so in addition to the HTTP request returning the page, there will be HTTP requests for the CSS
style sheets, Java Script files and each image used on the current page.
CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by a web page. Using this
technique, images are combined into one large image at defined X and Y positions. The single image file is then assigned to



several CSS classes, and using the CSS background property, the visible area is shifted to only display the required portion of
the image. This technique can be very effective for improving site performance, particularly in situations where many small
images, such as menu icons, are used.
The following is an example how CSS sprites can be used for a sidebar navigation, such as the product category menu on the
Oracle Store home page. The menu in this example shows two categories, “Virtualization” and “Enterprise Linux”. When
hovering over the menu with the mouse, the category located below the mouse cursor gets highlighted by applying a different
background image.

Figure 6 - Oracle Store Category Menu

Typically two background image files would be created and stored on the server. When loading the page, both image files
would be requestes as well, resulting into two HTTP requests. Using sprites, both background images can be stored in the
single image shown below:

Figure 7 - Two background images in a single file

In the past this type of hover-over effect used to be implemented using Java Script, calling different functions to change the
appearance of a graphic when a user rolls over or clicks an image or button. Today developers often use CSS instead, using
the :link, :visited, :hover, and :active pseudo-classes to swap out images in the links background - without having to program
a single line of scripting code.
The following code sample shows the HTML code used to implement the menu shown above:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css" />
</head>
<body>
<div class="menu">
<div>
<h3>Product Categories</h3>
<ul>
<li><a href="/virtualization">Virtualization</a></li>
<li><a href="/linux">Enterprise Linux</a></li>
</ul>
</div>
</div>
</body>
</html>



The CSS class definitions below take care of displaying either the active (orange) or inactive portion of the image shown
above. The image is 44px in height, and by shifting the visible portion of the image up by 22px, only the grey portion is
shown when the menu item is inactive. Once the user moves his mouse over an item, the upper orange portion of the image is
shown, and the lower part is not visible:

.menu a { background: url(bg-nav.gif) no-repeat 0 -22px;}
.menu .active a, .menu a:hover {background: url(bg-nav.gif) no-repeat 0 0;}

This concept can be extended further to include additional images used on a page, yet developers should carefully weigh the
advantages of fewer HTTP requests vs. large image files, if images are included that are not shown on the current page. A
good practice is to group images that are typically shown together, such as images used to render a region or a menu such as
the one show above.

Conclusion
Oracle Application Express makes it easy for developers to develop professional looking applications, thanks to its built-in
selection of 22 user interface themes. Yet often developers find themselves in a position where they’re asked to develop
applications that seamlessly integrate with the corporate infrastructure and provide the same user experience and security
model as existing applications. APEX’s authentication and authorization model provide a wide variety of integration points
through shared authentication via LDAP, Oracle Single-Sign On, support for the Oracle E-Business Suite and other Oracle
and Non-Oracle authentication models. Using APEX’s extensible and customizable user interface theme and template
framework, it is possible to replicate the UI of existing applications for a more seamless integration. This paper outlined
some of the steps involved in building a new user interface theme, using the Oracle Online Store as an example. While it
would be impossible to provide an exhaustive guide that covers every possible variation of web based user interface
implementations, this paper touched on many of the basic concepts, defined some of the most commonly used techniques and
UI programming languages and provided some specific examples for getting started with replicating existing web interfaces
and designing new interfaces.

About the Author
Marc Sewtz is a Senior Software Development Manager for Oracle Application Express in the Oracle Database Tools Group,
which is part of Oracle Server Technologies. Marc has over sixteen years of industry experience, including roles in
Consulting, Sales, and Product Development. He joined Oracle Corporation in 1998.
Marc lives in New York and manages a global team of Oracle Application Express developers and product managers. Marc
and his team are responsible for the Oracle Application Express user interface and product features such as Oracle Forms to
Oracle Application Express conversion, the Oracle Application Express Reporting Engine, Tabular Forms, Flash Charts and
PDF printing incl. the integration with Oracle BI Publisher.
Marc regularly presents Oracle Application Express at various industry events including Oracle Open World, ODTUG
Kaleidoscope, DOAG, RMOUG, NYOUG, BIWA SIG and Oracle Develop conference at various locations around the
world. Marc has a Masters degree in Computer Science from the University of Applied Sciences in Wedel, Germany.


F1488647857 sewtz

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (19)

Similar to F1488647857 sewtz

Similar to F1488647857 sewtz (20)

Recently uploaded

Recently uploaded (20)

F1488647857 sewtz