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.

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

31. Templates can be overwhelming

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

33. Simplify

34. Remove Extras

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

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

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

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

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

40. Major Components

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

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

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

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

45. Body
• HTML & Substitution Strings

46. Body
• Substitution Strings

47. Body
• HTML Structure

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

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

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

51. SpritesCommodore ?

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

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

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

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

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

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

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

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

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

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

62. The CSS

63. DEMO

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