Face/Off: APEX Templates & Themes

APEX Face/OffDesigning 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

7

Aspects of Web Design

● Form Follows Function

● Usability

● Appearance

● Structure

Structure

9

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.

11

Structure

12

Template Structure

Header

Body

Footer

SideBar

SideBar

Navigation

14

Sketch Out a Website Wireframe First

15

Demo Structure

Header

Body

Footer

SideBar

SideBar

Navigation

16

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>

17

“Final” Layout

APEX Template Structure

19

Apex Template Preview

24

Template Types and ClassesTypes

● Breadcrumb● Button● Calendar● Label● List● Page● Region● Report● Popup List of Values

Classes

● Page○ Login○ No Tabs○ 1-level Tabs○ 2-level Tabs○ Popup○ Printer Friendly

● Button○ HTML○ Image○ Template

● Label○ Required○ Required with Help○ Optional○ Optional with Help

● List○ Flat○ Hierarchical

● ...

#WELCOME_USER##NAVIGATION_BAR#

#TAB_CELLS#

#SUCCESS_MESSAGE##NOTIFICATION_MESSAGE##GLOBAL_NOTIFICATION#

#BOX_BODY##REGION_POSITION_03#

#REGION_POSITION_02##TAB_STATUS##TAB_LABEL#TAB_IMAGE##TAB_INLINE_EDIT##TAB_LINK# #TAB_NAME##TAB_NAME_ENCODED##TAB_FONT_ATTRIBUTES#

#CUSTOMIZE# #REGION_POSITION_05#

#LOGO#

#TITLE#

#BODY#

#TITLE##CLOSE##PREVIOUS##NEXT##DELETE##EDIT##CHANGE##CREATE##CREATE2##EXPAND##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>... #REGION_POSITION_05#</div>

…

30

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.

31

Themes shipped with APEX

32

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 directory

33

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.

34

Create a Workspace Theme

35

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.

Design

39

How to get a good design?● Specialized

Design Tools

●Download(free) HTML Template.

●Or ...

40

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.

41http://www.artisteer.com

Blog: http://rokitta.blogspot.com

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

Website: http://www.rokit.nl

Twitter: @crokitta

Email: [email protected]

Face/Off: APEX Templates & Themes

Technology

Transcript of Face/Off: APEX Templates & Themes