that's not where

i want that!

Jorge Rimblas
@rimblas


enkitec.com

Enkitec

enkitec.com
@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 ?

agenda

Items
The grid
Regions
Buttons
CSS
Some more CSS
Q&A

other presentations

Intro to Responsive Design in APEX
Martin D'Souza
Mon 6/24 @ 11:30am
Building a Responsive Application Using Theme 25
Christian Rokitta
Wed 6/26 @ 8:30am
Confessions of an APEX Design Geek
Christian Rokitta
Thu 6/27 @ 8:30am
Advanced Responsive Design in APEX
Dimitri Gielis
Thu 6/27 @ 9:45am

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
Attributes:
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

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

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
  http://apex.oracle.com/pls/apex/f?p=13766:1:0:
https://forums.oracle.com/message/10914920#10914920

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


https://css-tricks.com/specifics-on-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
  1. element inline
  2. page inline
  3. 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
right
bottom
left

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

links to be posted with slides after presentation

slides rimblas.com/slides/kscope13 

sample app: https://apex.oracle.com/pls/apex/f?p=78395:1:

app download: app.zip

reveal.js https://github.com/hakimel/reveal.js

http://css-tricks.com/

http://caniuse.com/

http://lmgtfy.com/

that's not where

i want that!


Jorge Rimblas
@rimblas

¿ questions ?

enkitec.com