SlideShare una empresa de Scribd logo
1 de 106
APEX Themes & TemplatesJeffrey Kempjeffkemponoracle.com18 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 Me 60% Oracle Developer 50% Apex Developer 40% Iced Coffee
About Me
About Me
About You
Apex 4.0 Improvements Better Themes 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. 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 Regions
Apex 4.0 Improvements New sample apps
Apex 4.0 Improvements + a whole heap of other wonderful things New item types APEX Listener Plug-ins Websheets Cascading LOVs Region display selectors Date item range validation Dynamic Actions REST support Gantts Team Development Declarative item validations Maps Instrumentation/Debug framework
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 template For one page? For many pages? For all pages?
What to put in a template SQL 	PL/SQL 		HTML Javascript 				      CSS 					Comments  ? ? ?
Flow
What are templates for?
"The Templating Way" Template Substitution Variables
DECLARE   template VARCHAR2(200)     := '<HTML>           <HEAD>            <TITLE> #TITLE# </TITLE>          </HEAD>           <BODY> #BODY# </BODY>         </HTML>'; BEGIN   htp.p(     REPLACE( REPLACE( template      ,'#TITLE#', :title)      ,'#BODY#',  :body)    ); END; Conceptual Code
"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] Application Primary Language (Application Globalization Attribute)* Title (Page Display Attribute) Image Prefix (Application Definition) Media Type(Page Display Attribute, or Application Definition , or "text/html")
<!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 Application 100
Template Type and Class Types Classes 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 ,[object Object]
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
Because some things just need to be cut. Deleting Templates
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 Create custom CSS file Upload CSS 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

Más contenido relacionado

La actualidad más candente

APEX Interactive Grid API Essentials: The Stuff You Will Really Use
APEX Interactive Grid API Essentials:  The Stuff You Will Really UseAPEX Interactive Grid API Essentials:  The Stuff You Will Really Use
APEX Interactive Grid API Essentials: The Stuff You Will Really UseKaren Cannell
 
Find Anything In Your APEX App - Fuzzy Search with Oracle Text
Find Anything In Your APEX App - Fuzzy Search with Oracle TextFind Anything In Your APEX App - Fuzzy Search with Oracle Text
Find Anything In Your APEX App - Fuzzy Search with Oracle TextCarsten Czarski
 
Validate Your Validations: Both Sides Now
Validate Your Validations: Both Sides NowValidate Your Validations: Both Sides Now
Validate Your Validations: Both Sides NowKaren Cannell
 
How to use source control with apex?
How to use source control with apex?How to use source control with apex?
How to use source control with apex?Oliver Lemm
 
Build web apps with react js
Build web apps with react jsBuild web apps with react js
Build web apps with react jsdhanushkacnd
 
Introduction to web programming with JavaScript
Introduction to web programming with JavaScriptIntroduction to web programming with JavaScript
Introduction to web programming with JavaScriptT11 Sessions
 
Documenting your REST API with Swagger - JOIN 2014
Documenting your REST API with Swagger - JOIN 2014Documenting your REST API with Swagger - JOIN 2014
Documenting your REST API with Swagger - JOIN 2014JWORKS powered by Ordina
 
JSON-LD, Schema.org, and Structured data
JSON-LD, Schema.org, and Structured dataJSON-LD, Schema.org, and Structured data
JSON-LD, Schema.org, and Structured dataSante J. Achille
 
Oracle Application Express 20.2 New Features
Oracle Application Express 20.2 New FeaturesOracle Application Express 20.2 New Features
Oracle Application Express 20.2 New Featuresmsewtz
 
Laravel presentation
Laravel presentationLaravel presentation
Laravel presentationToufiq Mahmud
 
Introduction To PHP
Introduction To PHPIntroduction To PHP
Introduction To PHPShweta A
 
Oracle apex training
Oracle apex trainingOracle apex training
Oracle apex trainingVasudha India
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basicsEliran Eliassy
 
