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
#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
