get the look and feel you want in oracle apex

#Kscope

Get the look and feel you want in your APEX Applications

Jorge Rimblas Rimblas Consulting !jorge@rimblas.com

#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

Q & Ajorge@rimblas.com

@rimblas