JavaScript Tutorial
JavaScript  TutorialJavaScript  Tutorial
JavaScript TutorialBui Kiet
 
Cagando Datos con APEX_DATA_PARSER
Cagando Datos con APEX_DATA_PARSERCagando Datos con APEX_DATA_PARSER
Cagando Datos con APEX_DATA_PARSERRodolfoRodriguez161
 

La actualidad más candente (20)

APEX Interactive Grid API Essentials: The Stuff You Will Really Use
APEX Interactive Grid API Essentials:  The Stuff You Will Really UseAPEX Interactive Grid API Essentials:  The Stuff You Will Really Use
APEX Interactive Grid API Essentials: The Stuff You Will Really Use
 
Javascript 101
Javascript 101Javascript 101
Javascript 101
 
Find Anything In Your APEX App - Fuzzy Search with Oracle Text
Find Anything In Your APEX App - Fuzzy Search with Oracle TextFind Anything In Your APEX App - Fuzzy Search with Oracle Text
Find Anything In Your APEX App - Fuzzy Search with Oracle Text
 
Validate Your Validations: Both Sides Now
Validate Your Validations: Both Sides NowValidate Your Validations: Both Sides Now
Validate Your Validations: Both Sides Now
 
How to use source control with apex?
How to use source control with apex?How to use source control with apex?
How to use source control with apex?
 
Build web apps with react js
Build web apps with react jsBuild web apps with react js
Build web apps with react js
 
PHP - Introduction to PHP Fundamentals
PHP -  Introduction to PHP FundamentalsPHP -  Introduction to PHP Fundamentals
PHP - Introduction to PHP Fundamentals
 
Introduction to web programming with JavaScript
Introduction to web programming with JavaScriptIntroduction to web programming with JavaScript
Introduction to web programming with JavaScript
 
Documenting your REST API with Swagger - JOIN 2014
Documenting your REST API with Swagger - JOIN 2014Documenting your REST API with Swagger - JOIN 2014
Documenting your REST API with Swagger - JOIN 2014
 
Php
PhpPhp
Php
 
JSON-LD, Schema.org, and Structured data
JSON-LD, Schema.org, and Structured dataJSON-LD, Schema.org, and Structured data
JSON-LD, Schema.org, and Structured data
 
Oracle Application Express 20.2 New Features
Oracle Application Express 20.2 New FeaturesOracle Application Express 20.2 New Features
Oracle Application Express 20.2 New Features
 
Laravel presentation
Laravel presentationLaravel presentation
Laravel presentation
 
Introduction To PHP
Introduction To PHPIntroduction To PHP
Introduction To PHP
 
Oracle apex training
Oracle apex trainingOracle apex training
Oracle apex training
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
JavaScript Tutorial
JavaScript  TutorialJavaScript  Tutorial
JavaScript Tutorial
 
Cagando Datos con APEX_DATA_PARSER
Cagando Datos con APEX_DATA_PARSERCagando Datos con APEX_DATA_PARSER
Cagando Datos con APEX_DATA_PARSER
 
Javascript
JavascriptJavascript
Javascript
 
MongoDB and Node.js
MongoDB and Node.jsMongoDB and Node.js
MongoDB and Node.js
 

Destacado

Face/Off: APEX Templates & Themes
Face/Off: APEX Templates & ThemesFace/Off: APEX Templates & Themes
Face/Off: APEX Templates & Themescrokitta
 
Building Commercial Applications with Oracle Applications Express by Scott Sp...
Building Commercial Applications with Oracle Applications Express by Scott Sp...Building Commercial Applications with Oracle Applications Express by Scott Sp...
Building Commercial Applications with Oracle Applications Express by Scott Sp...Enkitec
 
Developing Commercial APEX Applications
Developing Commercial APEX ApplicationsDeveloping Commercial APEX Applications
Developing Commercial APEX ApplicationsEnkitec
 
