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

895 views

Published on

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
895
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

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

×