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.
1 Comment
Unknown User (ryanf)
Additionally, a very large majority of the forms are contained within tables as well. These tables should be removed and all forms should be re-formatted into standard form structure i.e.
<form><fieldset> <legend>Billing Information</legend> <label for="name">Name</label> <input name="name" id="name"/> <label for="address1">Address Line 1</label> <input name="address1" id="address1"/> <label for="address2">Address Line 2</label> <input name="address2" id="address2"/> <label for="email">Email</label> <input name="email" id="email"/> </fieldset><fieldset> <legend>Shipping Information</legend> <label for="name">Name</label><input name="name" id="name"/><label for="address1">Address Line 1</label><input name="address1" id="address1"/><label for="address2">Address Line 2</label><input name="address2" id="address2"/> </fieldset> <input type="submit" name="submitForm" id="submitForm"/> </form>This will allow much more flexibility in form styling and layout, as well as aid in accessibility.