Versions Compared

Old Version 1

changes.mady.by.user Unknown User (adrianc@hlmksw.com)

Saved on

compared with

New Version 2

changes.mady.by.user Unknown User (adrianc@hlmksw.com)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Wiki Markup
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">
&nbsp; <tr>
&nbsp;&nbsp;&nbsp; <td width="100%">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <table width="100%" border="0" cellspacing="0" cellpadding="0" class="headerboxtop">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <tr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ...
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </tr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </table>
&nbsp;&nbsp;&nbsp; </td>
&nbsp; </tr>
</table>

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

<body>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <table width="100%" border="0" cellspacing="0" cellpadding="0" class="headerboxtop">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <tr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ...
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </tr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </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">
&nbsp; <tr>
&nbsp;&nbsp;&nbsp; <td width="100%">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <table width="100%" border="0" cellspacing="0" cellpadding="0" class="boxtop">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <tr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ...
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </tr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </table>
&nbsp;&nbsp;&nbsp; </td>
&nbsp; </tr>
&nbsp; <tr>
&nbsp;&nbsp;&nbsp; <td width="100%">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <table width="100%" border="0" cellspacing="0" cellpadding="0" class="boxbottom">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <tr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ...
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </tr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </table>
&nbsp;&nbsp;&nbsp; </td>
&nbsp; </tr>
</table>

The <div> equivalent would be:

<div class="screenlet">
&nbsp; <div class="screenlet-title-bar">
&nbsp;&nbsp;&nbsp; ...
&nbsp; </div>
&nbsp; <div class="screenlet-body">
&nbsp;&nbsp;&nbsp; ...
&nbsp; </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">
&nbsp; <div class="screenlet-title-bar">
&nbsp;&nbsp;&nbsp; ...
&nbsp; </div>
&nbsp; <table class="basic-table">
&nbsp;&nbsp;&nbsp; <\!-\- display some tabular data \-->
&nbsp;&nbsp;&nbsp; ...
&nbsp; </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">
&nbsp; <tr>
&nbsp;&nbsp;&nbsp; <td align="left" width="40%" >
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <div class="boxhead">$
{uiLabelMap.MyScreenletTitle}</div>
&nbsp;&nbsp;&nbsp; </td>
&nbsp;&nbsp;&nbsp; <td align="right" width="60%">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="<@ofbizUrl>SomeUrl</@ofbizUrl>" class="submenutextright">$${uiLabelMap.MyScreenletLink}</a>
&nbsp;&nbsp;&nbsp; </td>
&nbsp; </tr>
</table>

becomes

<div class="screenlet-title-bar">
&nbsp; <ul>
&nbsp;&nbsp;&nbsp; <h3>$


h3. ${uiLabelMap.MyScreenletTitle}
\\

</h3>
&nbsp;&nbsp;&nbsp; <li><a href="<@ofbizUrl>SomeUrl</@ofbizUrl>" >$
{uiLabelMap.MyScreenletLink}\\

</a></li>
&nbsp; </ul>
&nbsp; <br class="clear"/>
</div>
\\

Note: the <br class="clear"/> must follow the </ul> tag because the <ul> element uses floats that must be cleared.