�ݺ�ߣ

Jorge Rimblas
@rimblas
enkitec.com

enkitec.com
@enkitec
We are an Oracle consulting partner
focused on the .
Platinum Level Partner

. The Hands On Oracle Experts.
Oracle Application Development
Oracle Database Administration
Lab-based Education
Business Intelligence
Technology Stabilization
Ongoing Managed Services for Oracle Systems

Mobile app How-To
Bleeding edge techniques
Secret Handshake
Responsive Design Tutorial ?

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

Martin D'Souza
Mon 6/24 @ 11:30am
Christian Rokitta
Wed 6/26 @ 8:30am
Christian Rokitta
Thu 6/27 @ 8:30am
Dimitri Gielis
Thu 6/27 @ 9:45am

Fields in one "column"
About the same length
We do have a grid:
table
div

SQL> desc emp
Name Type
---------------- ----------
EMPNO NUMBER
ENAME VARCHAR2(10)
JOB VARCHAR2(9)
MGR NUMBER
HIREDATE DATE
SAL NUMBER
COMM NUMBER
DEPTNO NUMBER

Maintain EMPMaintain EMP
Ename ADAMS
Job CLERK
Mgr 7698
Hiredate 12-JAN-83
Sal 1100
Comm 1
Deptno 20
Demo apex_public_user Logout
Set Screen Reader Mode On release 1.0

APEX 4.1 and before
APEX 4.2 and beyond

Employee ADAMS Job CLERK
Mgr BLAKE
Hire Date 12-JAN-83
Salary 1100 Commision 1
Dept RESEARCH

table for form elements
cell for label cell for item
cell for item buttons
width based on elements

:
table,
tr,
td
:
colspan and rowspan

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

<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

<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

<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

<table border="1">
<tr>
<td> R1 C1 </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

<table border="1">
<tr>
<td> R1 C1 </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

<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

SQL> alter table emp add notes varchar2(2000);
Table altered.

Mgr BLAKE
Hire Date 12-JAN-83
Dept RESEARCH
Notes

<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

Mgr BLAKE
Hire Date 12-JAN-83
Dept RESEARCH
Notes
p5

Mgr BLAKE
Hiredate 12-JAN-83
Sal 1100 Commision 1
Dept RESEARCH
Address1
Address2
City
State
Zip
Notes

Employee ADAMS
Job CLERK
Hire Date 12-JAN-83 Manager BLAKE
Dept RESEARCH
AddressAddress
Address1
Address2
City State Zip
Additional InfoAdditional Info
Notes
p12

In 4.2 just use "Item Display Position"

Items BeforeItems Before
Search Display 15 GoGo ResetReset
DEPTNODEPTNO DNAMEDNAME LOCLOC
10 ACCOUNTING NEW YORK
20 RESEARCH DALLAS
30 SALES CHICAGO
40 OPERATIONS BOSTON
1 - 4

Items AfterItems After
20 RESEARCH DALLAS
30 SALES CHICAGO
1 - 4

In < 4.1 (or 4.2.x) use Sub Regions
Container Region
Item Sub Region
Report Sub Region
Item Sub Region

Items Before & AfterItems Before & After
20 RESEARCH DALLAS
30 SALES CHICAGO
1 - 4
After 01
p17

Recommendation:
Use selected positions only and be consistent in your application
In other words, don't over do it.

template position help you with consistency
<span class="uButtonContainer">
#CLOSE##PREVIOUS##NEXT##DELETE##EDIT##CHANGE##CREATE##CREATE2##EXPAND##COPY##HELP#
</span>

You can use the same position for many buttons
Use the Sequence to decide the ﬁnal order

Frustrating because sequence is not as intuitive

Button 3Button 3Button 4Button 4
ButtonsButtons
Button 1Button 1 Button 2Button 2
Standard button placement.
Buttons w/floatButtons w/float
Button 3 is defined first with seq 10
Button 4 follows with seq 40
<style>
#BUTTON_3, #BUTTON_4 {
float: right;
}
</style>
p25

float can affect their parent element (container)
When the parent element contains only floated elements,
it's height will collapse to nothing.

.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
<div class="uRegionContent clearfix">
<div style="float: right;">awesome content!</div>
<div>

<div class="mycontainer clearfix">
<div class="square">Box 1</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 1Box 2

<div class="mycontainer">
</div>
.mycontainer {
width: 600px;
}
.square {
width: 150px;
height: 150px;
color: white;
padding: 10px;
margin-right: 20px;
margin-top: 5px;
float: right;
}
Box 1Box 2

Button and Field alignment is hard
You need extra CSS to align buttons to the right

@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

simply use the name of the tag
body {overflow: auto;}
label {font-weight: bold;}

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 ﬁeld.
Value required for name ﬁeld.

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>

inline style
ID
class
elements
most speciﬁc
least speciﬁc

!important
#logo {display: none!important;}
don't over do it

adding CSS to your application
1. element inline
2. page inline
3. ﬁle
ﬁle system
APEX hosted

<section class="uRegion" style="width: 500px;">
#BODY#
</section>

<p style="padding-top: 5px; color: red; font-style: italic;">
lorem ipsum
</p>

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

box model
frequently used commands

width
+ padding-left + padding-right

+ border-left + border-right
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;
}
.box {
width: 200px;
height: 150px;
color: white;
padding: 10px;
margin-right: 20px;
margin-top: 5px;
}
Box 1 Box 2

padding: 5px 5px 5px 5px;
→
top
left right
bottom

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

padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding: 0 5px 0 0;
padding-right: 5px;

You are now free to roam around the page

static
absolute
relative
ﬁxed

you need a position absolute or relative
for z-index to take eﬀect

visible (default)
hidden
scroll
auto

any content that extends the height of a box will be displayed
However, the content that extends does NOT aﬀect the document ﬂow. It
has no height.

Any content that extends past the height of a box will simply be invisible

content that overﬂows the box will be hidden, we will get scroll
bars to get to the overﬂow content.

Chrome handles the scrollbars diﬀerently

overflow: scrolloverflow: scroll
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aenean ullamcorper
vulputate nibh, vel congue nibh. Donec
lobortis nibh non nunc blandit elementum.
Suspendisse eleifend tempus tempus.
Aliquam id velit a arcu adipiscing porttitor.
Vivamus posuere turpis id feugiat mattis.
Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos
himenaeos. Sed sed urna eget quam varius
tempus. In id urna eros. Vestibulum luctus
eget nunc vitae pharetra. Vivamus
commodo urna sed scelerisque dapibus. Ut
venenatis tellus vestibulum mattis
venenatis. Donec hendrerit eu ante id
luctus.
Overflow apex_public_user Logout
release 1.0

like overﬂow: scroll however it solves the problem of always visible
scrollbars.

the cells push as wide as the content is

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 )

Multiple devices
Multiple screen resolutions
You can go with the " "
Handful of items per page
...

a.k.a.
You have 100+ items per page
data intensive

slides rimblas.com/slides/kscope13
sample app: http://s.rimbl.as/PrpV
app download: http://s.rimbl.as/PqnD
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!

More Related Content

That's not where I want that!