0004433: Replace tables by DIVs where it is beneficial

0004433

Openbravo ERP

B. User interface

public

2008-07-17 13:08

2012-02-15 19:16

Reporter

rafaroda

Assigned To

rgoris

Priority

normal

Severity

minor

Reproducibility

always

Status

closed

Resolution

fixed

Platform

OS

20

OS Version

Ubuntu 7.10

Product Version

pi

Merge Request Status

Review Assigned To

OBNetwork customer

Web browser

Modules

Core

Support ticket

Regression level

Regression date

Regression introduced in release

Regression introduced by commit

Triggers an Emergency Pack

No

Summary

0004433: Replace tables by DIVs where it is beneficial

Description

Openbravo ERP uses tables in places where divs + css would be much more efficient since they would display a much cleaner code.

Tables are specially annoying in manual windows for the following elements:
* Report filters entry layout
* Error/Success message panel [1]
* Info/Help panel [2]
* Date field [3]
* Buttons [4]

Even if report UI pattern will be, someday, put inside Application Dictionary [5], it is important that Openbravo ERP generates a code as clean, simple and readable as possible.

[1] Current table structure for Error/Success messages panel: http://wiki.openbravo.com/wiki/Openbravo_Messages_Style_Guide#How_to_implement_it [^]

[2] Current table structure for Info/Help messages panel:

<table cellspacing="0" cellpadding="0" class="Popup_ContentPane_InfoBar">
                      <tr>
                        <td class="Popup_InfoBar_Icon_cell"><IMG src="../../../../../web/images/blank.gif" border="0" class="Popup_InfoBar_Icon_info" /></td>
                        <td class="Popup_InfoBar_text_table">
                          <table>
                            <tr>
                             <td class="Popup_InfoBar_text" id="helpDiscard"><SPAN id="paramDescription"> </SPAN></td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>

[3] Current table structure for a date field:

<TD class="TextBox_btn_ContentCell">
             <TABLE border="0" cellspacing="0" cellpadding="0" summary="" style="padding-top: 0px;">
               <TR>
                 <TD class="TextBox_ContentCell">
                   <INPUT dojotype="openbravo:DateTextbox" greaterthan="paramDateFrom" displayformat="xx" saveformat="yy" class="TextBox_btn_OneCell_width required" required="true" type="text" name="inpReportDateTo" id="paramDateTo" size="10" maxlength="10" value="" onkeyup="auto_complete_date(this.textbox, this.displayFormat);return true;"></INPUT><SCRIPT>djConfig.searchIds.push("paramDateTo");</SCRIPT>
                      </TD>
                      <TD class="FieldButton_ContentCell">
                        <a class="FieldButtonLink" href="#" onfocus="setWindowElementFocus(this); window.status='xx'; return true;" onblur="window.status=''; return true;" onkeypress="this.className='FieldButtonLink_active'; return true;" onkeyup="this.className='FieldButtonLink_focus'; return true;">
                        <table class="FieldButton" onclick="showCalendar('frmMain.inpReportDateTo', document.frmMain.inpReportDateTo.value, false);return false;" onmouseout="this.className='FieldButton';window.status='';return true;" onmouseover="this.className='FieldButton_hover';window.status='Show calendar';return true;" onmousedown="this.className='FieldButton_active';return true;" onmouseup="this.className='FieldButton';return true;">
                        <TR>

                          <TD class="FieldButton_bg">
                            <IMG alt="Calendar" class="FieldButton_Icon FieldButton_Icon_Calendar" title="Calendar" src="../../../../../web/images/blank.gif" border="0"></IMG>
                          </TD>
                        </TR>
                      </TABLE>
                      </a>
                      </TD>
                    </TR>
                  </TABLE>
                </TD>

[4] Current structure for a button:

<td class="Button_LeftAlign_ContentCell">
              <div>
                <a class="ButtonLink" href="#" onfocus="setWindowElementFocus(this); window.status='Process'; return true;" onblur="window.status=''; return true;" onkeypress="this.className='ButtonLink_active'; return true;" onkeyup="this.className='ButtonLink_focus'; return true;" onclick="submitCommandForm('SAVE', true);return false;" id="buttonProcess">
                <table class="Button" onmouseout="this.className='Button';window.status='';return true;" onmouseover="this.className='Button_hover';window.status='Process';return true;" onmousedown="this.className='Button_active';return true;" onmouseup="this.className='Button';return true;">
                  <tr>
                    <td class="Button_left"><img class="Button_Icon Button_Icon_process" alt="Process" title="Process" src="../web/images/blank.gif" border="0" /></td>
                    <td class="Button_text Button_width">Process</td>
                    <td class="Button_right"></td>
                  </tr>
                </table>
                </a>
              </div>
            </td>

[5] https://issues.openbravo.com/view.php?id=4194 [^]

Steps To Reproduce

Go to 'Sales Management || Analysis Tools || Sales Dimensional Report', right click on HTML and select 'This Frame > View Frame Source'.

Proposed Solution

Additional Information