Zero to Sixty with Oracle ApEx
Zero to Sixty with Oracle ApExZero to Sixty with Oracle ApEx
Zero to Sixty with Oracle ApExBradley Brown
 
Oracle Apex - 3 real-life case studies (Pretius presentation for WDI2015)
Oracle Apex - 3 real-life case studies (Pretius presentation for WDI2015)Oracle Apex - 3 real-life case studies (Pretius presentation for WDI2015)
Oracle Apex - 3 real-life case studies (Pretius presentation for WDI2015)Pretius
 
Oracle Apex Technical Introduction
Oracle Apex   Technical IntroductionOracle Apex   Technical Introduction
Oracle Apex Technical Introductioncrokitta
 
Developing Customer Portal with Oracle APEX - A Case Study
Developing Customer Portal with Oracle APEX - A Case StudyDeveloping Customer Portal with Oracle APEX - A Case Study
Developing Customer Portal with Oracle APEX - A Case StudyToronto-Oracle-Users-Group
 
Integration of APEX and Oracle Forms
Integration of APEX and Oracle FormsIntegration of APEX and Oracle Forms
Integration of APEX and Oracle FormsRoel Hartman
 
Pretius Oracle Apex Primer
Pretius Oracle Apex PrimerPretius Oracle Apex Primer
Pretius Oracle Apex PrimerPretius
 
Building a Flexible UI with Oracle ApEx
Building a Flexible UI with Oracle ApExBuilding a Flexible UI with Oracle ApEx
Building a Flexible UI with Oracle ApExBradley Brown
 
Oracle Application Express
Oracle Application ExpressOracle Application Express
Oracle Application ExpressHBoone
 
Oracle apex-hands-on-guide lab#1
Oracle apex-hands-on-guide lab#1Oracle apex-hands-on-guide lab#1
Oracle apex-hands-on-guide lab#1Amit Sharma
 
Oracle database - Get external data via HTTP, FTP and Web Services
Oracle database - Get external data via HTTP, FTP and Web ServicesOracle database - Get external data via HTTP, FTP and Web Services
Oracle database - Get external data via HTTP, FTP and Web ServicesKim Berg Hansen
 
Oracle Forms - stay or move on ? Webinar by Kumaran Systems
Oracle Forms - stay or move on ? Webinar by Kumaran SystemsOracle Forms - stay or move on ? Webinar by Kumaran Systems
Oracle Forms - stay or move on ? Webinar by Kumaran SystemsKumaran Systems Inc
 
Oracle APEX or ADF? From Requirements to Tool Choice
Oracle APEX or ADF? From Requirements to Tool ChoiceOracle APEX or ADF? From Requirements to Tool Choice
Oracle APEX or ADF? From Requirements to Tool ChoiceSten Vesterli
 

Destacado (17)

Face/Off: APEX Templates & Themes
Face/Off: APEX Templates & ThemesFace/Off: APEX Templates & Themes
Face/Off: APEX Templates & Themes
 
Building Commercial Applications with Oracle Applications Express by Scott Sp...
Building Commercial Applications with Oracle Applications Express by Scott Sp...Building Commercial Applications with Oracle Applications Express by Scott Sp...
Building Commercial Applications with Oracle Applications Express by Scott Sp...
 
Developing Commercial APEX Applications
Developing Commercial APEX ApplicationsDeveloping Commercial APEX Applications
Developing Commercial APEX Applications
 
Zero to Sixty with Oracle ApEx
Zero to Sixty with Oracle ApExZero to Sixty with Oracle ApEx
Zero to Sixty with Oracle ApEx
 
Oracle Apex - 3 real-life case studies (Pretius presentation for WDI2015)
Oracle Apex - 3 real-life case studies (Pretius presentation for WDI2015)Oracle Apex - 3 real-life case studies (Pretius presentation for WDI2015)
Oracle Apex - 3 real-life case studies (Pretius presentation for WDI2015)
 
