APEX Themes and Templates

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

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  ? ? ?

"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

<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" />  [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" />  [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" />    </head> <body #ONLOAD#>  #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" />  ...(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]>  ...(snip)...

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]

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

Because some things just need to be cut. Deleting Templates

Page Header Substitution Variables #TITLE# - page title #HEAD# - anything you want to include in the HTML header #ONLOAD# - BODY tag attributes #FORM_OPEN# - required #JAVASCRIPT_CODE# - new to Apex 4 - function and variable declarations #OUTDATED_BROWSER# - message to annoy dinosaurs

Page 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

APEX Themes and Templates

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (16)

Similaire à APEX Themes and Templates

Similaire à APEX Themes and Templates (20)

Plus de InSync Conference

Plus de InSync Conference (20)

Dernier

Dernier (20)

APEX Themes and Templates

Notes de l'éditeur