APEX Face/OffDesigning a GUI using APEX Templates and Themes                  Christian Rokitta
The APEX framework is highly  configurable, allowing you toimplement your own customized   application interface design.
StructureAPEX Template Structure        Design
6
Aspects of Web Design●   Form Follows Function●   Usability●   Appearance●   Structure                            7
Structure
Web TemplateA web template is a tool used to separate    content from presentation in web design, and for mass-production ...
10
Structure            11
Template StructureHeaderNavigationSide                SideBar                 Bar             Body         Footer         ...
13
Sketch Out a Website Wireframe First                                       14
Demo StructureHeaderNavigationSide                SideBar                 Bar             Body         Footer             ...
Basic HTML Page Layout<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xh...
“Final” Layout                 17
APEX Template  Structure
Apex Template Preview                        19
Template Types and Classes         Types                          Classes●   Breadcrumb             ●    Page             ...
#LOGO#                                                    #WELCOME_USER#                                                  ...
Page Template Coding...<link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_111/css/demo.css“ type="text/css" />... <di...
Understanding Themes●   Themes are collections of templates●   Themes define the layout and style of an entire    applicat...
Themes shipped with APEX                           31
Create a new custom Theme●       Create a new theme directory in your APEX images directory●       Copy content from exist...
Theme Availability●   “Private” Themes    Application specific customized Theme●   Theme Repository    ●   Workspace admin...
Create a Workspace Theme                           34
Subscribed Template• A subscribed template is a template that has its  definition maintained in another template, the  ref...
36
37
Design
How to get a good design?●   Specialized    Design Tools●Download(free) HTML Template.●Or ...                             ...
Template Design made Easy/ier●   You dont need to learn Photoshop, CSS, HTML and    other Web technologies to create great...
41http://www.artisteer.com
42
Blog:       http://rokitta.blogspot.comLinkedIn:   http://nl.linkedin.com/in/rokitWebsite:    http://www.rokit.nlTwitter: ...
Face/Off: APEX Templates & Themes
Face/Off: APEX Templates & Themes
Face/Off: APEX Templates & Themes
Face/Off: APEX Templates & Themes
Upcoming SlideShare
Loading in …5
×

Face/Off: APEX Templates & Themes

4,061 views

Published on

APEX Face/Off

Designing a GUI using APEX Templates and Themes

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

ODTUG KScope 2011

Published in: Technology, Business
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
4,061
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
120
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Face/Off: APEX Templates & Themes

  1. 1. APEX Face/OffDesigning a GUI using APEX Templates and Themes Christian Rokitta
  2. 2. The APEX framework is highly configurable, allowing you toimplement your own customized application interface design.
  3. 3. StructureAPEX Template Structure Design
  4. 4. 6
  5. 5. Aspects of Web Design● Form Follows Function● Usability● Appearance● Structure 7
  6. 6. Structure
  7. 7. Web TemplateA 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
  8. 8. 10
  9. 9. Structure 11
  10. 10. Template StructureHeaderNavigationSide SideBar Bar Body Footer 12
  11. 11. 13
  12. 12. Sketch Out a Website Wireframe First 14
  13. 13. Demo StructureHeaderNavigationSide SideBar Bar Body Footer 15
  14. 14. 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
  15. 15. “Final” Layout 17
  16. 16. APEX Template Structure
  17. 17. Apex Template Preview 19
  18. 18. 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
  19. 19. #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# #REGION_POSITION_03# #CUSTOMIZE# #REGION_POSITION_05# #TITLE# #TITLE# #CLOSE##PREVIOUS##NEXT##DELETE##EDIT# #CHANGE##CREATE##CREATE2##EXPAND# #BODY# #COPY##HELP# #BODY#
  20. 20. 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>…
  21. 21. 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
  22. 22. Themes shipped with APEX 31
  23. 23. 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
  24. 24. 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
  25. 25. Create a Workspace Theme 34
  26. 26. 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
  27. 27. 36
  28. 28. 37
  29. 29. Design
  30. 30. How to get a good design?● Specialized Design Tools●Download(free) HTML Template.●Or ... 39
  31. 31. Template Design made Easy/ier● You dont 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
  32. 32. 41http://www.artisteer.com
  33. 33. 42
  34. 34. Blog: http://rokitta.blogspot.comLinkedIn: http://nl.linkedin.com/in/rokitWebsite: http://www.rokit.nlTwitter: @crokittaEmail: christian@rokitta.nl

×