Face off apex template and themes - 3.0 - k-scope11

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

7
Aspects of Web Design
● Form Follows Function
● Usability
● Appearance
● 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.

12
Template Structure
Header
Body
Footer
Side
Bar
Side
Bar
Navigation

14
Sketch Out a Website Wireframe First

15
Demo Structure
Header
Body
Footer
Side
Bar
Side
Bar
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>

24
Template Types and Classes
Types
● 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#
#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>
...
</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.

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.

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.

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.

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 template and themes - 3.0 - k-scope11

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Face off apex template and themes - 3.0 - k-scope11

Ähnlich wie Face off apex template and themes - 3.0 - k-scope11 (20)

Mehr von Christian Rokitta

Mehr von Christian Rokitta (15)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Face off apex template and themes - 3.0 - k-scope11