1.
#Kscope
Get the look and feel you want
in your APEX Applications
Jorge Rimblas
Rimblas Consulting
!
jorge@rimblas.com

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

3.
Now what?
• You just got a JPG
or PSD file
• Assignment:
Make APEX use it

4.
Now what?
• Client shows you their Corporate Website
• Assignment:
Make APEX use it
Or

5.
If we’re lucky
• Grab the logo from their Corporate Website
• Upload and use it in APEX
• Choose the closest theme from the gallery

6.
If we’re lucky
• Grab the logo from their Corporate Website
• Upload and use it in APEX
• Choose the closest theme from the gallery
Usually not that lucky!
Plan B

7.
• Understand themes and templates
• Identify and map page elements
• Build your own “on/off” state components
Agenda

8.
Themes
• Determine look & feel
• Themes are just a skin

9.
Themes

10.
Themes

11.
Themes

12.
Themes

13.
Themes

14.
How do Themes Do it?
TEMPLATES

15.
Templates

16.
Templates

17.
Templates

18.
Templates

19.
Templates

20.
Templates

21.
Templates

22.
Templates

23.
Templates are Hard
• Page, Region, Report,
Label, List, Popup
List, Calendar,
Breadcrumb, Button
• 70+ to 90+ templates

24.
Templates can be overwhelming

25.
Templates can be overwhelming

26.
• We need to simplify
• One bite at a time
Drink or Cry?

27.
Simplify

28.
Remove Extras

29.
Remove Extras
• We go from 25 to 2
• Change the names
• If you need more, add them!

30.
Templates & Substitutions
• Templates work by expanding substitutions
• Many may be empty
• The end result is sent to the page

31.
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

32.
Templates & Substitutions
S 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

33.
Sorting Things Out
• Identify major components
• Map elements to UI counterparts
• Find similar APEX theme

34.
Major Components

35.
Major Components
• Logo
• Nav Bar
• Tabs
• Breadcrumbs
• Content Region
• Buttons
• Report w/Alt Rows

36.
Major Components
• Logo
• Nav Bar
• Tabs
• Breadcrumbs
• Content Region
• Buttons
• Report w/Alt Rows
First:
• Header
• Body
• Footer

37.
Major Components
Page Header
!
not the same as
!
HTML Header

38.
Header: CSS and
Javascript
All page content
in Body
!
!
!
!
!
!
!
and Footer

39.
Body
• HTML & Substitution Strings

40.
Body
• Substitution Strings

41.
Body
• HTML Structure

42.
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

43.
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

44.
Body: Tabs
One Single Image
Breadcrumb
Sprite...

45.
SpritesCommodore ?

46.
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

47.
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

48.
Sprites
• Combine multiple images into one
• Build your own sprites
• Search for services that create sprites

49.
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)

50.
Styling state elements
• Add multiple state images to your file!
1.normal
2.hover!
3.selected
4.selected hover
5.alternative
6.etc...
!

51.
Styling buttons
Make it long enough to fit large text
End Cap
400 px

52.
Styling buttons
class="button-alt1"
class="button-default"
class="button-alt2"

53.
<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"

54.
<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>

55.
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

56.
The CSS

57.
DEMO

58.
Q & A
jorge@rimblas.com
@rimblas