Get the Look and Feel You Want in Oracle APEX

83 %
17 %
Information about Get the Look and Feel You Want in Oracle APEX
Technology

Published on June 30, 2014

Author: rimblas

Source: slideshare.net

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.

#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 gallery Usually 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 & 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

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: Tabs One 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 buttons Make 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 & A jorge@rimblas.com @rimblas

#kscope presentations

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Get the Look and Feel You Want in Oracle APEX - Technology

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

Oracle Application Express

Oracle Application Express enables you to ... Theme Roller to easily customize look and feel; ... To help you get started, Application Express delivers a ...
Read more

changing the look and feel of interactive report. | Oracle ...

... changing the look and feel of ... You need to override one or more of these to get the result you ... to get this: [http://apex.oracle.com/pls ...
Read more

Send a Report as attachment by Email | Oracle Community

Hello, I'm a rookie in Apex. ... you'll need to include the basic CSS to get the look and feel you ... What type of output do you want for your users to ...
Read more

Application Express: How to change a logo in a page template

Change a Logo in a Page Template. Date: ... your filesystem to Oracle Application ... these HTML based templates to get exactly the look and feel you ...
Read more

Oracle Forms to APEX Migration - PITSS America, LLC

Get detailed insight into the structure scope and complexity of your Oracle Forms application and evaluate the viability of a ... APEX Migration Analysis ...
Read more