Your SlideShare is downloading. ×
Face/Off: APEX Templates & Themes
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Face/Off: APEX Templates & Themes

2,424
views

Published on

APEX Face/Off …

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
2,424
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
74
Comments
1
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. APEX Face/OffDesigning a GUI using APEX Templates and Themes Christian Rokitta
  • 2. The APEX framework is highly configurable, allowing you toimplement your own customized application interface design.
  • 3. StructureAPEX Template Structure Design
  • 4. 6
  • 5. Aspects of Web Design● Form Follows Function● Usability● Appearance● Structure 7
  • 6. Structure
  • 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. 10
  • 9. Structure 11
  • 10. Template StructureHeaderNavigationSide SideBar Bar Body Footer 12
  • 11. 13
  • 12. Sketch Out a Website Wireframe First 14
  • 13. Demo StructureHeaderNavigationSide SideBar Bar Body Footer 15
  • 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. “Final” Layout 17
  • 16. APEX Template Structure
  • 17. Apex Template Preview 19
  • 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. #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. 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. 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. Themes shipped with APEX 31
  • 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. 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. Create a Workspace Theme 34
  • 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. 36
  • 28. 37
  • 29. Design
  • 30. How to get a good design?● Specialized Design Tools●Download(free) HTML Template.●Or ... 39
  • 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. 41http://www.artisteer.com
  • 33. 42
  • 34. Blog: http://rokitta.blogspot.comLinkedIn: http://nl.linkedin.com/in/rokitWebsite: http://www.rokit.nlTwitter: @crokittaEmail: christian@rokitta.nl