SlideShare ist ein Scribd-Unternehmen logo
1 von 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

Weitere ähnliche Inhalte

Was ist angesagt?

Oracle application express ppt
Oracle application express pptOracle application express ppt
Oracle application express pptAbhinaw Kumar
 
Dell Boomi Integration with Salesforce
Dell Boomi Integration with SalesforceDell Boomi Integration with Salesforce
Dell Boomi Integration with SalesforceNagarjuna Kaipu
 
Expose your data as an api is with oracle rest data services -spoug Madrid
Expose your data as an api is with oracle rest data services -spoug MadridExpose your data as an api is with oracle rest data services -spoug Madrid
Expose your data as an api is with oracle rest data services -spoug MadridVinay Kumar
 
Going to the Grid: Tabular Form Edition (Oracle APEX Editable Interactive Grids)
Going to the Grid: Tabular Form Edition (Oracle APEX Editable Interactive Grids)Going to the Grid: Tabular Form Edition (Oracle APEX Editable Interactive Grids)
Going to the Grid: Tabular Form Edition (Oracle APEX Editable Interactive Grids)Karen Cannell
 
Cagando Datos con APEX_DATA_PARSER
Cagando Datos con APEX_DATA_PARSERCagando Datos con APEX_DATA_PARSER
Cagando Datos con APEX_DATA_PARSERRodolfoRodriguez161
 
Web Services PHP Tutorial
Web Services PHP TutorialWeb Services PHP Tutorial
Web Services PHP TutorialLorna Mitchell
 
Introduction to react native
Introduction to react nativeIntroduction to react native
Introduction to react nativeDani Akash
 
React JS - A quick introduction tutorial
React JS - A quick introduction tutorialReact JS - A quick introduction tutorial
React JS - A quick introduction tutorialMohammed Fazuluddin
 
React Components Lifecycle | React Tutorial for Beginners | ReactJS Training ...
React Components Lifecycle | React Tutorial for Beginners | ReactJS Training ...React Components Lifecycle | React Tutorial for Beginners | ReactJS Training ...
React Components Lifecycle | React Tutorial for Beginners | ReactJS Training ...Edureka!
 
Oracle APEX for Beginners
Oracle APEX for BeginnersOracle APEX for Beginners
Oracle APEX for BeginnersDimitri Gielis
 
UNYOUG - APEX 19.2 New Features
UNYOUG - APEX 19.2 New FeaturesUNYOUG - APEX 19.2 New Features
UNYOUG - APEX 19.2 New Featuresmsewtz
 
Automating Your Clone in E-Business Suite R12.2
Automating Your Clone in E-Business Suite R12.2Automating Your Clone in E-Business Suite R12.2
Automating Your Clone in E-Business Suite R12.2Michael Brown
 
Oracle REST Data Services: Options for your Web Services
Oracle REST Data Services: Options for your Web ServicesOracle REST Data Services: Options for your Web Services
Oracle REST Data Services: Options for your Web ServicesJeff Smith
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid LayoutRachel Andrew
 
CSS Flexbox (flexible box layout)
CSS Flexbox (flexible box layout)CSS Flexbox (flexible box layout)
CSS Flexbox (flexible box layout)Woodridge Software
 
Creating RESTful API’s with Grails and Spring Security
Creating RESTful API’s with Grails and Spring SecurityCreating RESTful API’s with Grails and Spring Security
Creating RESTful API’s with Grails and Spring SecurityAlvaro Sanchez-Mariscal
 

Was ist angesagt? (20)

Introduction to OData
Introduction to ODataIntroduction to OData
Introduction to OData
 
Oracle application express ppt
Oracle application express pptOracle application express ppt
Oracle application express ppt
 
Dell Boomi Integration with Salesforce
Dell Boomi Integration with SalesforceDell Boomi Integration with Salesforce
Dell Boomi Integration with Salesforce
 
Expose your data as an api is with oracle rest data services -spoug Madrid
Expose your data as an api is with oracle rest data services -spoug MadridExpose your data as an api is with oracle rest data services -spoug Madrid
Expose your data as an api is with oracle rest data services -spoug Madrid
 
Going to the Grid: Tabular Form Edition (Oracle APEX Editable Interactive Grids)
Going to the Grid: Tabular Form Edition (Oracle APEX Editable Interactive Grids)Going to the Grid: Tabular Form Edition (Oracle APEX Editable Interactive Grids)
Going to the Grid: Tabular Form Edition (Oracle APEX Editable Interactive Grids)
 
Cagando Datos con APEX_DATA_PARSER
Cagando Datos con APEX_DATA_PARSERCagando Datos con APEX_DATA_PARSER
Cagando Datos con APEX_DATA_PARSER
 
Bootstrap 5 basic
Bootstrap 5 basicBootstrap 5 basic
Bootstrap 5 basic
 
Introducing CSS Grid
Introducing CSS GridIntroducing CSS Grid
Introducing CSS Grid
 
Web Services PHP Tutorial
Web Services PHP TutorialWeb Services PHP Tutorial
Web Services PHP Tutorial
 
Introduction to react native
Introduction to react nativeIntroduction to react native
Introduction to react native
 
React JS - A quick introduction tutorial
React JS - A quick introduction tutorialReact JS - A quick introduction tutorial
React JS - A quick introduction tutorial
 
React Components Lifecycle | React Tutorial for Beginners | ReactJS Training ...
React Components Lifecycle | React Tutorial for Beginners | ReactJS Training ...React Components Lifecycle | React Tutorial for Beginners | ReactJS Training ...
React Components Lifecycle | React Tutorial for Beginners | ReactJS Training ...
 
Oracle APEX for Beginners
Oracle APEX for BeginnersOracle APEX for Beginners
Oracle APEX for Beginners
 
UNYOUG - APEX 19.2 New Features
UNYOUG - APEX 19.2 New FeaturesUNYOUG - APEX 19.2 New Features
UNYOUG - APEX 19.2 New Features
 
Automating Your Clone in E-Business Suite R12.2
Automating Your Clone in E-Business Suite R12.2Automating Your Clone in E-Business Suite R12.2
Automating Your Clone in E-Business Suite R12.2
 
Laravel Introduction
Laravel IntroductionLaravel Introduction
Laravel Introduction
 
Oracle REST Data Services: Options for your Web Services
Oracle REST Data Services: Options for your Web ServicesOracle REST Data Services: Options for your Web Services
Oracle REST Data Services: Options for your Web Services
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
 
CSS Flexbox (flexible box layout)
CSS Flexbox (flexible box layout)CSS Flexbox (flexible box layout)
CSS Flexbox (flexible box layout)
 
Creating RESTful API’s with Grails and Spring Security
Creating RESTful API’s with Grails and Spring SecurityCreating RESTful API’s with Grails and Spring Security
Creating RESTful API’s with Grails and Spring Security
 

Andere mochten auch

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
 

Andere mochten auch (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
 

Ähnlich wie 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
 

Ähnlich wie 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?
 

Mehr von 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
 

Mehr von 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
 

Kürzlich hochgeladen

08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
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
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
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
 
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
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdfChristopherTHyatt
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024The Digital Insurer
 
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
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdflior mazor
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
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
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services
 

Kürzlich hochgeladen (20)

08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
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
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
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...
 
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
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdf
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
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
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
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
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 

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

Hinweis der Redaktion

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