106
APEX Themes & Templates Jeffrey Kemp jeffkemponoracle.com 18 August 2010 The most comprehensive Oracle applications & technology content under one roof

APEX Themes and Templates

Embed Size (px)

DESCRIPTION

APEX Themes and Templates

Citation preview

Page 1: APEX Themes and Templates

APEX Themes & TemplatesJeffrey Kempjeffkemponoracle.com

18 August 2010

The most comprehensive Oracle applications & technology content under one roof

Page 2: APEX Themes and Templates

Apex Themes and Templates

Apex 4.0 Improvements Apex 4.0 Themes Tour Intro to Templates Themes + Templates + Apps Managing Themes Customising Templates & CSS

Page 3: APEX Themes and Templates

About Me60% Oracle Developer50% Apex Developer40% Iced Coffee

Page 4: APEX Themes and Templates

About Me

Page 5: APEX Themes and Templates

About Me

Page 6: APEX Themes and Templates

About You

Page 7: APEX Themes and Templates

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

Page 8: APEX Themes and Templates

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>

Page 9: APEX Themes and Templates

Apex 4.0 Improvements

Sub

Reg

ions

Page 10: APEX Themes and Templates

Apex 4.0 Improvements

New sample apps

Page 11: APEX Themes and Templates

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

Page 12: APEX Themes and Templates
Page 13: APEX Themes and Templates
Page 14: APEX Themes and Templates
Page 15: APEX Themes and Templates
Page 16: APEX Themes and Templates
Page 18: APEX Themes and Templates

Should I upgrade to 4.0?

Test it!

Page 19: APEX Themes and Templates

What if my application has a customised theme?

Page 20: APEX Themes and Templates

When to customise a templateFor one page?

For many pages?

For all pages?

Page 21: APEX Themes and Templates

What to put in a templateSQL

PL/SQLHTML

Javascript CSS

Comments

??

?

Page 22: APEX Themes and Templates

Flow

Content

Attributes

Template

Page 23: APEX Themes and Templates

What are templates for?

Page 24: APEX Themes and Templates

"The Templating Way"

1. Template2. Substitution Variables

Page 25: APEX Themes and Templates

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;

Page 26: APEX Themes and Templates

"The Templating Way"

Page 27: APEX Themes and Templates

"The Templating Way"

Page 28: APEX Themes and Templates
Page 29: APEX Themes and Templates
Page 30: APEX Themes and Templates

<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#

Page 31: APEX Themes and Templates

<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#

Page 32: APEX Themes and Templates

<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]

Page 33: APEX Themes and Templates

<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)*

Page 34: APEX Themes and Templates

<!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)...

Page 35: APEX Themes and Templates

#JAVASCRIPT_CODE#

Page 36: APEX Themes and Templates
Page 37: APEX Themes and Templates

Theme Structure

Theme

Template

Template

Template

Page 38: APEX Themes and Templates
Page 39: APEX Themes and Templates
Page 40: APEX Themes and Templates
Page 41: APEX Themes and Templates
Page 42: APEX Themes and Templates

Linking Pages to Templates

Theme 1

Page Template (Default)

Page Template (Alternative)

Application 100

Page 43: APEX Themes and Templates
Page 44: APEX Themes and Templates

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...

Page 45: APEX Themes and Templates

Template Types...

Page 46: APEX Themes and Templates

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

Page 47: APEX Themes and Templates
Page 48: APEX Themes and Templates

Managing Themes

Page 49: APEX Themes and Templates
Page 50: APEX Themes and Templates
Page 51: APEX Themes and Templates
Page 52: APEX Themes and Templates
Page 53: APEX Themes and Templates
Page 54: APEX Themes and Templates

Deleting TemplatesBecause some things just need to be cut.

Page 55: APEX Themes and Templates
Page 56: APEX Themes and Templates

Customising Templates

Page 57: APEX Themes and Templates

Preview Template

Page 58: APEX Themes and Templates

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 59: APEX Themes and Templates

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 60: APEX Themes and Templates

Page Tabs Substitution Variables

#PARENT_TAB_CELLS#

#TAB_CELLS#

Page 61: APEX Themes and Templates

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

Page 62: APEX Themes and Templates

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#

Page 63: APEX Themes and Templates

Region Template Substitution Variables

Page 64: APEX Themes and Templates

Custom CSS

1. Create custom CSS file2. Upload CSS3. Reference CSS - Page templates

Page 65: APEX Themes and Templates
Page 66: APEX Themes and Templates
Page 67: APEX Themes and Templates
Page 68: APEX Themes and Templates
Page 69: APEX Themes and Templates
Page 70: APEX Themes and Templates
Page 71: APEX Themes and Templates
Page 72: APEX Themes and Templates
Page 73: APEX Themes and Templates
Page 74: APEX Themes and Templates
Page 75: APEX Themes and Templates
Page 76: APEX Themes and Templates
Page 77: APEX Themes and Templates
Page 78: APEX Themes and Templates

:%s/ "width: 1024px" / "width: 600px" /g

Page 79: APEX Themes and Templates

:%s/ "../images" / "/i/themes/theme_6/images" /g

Page 80: APEX Themes and Templates
Page 81: APEX Themes and Templates
Page 82: APEX Themes and Templates
Page 83: APEX Themes and Templates
Page 84: APEX Themes and Templates
Page 85: APEX Themes and Templates
Page 86: APEX Themes and Templates
Page 87: APEX Themes and Templates
Page 88: APEX Themes and Templates
Page 89: APEX Themes and Templates

Alternatives

Page 90: APEX Themes and Templates

1. CSS on filesystem

Page 91: APEX Themes and Templates

2. Styles in templates

Page 92: APEX Themes and Templates
Page 93: APEX Themes and Templates

Public Themes

Page 94: APEX Themes and Templates
Page 95: APEX Themes and Templates
Page 96: APEX Themes and Templates
Page 97: APEX Themes and Templates
Page 98: APEX Themes and Templates
Page 99: APEX Themes and Templates
Page 100: APEX Themes and Templates
Page 101: APEX Themes and Templates
Page 102: APEX Themes and Templates

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

Page 103: APEX Themes and Templates

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

Page 104: APEX Themes and Templates

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

Page 105: APEX Themes and Templates

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

Page 106: APEX Themes and Templates

Tell us what you think…

http://feedback.insync10.com.au

jeffkemponoracle.com