Face off apex template and themes - 3.0 - k-scope11
-
Upload
christian-rokitta -
Category
Technology
-
view
732 -
download
1
description
Transcript of Face off apex template and themes - 3.0 - k-scope11
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
6
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.
10
11
Structure
12
Template Structure
Header
Body
Footer
SideBar
SideBar
Navigation
13
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.
36
37
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
42
Blog: http://rokitta.blogspot.com
LinkedIn: http://nl.linkedin.com/in/rokit
Website: http://www.rokit.nl
Twitter: @crokitta
Email: [email protected]