View
26.923
Download
2
Category
Preview:
DESCRIPTION
APEX Themes and Templates
Citation preview
APEX Themes & TemplatesJeffrey Kempjeffkemponoracle.com
18 August 2010
The most comprehensive Oracle applications & technology content under one roof
Apex Themes and Templates
Apex 4.0 Improvements Apex 4.0 Themes Tour Intro to Templates Themes + Templates + Apps Managing Themes Customising Templates & CSS
About Me60% Oracle Developer50% Apex Developer40% Iced Coffee
About Me
About Me
About You
Apex 4.0 Improvements
Better ThemesApplication 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.
http://www.oracle.com/technology/products/database/application_express/html/4.0_new_features.html#themes
Apex 4.0 Improvements
Less <TABLE>s, more <DIV>s
<div id="body"> <div id="three-col"> <div id="left-sidebar"> #REGION_POSITION_02# </div>
Apex 4.0 Improvements
Sub
Reg
ions
Apex 4.0 Improvements
New sample apps
Apex 4.0 Improvements
+ a whole heap of other wonderful things
Websheets
Dynamic Actions
Plug-ins
Team DevelopmentGanttsMaps
REST support
APEX ListenerNew item types
Cascading LOVs
Instrumentation/Debug framework
Region display selectors Date item range validation
Declarative item validations
Should I upgrade to 4.0?
Yes - but first, review known issues list:http://www.oracle.com/technology/products/database/application_express/html/4.0_known_issues.html
Should I upgrade to 4.0?
Test it!
What if my application has a customised theme?
When to customise a templateFor one page?
For many pages?
For all pages?
What to put in a templateSQL
PL/SQLHTML
Javascript CSS
Comments
??
?
Flow
Content
Attributes
Template
What are templates for?
"The Templating Way"
1. Template2. Substitution Variables
Conceptual
CodeDECLARE template VARCHAR2(200) := '<HTML> <HEAD> <TITLE> #TITLE# </TITLE> </HEAD> <BODY> #BODY# </BODY> </HTML>';BEGIN htp.p( REPLACE( REPLACE( template ,'#TITLE#', :title) ,'#BODY#', :body) );END;
"The Templating Way"
"The Templating Way"
<html lang="&BROWSER_LANGUAGE." xmlns:htmldb="http://htmldb.oracle.com">
<head><title>#TITLE#</title><link rel="stylesheet"
href="#IMAGE_PREFIX#themes/theme_4/theme_3_1.css" type="text/css" />
#HEAD#</head><body #ONLOAD#>#FORM_OPEN#
<html lang="&BROWSER_LANGUAGE." xmlns:htmldb="http://htmldb.oracle.com">
<head><title>#TITLE#</title><link rel="stylesheet"
href="#IMAGE_PREFIX#themes/theme_4/theme_3_1.css" type="text/css" />
#HEAD#</head><body #ONLOAD#>#FORM_OPEN#
<html lang="&BROWSER_LANGUAGE." xmlns:htmldb="http://htmldb.oracle.com">
<head><title>#TITLE#</title><link rel="stylesheet"
href="#IMAGE_PREFIX#themes/theme_4/theme_3_1.css" type="text/css" />
#HEAD#
</head><body #ONLOAD#>#FORM_OPEN#
<html lang="en-us"xmlns:htmldb="http://htmldb.oracle.com">
<head><title>Customers</title><link rel="stylesheet"
href="/i/themes/theme_4/theme_3_1.css" type="text/css" />
<script src="/i/javascript/apex_ns_3_1.js" type="text/javascript"></script>
<script ...(snip)...
</script><link rel="stylesheet" href="/i/css/apex_3_1.css"
type="text/css" /><!--[if IE]><link rel="stylesheet"
href="/i/css/apex_ie_3_1.css" type="text/css" /><![endif]-->
[Page HTML Header]<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" /></head><body [HTML Body Attribute]><form action="wwv_flow.accept" method="post"
name="wwv_flow" id="wwvFlowForm"> <input type="hidden" name="p_flow_id" value="100"
id="pFlowId" /> ...(snip)...
<input type="hidden" name="p_request" value="" id="pRequest" />[Page Header Text]
<html lang="&BROWSER_LANGUAGE." xmlns:htmldb="http://htmldb.oracle.com">
<head><title>#TITLE#</title><link rel="stylesheet"
href="#IMAGE_PREFIX#themes/theme_4/theme_3_1.css" type="text/css" />
#HEAD#
</head><body #ONLOAD#>#FORM_OPEN#
<html lang="en-us"xmlns:htmldb="http://htmldb.oracle.com">
<head><title>Customers</title><link rel="stylesheet"
href="/i/themes/theme_4/theme_3_1.css" type="text/css" />
<script src="/i/javascript/apex_ns_3_1.js" type="text/javascript"></script>
<script ...(snip)...
</script><link rel="stylesheet" href="/i/css/apex_3_1.css"
type="text/css" /><!--[if IE]><link rel="stylesheet"
href="/i/css/apex_ie_3_1.css" type="text/css" /><![endif]-->
[Page HTML Header]<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" /></head><body [HTML Body Attribute]><form action="wwv_flow.accept" method="post"
name="wwv_flow" id="wwvFlowForm"> <input type="hidden" name="p_flow_id" value="100"
id="pFlowId" /> ...(snip)...
<input type="hidden" name="p_request" value="" id="pRequest" />[Page Header Text]
Media Type(Page Display Attribute,
or Application Definition , or "text/html")
Title(Page Display Attribute)
Image Prefix(Application Definition)
Application Primary Language(Application
Globalization Attribute)*
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="&BROWSER_LANGUAGE." xmlns="http://www.w3.org/1999/xhtml" xmlns:htmldb="http://htmldb.oracle.com" xmlns:apex="http://apex.oracle.com">
<head> <title>#TITLE#</title> <link rel="icon" href="#IMAGE_PREFIX#favicon.ico"
type="image/x-icon"> <link rel="shortcut icon" href="#IMAGE_PREFIX#favicon.ico"
type="image/x-icon"> #HEAD# <link rel="stylesheet"
href="#IMAGE_PREFIX#themes/theme_4/css/theme_4_0.css" type="text/css" />
<!--[if IE]><link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_4/css/theme_4_0_ie.css" type="text/css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_4/css/theme_4_0_ie6.css" type="text/css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_4/css/theme_4_0_ie7.css" type="text/css" /><![endif]-->
</head><body #ONLOAD#><!--[if lte IE 6]><div id="outdated-
browser">#OUTDATED_BROWSER#</div><![endif]-->#FORM_OPEN#
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en"xmlns="http://www.w3.org/1999/xhtml" xmlns:htmldb="http://htmldb.oracle.com" xmlns:apex="http://apex.oracle.com">
<head> <title>Customers</title> <link rel="icon" href="/i/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="/i/favicon.ico"
type="image/x-icon"> <link rel="stylesheet" href="/i/css/apex_4_0.css"
type="text/css" /> <!--[if IE]><link rel="stylesheet"
href="/i/css/apex_ie_4_0.css" type="text/css" /><![endif]-->
...(snip)... [Page HTML Header] <script type="text/javascript">
[JAVASCRIPT_CODE]</script> <meta http-equiv="Content-Type" content="text/html;
charset=utf-8" /> <link rel="stylesheet"
href="/i/themes/theme_4/css/theme_4_0.css" type="text/css" />
...(snip)...</head><body [Page HTML Body Attribute]><!--[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]-->
...(snip)...
#JAVASCRIPT_CODE#
Theme Structure
Theme
Template
Template
Template
Linking Pages to Templates
Theme 1
Page Template (Default)
Page Template (Alternative)
Application 100
Template Type and Class
TypesClasses
Breadcrumb Button Calendar Label List Page Region Report Popup List of Values
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
...plus others...
Template Types...
Out of the Docs
Oracle® Application Express Application Builder User's Guide Release 4.0http://download.oracle.com/docs/cd/E17556_01/doc/user.40/e15517/toc.htm
Managing Themes
Deleting TemplatesBecause some things just need to be cut.
Customising Templates
Preview Template
Page Header Substitution Variables#TITLE# - page title
#HEAD# - anything you want to include in the HTML header
#ONLOAD# - BODY tag attributes
#FORM_OPEN# - required
#JAVASCRIPT_CODE# - new to Apex 4 - function and variable declarations
#OUTDATED_BROWSER# - message to annoy dinosaurs
Page Body Substitution Variables
#BOX_BODY# - required
#REGION_POSITION_01# - usually breadcrumb
#REGION_POSITION_02# - usually sidebar
#REGION_POSITION_03# - usually right-justified
#REGION_POSITION_04..08# - various locations
#LOGO#
#GLOBAL_NOTIFICATION#
#NOTIFICATION_MESSAGE# - error/validation messages
#SUCCESS_MESSAGE#
#NAVIGATION_BAR#
Page Tabs Substitution Variables
#PARENT_TAB_CELLS#
#TAB_CELLS#
Error Page Substitution Variables#MESSAGE# - error message text
#BACK_LINK# - URL to go back to previous page
#OK# - for translations
#RETURN_TO_APPLICATION# - for translations
Report Template Substitution Variables#REPORT_ATTRIBUTES#
#TOP_PAGINATION#
#ALIGNMENT#
#COLUMN_HEADER_NAME#
#COLUMN_HEADER#
#COLUMN_VALUE#
#HIGHLIGHT_ROW#
#EXTERNAL_LINK#
#CSV_LINK#
#PAGINATION##PAGINATION_NEXT##PAGINATION_PREVIOUS##PAGINATION_NEXT_SET##PAGINATION_PREVIOUS_SET##LINK#
Region Template Substitution Variables
Custom CSS
1. Create custom CSS file2. Upload CSS3. Reference CSS - Page templates
:%s/ "width: 1024px" / "width: 600px" /g
:%s/ "../images" / "/i/themes/theme_6/images" /g
Alternatives
1. CSS on filesystem
2. Styles in templates
Public Themes
Data Dictionary Views
APEX_THEMES- builtin, public and workspace themes
APEX_APPLICATION_THEMES- includes default templates for each
APEX_APPLICATION_TEMPLATES- all templates in all themes
Data Dictionary ViewsAPEX_APPLICATION_TEMP_BC
- breadcrumb templates including markupAPEX_APPLICATION_TEMP_BUTTONAPEX_APPLICATION_TEMP_CALENDAR APEX_APPLICATION_TEMP_LABELAPEX_APPLICATION_TEMP_LISTAPEX_APPLICATION_TEMP_PAGEAPEX_APPLICATION_TEMP_POPUPLOVAPEX_APPLICATION_TEMP_REGIONAPEX_APPLICATION_TEMP_REPORT
DataDictionaryViews
APEX_APPLICATION_LISTS.TEMPLATE
APEX_APPLICATION_PAGES.PAGE_TEMPLATE
APEX_APPLICATION_PAGE_BUTTONS.BUTTON_TEMPLATE
APEX_APPLICATION_PAGE_IR.BUTTON_TEMPLATE - button template setting for Interactive Reports
APEX_APPLICATION_PAGE_ITEMS.ITEM_LABEL_TEMPLATE
APEX_APPLICATION_PAGE_REGIONS.TEMPLATE.BREADCRUMB_TEMPLATE.REPORT_TEMPLATE
APEX_APPLICATION_PAGE_TREES.TREE_TEMPLATE
More info
apex.oracle.com
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
Cloning your Corporate UI with HTML DBhttp://spendolini.blogspot.com/2008/04/cloning-your-corporate-ui-with-html-db.html
Apex substitution strings (Apex 3.2.1)http://www.oraclenerd.com/2009/12/apex-substitution-strings.html
Apex substitution strings cross reference chart (Apex 3.0) http://oraclequirks.blogspot.com/2007/07/apex-substitution-strings-cross.html
Tell us what you think…
http://feedback.insync10.com.au
jeffkemponoracle.com
Recommended