get the look and feel you want in oracle apex
DESCRIPTION
You just received an image or layered file from marketing with the design for an application you need to build. You're wondering what to do. How do I translate this into a usable APEX template? APEX provides great flexibility that allows your applications to fit within your corporate visual theme, but many people don't realize that the APEX built-in themes are not static or your only option. HTML and CSS can be daunting when your expertise lies within the database realm. This session will show you that a little understanding goes a long way.TRANSCRIPT
![Page 1: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/9.jpg)
Themes
![Page 10: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocuments.us/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/10.jpg)
Themes
![Page 11: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocuments.us/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/11.jpg)
Themes
![Page 12: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocuments.us/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/12.jpg)
Themes
![Page 13: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocuments.us/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/13.jpg)
Themes
![Page 14: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocuments.us/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.vdocuments.us/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/15.jpg)
Templates
![Page 16: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocuments.us/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/16.jpg)
Templates
![Page 17: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocuments.us/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/17.jpg)
Templates
![Page 18: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocuments.us/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/18.jpg)
Templates
![Page 19: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocuments.us/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/19.jpg)
Templates
![Page 20: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocuments.us/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/20.jpg)
Templates
![Page 21: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocuments.us/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/21.jpg)
Templates
![Page 22: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocuments.us/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/22.jpg)
Templates
![Page 23: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocuments.us/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.vdocuments.us/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.vdocuments.us/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/25.jpg)
![Page 26: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocuments.us/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/26.jpg)
![Page 27: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocuments.us/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/27.jpg)
![Page 28: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocuments.us/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/28.jpg)
![Page 29: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocuments.us/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/29.jpg)
![Page 30: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocuments.us/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/30.jpg)
![Page 31: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocuments.us/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.vdocuments.us/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.vdocuments.us/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/33.jpg)
Simplify
![Page 34: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocuments.us/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/34.jpg)
Remove Extras
![Page 35: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/40.jpg)
Major Components
![Page 41: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/51.jpg)
SpritesCommodore ?
![Page 52: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/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.vdocuments.us/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/62.jpg)
The CSS
![Page 63: Get the Look and Feel You Want in Oracle APEX](https://reader034.vdocuments.us/reader034/viewer/2022051610/54986a98b47959654d8b541b/html5/thumbnails/63.jpg)
DEMO