that's not where
i want that!
Jorge Rimblas
Enkitec
We are an Oracle consulting partner
focused on the Oracle Tech Stack.
Platinum Level Partner
Enkitec. The Hands On Oracle Experts.
- Oracle Application Development
- Oracle Database Administration
- Lab-based Education
- Business Intelligence
- Technology Stabilization
- Ongoing Managed Services for Oracle Systems
Paella?
Recipe
Recipes & Techniques
anecdotes, not a single story
the goal
this is
how do i get more from apex
this is not
Mobile app How-To
Bleeding edge techniques
Secret Handshake
Responsive Design Tutorial
Responsive Design Tutorial
agenda
Items
The grid
Regions
Buttons
CSS
Some more CSS
Q&A
Items
standard form wizard
Fields in one "column"
About the same length
We do have a grid:
- table
- div
emp
SQL> desc emp
Name Type
---------------- ----------
EMPNO NUMBER
ENAME VARCHAR2(10)
JOB VARCHAR2(9)
MGR NUMBER
HIREDATE DATE
SAL NUMBER
COMM NUMBER
DEPTNO NUMBER
standard form wizard
begin on new line
APEX 4.1 and before
start new row
APEX 4.2 and beyond
first round
table grid
table for form elements
cell for label cell for item
cell for item buttons
width based on elements
Understand HTML Tables
HTML Elements:
table,
tr,
td
tr,
td
Attributes:
colspan and rowspan
colspan and rowspan
something about tables
In a world of responsive designs and div layouts
they may be obsolete (for some uses)
However,
probably ALL your applications build before 4.1 use them
probably ALL your applications build before 4.1 use them
HTML Tables
<table>
<tr>
<td> R1 C1 </td>
<td> R1 C2 </td>
<td> R1 C3 </td>
</tr>
<tr> ... R2 ... </tr>
<tr> ... R3 ... </tr>
</table>| R1 C1 | R1 C2 | R1 C3 |
| R2 C1 | R2 C2 | R2 C3 |
| R3 C1 | R3 C2 | R3 C3 |
HTML Tables
<table border="1">
<tr>
<td> R1 C1 </td>
<td> R1 C2 </td>
<td> R1 C3 </td>
</tr>
<tr> ... R2 ... </tr>
<tr> ... R3 ... </tr>
</table>| R1 C1 | R1 C2 | R1 C3 |
| R2 C1 | R2 C2 | R2 C3 |
| R3 C1 | R3 C2 | R3 C3 |
HTML Tables
<table border="1">
<tr>
<td> R1 C1 </td>
<td colspan="2"> R1 C2 </td>
<td> R1 C3 </td>
</tr>
<tr> ... R2 ... </tr>
<tr> ... R3 ... </tr>
</table>| R1 C1 | R1 C2 | R1 C3 | |
| R2 C1 | R2 C2 | R2 C3 | |
| R3 C1 | R3 C2 | R3 C3 | |
HTML Tables
<table border="1">
<tr>
<td> R1 C1 </td>
<td colspan="2"> R1 C2 </td>
</tr>
<tr> ... R2 ... </tr>
<tr> ... R3 ... </tr>
</table>| R1 C1 | R1 C2 | |
| R2 C1 | R2 C2 | R2 C3 |
| R3 C1 | R3 C2 | R3 C3 |
HTML Tables
<table border="1">
<tr>
<td> R1 C1 </td>
<td colspan="2"> R1 C2 </td>
</tr>
<tr>
<td rowspan="2"> R2 C1 </td>
<td> R2 C2 </td>
<td> R2 C3 </td>
<tr>... R3 ... </tr>
</table>| R1 C1 | R1 C2 | |
| R2 C1 | R2 C2 | R2 C3 |
| R3 C1 | R3 C2 | R3 C3 |
HTML Tables
<table border="1">
<tr>
<td> R1 C1 </td>
<td colspan="2"> R1 C2 </td>
</tr>
<tr>
<td rowspan="2"> R2 C1 </td>
<td> R2 C2 </td>
<td> R2 C3 </td>
<tr>... R3 ... </tr>
</table>| R1 C1 | R1 C2 | |
| R2 C1 | R2 C2 | R2 C3 |
| R3 C1 | R3 C2 | R3 C3 |
HTML Tables
<table border="1">
<tr>
<td> R1 C1 </td>
<td> R1 C2 </td>
<td> R1 C3 </td>
</tr>
<tr>
<td> R2 C1 </td>
<td> This is a long value </td>
<td> R2 C3 </td>
</tr>
<tr> ... R3 ... </tr>
</table>| R1 C1 | R1 C2 | R1 C3 |
| R2 C1 | This is a long value | R2 C3 |
| R3 C1 | R3 C2 | R3 C3 |
alter emp
SQL> alter table emp add notes varchar2(2000);
Table altered.
start a new grid
start new grid
(a.k.a. Stop and start table)
If we have different tables, their cell widths are independent of each other.
two HTML tables
<table border="1">
<tr>
<td> R1 C1 </td>
<td> R1 C2 </td>
<td> R1 C3 </td>
</tr>
</table>
<table border="1">
<tr>
<td> R2 C1 </td>
<td> This is a long value </td>
<td> R2 C3 </td>
</tr>
<tr> ... R3 ... </tr>
</table>| R1 C1 | R1 C2 | R1 C3 |
| R2 C1 | This is a long value | R2 C3 |
| R3 C1 | R3 C2 | R3 C3 |
start a new grid
p5
Regions
Sub Regions
p12
Ever needed items
after a report?
What about, before and after?
Items before or after report
In 4.2 just use "Item Display Position"
Items before and after report
In < 4.1 (or 4.2.x) use Sub Regions
-
Container Region
- Item Sub Region
- Report Sub Region
- Item Sub Region
p17
Buttons
button placement
Template positions
button placement
Recommendation:
Use selected positions only and be consistent in your application
In other words, don't over do it.
template positions
template position help you with consistency
<span class="uButtonContainer">
#CLOSE##PREVIOUS##NEXT##DELETE##EDIT##CHANGE##CREATE##CREATE2##EXPAND##COPY##HELP#
</span>
button placement
You can use the same position for many buttons
Use the Sequence to decide the final order
unless...
You use float
Using float
Frustrating because sequence is not as intuitive
float: left;
float:right;
p25
the float collapse
float can affect their parent element (container)
When the parent element contains only floated elements,
it's height will collapse to nothing.
So now what?
clearfix to the rescue
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}<div class="uRegionContent clearfix">
<div style="float: right;">awesome content!</div>
<div>
btw...
you probably already have clearfix defined
<div class="mycontainer clearfix">
<div class="square">Box 1</div>
<div class="square">Box 2</div>
</div>
.mycontainer {
width: 600px;
border: 1px solid red;
}
.square {
width: 150px;
height: 150px;
color: white;
background-color: #0bebf6;
border: 7px dotted white;
padding: 10px;
margin-right: 20px;
margin-top: 5px;
display: inline-block;
float: right;
}
Box 1
Box 2
<div class="mycontainer">
<div class="square">Box 1</div>
<div class="square">Box 2</div>
</div>
.mycontainer {
width: 600px;
border: 1px solid red;
}
.square {
width: 150px;
height: 150px;
color: white;
background-color: #0bebf6;
border: 7px dotted white;
padding: 10px;
margin-right: 20px;
margin-top: 5px;
display: inline-block;
float: right;
}Box 1
Box 2
Theme 25
Button and Field alignment is hard
You need extra CSS to align buttons to the right
Buttons within items
Theme 25 recipe
@media only screen and (min-width: 768px) {
.my-form div.fieldContainer {
float: left;
clear: left;
}
.my-form .uButton {
float: left;
margin-left: 8px;
}
}
Example from Shakeeb
CSS selectors
tags
simply use the name of the tag
body {overflow: auto;}label {font-weight: bold;}
class
use a dot (.) and the class name
.alert {color: red;}
<p class="warning">Value required for name field.</p>
<p class="alert">Value required for name field.</p>
Value required for name field.
Value required for name field.
ID
use a hash (#) and the ID
#P5_NOTES {outline: red solid 2px;}
#reportRegion {padding: 5px;}
<textarea name="p_t09" rows="5" cols="50" maxlength="4000" id="P5_NOTES" class="textarea">
</textarea>
<div id="reportRegion" class="stdReport"></div>
CSS Specificity
CSS Specificity
| inline style |
| ID |
| class |
| elements |
most specific
least specific
specificity hand grenade
!important
#logo {display: none!important;}
don't over do it
CSS
adding CSS to your application
- element inline
- page inline
-
file
- file system
- APEX hosted
element inline
<section class="uRegion" style="width: 500px;">#BODY#</section>
<p style="padding-top: 5px; color: red; font-style: italic;">lorem ipsum</p>
document inline
<style type="text/css">label[for^=P11_ADDRESS], label[for=P11_CITY], label[for=P11_STATE], label[for=P11_ZIP], label[for=P11_NOTES] { outline: #ff5e99 dashed 2px; } </style>
type="text/css" mostly optional in modern browsers
file system
<link rel="stylesheet" href="/custom/c.css" type="text/css" />
custom directory was manually mapped to web server
c.css was manually added to the operating system
APEX hosted
<link rel="stylesheet" href="#APP_IMAGES#c.css" type="text/css" />
<link rel="stylesheet" href="#WORKSPACE_IMAGES#c.css" type="text/css" />
#APP_IMAGES# and #WORKSPACE_IMAGES# are
built in substitution strings
c.css was uploaded to APEX via
Shared Components - Files
- Cascading Stylesheets
- Images
- Static Files
#WORKSPACE_IMAGES#
Expanded to use
wwv_flow_file_mgr.get_file
#WORKSPACE_IMAGES#c.css
wwv_flow_file_mgr.get_file?p_security_group_id=2616712683471253&p_fname=c.css
CSS
box model
frequently used commands
The Box Model
Every element of web design is a rectangular box
Firebug
Chrome
Size of a Box
width:
width
+ padding-left + padding-right
+ border-left + border-right
Size of a Box
height:
height
+ padding-top + padding-bottom
+ border-top + border-bottom
<div class="mycontainer">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
</div>
.mycontainer {
width: 600px;
border: 1px solid red;
}
.box {
width: 200px;
height: 150px;
color: white;
background-color: #0bebf6;
border: 7px dotted white;
padding: 10px;
margin-right: 20px;
margin-top: 5px;
display: inline-block;
}Box 1
Box 2
easy sizing
cool tip!
box-sizing: border-box;
4 corners
padding: 5px 5px 5px 5px;
→
top
top
right
bottom
left
CSS short hand
padding: 5px;
5px all around
exactly the same as
padding: 5px 5px 5px 5px;
padding: 5px 7px;
5px top and bottom
7px left and right
or be specific
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
exact same
padding: 0 5px 0 0;
padding-right: 5px;
height, width,
padding, margin,
border, float
position, display, overflow
position
You are now free to roam around the page
position
The position property specifies the type of positioning method used for an element.
static
absolute
relative
fixed
position: static
This is the default
Elements render in order as they appear in the document flow
position: absolute
The element is positioned relative to its first positioned (not static) ancestor element
We can place any page element exactly where we want
It will be relative to the next parent element with relative (or absolute) positioning.
If none exists then it goes all the way back to the <html> element
position: absolute
Elements with this positioning are removed from the flow of elements on the page
They don't affect other elements and they are not affected by other elements.
Caution: If overused it may limit the flexibility of your site.
position: relative
your friend
position: relative
think offset
The element is positioned relative to its normal position.
What it really means is "relative to itself"
position: relative
If no attributes are set (top, left, bottom or right) it will have no effect on positioning at all.
Limits the scope of absolutely positioned child elements
We'll have the ability to use z-index on that element
confused by z-index
you need a position absolute or relative
for z-index to take effect
If the element is position: static (default) z-index has no effect.
position: fixed
element is positioned relative to the viewport, or the browser window itself.
The viewport doesn't change when the window is scrolled
overflow
How to handle content that extends the size of a box?
- visible (default)
- hidden
- scroll
- auto
overflow: visible
any content that extends the height of a box will be displayed
However, the content that extends does NOT affect the document flow. It has no height.
overflow: hidden
Any content that extends past the height of a box will simply be invisible
overflow: scroll
content that overflows the box will be hidden, however we will get scroll bars to get to the overflow content.
You will get both horizontal and vertical scrollbars whether you need them or not.
overflow: scroll
Chrome handles the scrollbars differently
overflow: auto
like overflow: scroll however it solves the problem of always visible scrollbars.
scrollbars only show when needed.
wrap long lines
the cells push as wide as the content is
wrap long lines
wrap long lines
td.data[headers="MESSAGE"],
td.dataAlt[headers="MESSAGE"] {
max-width: 180px;
white-space: pre-line;
word-wrap: break-word;
}
data and dataAlt: alternating rows
white-space: pre-line; trim space before line
word-wrap: break-word;
Unfortunately partial IE support for break-word
( requires compatibility mode )
responsive design?
Use "Theme 25" if..
- Multiple devices
- Multiple screen resolutions
- You can go with the "flow"
- Handful of items per page
- ...
Stay away if...
You only need to support IE
(version 8 or below)
Your design is not flexible
Your designer said nothing about mobile devices
You need oodles of data on the screen
a.k.a.
You have 100+ items per page
data intensive
You're a control freak
resources
slides rimblas.com/slides/rmoug14
sample app: http://s.rimbl.as/PrpV
app download: http://s.rimbl.as/PqnD
reveal.js https://github.com/hakimel/reveal.js
Creating a
Business-Oriented
UI in APEX
Scott Spendolini & Jorge Rimblas
Friday at 8:30am
Room 502/503
that's not where
i want that!
Jorge Rimblas
¿ questions ?