#Kscope
Get the look and feel you want in your APEX Applications
Jorge Rimblas Rimblas Consulting [email protected]
#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
Now what?
• You just got a JPG or PSD file
• Assignment: Make APEX use it
Now what?
• Client shows you their Corporate Website
• Assignment: Make APEX use it
Or
If we’re lucky
• Grab the logo from their Corporate Website
• Upload and use it in APEX
• Choose the closest theme from the gallery
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
• Understand themes and templates • Identify and map page elements • Build your own “on/off” state components
Agenda
Themes
• Determine look & feel
• Themes are just a skin
Themes
Themes
Themes
Themes
Themes
How do Themes Do it?
TEMPLATES
Templates
Templates
Templates
Templates
Templates
Templates
Templates
Templates
Templates are Hard
• Page, Region, Report, Label, List, Popup List, Calendar, Breadcrumb, Button
• 70+ to 90+ templates
Templates can be overwhelming
Templates can be overwhelming
• We need to simplify
• One bite at a time
Drink or Cry?
Simplify
Remove Extras
Remove Extras
• We go from 25 to 2
• Change the names
• If you need more, add them!
Templates & Substitutions
• Templates work by expanding substitutions
• Many may be empty
• The end result is sent to the page
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
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
Sorting Things Out
• Identify major components • Map elements to UI counterparts • Find similar APEX theme
Major Components
Major Components• Logo • Nav Bar • Tabs • Breadcrumbs • Content Region • Buttons • Report w/Alt Rows
Major Components
• Logo • Nav Bar • Tabs • Breadcrumbs • Content Region • Buttons • Report w/Alt Rows
First: • Header • Body • Footer
Major Components
Page Header !
not the same as !
HTML Header
Header: CSS and Javascript
All page content in Body !!!!!!! and Footer
Body• HTML & Substitution Strings
Body• Substitution Strings
Body• HTML Structure
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
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
Body: TabsOne Single Image
Breadcrumb
Sprite...
SpritesCommodore ?
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
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
Sprites
• Combine multiple images into one
• Build your own sprites
• Search for services that create sprites
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)
Styling state elements• Add multiple state images to your file!
1.normal 2.hover!3.selected 4.selected hover 5.alternative 6.etc... !
Styling buttonsMake it long enough to fit large text
End Cap
400 px
Styling buttons
class="button-alt1"
class="button-default"
class="button-alt2"
<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"
<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>
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
The CSS
DEMO