Your SlideShare is downloading. ×
0
APEX Themes & TemplatesJeffrey Kempjeffkemponoracle.com18 August 2010<br />The most comprehensive Oracle applications & te...
Apex Themes and Templates<br />Apex 4.0 Improvements<br />Apex 4.0 Themes Tour<br />Intro to Templates<br />Themes + Templ...
About Me<br />60% Oracle Developer<br />50% Apex Developer<br />40% Iced Coffee<br />
Apex 4.0 Improvements<br />Better Themes<br />Application Express provides 20 themes. Each theme is comprised of component...
Apex 4.0 Improvements<br />Less <TABLE>s, more <DIV>s<br /><div id="body"><br />  <div id="three-col"><br />    <div id="l...
Apex 4.0 Improvements<br />Sub Regions<br />
Apex 4.0 Improvements<br />New sample apps<br />
Apex 4.0 Improvements<br />+ a whole heap of other wonderful things<br />New item types<br />APEX Listener<br />Plug-ins<b...
Should I upgrade to 4.0?<br />Yes - but first, review known issues list:http://www.oracle.com/technology/products/database...
Should I upgrade to 4.0?<br />Test it!<br />
What if my application has a customised theme?<br />
Flow<br />
What are templates for?<br />
DECLARE<br />  template VARCHAR2(200)<br />    := '<HTML><br />          <HEAD><br />           <TITLE> #TITLE# </TITLE><b...
<html lang="&BROWSER_LANGUAGE." xmlns:htmldb="http://htmldb.oracle.com"><br /><head><br /><title>#TITLE#</title><br /><lin...
<html lang="&BROWSER_LANGUAGE." xmlns:htmldb="http://htmldb.oracle.com"><br /><head><br /><title>#TITLE#</title><br /><lin...
<html lang="&BROWSER_LANGUAGE." xmlns:htmldb="http://htmldb.oracle.com"><br /><head><br /><title>#TITLE#</title><br /><lin...
<html lang="&BROWSER_LANGUAGE." xmlns:htmldb="http://htmldb.oracle.com"><br /><head><br /><title>#TITLE#</title><br /><lin...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><html l...
#JAVASCRIPT_CODE#<br />
Theme Structure<br />Theme<br />Template<br />Template<br />Template<br />
Linking Pages to Templates<br />Application 100<br />
Template Type and Class<br />Types<br />Classes<br />Breadcrumb<br />Button<br />Calendar<br />Label<br />List<br />Page<b...
Required
Required with Help
Optional
Optional with Help
List
Flat
Hierarchical</li></ul>...plus others...<br />
Template Types...<br />
Out of the Docs<br />Oracle® Application ExpressApplication Builder  User's Guide Release 4.0http://download.oracle.com/do...
Because some things just need to be cut.<br />Deleting Templates<br />
Customising Templates<br />
Preview Template<br />
Page Header Substitution Variables<br />#TITLE# - page title<br />#HEAD# - anything you want to include in the HTML header...
Page Body Substitution Variables<br />#BOX_BODY# - required<br />#REGION_POSITION_01# - usually breadcrumb<br />#REGION_PO...
Page Tabs Substitution Variables<br />#PARENT_TAB_CELLS#<br />#TAB_CELLS#<br />
Error Page Substitution Variables<br />#MESSAGE# - error message text<br />#BACK_LINK# - URL to go back to previous page<b...
Report Template Substitution Variables<br />#REPORT_ATTRIBUTES#<br />#TOP_PAGINATION#<br />#ALIGNMENT#<br />#COLUMN_HEADER...
Region Template Substitution Variables<br />
Custom CSS<br />Create custom CSS file<br />Upload CSS<br />Reference CSS - Page templates<br />
:%s/ "width: 1024px"   / "width: 600px"   /g<br />
:%s/ "../images"   / "/i/themes/theme_6/images"   /g<br />
Alternatives<br />
1. CSS on filesystem<br />
2. Styles in templates<br />
Public Themes<br />
Data Dictionary Views<br />APEX_THEMES- builtin, public and workspace themes<br />APEX_APPLICATION_THEMES- includes defaul...
Data Dictionary Views<br />APEX_APPLICATION_TEMP_BC- breadcrumb templates including markup<br />APEX_APPLICATION_TEMP_BUTT...
APEX_APPLICATION_LISTS.TEMPLATE<br />APEX_APPLICATION_PAGES.PAGE_TEMPLATE<br />APEX_APPLICATION_PAGE_BUTTONS.BUTTON_TEMPLA...
apex.oracle.com<br />Oracle Apex Application Builder User's Guide - Chapter 10, Managing Themes and Templateshttp://downlo...
Tell us what you think…<br />http://feedback.insync10.com.au<br />jeffkemponoracle.com<br />
APEX Themes and Templates
APEX Themes and Templates
APEX Themes and Templates
APEX Themes and Templates
APEX Themes and Templates
APEX Themes and Templates
APEX Themes and Templates
Upcoming SlideShare
Loading in...5
×

APEX Themes and Templates

27,585

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
27,585
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
499
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Theme 4 - &quot;Topaz&quot;
  • Theme 6 - &quot;Centered Blue&quot;
  • Theme 1 - &quot;Simple Red&quot;
  • Shared Components
  • Transcript of "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 />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×