Face/Off: APEX Templates & Themes

APEX Face/Off
Designing a GUI using APEX Templates and Themes

Christian Rokitta

The APEX framework is highly
configurable, allowing you to
implement your own customized
application interface design.

Structure

APEX Template Structure

Design

Aspects of Web Design

● Form Follows Function
● Usability
● Appearance
● Structure

7

Web Template

A web template is a tool used to separate
content from presentation in web
design, and for mass-production of web
documents. It is a basic component of a
web template system.

9

Template Structure
Header

Navigation

Side Side
Bar Bar

Body

Footer

12

Sketch Out a Website Wireframe First

14

Demo Structure
Header

Navigation

Side Side
Bar Bar

Body

Footer

15

Basic HTML Page Layout
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>OGh Demo 1</title>
<style type="text/css">
body{margin:0px }
div{border: 0px solid #000080;margin:0px;padding:0px}
div.container {width:1000px; margin-left:auto;
margin-right:auto; margin-top:2px; text-align:left;}
div.header {width:99%; height:100px; background-color:#2582F4 ; float:left;
color: white;}
div.navbar {width:99%; min-height:30px; background-color:#AADADA; float:left;}
div.sidebar{width:20%; min-height:400px; background-color:#AAFAFA; float:left;}
div.content{width:79%; min-height:400px; background-color:#FFFFF8; float:left;}
div.footer {width:99%; height:50px; background-color:#6BADFF ; float:left;}
</style>
</head>

<body>
<div class="container">
<div class="header">#header#</div>
<div class="navbar">#navigation#</div>
<div class="sidebar">#sidebar#</div>
<div class="content">#body#</div>
<div class="footer">#footer#</div>
</div>
</body>
</html> 16

“Final” Layout

17

Apex Template Preview

19

Template Types and Classes
Types Classes

● Breadcrumb ● Page ● Label
● Button ○ Login ○ Required
● Calendar ○ No Tabs ○ Required with Help
● Label ○ 1-level Tabs ○ Optional
● List ○ 2-level Tabs ○ Optional with Help
● Page ○ Popup ● List
● Region ○ Printer Friendly ○ Flat
● Report ● Button ○ Hierarchical
● Popup List of Values ○ HTML ● ...
○ Image
○ Template

24

#LOGO# #WELCOME_USER#
#NAVIGATION_BAR#
#TAB_CELLS#

#REGION_POSITION_02#
#SUCCESS_MESSAGE#
#TAB_STATUS# #NOTIFICATION_MESSAGE#
#TAB_LABEL
#TAB_IMAGE# #GLOBAL_NOTIFICATION#
#TAB_INLINE_EDIT#
#TAB_LINK#
#TAB_NAME#
#TAB_NAME_ENCODED# #BOX_BODY#
#TAB_FONT_ATTRIBUTES#

#CUSTOMIZE# #REGION_POSITION_05#

#TITLE#
#TITLE# #CLOSE##PREVIOUS##NEXT##DELETE##EDIT#
#CHANGE##CREATE##CREATE2##EXPAND#
#BODY# #COPY##HELP#
#BODY#

Page Template Coding
...
<link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_111/css/demo.css“
type="text/css" />
...

<div class="container">
<div class="header">
<div class="logo"><a href="#HOME_LINK#">#LOGO#</a></div>
<div class="slogan">#REGION_POSITION_06#</div>
<div class="login">
#WELCOME_USER##NAVIGATION_BAR# #REGION_POSITION_08#</div>
</div>
<div class="navbar">
<div id="navbar2">
<ul>#TAB_CELLS#</ul>
</div>
</div>
<div class="l-sidebar" id="l-sidebar">#REGION_POSITION_02#</div>
<div class="content" id="content">#BOX_BODY##REGION_POSITION_03#</div>

<div class="footer">
...
<div id="customize">#CUSTOMIZE#</div>
...
</div>

…

Understanding Themes

● Themes are collections of templates

● Themes define the layout and style of an entire
application by providing a complete set of
templates that accommodate every UI pattern
that may be needed in an application.

30

Themes shipped with APEX

31

Create a new custom Theme
● Create a new theme directory in your APEX images directory

● Copy content from existing theme directory to this new directory

● Export the corresponding existing theme

● Open your theme export (sql) file in a text editor and replace path
references:
○ themes/theme_x >> themes/theme_y

● Import your modified theme export.

● Change identification number to y

● Copy your custom CSS/JavaScript/image files into new theme 32
directory

Theme Availability
● “Private” Themes
Application specific customized Theme

● Theme Repository
● 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 Application Express
Administration Services. Once added, these themes are
available to all workspaces and developers. 33

Create a Workspace Theme

34

Subscribed Template

• A subscribed template is a template that has its
definition maintained in another template, the
referenced template.
• If your application utilizes subscribed
templates, you can unsubscribe to templates on
the Unsubscribe Templates page.

35

How to get a good design?
● Specialized
Design Tools

●Download
(free) HTML Template.

●Or ...

39

Template Design made Easy/ier
● You don't need to learn Photoshop, CSS, HTML and
other Web technologies to create great looking
designs, including images and buttons.

● Create perfectly correct, validated HTML and CSS that
conform to Web standards.

● Web browser compatibility

● Well structured and formatted HTML and CSS code.

● Choose and use many included design elements, from
backgrounds, tabs to region objects and buttons.
40

Blog: http://rokitta.blogspot.com

LinkedIn: http://nl.linkedin.com/in/rokit

Website: http://www.rokit.nl

Twitter: @crokitta

Email: christian@rokitta.nl

Face/Off: APEX Templates & Themes

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Face/Off: APEX Templates & Themes

Similar to Face/Off: APEX Templates & Themes (20)

Recently uploaded

Recently uploaded (20)

Face/Off: APEX Templates & Themes