Oracle Apex Overview
Oracle Apex OverviewOracle Apex Overview
Oracle Apex Overview
 
Oracle Apex Technical Introduction
Oracle Apex   Technical IntroductionOracle Apex   Technical Introduction
Oracle Apex Technical Introduction
 
Developing Customer Portal with Oracle APEX - A Case Study
Developing Customer Portal with Oracle APEX - A Case StudyDeveloping Customer Portal with Oracle APEX - A Case Study
Developing Customer Portal with Oracle APEX - A Case Study
 
Integration of APEX and Oracle Forms
Integration of APEX and Oracle FormsIntegration of APEX and Oracle Forms
Integration of APEX and Oracle Forms
 
Pretius Oracle Apex Primer
Pretius Oracle Apex PrimerPretius Oracle Apex Primer
Pretius Oracle Apex Primer
 
Building a Flexible UI with Oracle ApEx
Building a Flexible UI with Oracle ApExBuilding a Flexible UI with Oracle ApEx
Building a Flexible UI with Oracle ApEx
 
Oracle Application Express
Oracle Application ExpressOracle Application Express
Oracle Application Express
 
Oracle apex-hands-on-guide lab#1
Oracle apex-hands-on-guide lab#1Oracle apex-hands-on-guide lab#1
Oracle apex-hands-on-guide lab#1
 
Oracle database - Get external data via HTTP, FTP and Web Services
Oracle database - Get external data via HTTP, FTP and Web ServicesOracle database - Get external data via HTTP, FTP and Web Services
Oracle database - Get external data via HTTP, FTP and Web Services
 
Web Development In Oracle APEX
Web Development In Oracle APEXWeb Development In Oracle APEX
Web Development In Oracle APEX
 
Oracle Forms - stay or move on ? Webinar by Kumaran Systems
Oracle Forms - stay or move on ? Webinar by Kumaran SystemsOracle Forms - stay or move on ? Webinar by Kumaran Systems
Oracle Forms - stay or move on ? Webinar by Kumaran Systems
 
Oracle APEX or ADF? From Requirements to Tool Choice
Oracle APEX or ADF? From Requirements to Tool ChoiceOracle APEX or ADF? From Requirements to Tool Choice
Oracle APEX or ADF? From Requirements to Tool Choice
 

Similar a APEX Themes and Templates

introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technologyvikram singh
 
PHPTAL introduction
PHPTAL introductionPHPTAL introduction
PHPTAL introduction'"">
 
Webpages And Dynamic Content
Webpages And Dynamic ContentWebpages And Dynamic Content
Webpages And Dynamic Contentmaycourse
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introductionapnwebdev
 
WordPress Development Confoo 2010
WordPress Development Confoo 2010WordPress Development Confoo 2010
WordPress Development Confoo 2010Brendan Sera-Shriar
 
Xhtml Part1
Xhtml Part1Xhtml Part1
Xhtml Part1nleesite
 
KMUTNB - Internet Programming 3/7
KMUTNB - Internet Programming 3/7KMUTNB - Internet Programming 3/7
KMUTNB - Internet Programming 3/7phuphax
 
Block2 Session2 Presentation
Block2 Session2 PresentationBlock2 Session2 Presentation
Block2 Session2 PresentationMichael Gwyther
 
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAXJWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAXHilary Mason
 
Introduction to Web Design
Introduction to Web DesignIntroduction to Web Design
Introduction to Web Designwebhostingguy
 
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM Alfresco Software
 
HTML5 - What h#@$ is it?
HTML5 - What h#@$ is it?HTML5 - What h#@$ is it?
HTML5 - What h#@$ is it?Carlos Ramon
 

Similar a APEX Themes and Templates (20)

introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technology
 
PHPTAL introduction
PHPTAL introductionPHPTAL introduction
PHPTAL introduction
 
