SlideShare a Scribd company logo
1 of 38
APEX Face/Off
Designing a GUI using APEX Templates and Themes
Christian Rokitta
The APEX framework is highly
configurable, allowing you to
implement your own customized
application interface design.
Structure
APEX Template Structure
Design
6
7
Aspects of Web Design
● Form Follows Function
● Usability
● Appearance
● Structure
Structure
9
Web Template
A web template is a tool used to separate
content from presentation in web
design, and for mass-production of web
documents. It is a basic component of a
web template system.
10
11
Structure
12
Template Structure
Header
Body
Footer
Side
Bar
Side
Bar
Navigation
13
14
Sketch Out a Website Wireframe First
15
Demo Structure
Header
Body
Footer
Side
Bar
Side
Bar
Navigation
16
Basic HTML Page Layout
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>OGh Demo 1</title>
<style type="text/css">
body{margin:0px }
div{border: 0px solid #000080;margin:0px;padding:0px}
div.container {width:1000px; margin-left:auto;
margin-right:auto; margin-top:2px; text-align:left;}
div.header {width:99%; height:100px; background-color:#2582F4 ; float:left;
color: white;}
div.navbar {width:99%; min-height:30px; background-color:#AADADA; float:left;}
div.sidebar{width:20%; min-height:400px; background-color:#AAFAFA; float:left;}
div.content{width:79%; min-height:400px; background-color:#FFFFF8; float:left;}
div.footer {width:99%; height:50px; background-color:#6BADFF ; float:left;}
</style>
</head>
<body>
<div class="container">
<div class="header">#header#</div>
<div class="navbar">#navigation#</div>
<div class="sidebar">#sidebar#</div>
<div class="content">#body#</div>
<div class="footer">#footer#</div>
</div>
</body>
</html>
17
“Final” Layout
APEX Template
Structure
19
Apex Template Preview
24
Template Types and Classes
Types
● Breadcrumb
● Button
● Calendar
● Label
● List
● Page
● Region
● Report
● Popup List of Values
Classes
● Page
○ Login
○ No Tabs
○ 1-level Tabs
○ 2-level Tabs
○ Popup
○ Printer Friendly
● Button
○ HTML
○ Image
○ Template
● Label
○ Required
○ Required with Help
○ Optional
○ Optional with Help
● List
○ Flat
○ Hierarchical
● ...
#WELCOME_USER#
#NAVIGATION_BAR#
#TAB_CELLS#
#SUCCESS_MESSAGE#
#NOTIFICATION_MESSAGE#
#GLOBAL_NOTIFICATION#
#BOX_BODY#
#REGION_POSITION_03#
#REGION_POSITION_02#
#TAB_STATUS#
#TAB_LABEL
#TAB_IMAGE#
#TAB_INLINE_EDIT#
#TAB_LINK#
#TAB_NAME#
#TAB_NAME_ENCODED#
#TAB_FONT_ATTRIBUTES#
#CUSTOMIZE# #REGION_POSITION_05#
#LOGO#
#TITLE#
#BODY#
#TITLE#
#CLOSE##PREVIOUS##NEXT##DELETE##EDIT#
#CHANGE##CREATE##CREATE2##EXPAND#
#COPY##HELP#
#BODY#
Page Template Coding
...
<link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_111/css/demo.css“
type="text/css" />
...
<div class="container">
<div class="header">
<div class="logo"><a href="#HOME_LINK#">#LOGO#</a></div>
<div class="slogan">#REGION_POSITION_06#</div>
<div class="login">
#WELCOME_USER##NAVIGATION_BAR# #REGION_POSITION_08#</div>
</div>
<div class="navbar">
<div id="navbar2">
<ul>#TAB_CELLS#</ul>
</div>
</div>
<div class="l-sidebar" id="l-sidebar">#REGION_POSITION_02#</div>
<div class="content" id="content">#BOX_BODY##REGION_POSITION_03#</div>
<div class="footer">
...
<div id="customize">#CUSTOMIZE#</div>
...
#REGION_POSITION_05#
</div>
…
30
Understanding Themes
● Themes are collections of templates
● Themes define the layout and style of an entire
application by providing a complete set of
templates that accommodate every UI pattern
that may be needed in an application.
31
Themes shipped with APEX
32
Create a new custom Theme
● Create a new theme directory in your APEX images directory
● Copy content from existing theme directory to this new directory
● Export the corresponding existing theme
● Open your theme export (sql) file in a text editor and replace path
references:
○ themes/theme_x >> themes/theme_y
● Import your modified theme export.
● Change identification number to y
● Copy your custom CSS/JavaScript/image files into new theme
directory
33
Theme Availability
● “Private” Themes
Application specific customized Theme
● Theme Repository
● Workspace administrators can create Workspace
Themes. Workspace themes are available to all
developers within the workspace.
● Instance administrators can create Public Themes.
Public themes are added using Application Express
Administration Services. Once added, these themes are
available to all workspaces and developers.
34
Create a Workspace Theme
35
Subscribed Template
• A subscribed template is a template that has its
definition maintained in another template, the
referenced template.
• If your application utilizes subscribed
templates, you can unsubscribe to templates on
the Unsubscribe Templates page.
36
37
Design
39
How to get a good design?
● Specialized
Design Tools
●Download
(free) HTML Template.
●Or ...
40
Template Design made Easy/ier
● You don't need to learn Photoshop, CSS, HTML and
other Web technologies to create great looking
designs, including images and buttons.
● Create perfectly correct, validated HTML and CSS that
conform to Web standards.
● Web browser compatibility
● Well structured and formatted HTML and CSS code.
● Choose and use many included design elements, from
backgrounds, tabs to region objects and buttons.
41
http://www.artisteer.com
42
Blog: http://rokitta.blogspot.com
LinkedIn: http://nl.linkedin.com/in/rokit
Website: http://www.rokit.nl
Twitter: @crokitta
Email: christian@rokitta.nl

More Related Content

What's hot

What's hot (20)

Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
 
Web
WebWeb
Web
 
Dreamweaver And Btt
Dreamweaver And BttDreamweaver And Btt
Dreamweaver And Btt
 
ARC WEB DESIGNING INSTITUTE | ISO Certified Web Designing Course
ARC WEB DESIGNING INSTITUTE | ISO Certified Web Designing CourseARC WEB DESIGNING INSTITUTE | ISO Certified Web Designing Course
ARC WEB DESIGNING INSTITUTE | ISO Certified Web Designing Course
 
GTU Web Designing Interview Questions And Answers for freshers
GTU Web Designing Interview Questions And Answers for freshersGTU Web Designing Interview Questions And Answers for freshers
GTU Web Designing Interview Questions And Answers for freshers
 
Css(cascading style sheets)
Css(cascading style sheets)Css(cascading style sheets)
Css(cascading style sheets)
 
Web Designing
Web Designing Web Designing
Web Designing
 
Team styles
Team stylesTeam styles
Team styles
 
Building a WordPress theme
Building a WordPress themeBuilding a WordPress theme
Building a WordPress theme
 
Css home
Css   homeCss   home
Css home
 
David Weliver
David WeliverDavid Weliver
David Weliver
 
The web context
The web contextThe web context
The web context
 
FCA: Interactive slides
FCA: Interactive slidesFCA: Interactive slides
FCA: Interactive slides
 
Web Development
Web DevelopmentWeb Development
Web Development
 
The Ideas of Clojure - Things I learn from Clojure
The Ideas of Clojure - Things I learn from ClojureThe Ideas of Clojure - Things I learn from Clojure
The Ideas of Clojure - Things I learn from Clojure
 
CSS For Coders
CSS For CodersCSS For Coders
CSS For Coders
 
Sass - Getting Started with Sass!
Sass - Getting Started with Sass!Sass - Getting Started with Sass!
Sass - Getting Started with Sass!
 
Web Development
Web DevelopmentWeb Development
Web Development
 
Open Source Tools for User Assistance
Open Source Tools for User AssistanceOpen Source Tools for User Assistance
Open Source Tools for User Assistance
 
Css
CssCss
Css
 

Similar to Face off apex template and themes - 3.0 - k-scope11

Similar to Face off apex template and themes - 3.0 - k-scope11 (20)

Share point 2013 Building Websites
Share point 2013 Building WebsitesShare point 2013 Building Websites
Share point 2013 Building Websites
 
Face/Off: APEX Templates & Themes
Face/Off: APEX Templates & ThemesFace/Off: APEX Templates & Themes
Face/Off: APEX Templates & Themes
 
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
 
No gEEk? No Problem!
No gEEk? No Problem!No gEEk? No Problem!
No gEEk? No Problem!
 
XPages Workshop: Customizing OneUI
XPages Workshop: Customizing OneUIXPages Workshop: Customizing OneUI
XPages Workshop: Customizing OneUI
 
APEX – jak vytvořit jednoduše aplikaci
APEX – jak vytvořit jednoduše aplikaciAPEX – jak vytvořit jednoduše aplikaci
APEX – jak vytvořit jednoduše aplikaci
 
Developing Custom WordPress Themes for Clients
Developing Custom WordPress Themes for ClientsDeveloping Custom WordPress Themes for Clients
Developing Custom WordPress Themes for Clients
 
Implementing a Symfony Based CMS in a Publishing Company
Implementing a Symfony Based CMS in a Publishing CompanyImplementing a Symfony Based CMS in a Publishing Company
Implementing a Symfony Based CMS in a Publishing Company
 
Mastering universal theme
Mastering universal themeMastering universal theme
Mastering universal theme
 
Sitecore sxa best practices and secrets 29th june 2021
Sitecore sxa best practices and secrets   29th june 2021Sitecore sxa best practices and secrets   29th june 2021
Sitecore sxa best practices and secrets 29th june 2021
 
Technical writing tools
Technical writing toolsTechnical writing tools
Technical writing tools
 
Innovations in Sencha Tooling and Framework
Innovations in Sencha Tooling and FrameworkInnovations in Sencha Tooling and Framework
Innovations in Sencha Tooling and Framework
 
Front end frameworks
Front end frameworksFront end frameworks
Front end frameworks
 
OpenCms Days 2014 - Responsive bootstrap templates reloaded
OpenCms Days 2014 - Responsive bootstrap templates reloadedOpenCms Days 2014 - Responsive bootstrap templates reloaded
OpenCms Days 2014 - Responsive bootstrap templates reloaded
 
Web profiler in drupal 8
Web profiler in drupal 8Web profiler in drupal 8
Web profiler in drupal 8
 
Oracle APEX Introduction (release 18.1)
Oracle APEX Introduction (release 18.1)Oracle APEX Introduction (release 18.1)
Oracle APEX Introduction (release 18.1)
 
Sitecore Experience Accelerator (SxA)
Sitecore Experience Accelerator (SxA)Sitecore Experience Accelerator (SxA)
Sitecore Experience Accelerator (SxA)
 
SHOW202: How to customize Lotus Quickr Templates Using HTML, Javascript and C...
SHOW202: How to customize Lotus Quickr Templates Using HTML, Javascript and C...SHOW202: How to customize Lotus Quickr Templates Using HTML, Javascript and C...
SHOW202: How to customize Lotus Quickr Templates Using HTML, Javascript and C...
 
Apex World 2015
Apex World 2015Apex World 2015
Apex World 2015
 
Sitecore 10 XC SXA frontend development using the SXA Storefront Branded
Sitecore 10 XC SXA frontend development using the SXA Storefront BrandedSitecore 10 XC SXA frontend development using the SXA Storefront Branded
Sitecore 10 XC SXA frontend development using the SXA Storefront Branded
 

More from Christian Rokitta

"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGap"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGap
Christian Rokitta
 

More from Christian Rokitta (15)

Keep me moving goin mobile
Keep me moving   goin mobileKeep me moving   goin mobile
Keep me moving goin mobile
 
Hitchhiker's guide to the Universal Theme
Hitchhiker's guide to the Universal ThemeHitchhiker's guide to the Universal Theme
Hitchhiker's guide to the Universal Theme
 
Browser Developer Tools for APEX Developers
Browser Developer Tools for APEX DevelopersBrowser Developer Tools for APEX Developers
Browser Developer Tools for APEX Developers
 
Bootstrapify Universal Theme
Bootstrapify Universal ThemeBootstrapify Universal Theme
Bootstrapify Universal Theme
 
Plugins unplugged
Plugins unpluggedPlugins unplugged
Plugins unplugged
 
Challenges going mobile
Challenges going mobileChallenges going mobile
Challenges going mobile
 
APEX & Cookie Monster
APEX & Cookie MonsterAPEX & Cookie Monster
APEX & Cookie Monster
 
5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)
 
Oracle APEX URLs Untangled & SEOptimized
Oracle APEX URLs Untangled & SEOptimizedOracle APEX URLs Untangled & SEOptimized
Oracle APEX URLs Untangled & SEOptimized
 
Browser Developer Tools
Browser Developer ToolsBrowser Developer Tools
Browser Developer Tools
 
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
 
"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGap"Native" Apps with APEX and PhoneGap
"Native" Apps with APEX and PhoneGap
 
Apex & jQuery Mobile
Apex & jQuery MobileApex & jQuery Mobile
Apex & jQuery Mobile
 
Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25Responsive Web Design & APEX Theme 25
Responsive Web Design & APEX Theme 25
 
Oracle APEX & PhoneGap
Oracle APEX & PhoneGapOracle APEX & PhoneGap
Oracle APEX & PhoneGap
 

Recently uploaded

“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
Muhammad Subhan
 
CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)
Wonjun Hwang
 

Recently uploaded (20)

Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
 
Vector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptxVector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptx
 
الأمن السيبراني - ما لا يسع للمستخدم جهله
الأمن السيبراني - ما لا يسع للمستخدم جهلهالأمن السيبراني - ما لا يسع للمستخدم جهله
الأمن السيبراني - ما لا يسع للمستخدم جهله
 
How to Check GPS Location with a Live Tracker in Pakistan
How to Check GPS Location with a Live Tracker in PakistanHow to Check GPS Location with a Live Tracker in Pakistan
How to Check GPS Location with a Live Tracker in Pakistan
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfFrisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development Companies
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream Processing
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
 

Face off apex template and themes - 3.0 - k-scope11