![Page 1: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/1.jpg)
#Kscope
Get the look and feel you want in your APEX Applications
Jorge Rimblas Rimblas Consulting [email protected]
![Page 2: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/2.jpg)
#Kscope
About the speaker
• Using Oracle since1995 • eBusiness Suite , SQL, PL/SQL, Forms, C, UNIX,
web technologies • Using APEX since 2005 • Exclusively APEX since 2008 • Consulting • Training • One on One help
![Page 3: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/3.jpg)
Now what?
• You just got a JPG or PSD file
• Assignment: Make APEX use it
![Page 4: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/4.jpg)
Now what?
• Client shows you their Corporate Website
• Assignment: Make APEX use it
Or
![Page 5: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/5.jpg)
If we’re lucky
• Grab the logo from their Corporate Website
• Upload and use it in APEX
• Choose the closest theme from the gallery
![Page 6: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/6.jpg)
If we’re lucky
• Grab the logo from their Corporate Website
• Upload and use it in APEX
• Choose the closest theme from the galleryUsually not that lucky!
Plan B
![Page 7: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/7.jpg)
• Understand themes and templates • Identify and map page elements • Build your own “on/off” state components
Agenda
![Page 8: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/8.jpg)
Themes
• Determine look & feel
• Themes are just a skin
![Page 9: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/9.jpg)
Themes
![Page 10: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/10.jpg)
Themes
![Page 11: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/11.jpg)
Themes
![Page 12: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/12.jpg)
Themes
![Page 13: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/13.jpg)
Themes
![Page 14: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/14.jpg)
How do Themes Do it?
TEMPLATES
![Page 15: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/15.jpg)
Templates
![Page 16: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/16.jpg)
Templates
![Page 17: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/17.jpg)
Templates
![Page 18: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/18.jpg)
Templates
![Page 19: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/19.jpg)
Templates
![Page 20: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/20.jpg)
Templates
![Page 21: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/21.jpg)
Templates
![Page 22: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/22.jpg)
Templates
![Page 23: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/23.jpg)
Templates are Hard
• Page, Region, Report, Label, List, Popup List, Calendar, Breadcrumb, Button
• 70+ to 90+ templates
![Page 24: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/24.jpg)
Templates can be overwhelming
![Page 25: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/25.jpg)
![Page 26: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/26.jpg)
![Page 27: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/27.jpg)
![Page 28: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/28.jpg)
![Page 29: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/29.jpg)
![Page 30: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/30.jpg)
![Page 31: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/31.jpg)
Templates can be overwhelming
![Page 32: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/32.jpg)
• We need to simplify
• One bite at a time
Drink or Cry?
![Page 33: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/33.jpg)
Simplify
![Page 34: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/34.jpg)
Remove Extras
![Page 35: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/35.jpg)
Remove Extras
• We go from 25 to 2
• Change the names
• If you need more, add them!
![Page 36: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/36.jpg)
Templates & Substitutions
• Templates work by expanding substitutions
• Many may be empty
• The end result is sent to the page
![Page 37: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/37.jpg)
Templates & Substitutions
S u b s t i t u t i o n S t r i n g Va l u e
#LABEL# Save Record
<button> <span>#LABEL#</span> </button>
Template Before Substitution
<button> <span>Save Record</span> </button>
Template After Substitution
![Page 38: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/38.jpg)
Templates & SubstitutionsS u b s t i t u t i o n S t r i n g Va l u e s
#JAVASCRIPT# apex.submit(‘SAVE’)#BUTTON_ATTRIBUTES#
#BUTTON_ID# 2345654#LABEL# Save Record
<button onclick="#JAVASCRIPT#" class="button" #BUTTON_ATTRIBUTES# id="#BUTTON_ID#"> <span>#LABEL#</span> </button>
Template
<button onclick="apex.submit(‘SAVE’)" class="button" id="2345654"> <span>Save Record</span> </button>
After Substitution
![Page 39: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/39.jpg)
Sorting Things Out
• Identify major components • Map elements to UI counterparts • Find similar APEX theme
![Page 40: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/40.jpg)
Major Components
![Page 41: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/41.jpg)
Major Components• Logo • Nav Bar • Tabs • Breadcrumbs • Content Region • Buttons • Report w/Alt Rows
![Page 42: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/42.jpg)
Major Components
• Logo • Nav Bar • Tabs • Breadcrumbs • Content Region • Buttons • Report w/Alt Rows
First: • Header • Body • Footer
![Page 43: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/43.jpg)
Major Components
Page Header !
not the same as !
HTML Header
![Page 44: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/44.jpg)
Header: CSS and Javascript
All page content in Body !!!!!!! and Footer
![Page 45: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/45.jpg)
Body• HTML & Substitution Strings
![Page 46: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/46.jpg)
Body• Substitution Strings
![Page 47: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/47.jpg)
Body• HTML Structure
![Page 48: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/48.jpg)
Body: Tabs<div id="tabs"> <div class="frame"> <div class="bg"> <div class="tab-holder"> #TAB_CELLS# </div> </div> </div> </div>
#TAB_STATUS# classes: •first-current •current •first-non-current •non-current
![Page 49: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/49.jpg)
Body: Tabs
Tab Base
first-current & current
first-non-current!non-current
non-current:hover
#TAB_STATUS# classes: •first-current •current •first-non-current •non-current
![Page 50: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/50.jpg)
Body: TabsOne Single Image
Breadcrumb
Sprite...
![Page 51: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/51.jpg)
SpritesCommodore ?
![Page 52: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/52.jpg)
Sprites
Similar to one image for “on” and “off” states Sprites aren’t little images, a sprite is one big image!
Reference: http://css-tricks.com/css-sprites/ and popular social media site that recently hand an IPO
![Page 53: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/53.jpg)
Sprites
“Reducing the number of HTTP requests has the biggest impact on reducing [page loading] response
time and is often the easiest performance improvement to make.”
"Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests" by Tenni Theurer on the Yahoo! User Interface Blog
![Page 54: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/54.jpg)
Sprites
• Combine multiple images into one
• Build your own sprites
• Search for services that create sprites
![Page 55: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/55.jpg)
Styling two state elements
• You require two images!
1.normal 2.hover!
• Alignment and size must be exact!
• But we’ll combine them into one file (sprites)
![Page 56: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/56.jpg)
Styling state elements• Add multiple state images to your file!
1.normal 2.hover!3.selected 4.selected hover 5.alternative 6.etc... !
![Page 57: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/57.jpg)
Styling buttonsMake it long enough to fit large text
End Cap
400 px
![Page 58: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/58.jpg)
Styling buttons
class="button-alt1"
class="button-default"
class="button-alt2"
![Page 59: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/59.jpg)
<button class="button-alt1" type="button"> <span>#LABEL#</span> </button>
Styling buttons
<button class="button-alt1" type="button"> <span>#LABEL#</span> </button>
<button !
59
class="button-alt1"
![Page 60: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/60.jpg)
<button class="button-alt1" type="button"> <span>#LABEL#</span> </button>
Styling buttons
<button class="button-alt1" type="button"> <span>#LABEL#</span> </button>
60
<button id="#BUTTON_ID#" onclick="#LINK#" class="button-alt1" #BUTTON_ATTRIBUTES# type="button"> <span>#LABEL#</span> </button>
<button id="#BUTTON_ID#" onclick="#LINK#" class="button-alt1" #BUTTON_ATTRIBUTES# type="button"> <span>#LABEL#</span> </button>
![Page 61: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/61.jpg)
The CSS
button.button-default { padding: 0 11px 0 0; margin-left: 4px; background: transparent url(sButtons.png) no-repeat right -50px; } button.button-default span { padding: 5px 4px 4px 14px; height: 16px; color: #ffffff; font: normal 15px/16px Arial, sans-serif !important;
background: transparent url(sButtons.png) no-repeat left 0; } !!button.button-default:hover { background-position:right -150px; } button.button-default:hover span { background-position:0 -100px; }
0 px-50 px
-100 px-150 px
![Page 62: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/62.jpg)
The CSS
![Page 63: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocument.in/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/63.jpg)
DEMO