You're creating Oracle APEX applications already, but you wish your screens would look better. Moving regions around, changing their size, width, placing items and buttons it's all frustrating and painful. In this session you'll learn how to position your elements and better implement the vision you have for your applications. We'll go into details of the attributes provided by APEX to make this happen as well as learn some HTML and CSS that will allow you to personalize your applications. Then if you need to move to the next level attend my "Implementing Custom Themes and Templates" presentation. For the live interactive presentation visit: http://slides.com/rimblas/thats-not-where-i-want-that This presentation was originally used at ODTUG KScope13

1. Jorge Rimblas
@rimblas
enkitec.com

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

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

6. anecdotes, not a single story

8. how do i get more from apex

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

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

11. 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

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

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

16. 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

17. APEX 4.1 and before
APEX 4.2 and beyond

19. Maintain EMPMaintain EMP
Employee ADAMS Job CLERK
Mgr BLAKE
Hire Date 12-JAN-83
Salary 1100 Commision 1
Dept RESEARCH
Demo apex_public_user Logout
Set Screen Reader Mode On release 1.0

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

22. :
table,
tr,
td
:
colspan and rowspan

23. 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

24. <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

25. <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

26. <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

27. <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

28. <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

29. <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

30. <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

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

32. Maintain EMPMaintain EMP
Employee ADAMS Job CLERK
Mgr BLAKE
Hire Date 12-JAN-83
Salary 1100 Commision 1
Dept RESEARCH
Notes
Demo apex_public_user Logout
Set Screen Reader Mode On release 1.0

34. <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

35. Maintain EMPMaintain EMP
Employee ADAMS Job CLERK
Mgr BLAKE
Hire Date 12-JAN-83
Salary 1100 Commision 1
Dept RESEARCH
Notes
Demo apex_public_user Logout
Set Screen Reader Mode On release 1.0
p5

37. Maintain EMPMaintain EMP
Employee ADAMS Job CLERK
Mgr BLAKE
Hiredate 12-JAN-83
Sal 1100 Commision 1
Dept RESEARCH
Address1
Address2
City
State
Zip
Notes
Demo apex_public_user Logout
Set Screen Reader Mode On release 1.0

38. Maintain EMPMaintain EMP
Employee ADAMS
Job CLERK
Hire Date 12-JAN-83 Manager BLAKE
Salary 1100 Commision 1
Dept RESEARCH
AddressAddress
Address1
Address2
City State Zip
Additional InfoAdditional Info
Notes
Demo apex_public_user Logout
Set Screen Reader Mode On release 1.0
p12

40. In 4.2 just use "Item Display Position"

41. 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
Demo apex_public_user Logout
Set Screen Reader Mode On release 1.0

42. Items AfterItems After
DEPTNODEPTNO DNAMEDNAME LOCLOC
10 ACCOUNTING NEW YORK
20 RESEARCH DALLAS
30 SALES CHICAGO
40 OPERATIONS BOSTON
1 - 4
Search Display 15 GoGo ResetReset
Demo apex_public_user Logout
Set Screen Reader Mode On release 1.0

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

44. Items Before & AfterItems Before & After
Search Display 15 GoGo ResetReset
DEPTNODEPTNO DNAMEDNAME LOCLOC
10 ACCOUNTING NEW YORK
20 RESEARCH DALLAS
30 SALES CHICAGO
40 OPERATIONS BOSTON
1 - 4
After 01
Demo apex_public_user Logout
Set Screen Reader Mode On release 1.0
p17

46. Template positions

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

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

49. You can use the same position for many buttons
Use the Sequence to decide the final order

50. Frustrating because sequence is not as intuitive

52. 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>
Demo apex_public_user Logout
Set Screen Reader Mode On release 1.0
p25

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

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

56. <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 1Box 2

57. <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 1Box 2

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

59. @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

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

62. 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.

63. 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>

64. http://s.rimbl.as/PqUy

65. inline style
ID
class
elements
most specific
least specific

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

67. adding CSS to your application
1. element inline
2. page inline
3. file
file system
APEX hosted

68. <section class="uRegion" style="width: 500px;">
#BODY#
</section>
<p style="padding-top: 5px; color: red; font-style: italic;">
lorem ipsum
</p>

69. <style type="text/css">
</style>
type="text/css" mostly optional in modern browsers

70. <link rel="stylesheet" href="/custom/c.css" type="text/css" />
directory was manually mapped to web server
c.css was manually added to the operating system

71. <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

72. 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

73. box model
frequently used commands

77. width
+ padding-left + padding-right

78. + border-left + border-right
height

79. + 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

80. box-sizing: border-box;

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

82. 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

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

85. You are now free to roam around the page

86. static
absolute
relative
fixed

87. This is the default

91. think offset

93. you need a position absolute or relative
for z-index to take effect

95. visible (default)
hidden
scroll
auto

96. 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.

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

98. content that overflows the box will be hidden, we will get scroll
bars to get to the overflow content.

99. Chrome handles the scrollbars differently

100. 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

101. like overflow: scroll however it solves the problem of always visible
scrollbars.

102. the cells push as wide as the content is

104. 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 )

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

108. (version 8 or below)

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

113. 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/

114. Jorge Rimblas
@rimblas
enkitec.com