THIS IS A TEST INSTANCE. ALL YOUR CHANGES WILL BE LOST!!!!
...
This
...
document
...
describes
...
the
...
steps
...
needed
...
to
...
refactor
...
the
...
back-office
...
components
...
to
...
eliminate
...
table-based
...
layout.
...
Many
...
Freemarker
...
Templates
...
(ftl
...
files)
...
contain
...
table-based
...
layout.
...
In
...
many
...
cases
...
the
...
table
...
isn't
...
needed
...
-
...
in
...
other
...
words,
...
it
...
doesn't
...
affect
...
the
...
layout.
...
In
...
those
...
cases
...
the
...
table
...
can
...
be
...
deleted
...
without
...
further
...
effort.
...
Example
...
from
...
header.ftl:
...
<body>
...
<table
...
border="0"
...
width="100%"
...
cellspacing="0"
...
cellpadding="0"
...
class="headerboxoutside">
...
<tr>
<td width="100%">
...
<table width="100%"
...
border="0"
...
cellspacing="0"
...
cellpadding="0"
...
class="headerboxtop">
...
<tr>
...
</tr>
</table>
</td>
</tr>
</table>
The outermost table does nothing, so it can be eliminated:
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="headerboxtop">
<tr>
...
</tr>
</table>
Some ftl files use nested tables to construct screenlets. Those tables can be replaced with screenlet divs. The table-based structure looks something like this:
<table border="0" width="100%" cellspacing="0" cellpadding="0" class="boxoutside">
<tr>
<td width="100%">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="boxtop">
<tr>
...
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="boxbottom">
<tr>
...
</tr>
</table>
</td>
</tr>
</table>
The <div> equivalent would be:
<div class="screenlet">
<div class="screenlet-title-bar">
...
...
...
</div>
...
<div class="screenlet-body">
...
...
...
</div>
...
</div>
...
Note:
...
if
...
the
...
screenlet
...
contains
...
a
...
real
...
table,
...
it
...
is
...
best
...
to
...
use
...
only
...
the
...
table
...
without
...
the
...
enclosing
...
screenlet-body
...
div.
...
Example:
...
<div
...
class="screenlet">
...
<div class="screenlet-title-bar">
...
...
...
</div>
...
<table class="basic-table">
...
<!-
...
-
...
display
...
some
...
tabular
...
data
...
-->
...
...
...
</table>
...
</div>
...
Some
...
screenlet
...
title
...
bars
...
contain
...
links.
...
Those
...
links
...
need
...
to
...
be
...
converted
...
to
...
the
...
new
...
screenlet-title-bar
...
HTML
...
compound.
...
Example:
...
<table
...
width="100%"
...
border="0"
...
cellspacing="0"
...
cellpadding="0"
...
class="boxtop">
...
<tr>
<td align="left"
...
width="40%"
...
>
<div class="boxhead">$
...
{uiLabelMap.MyScreenletTitle}
...
${uiLabelMap.MyScreenletLink}
...
becomes
${uiLabelMap.MyScreenletTitle}
...
</h3>
...
<li><a href="<@ofbizUrl>SomeUrl</@ofbizUrl>"
...
>$
...
{uiLabelMap.MyScreenletLink}
...
</a></li>
...
</ul>
...
<br class="clear"/>
...
</div>
...
Note:
...
the
...
<br
...
class="clear"/>
...
must
...
follow
...
the
...
</ul>
...
tag
...
because
...
the
...
<ul>
...
element
...
uses
...
floats
...
that
...
must
...
be
...
cleared.