Romancing APEX Layouts

Jorge Rimblas

@rimblas
Jorge Rimblas
APEX Tech Lead at DRW

@rimblas
rimblas.com/blog
Oracle DB since 1995
APEX since it was HTMLDB in 2004
Always involved in web technologies
jrimblas in OTN Forums

Contributor to
"Expert Oracle Application Express, 2nd Edition"
with "Themes & Templates" chapter
Objective
 Have more options
in your toolbox when
it comes to
page layouts
"Beautiful applications
run faster and
are loved by end users"
Pages
 Be aware of what's
available out of the box
Regions
Attributes

Type = Data Source

Template = Look & Feel

The Grid
12 Column Grid
12 Column Grid
 Any Combination

apex.oracle.com/pls/apex/apex_pm/r/ut/grid-layout
 Any Combination

Region Region
 Applies to
Regions and Items
How wide is cell 1
when using 12
columns?
It depends?
1/12th the width of the container
 Add a region
Within a region
Within a region
Layout
We control The Grid
with the Layout
properties
New Regions always
extend to the end of
the row

Unless we specify
otherwise
 Items are separated
by Label and Item.
 
The label is fixed width
and the item extends
to the end of the row
 Grid Control
(Layout)

Item

Region
Start New Row
Column Start
Column Start & Span
Start New Row
Label Column Span
Template
Options
What's the Difference?
 Allow Styling of
components without
CSS knowledge

Provide a consistent
look within a Theme
Template Options Quick Edit
Template Options Quick Edit
Useful Region Template Options
Useful Region Template Options
Component
Defaults
 Shared
Components
→
Themes
→
Current Theme
You can change as needed
You can change as needed
But it only affects
new items
Make your changes
as early as possible
Data
Grouping
Guide the eye
Communicate which
things are related
The more elements
on the page,
the more important
grouping becomes
Your best friends
Sub-regions
Tab Containers
Modal Pages
Before After
After After #2
 Sub Regions
Define columns to use the
space more efficiently
Use Template: "Blank with attributes"
Grouping
Techniques
 Alignment
Sits in the background, but
provides a backbone to
your design
 Alignment
Broken alignment
interrupts the eye from
scanning
 Alignment
is
a form of grouping
 Spacing
Don't think of white space
as "Empty space"
Space doesn't need to be
white
 Spacing

Provides:
Legibility (macro level)
Tone (macro level)
 “Perfection is Achieved
Not When There Is Nothing
More to Add,
But When There Is Nothing
Left to Take Away”
- Antoine de Saint-Exupery
Q&A
 Romancing APEX Layouts

Thank you!

Jorge Rimblas

@rimblas