Webpages And Dynamic Content
Webpages And Dynamic ContentWebpages And Dynamic Content
Webpages And Dynamic Content
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introduction
 
WordPress Development Confoo 2010
WordPress Development Confoo 2010WordPress Development Confoo 2010
WordPress Development Confoo 2010
 
Html5 Overview
Html5 OverviewHtml5 Overview
Html5 Overview
 
Html ppt
Html pptHtml ppt
Html ppt
 
Xhtml Part1
Xhtml Part1Xhtml Part1
Xhtml Part1
 
KMUTNB - Internet Programming 3/7
KMUTNB - Internet Programming 3/7KMUTNB - Internet Programming 3/7
KMUTNB - Internet Programming 3/7
 
Block2 Session2 Presentation
Block2 Session2 PresentationBlock2 Session2 Presentation
Block2 Session2 Presentation
 
Introducing YUI
Introducing YUIIntroducing YUI
Introducing YUI
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAXJWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAX
 
Web Designing
Web DesigningWeb Designing
Web Designing
 
Introduction to Web Design
Introduction to Web DesignIntroduction to Web Design
Introduction to Web Design
 
Html5
Html5Html5
Html5
 
Html Expression Web
Html Expression WebHtml Expression Web
Html Expression Web
 
CSS
CSSCSS
CSS
 
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
 
HTML5 - What h#@$ is it?
HTML5 - What h#@$ is it?HTML5 - What h#@$ is it?
HTML5 - What h#@$ is it?
 

Más de InSync Conference

Frank munz oracle fusion middleware and aws cloud services in sync11
Frank munz oracle fusion middleware and aws cloud services in sync11Frank munz oracle fusion middleware and aws cloud services in sync11
Frank munz oracle fusion middleware and aws cloud services in sync11InSync Conference
 
Pythian MySQL - database for the web based economy
Pythian   MySQL - database for the web based economyPythian   MySQL - database for the web based economy
Pythian MySQL - database for the web based economyInSync Conference
 
IBM and Oracle Joint Solution Centre
IBM and Oracle Joint Solution CentreIBM and Oracle Joint Solution Centre
IBM and Oracle Joint Solution CentreInSync Conference
 
In Sync Running Apps On Oracle
In Sync  Running Apps On OracleIn Sync  Running Apps On Oracle
In Sync Running Apps On OracleInSync Conference
 
Oracle Fusion Middleware for JD Edwards
Oracle Fusion Middleware for JD EdwardsOracle Fusion Middleware for JD Edwards
Oracle Fusion Middleware for JD EdwardsInSync Conference
 
In sync10 cliffgodwin-ebs-final
In sync10 cliffgodwin-ebs-finalIn sync10 cliffgodwin-ebs-final
In sync10 cliffgodwin-ebs-finalInSync Conference
 
In sync10 cliffgodwin-appskeynote-final
In sync10 cliffgodwin-appskeynote-finalIn sync10 cliffgodwin-appskeynote-final
In sync10 cliffgodwin-appskeynote-finalInSync Conference
 
Optim Insync10 Paul Griffin presentation
Optim Insync10 Paul Griffin presentationOptim Insync10 Paul Griffin presentation
Optim Insync10 Paul Griffin presentationInSync Conference
 
Nswh Insync 2010 Ammar Customer Presentation
Nswh Insync 2010 Ammar Customer PresentationNswh Insync 2010 Ammar Customer Presentation
Nswh Insync 2010 Ammar Customer PresentationInSync Conference
 
Insync10 IBM JDE Sol Ed Announcement
Insync10 IBM JDE Sol Ed AnnouncementInsync10 IBM JDE Sol Ed Announcement
Insync10 IBM JDE Sol Ed AnnouncementInSync Conference
 
InSync10 Implement JDE Financial Analytics and Make Better Decisions
InSync10  Implement JDE Financial Analytics and Make Better DecisionsInSync10  Implement JDE Financial Analytics and Make Better Decisions
InSync10 Implement JDE Financial Analytics and Make Better DecisionsInSync Conference
 
