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">$
</div>
</td>
<td align="right" width="60%">
<a href="<@ofbizUrl>SomeUrl</@ofbizUrl>" class="submenutextright">$
</a>
</td>
</tr>
</table>
becomes
<div class="screenlet-title-bar">
<ul>
<h3>$
</h3>
<li><a href="<@ofbizUrl>SomeUrl</@ofbizUrl>">$
</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.