Misc UI Refactor Guidelines 3

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:

The outermost table does nothing, so it can be eliminated:

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:

The <div> equivalent would be:

Note: if the screenlet contains a real table, it is best to use only the table without the enclosing screenlet-body div. Example:

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">$

Unknown macro: {uiLabelMap.MyScreenletTitle}

      $

Unknown macro: {uiLabelMap.MyScreenletLink}

becomes

$

</h3>
<li><a href="<@ofbizUrl>SomeUrl</@ofbizUrl>" >$

Unknown macro: {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.

Space shortcuts

Child pages

$