Ebs operational reporting at santos evaluation, selection & implementation
Ebs operational reporting at santos evaluation, selection & implementationEbs operational reporting at santos evaluation, selection & implementation
Ebs operational reporting at santos evaluation, selection & implementationInSync Conference
 

Más de InSync Conference (20)

Frank munz oracle fusion middleware and aws cloud services in sync11
Frank munz oracle fusion middleware and aws cloud services in sync11Frank munz oracle fusion middleware and aws cloud services in sync11
Frank munz oracle fusion middleware and aws cloud services in sync11
 
Pythian MySQL - database for the web based economy
Pythian   MySQL - database for the web based economyPythian   MySQL - database for the web based economy
Pythian MySQL - database for the web based economy
 
IBM and Oracle Joint Solution Centre
IBM and Oracle Joint Solution CentreIBM and Oracle Joint Solution Centre
IBM and Oracle Joint Solution Centre
 
In Sync Running Apps On Oracle
In Sync  Running Apps On OracleIn Sync  Running Apps On Oracle
In Sync Running Apps On Oracle
 
P6 r8
P6 r8P6 r8
P6 r8
 
P6 analytics
P6 analyticsP6 analytics
P6 analytics
 
Upk presentation insync
Upk presentation insync Upk presentation insync
Upk presentation insync
 
Oracle Fusion Middleware for JD Edwards
Oracle Fusion Middleware for JD EdwardsOracle Fusion Middleware for JD Edwards
Oracle Fusion Middleware for JD Edwards
 
In sync10 grc_suite
In sync10 grc_suiteIn sync10 grc_suite
In sync10 grc_suite
 
In sync10 cliffgodwin-ebs-final
In sync10 cliffgodwin-ebs-finalIn sync10 cliffgodwin-ebs-final
In sync10 cliffgodwin-ebs-final
 
In sync10 cliffgodwin-appskeynote-final
In sync10 cliffgodwin-appskeynote-finalIn sync10 cliffgodwin-appskeynote-final
In sync10 cliffgodwin-appskeynote-final
 
Mnod linsync10 oba
Mnod linsync10 obaMnod linsync10 oba
Mnod linsync10 oba
 
D linsync10 ofa5yrs
D linsync10 ofa5yrsD linsync10 ofa5yrs
D linsync10 ofa5yrs
 
D linsync10 fusaapps
D linsync10 fusaappsD linsync10 fusaapps
D linsync10 fusaapps
 
Optim Insync10 Paul Griffin presentation
Optim Insync10 Paul Griffin presentationOptim Insync10 Paul Griffin presentation
Optim Insync10 Paul Griffin presentation
 
Nswh Insync 2010 Ammar Customer Presentation
Nswh Insync 2010 Ammar Customer PresentationNswh Insync 2010 Ammar Customer Presentation
Nswh Insync 2010 Ammar Customer Presentation
 
Insync10 IBM JDE Sol Ed Announcement
Insync10 IBM JDE Sol Ed AnnouncementInsync10 IBM JDE Sol Ed Announcement
Insync10 IBM JDE Sol Ed Announcement
 
InSync10 Implement JDE Financial Analytics and Make Better Decisions
InSync10  Implement JDE Financial Analytics and Make Better DecisionsInSync10  Implement JDE Financial Analytics and Make Better Decisions
InSync10 Implement JDE Financial Analytics and Make Better Decisions
 
Life after upgrading to r12
Life after upgrading to r12Life after upgrading to r12
Life after upgrading to r12
 
Ebs operational reporting at santos evaluation, selection & implementation
Ebs operational reporting at santos evaluation, selection & implementationEbs operational reporting at santos evaluation, selection & implementation
Ebs operational reporting at santos evaluation, selection & implementation
 

Último

Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 

Último (20)

Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 

