APEX Themes and Templates

31,404 views

Published on

APEX Themes and Templates

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
31,404
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
570
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Theme 4 - "Topaz"
  • Theme 6 - "Centered Blue"
  • Theme 1 - "Simple Red"
  • Shared Components
  • APEX Themes and Templates

    1. 1. APEX Themes & TemplatesJeffrey Kempjeffkemponoracle.com18 August 2010<br />The most comprehensive Oracle applications & technology content under one roof<br />
    2. 2. Apex Themes and Templates<br />Apex 4.0 Improvements<br />Apex 4.0 Themes Tour<br />Intro to Templates<br />Themes + Templates + Apps<br />Managing Themes<br />Customising Templates & CSS<br />
    3. 3. About Me<br />60% Oracle Developer<br />50% Apex Developer<br />40% Iced Coffee<br />
    4. 4. Apex 4.0 Improvements<br />Better Themes<br />Application Express provides 20 themes. Each theme is comprised of component templates that define the look-and-feel of your application. Oracle Application Express 4.0 has modernized these themes to comply with XHTML and CSS standards. XHTML pages provide greater portability and decreased rendering time.<br />http://www.oracle.com/technology/products/database/application_express/html/4.0_new_features.html#themes<br />
    5. 5. Apex 4.0 Improvements<br />Less <TABLE>s, more <DIV>s<br /><div id="body"><br /> <div id="three-col"><br /> <div id="left-sidebar"> #REGION_POSITION_02#<br /> </div><br />
    6. 6. Apex 4.0 Improvements<br />Sub Regions<br />
    7. 7. Apex 4.0 Improvements<br />New sample apps<br />
    8. 8. Apex 4.0 Improvements<br />+ a whole heap of other wonderful things<br />New item types<br />APEX Listener<br />Plug-ins<br />Websheets<br />Cascading LOVs<br />Region display selectors<br />Date item range validation<br />Dynamic Actions<br />REST support<br />Gantts<br />Team Development<br />Declarative item validations<br />Maps<br />Instrumentation/Debug framework<br />
    9. 9.
    10. 10.
    11. 11.
    12. 12.
    13. 13. Should I upgrade to 4.0?<br />Yes - but first, review known issues list:http://www.oracle.com/technology/products/database/application_express/html/4.0_known_issues.html<br />
    14. 14. Should I upgrade to 4.0?<br />Test it!<br />
    15. 15. What if my application has a customised theme?<br />
    16. 16. Flow<br />
    17. 17. What are templates for?<br />
    18. 18. DECLARE<br /> template VARCHAR2(200)<br /> := '<HTML><br /> <HEAD><br /> <TITLE> #TITLE# </TITLE><br /> </HEAD><br /> <BODY> #BODY# </BODY><br /> </HTML>';<br />BEGIN<br /> htp.p(<br /> REPLACE( REPLACE( template<br /> ,'#TITLE#', :title)<br /> ,'#BODY#', :body)<br /> );<br />END;<br />Conceptual Code<br />
    19. 19.
    20. 20. <html lang="&BROWSER_LANGUAGE." xmlns:htmldb="http://htmldb.oracle.com"><br /><head><br /><title>#TITLE#</title><br /><link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_4/theme_3_1.css" type="text/css" /><br />#HEAD#<br /></head><br /><body #ONLOAD#><br />#FORM_OPEN#<br />
    21. 21. <html lang="&BROWSER_LANGUAGE." xmlns:htmldb="http://htmldb.oracle.com"><br /><head><br /><title>#TITLE#</title><br /><link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_4/theme_3_1.css" type="text/css" /><br />#HEAD#<br /></head><br /><body #ONLOAD#><br />#FORM_OPEN#<br />
    22. 22. <html lang="&BROWSER_LANGUAGE." xmlns:htmldb="http://htmldb.oracle.com"><br /><head><br /><title>#TITLE#</title><br /><link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_4/theme_3_1.css" type="text/css" /><br />#HEAD#<br /></head><br /><body #ONLOAD#><br />#FORM_OPEN#<br /><html lang="en-us"xmlns:htmldb="http://htmldb.oracle.com"><br /><head><br /><title>Customers</title><br /><link rel="stylesheet" href="/i/themes/theme_4/theme_3_1.css" type="text/css" /><br /><script src="/i/javascript/apex_ns_3_1.js" type="text/javascript"></script><br /><script <br />...(snip)...<br /></script><br /><link rel="stylesheet" href="/i/css/apex_3_1.css" type="text/css" /><br /><!--[if IE]><link rel="stylesheet" href="/i/css/apex_ie_3_1.css" type="text/css" /><![endif]--><br />[Page HTML Header]<br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /></head><br /><body [HTML Body Attribute]><br /><form action="wwv_flow.accept" method="post" name="wwv_flow" id="wwvFlowForm"><br /> <input type="hidden" name="p_flow_id" value="100" id="pFlowId" /> ...(snip)...<input type="hidden" name="p_request" value="" id="pRequest" />[Page Header Text]<br />
    23. 23. <html lang="&BROWSER_LANGUAGE." xmlns:htmldb="http://htmldb.oracle.com"><br /><head><br /><title>#TITLE#</title><br /><link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_4/theme_3_1.css" type="text/css" /><br />#HEAD#<br /></head><br /><body #ONLOAD#><br />#FORM_OPEN#<br /><html lang="en-us"xmlns:htmldb="http://htmldb.oracle.com"><br /><head><br /><title>Customers</title><br /><link rel="stylesheet" href="/i/themes/theme_4/theme_3_1.css" type="text/css" /><br /><script src="/i/javascript/apex_ns_3_1.js" type="text/javascript"></script><br /><script <br />...(snip)...<br /></script><br /><link rel="stylesheet" href="/i/css/apex_3_1.css" type="text/css" /><br /><!--[if IE]><link rel="stylesheet" href="/i/css/apex_ie_3_1.css" type="text/css" /><![endif]--><br />[Page HTML Header]<br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /></head><br /><body [HTML Body Attribute]><br /><form action="wwv_flow.accept" method="post" name="wwv_flow" id="wwvFlowForm"><br /> <input type="hidden" name="p_flow_id" value="100" id="pFlowId" /> ...(snip)...<input type="hidden" name="p_request" value="" id="pRequest" />[Page Header Text]<br />Application Primary Language<br />(Application Globalization Attribute)*<br />Title<br />(Page Display Attribute)<br />Image Prefix<br />(Application Definition)<br />Media Type(Page Display Attribute, or Application Definition , or "text/html")<br />
    24. 24. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><html lang="&BROWSER_LANGUAGE." xmlns="http://www.w3.org/1999/xhtml" xmlns:htmldb="http://htmldb.oracle.com" xmlns:apex="http://apex.oracle.com"><br /><head><br /> <title>#TITLE#</title><br /><link rel="icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon"><br /> <link rel="shortcut icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon"><br />#HEAD#<br /> <link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_4/css/theme_4_0.css" type="text/css" /><br /><!--[if IE]><link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_4/css/theme_4_0_ie.css" type="text/css" /><![endif]--><br /> <!--[if IE 6]><link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_4/css/theme_4_0_ie6.css" type="text/css" /><![endif]--><br /> <!--[if IE 7]><link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_4/css/theme_4_0_ie7.css" type="text/css" /><![endif]--><br /></head><br /><body #ONLOAD#><br /><!--[if lte IE 6]><div id="outdated-browser">#OUTDATED_BROWSER#</div><![endif]--><br />#FORM_OPEN#<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><html lang="en"xmlns="http://www.w3.org/1999/xhtml" xmlns:htmldb="http://htmldb.oracle.com" xmlns:apex="http://apex.oracle.com"><br /><head><br /> <title>Customers</title><br /><link rel="icon" href="/i/favicon.ico" type="image/x-icon"><br /> <link rel="shortcut icon" href="/i/favicon.ico" type="image/x-icon"><br /><link rel="stylesheet" href="/i/css/apex_4_0.css" type="text/css" /><br /> <!--[if IE]><link rel="stylesheet" href="/i/css/apex_ie_4_0.css" type="text/css" /><![endif]--><br /> ...(snip)...<br />[Page HTML Header]<br /> <script type="text/javascript">[JAVASCRIPT_CODE]</script><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /> <link rel="stylesheet" href="/i/themes/theme_4/css/theme_4_0.css" type="text/css" /><br /> ...(snip)...<br /></head><br /><body [Page HTML Body Attribute]><br /><!--[if lte IE 6]><div id="outdated-browser">You are using an outdated web browser. For a list of supported browsers, please reference the Oracle Application Express Installation Guide.</div><![endif]--><br />...(snip)...<br />
    25. 25. #JAVASCRIPT_CODE#<br />
    26. 26. Theme Structure<br />Theme<br />Template<br />Template<br />Template<br />
    27. 27.
    28. 28.
    29. 29.
    30. 30.
    31. 31. Linking Pages to Templates<br />Application 100<br />
    32. 32.
    33. 33. Template Type and Class<br />Types<br />Classes<br />Breadcrumb<br />Button<br />Calendar<br />Label<br />List<br />Page<br />Region<br />Report<br />Popup List of Values<br />Page<br />Login<br />No Tabs<br />1-level Tabs<br />2-level Tabs<br />Popup<br />Printer Friendly<br />Button<br />HTML<br />Image<br />Template<br /><ul><li>Label
    34. 34. Required
    35. 35. Required with Help
    36. 36. Optional
    37. 37. Optional with Help
    38. 38. List
    39. 39. Flat
    40. 40. Hierarchical</li></ul>...plus others...<br />
    41. 41. Template Types...<br />
    42. 42. Out of the Docs<br />Oracle® Application ExpressApplication Builder User's Guide Release 4.0http://download.oracle.com/docs/cd/E17556_01/doc/user.40/e15517/toc.htm<br />
    43. 43.
    44. 44.
    45. 45.
    46. 46.
    47. 47.
    48. 48. Because some things just need to be cut.<br />Deleting Templates<br />
    49. 49.
    50. 50. Customising Templates<br />
    51. 51. Preview Template<br />
    52. 52. Page Header Substitution Variables<br />#TITLE# - page title<br />#HEAD# - anything you want to include in the HTML header<br />#ONLOAD# - BODY tag attributes<br />#FORM_OPEN# - required<br />#JAVASCRIPT_CODE# - new to Apex 4 - function and variable declarations<br />#OUTDATED_BROWSER# - message to annoy dinosaurs<br />
    53. 53. Page Body Substitution Variables<br />#BOX_BODY# - required<br />#REGION_POSITION_01# - usually breadcrumb<br />#REGION_POSITION_02# - usually sidebar<br />#REGION_POSITION_03# - usually right-justified<br />#REGION_POSITION_04..08# - various locations<br />#LOGO#<br />#GLOBAL_NOTIFICATION#<br />#NOTIFICATION_MESSAGE# - error/validation messages<br />#SUCCESS_MESSAGE#<br />#NAVIGATION_BAR#<br />
    54. 54. Page Tabs Substitution Variables<br />#PARENT_TAB_CELLS#<br />#TAB_CELLS#<br />
    55. 55. Error Page Substitution Variables<br />#MESSAGE# - error message text<br />#BACK_LINK# - URL to go back to previous page<br />#OK# - for translations<br />#RETURN_TO_APPLICATION# - for translations<br />
    56. 56. Report Template Substitution Variables<br />#REPORT_ATTRIBUTES#<br />#TOP_PAGINATION#<br />#ALIGNMENT#<br />#COLUMN_HEADER_NAME#<br />#COLUMN_HEADER#<br />#COLUMN_VALUE#<br />#HIGHLIGHT_ROW#<br />#EXTERNAL_LINK#<br />#CSV_LINK#<br />#PAGINATION#<br />#PAGINATION_NEXT#<br />#PAGINATION_PREVIOUS#<br />#PAGINATION_NEXT_SET#<br />#PAGINATION_PREVIOUS_SET#<br />#LINK#<br />
    57. 57. Region Template Substitution Variables<br />
    58. 58. Custom CSS<br />Create custom CSS file<br />Upload CSS<br />Reference CSS - Page templates<br />
    59. 59.
    60. 60.
    61. 61.
    62. 62.
    63. 63.
    64. 64.
    65. 65.
    66. 66.
    67. 67.
    68. 68.
    69. 69.
    70. 70.
    71. 71.
    72. 72. :%s/ "width: 1024px" / "width: 600px" /g<br />
    73. 73. :%s/ "../images" / "/i/themes/theme_6/images" /g<br />
    74. 74.
    75. 75.
    76. 76.
    77. 77.
    78. 78.
    79. 79.
    80. 80.
    81. 81.
    82. 82. Alternatives<br />
    83. 83. 1. CSS on filesystem<br />
    84. 84. 2. Styles in templates<br />
    85. 85.
    86. 86. Public Themes<br />
    87. 87.
    88. 88.
    89. 89.
    90. 90.
    91. 91.
    92. 92.
    93. 93.
    94. 94.
    95. 95. Data Dictionary Views<br />APEX_THEMES- builtin, public and workspace themes<br />APEX_APPLICATION_THEMES- includes default templates for each<br />APEX_APPLICATION_TEMPLATES- all templates in all themes<br />
    96. 96. Data Dictionary Views<br />APEX_APPLICATION_TEMP_BC- breadcrumb templates including markup<br />APEX_APPLICATION_TEMP_BUTTON<br />APEX_APPLICATION_TEMP_CALENDAR <br />APEX_APPLICATION_TEMP_LABEL<br />APEX_APPLICATION_TEMP_LIST<br />APEX_APPLICATION_TEMP_PAGE<br />APEX_APPLICATION_TEMP_POPUPLOV<br />APEX_APPLICATION_TEMP_REGION<br />APEX_APPLICATION_TEMP_REPORT<br />
    97. 97. APEX_APPLICATION_LISTS.TEMPLATE<br />APEX_APPLICATION_PAGES.PAGE_TEMPLATE<br />APEX_APPLICATION_PAGE_BUTTONS.BUTTON_TEMPLATE<br />APEX_APPLICATION_PAGE_IR.BUTTON_TEMPLATE - button template setting for Interactive Reports<br />APEX_APPLICATION_PAGE_ITEMS.ITEM_LABEL_TEMPLATE<br />APEX_APPLICATION_PAGE_REGIONS.TEMPLATE.BREADCRUMB_TEMPLATE.REPORT_TEMPLATE<br />APEX_APPLICATION_PAGE_TREES.TREE_TEMPLATE<br />DataDictionaryViews<br />
    98. 98. apex.oracle.com<br />Oracle Apex Application Builder User's Guide - Chapter 10, Managing Themes and Templateshttp://download.oracle.com/docs/cd/E17556_01/doc/user.40/e15517/themes.htm#CJABAEIE<br />Cloning your Corporate UI with HTML DBhttp://spendolini.blogspot.com/2008/04/cloning-your-corporate-ui-with-html-db.html<br />Apex substitution strings (Apex 3.2.1)http://www.oraclenerd.com/2009/12/apex-substitution-strings.html<br />Apex substitution strings cross reference chart (Apex 3.0) http://oraclequirks.blogspot.com/2007/07/apex-substitution-strings-cross.html<br />More info<br />
    99. 99. Tell us what you think…<br />http://feedback.insync10.com.au<br />jeffkemponoracle.com<br />

    ×