APEX Themes and Templates

  • 1. APEX Themes & TemplatesJeffrey Kempjeffkemponoracle.com18 August 2010 The most comprehensive Oracle applications & technology content under one roof
  • 2. Apex Themes and Templates Apex 4.0 Improvements Apex 4.0 Themes Tour Intro to Templates Themes + Templates + Apps Managing Themes Customising Templates & CSS
  • 3. About Me 60% Oracle Developer 50% Apex Developer 40% Iced Coffee
  • 7. Apex 4.0 Improvements Better Themes 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. http://www.oracle.com/technology/products/database/application_express/html/4.0_new_features.html#themes
  • 8. 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>
  • 9. Apex 4.0 Improvements Sub Regions
  • 10. Apex 4.0 Improvements New sample apps
  • 11. Apex 4.0 Improvements + a whole heap of other wonderful things New item types APEX Listener Plug-ins Websheets Cascading LOVs Region display selectors Date item range validation Dynamic Actions REST support Gantts Team Development Declarative item validations Maps Instrumentation/Debug framework
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17. 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
  • 18. Should I upgrade to 4.0? Test it!
  • 19. What if my application has a customised theme?
  • 20. When to customise a template For one page? For many pages? For all pages?
  • 21. What to put in a template SQL PL/SQL HTML Javascript CSS Comments  ? ? ?
  • 22. Flow
  • 24. "The Templating Way" Template Substitution Variables
  • 25. DECLARE template VARCHAR2(200) := '<HTML> <HEAD> <TITLE> #TITLE# </TITLE> </HEAD> <BODY> #BODY# </BODY> </HTML>'; BEGIN htp.p( REPLACE( REPLACE( template ,'#TITLE#', :title) ,'#BODY#', :body) ); END; Conceptual Code
  • 28.
  • 29.
  • 30. <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#
  • 31. <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#
  • 32. <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]
  • 33. <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] Application Primary Language (Application Globalization Attribute)* Title (Page Display Attribute) Image Prefix (Application Definition) Media Type(Page Display Attribute, or Application Definition , or "text/html")
  • 34. <!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)...
  • 36.
  • 37. Theme Structure Theme Template Template Template
  • 38.
  • 39.
  • 40.
  • 41.
  • 42. Linking Pages to Templates Application 100
  • 43.
  • 44.
  • 49. List
  • 50. Flat
  • 53. 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
  • 54.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61. Because some things just need to be cut. Deleting Templates
  • 62.
  • 65. 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
  • 66. 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#
  • 67. Page Tabs Substitution Variables #PARENT_TAB_CELLS# #TAB_CELLS#
  • 68. 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
  • 69. 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#
  • 71. Custom CSS Create custom CSS file Upload CSS Reference CSS - Page templates
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85. :%s/ "width: 1024px" / "width: 600px" /g
  • 86. :%s/ "../images" / "/i/themes/theme_6/images" /g
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 97. 1. CSS on filesystem
  • 98. 2. Styles in templates
  • 99.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109. 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
  • 110. Data Dictionary Views APEX_APPLICATION_TEMP_BC- breadcrumb templates including markup APEX_APPLICATION_TEMP_BUTTON APEX_APPLICATION_TEMP_CALENDAR APEX_APPLICATION_TEMP_LABEL APEX_APPLICATION_TEMP_LIST APEX_APPLICATION_TEMP_PAGE APEX_APPLICATION_TEMP_POPUPLOV APEX_APPLICATION_TEMP_REGION APEX_APPLICATION_TEMP_REPORT
  • 111. 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 DataDictionaryViews
  • 112. 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 More info
  • 113. Tell us what you think… http://feedback.insync10.com.au jeffkemponoracle.com

Notas del editor

  1. Theme 4 - &quot;Topaz&quot;
  2. Theme 6 - &quot;Centered Blue&quot;
  3. Theme 1 - &quot;Simple Red&quot;
  4. Shared Components