View source | Discuss this page | Page history | Printable version   

ERP 2.50:Developers Guide/Concepts/UI/Look and feel

ERP 2.50:Developers Guide

Index


Contents

Introduction

This document describes different frequently used html components with its possible customizations.

Main Backbone

It is the frame which content elements not included in the form. It is used in non popup windows

DG-250-Backbone-Main.png

HTML Code

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="onLoadDo();" onresize="onResizeDo();">
<form id="form" method="post" action="AAAAAAAA" name="frmMain">
  <input type="hidden" name="Command"></input>
  <input type="hidden" name="inpLastFieldChanged" value=""></input>
  <table height="100%" border="0" cellpadding="0" cellspacing="0" id="main">
    <tr>
      <td valign="top" id="tdleftTabs"></td>
      <td valign="top">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="Main_ContentPane_Left">
          <tr><td class="Main_NavBar_bg_left" id="tdleftSeparator"></td></tr>
          <tr><td class="Main_ToolBar_bg_left" valign="top"></td></tr>
          <tr><td class="Main_Client_bg_left"></td></tr>
          <tr><td class="Main_Bottom_bg_left"></td></tr>
        </table>
      </td>
      <td valign="top">
        <div class="Main_ContentPane_NavBar" id="tdtopButtons"></div>
        <div class="Main_ContentPane_ToolBar" id="paramToolBar"></div>
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="Main_ContentPane_TabPane" id="tdtopTabs">
          <tr id="paramParentTabContainer"></tr>
          <tr id="paramMainTabContainer"></tr>
          <tr id="paramChildTabContainer"></tr>
        </table>
        <div class="Main_ContentPane_Client" style="overflow: auto; display: none;" id="client">
          <!-- Here should go the Form Content -->
        </div>
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="Menu_ContentPane_Bottom" id="tdbottomSeparator">
          <tr>
            <td class="Main_Bottom_bg"><img src="../../../../../web/images/blank.gif" border="0"></td>
          </tr>
        </table></td>
      <td valign="top">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="Main_ContentPane_Right" id="tdrightSeparator">
          <tr><td class="Main_NavBar_bg_right"></td></tr>
          <tr><td class="Main_ToolBar_bg_right" valign="top"></td></tr>
          <tr><td class="Main_Client_bg_right"></td></tr>
          <tr><td class="Main_Bottom_bg_right"></td></tr>
        </table>
      </td>
    </tr>
  </table>
</form>
</body>

The parameter name is used in the html above and should be substituted with your own needed text.


Parameter Required Type Use Possible Values
AAAAAAAA Yes action Servlet to submit the form content

All the name, class, style and id should be called as they are in the previous template since they are needed to perform javascript calculations. Also the following parameters need a reference in XML Engine to add the needed html inside: paramToolBar, tdleftTabs, paramParentTabContainer, paramMainTabContainer, paramChildTabContainer, tdtopButtons

External Dependencies

File Required Dependence Type Function Use
utils.js Yes Internal Several functions
shortcuts.js Yes utils.js Several functions
windowKeyboard.js Yes Internal Several functions

Popup Backbone

It is the frame which content elements not included in the form. It is used just in popup windows

DG-250-Backbone-Popup.png

HTML Code

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"  onload="onLoadDo();" onunload="onUnloadDo();">
  <form id="form" method="post" action="AAAAAAAA" name="frmMain">
    <input type="hidden" name="Command"></input>
    <input type="hidden" name="IsPopUpCall" value="1"></input>
    <input type="hidden" name="inpLastFieldChanged"></input>
    <div class="Popup_ContentPane_CircleLogo">
      <div class="Popup_WindowLogo">
        <img class="Popup_WindowLogo_Icon BBBBBBBB" src="../../../../../web/images/blank.gif" border=0/></img>
      </div>
    </div>
    <table cellspacing="0" cellpadding="0" width="100%">
      <tr>
        <td>
          <table cellspacing="0" cellpadding="0" class="Popup_ContentPane_NavBar">
            <tr class="Popup_NavBar_bg"><td></td>
              <td class="Popup_NavBar_separator_cell"></td>
              <td class="Popup_NavBar_bg_logo_left"></td>
              <td class="Popup_NavBar_bg_logo" width="1" onclick="openNewBrowser('http://www.openbravo.com', 'Openbravo');return false;"><img src="../../../../../web/images/blank.gif" alt="Openbravo" title="Openbravo" border="0" id="openbravoLogo" class="Popup_NavBar_logo" /></td>
              <td class="Popup_NavBar_bg_logo_right"></td>
              <td class="Popup_NavBar_Popup_title_cell"><span>CCCCCCCC</span></td>
              <td class="Popup_NavBar_separator_cell"></td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <table cellspacing="0" cellpadding="0" class="Popup_ContentPane_SeparatorBar">
            <tr>
              <td class="Popup_SeparatorBar_bg"></td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <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">DDDDDDDD</td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <div class="Popup_ContentPane_Client" style="overflow: auto;" id="client">
            <!-- Here should go the Form Content -->
          </div>
        </td>
      </tr>
    </table>
  </form>
</body>

The parameter name is used in the html above and should be substituted with your own needed text.


Parameter Required Type Use Possible Values
AAAAAAAA Yes action Servlet to submit the form content
BBBBBBBB No class Displayed window logo icon
Popup_WindowLogo_Icon_process DG-250-Backbone-Popup-iconProcess.png
Popup_WindowLogo_Icon_searchFiltered DG-250-Backbone-Popup-iconSearchFilter.png
Popup_WindowLogo_Icon_info DG-250-Backbone-Popup-iconInfo.png
Popup_WindowLogo_Icon_password DG-250-Backbone-Popup-iconPassword.png
Popup_WindowLogo_Icon_debtPayment DG-250-Backbone-Popup-iconDebtPayment.png
Popup_WindowLogo_Icon_relatedInfo DG-250-Backbone-Popup-iconRelatedInfo.png
Popup_WindowLogo_Icon_help DG-250-Backbone-Popup-iconHelp.png
Popup_WindowLogo_Icon_account DG-250-Backbone-Popup-iconAccount.png
Popup_WindowLogo_Icon_attachment DG-250-Backbone-Popup-iconAttachment.png
Popup_WindowLogo_Icon_attribute DG-250-Backbone-Popup-iconAttribute.png
Popup_WindowLogo_Icon_businessPartner DG-250-Backbone-Popup-iconBusinessPartner.png
Popup_WindowLogo_Icon_cashJornal DG-250-Backbone-Popup-iconCashJornal.png
Popup_WindowLogo_Icon_image DG-250-Backbone-Popup-iconImage.png
Popup_WindowLogo_Icon_invoice DG-250-Backbone-Popup-iconInvoice.png
Popup_WindowLogo_Icon_invoiceLine DG-250-Backbone-Popup-iconInvoiceLine.png
Popup_WindowLogo_Icon_location DG-250-Backbone-Popup-iconLocation.png
Popup_WindowLogo_Icon_locator DG-250-Backbone-Popup-iconLocator.png
Popup_WindowLogo_Icon_okCancel DG-250-Backbone-Popup-iconOkCancel.png
Popup_WindowLogo_Icon_product DG-250-Backbone-Popup-iconProduct.png
Popup_WindowLogo_Icon_productComplete DG-250-Backbone-Popup-iconProductComplete.png
Popup_WindowLogo_Icon_project DG-250-Backbone-Popup-iconProject.png
Popup_WindowLogo_Icon_request DG-250-Backbone-Popup-iconRequest.png
Popup_WindowLogo_Icon_salesOrder DG-250-Backbone-Popup-iconSalesOrder.png
Popup_WindowLogo_Icon_salesOrderLine DG-250-Backbone-Popup-iconSalesOrderLine.png
Popup_WindowLogo_Icon_shipment DG-250-Backbone-Popup-iconShipment.png
Popup_WindowLogo_Icon_shipmentReceipt DG-250-Backbone-Popup-iconShipmentReceipt.png
Popup_WindowLogo_Icon_task DG-250-Backbone-Popup-iconTask.png
Popup_WindowLogo_Icon_userContact DG-250-Backbone-Popup-iconUserContact.png
Popup_WindowLogo_Icon_workflow DG-250-Backbone-Popup-iconWorkflow.png
Popup_WindowLogo_Icon_organizeMenu DG-250-Backbone-Popup-iconOrganizeMenu.png
Popup_WindowLogo_Icon_error DG-250-Backbone-Popup-iconError.png
Popup_WindowLogo_Icon_heartbeat DG-250-Backbone-Popup-iconHeartbeat.png
Popup_WindowLogo_Icon_registration DG-250-Backbone-Popup-iconRegistration.png
Popup_WindowLogo_Icon_moduleInstall DG-250-Backbone-Popup-iconModuleInstall.png
CCCCCCCC No span Popup title
DDDDDDDD No td Popup information text

All the name, class, style and id should be called as they are in the previous template since they are needed to perform javascript calculations.


External Dependencies

File Required Dependence Type Function Use
utils.js Yes Internal Several functions
shortcuts.js Yes utils.js Several functions
windowKeyboard.js Yes Internal Several functions

Form content

It is the table in which is going to be visualized the content of the form

In main windows it is defined as

<table width="100%" cellspacing="0" cellpadding="0" border="0" class="Main_Client_TableEdition">
  <tr>
    <td class="TableEdition_OneCell_width"></td>
    <td class="TableEdition_OneCell_width"></td>
    <td class="TableEdition_OneCell_width"></td>
    <td class="TableEdition_OneCell_width"></td>
    <td class="TableEdition_OneCell_width"></td>
    <td class="TableEdition_OneCell_width"></td>
  </tr>
  ... <!-- Here goes each tr with form contents -->
</table>

In popup windows it is defined as

<table width="100%" cellspacing="0" cellpadding="0" border="0" class="Popup_Client_TablePopup">
  <tr>
    <td class="TableEdition_OneCell_width"></td>
    <td class="TableEdition_OneCell_width"></td>
    <td class="TableEdition_OneCell_width"></td>
    <td class="TableEdition_OneCell_width"></td>
  </tr>
  ... <!-- Here goes each tr with form contents -->
</table>

So in main windows it has 6 cells per row and in popup windows it has 4 cells per row. Each <td> could contain one of the form elements described in nexts chapters.

There is also the posibility of join several cells using the colspan property to allow larger form elements (if they are allowed to increase their size).

Each cell (<td>) should have a different class depending of the form element that it is going to content. These classes are:


Form element td class
Label TitleCell
Label Link TitleCell
Button Button_CenterAlign_ContentCell or Button_LeftAlign_ContentCell or Button_RightAlign_ContentCell
Checkbox Radio_Check_ContentCell
Radio Button Radio_Check_ContentCell
List List_ContentCell
Dimensional *The full <tr> is described in its chapter
Field Button - Validation Date Box TextBox_ContentCell
Field Button - Selector TextBox_ContentCell
Combo Box Combo_ContentCell
Textbox TextBox_ContentCell
Real Number Textbox TextBox_ContentCell

Label

It is the description/name text which could preceed a form element. Its visualization is something like:

DG-250-Label.png

HTML Code

<span class="LabelText">AAAAAAAA</span>

The parameter name is used in the html above and should be substituted with your own needed text.


Parameter Required Type Use Possible Values
AAAAAAAA Yes span text Text of the label


Label Link

It is the description/name text which could preceed a form element. It links to the form related which its use. Its visualization is something like:

DG-250-LabelLink.png

HTML Code

<span class="LabelText">
  <a class="LabelLink" href="#" onclick="AAAAAAAA">
    <span>BBBBBBBB</span>
  </a>
</span>

The parameter name is used in the html above and should be substituted with your own needed text.


Parameter Required Type Use Possible Values
AAAAAAAA Yes onclick onclick action of the link
BBBBBBBB Yes span text Text of the label


Actions

The different label link actions that could be done are:


Action Description Icon
On click Executes the link


Button

DG-250-Button-Normal.png

HTML Code

<div>
  <button type="button" 
    id="AAAAAAAA" 
    class="ButtonLink" 
    onclick="BBBBBBBB"
    onfocus="buttonEvent('onfocus', this); window.status='CCCCCCCC'; return true;" 
    onblur="buttonEvent('onblur', this);" 
    onkeyup="buttonEvent('onkeyup', this);" 
    onkeydown="buttonEvent('onkeydown', this);" 
    onkeypress="buttonEvent('onkeypress', this);" 
    onmouseup="buttonEvent('onmouseup', this);" 
    onmousedown="buttonEvent('onmousedown', this);" 
    onmouseover="buttonEvent('onmouseover', this); window.status='CCCCCCCC'; return true;" 
    onmouseout="buttonEvent('onmouseout', this);">
    <table class="Button">
      <tr>
        <td class="Button_left"><img class="Button_Icon DDDDDDDD" alt="EEEEEEEE" title="EEEEEEEE" src="../../../../../web/images/blank.gif" border="0"/></td>
        <td class="Button_text FFFFFFFF">GGGGGGGG</td>
        <td class="Button_right"></td>
      </tr>
    </table>
  </button>
</div>

The parameter name is used in the html above and should be substituted with your own needed text.


Parameter Required Type Use Possible Values
AAAAAAAA No id Identify the button for any purpose
BBBBBBBB Yes onclick Action executed when button is pressed
CCCCCCCC Yes window.status Description displayed in the browser status bar
DDDDDDDD No class Displayed button icon
Button_Icon_process DG-250-Button-iconProcess.png
Button_Icon_back DG-250-Button-iconBack.png
Button_Icon_next DG-250-Button-iconNext.png
Button_Icon_ok DG-250-Button-iconOk.png
Button_Icon_cancel DG-250-Button-iconCancel.png
Button_Icon_clear DG-250-Button-iconClear.png
Button_Icon_pdf DG-250-Button-iconPdf.png
Button_Icon_html DG-250-Button-iconHtml.png
Button_Icon_search DG-250-Button-iconSearch.png
Button_Icon_scanUpdates DG-250-Button-iconScanUpdates.png
Button_Icon_save DG-250-Button-iconSave.png
Button_Icon_download DG-250-Button-iconDownload.png
Button_Icon_edit DG-250-Button-iconEdit.png
Button_Icon_erase DG-250-Button-iconErase.png
Button_Icon_password DG-250-Button-iconPassword.png
Button_Icon_contract DG-250-Button-iconContract.png
Button_Icon_expand DG-250-Button-iconExpand.png
Button_Icon_lock DG-250-Button-iconLock.png
Button_Icon_unlock DG-250-Button-iconUnlock.png
EEEEEEEE Yes alt / title Description displayed on mouse over and if image not available
FFFFFFFF No class Fixed width of the button
Button_width it sets a fixed width of 50px
GGGGGGGG Yes td - content Button text


Status

The different button status are set automatically when they are required. These status are:


Status Visual Appearence
Normal DG-250-Button-Normal.png
Default action DG-250-Button-Default.png
Focus DG-250-Button-Focus.png
Hover DG-250-Button-Hover.png
Press DG-250-Button-Press.png
Inactive DG-250-Button-Inactive.png


External Dependencies

File Required Dependence Type Function Use
utils.js Yes Internal buttonEvent(event, obj) It is embedded in the html button code to set the different button status
windowKeyboard.js Yes buttonEvent(event, obj) setWindowElementFocus(obj) It set the focus in the element when clicked
appStatus.js No External enableButton(id) Can be invoked, passing the button id as argument, to enable a button. If exists, this import is required
disableButton(id) Can be invoked, passing the button id as argument, to disable a button. If exists, this import is required


Checkbox

DG-250-Checkbox-Normal-C.png

HTML Code

<span class="Checkbox_container_NOT_Focused"><input type="checkbox" name="AAAAAAAA" value="BBBBBBBB" CCCCCCCC id="DDDDDDDD" onclick="EEEEEEEE"></input></span>


The parameter name is used in the html above and should be substituted with your own needed text.


Parameter Required Type Use Possible Values
AAAAAAAA Yes name Name of the checkbox
BBBBBBBB Yes value Value of the checkbox
CCCCCCCC No checked Status of the radio button It should be "checked" if the checkbox should appears as checked. If not just ignore this parameter
DDDDDDDD Yes id Id of the checkbox
EEEEEEEE No onclick Optional to perform an action after click


Status

The different checkbox status are set automatically when they are required. These status are:


Status Visual Appearence
Normal-Unchecked DG-250-Checkbox-Normal-UnC.png
Focus-Unchecked DG-250-Checkbox-Focus-UnC.png
Normal-Checked DG-250-Checkbox-Normal-C.png
Focus-Checked DG-250-Checkbox-Focus-C.png


Radio Button

DG-250-RadioButton-Normal-C.png

HTML Code

<span class="Radio_container_NOT_Focused"><input type="radio" name="AAAAAAAA" value="BBBBBBBB" CCCCCCCC id="DDDDDDDD" onclick="EEEEEEEE" class="RadioButton"></input></span>


The parameter name is used in the html above and should be substituted with your own needed text.


Parameter Required Type Use Possible Values
AAAAAAAA Yes name Name of the radio button. All related radio buttons should have the same name
BBBBBBBB Yes value Value of the radio button
CCCCCCCC No checked Status of the radio button It should be "checked" if the radio button should appears as checked. If not just ignore this parameter
DDDDDDDD Yes id Id of the radio button
EEEEEEEE No onclick Optional to perform an action after click


Status

The different radio button status are set automatically when they are required. These status are:


Status Visual Appearence
Normal-Unchecked DG-250-RadioButton-Normal-UnC.png
Focus-Unchecked DG-250-RadioButton-Focus-UnC.png
Normal-Checked DG-250-RadioButton-Normal-C.png
Focus-Checked DG-250-RadioButton-Focus-C.png

List

DG-250-List.png

HTML Code

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <select class="List_width AAAAAAAA" name="BBBBBBBB" multiple="" id="CCCCCCCC"></select>
    </td>
    <td class="List_Button_ContentCell">
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td>
            <a class="List_Button_TopLink" href="#"
              onclick="DDDDDDDD"
              onfocus="setWindowElementFocus(this); window.status='Add'; return true;"
              onblur="window.status=''; return true;"
              onkeypress="this.className='List_Button_TopLink_active'; return true;"
              onkeyup="this.className='List_Button_TopLink_focus'; return true;">
              <table class="List_Button_Top"
                onmousedown="this.className='List_Button_Top_active'; return true;"
                onmouseup="this.className='List_Button_Top'; return true;"
                onmouseover="this.className='List_Button_Top_hover'; window.status='Add'; return true;"
                onmouseout="this.className='List_Button_Top'; window.status=''; return true;">
                <tr>
                  <td class="List_Button_Top_bg">
                    <img class="List_Button_Icon List_Button_Icon_Add" src="../../../../../web/images/blank.gif" alt="Add" title="Add"/>
                  </td>
                </tr>
              </table>
            </a>
          </td>
        </tr>
        <tr>
          <td class="List_Button_Separator">
          </td>
        </tr>
        <tr>
          <td>
            <a class="List_Button_MiddleLink" href="#"
              onclick="clearSelectedElements(document.frmMain.BBBBBBBB);return false;"
              onfocus="setWindowElementFocus(this); window.status='Delete selected elements'; return true;"
              onblur="window.status=''; return true;"
              onkeypress="this.className='List_Button_MiddleLink_active'; return true;"
              onkeyup="this.className='List_Button_MiddleLink_focus'; return true;">
              <table class="List_Button_Middle"
                onmousedown="this.className='List_Button_Middle_active'; return true;"
                onmouseup="this.className='List_Button_Middle'; return true;"
                onmouseover="this.className='List_Button_Middle_hover'; window.status='Delete selected elements'; return true;"
                onmouseout="this.className='List_Button_Middle'; window.status=''; return true;">
                <tr>
                  <td class="List_Button_Middle_bg">
                    <img class="List_Button_Icon List_Button_Icon_Delete" src="../../../../../web/images/blank.gif" alt="Delete selected elements" title="Delete selected elements"/>
                  </td>
                </tr>
              </table>
            </a>
          </td>
        </tr>
        <tr>
          <td class="List_Button_Separator">
          </td>
        </tr>
        <tr>
          <td>
            <a class="List_Button_BottomLink" href="#"
              onclick="clearList(document.frmMain.BBBBBBBB);return false;"
              onfocus="setWindowElementFocus(this); window.status='Delete all elements'; return true;"
              onblur="window.status=''; return true;"
              onkeypress="this.className='List_Button_BottomLink_active'; return true;"
              onkeyup="this.className='List_Button_BottomLink_focus'; return true;">
              <table class="List_Button_Bottom"
                onmousedown="this.className='List_Button_Bottom_active'; return true;"
                onmouseup="this.className='List_Button_Bottom'; return true;"
                onmouseover="this.className='List_Button_Bottom_hover'; window.status='Delete all elements'; return true;"
                onmouseout="this.className='List_Button_Bottom'; window.status=''; return true;">
                <tr>
                  <td class="List_Button_Bottom_bg">
                    <img class="List_Button_Icon List_Button_Icon_DeleteAll" src="../../../../../web/images/blank.gif" alt="Delete all elements" title="Delete all elements"/>
                  </td>
                </tr>
              </table>
            </a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

The parameter name is used in the html above and should be substituted with your own needed text.


Parameter Required Type Use Possible Values
AAAAAAAA No class
List_height it sets a fixed height of 70px
BBBBBBBB Yes name Name of the list element. Used several times to refer the list element
CCCCCCCC No id Id of the list element.
DDDDDDDD Yes onclick Action executed to add elements to the list There is more information at #chapter 3.11.2#


Actions

The different button actions that could be done are:


Action Description Icon
Add Add an element to the list DG-250-List-iconAdd.png
Delete Remove the selected element of the list DG-250-List-iconDelete.png
Delete All Remove all the elements of the list DG-250-List-iconDeleteAll.png


Status

The different button status are set automatically when they are required. These status are:


Status Visual Appearence
Normal DG-250-List-Normal.png
Focus DG-250-List-Focus.png
Hover DG-250-List-Hover.png
Press DG-250-List-Press.png


External Dependencies

File Required Dependence Type Function Use
windowKeyboard.js Yes Internal setWindowElementFocus(obj) It is embedded in the html button code to set the focus in the element when clicked
search.js No Internal openMultiSearch(strTop, strLeft, strSelectorName, strWindowName, validate, strForm, strItem) It could be embedded in the html button in the DDDDDDDD onclick parameter. If exists, this import is required

Additional Information

The multi-select list shown above can require extra java script code to be correctly posted to the server when the form is submitted. The reason is that the user interface shows the selected elements but internally in the html-dom tree the values are not selected but only displayed. So just before the form is submitted the values have to be changed to selected. The following code takes care of this:

 
var frm = document.FFFFFFFFF;
markCheckedAllElements(frm.BBBBBBBB);

This code has to be called when the form is submitted. The FFFFFFFFF is the name of the form and BBBBBBBB is the name of the select HTML element above.

This code requires the javascript library:

utils.js

this javascript library contains the markCheckedAllElements function.

Dimensional

DG-250-Dimensional.png

HTML Code

<tr>
  <td class="TitleCell"></td>
  <td class="Dimension_ContentCell" colspan="2">
    <select name="AAAAAAAA" multiple="" id="BBBBBBBB" class="Dimension_LeftSelect_width CCCCCCCC">
      <option value="DDDDDDDD">EEEEEEEE</option>  <!-- This line should be repeated as many elements there are -->
    </select>
  </td>
  <td class="DimensionLRArrows_ContentCell">
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>
          <a class="Dimension_LeftRight_Button_TopLink" href="#"
            onclick="addList(document.frmMain.AAAAAAAA, document.frmMain.FFFFFFFF);return false;"
            onfocus="setWindowElementFocus(this); window.status='Include'; return true;"
            onblur="window.status=''; return true;"
            onkeypress="this.className='Dimension_LeftRight_Button_TopLink_active'; return true;"
            onkeyup="this.className='Dimension_LeftRight_Button_TopLink_focus'; return true;">
            <table class="Dimension_LeftRight_Button_Top"
              onmousedown="this.className='Dimension_LeftRight_Button_Top_active'; return true;"
              onmouseup="this.className='Dimension_LeftRight_Button_Top'; return true;"
              onmouseover="this.className='Dimension_LeftRight_Button_Top_hover'; window.status='Include'; return true;"
              onmouseout="this.className='Dimension_LeftRight_Button_Top'; window.status=''; return true;">
              <tr>
                <td class="Dimension_LeftRight_Button_Top_bg">
                  <img class="Dimension_LeftRight_Button_Icon Dimension_LeftRight_Button_Icon_Include" src="../../../../../web/images/blank.gif" alt="Include" title="Include"/>
                </td>
              </tr>
            </table>
          </a>
        </td>
      </tr>
      <tr>
        <td class="Dimension_LeftRight_Button_Separator">
        </td>
      </tr>
      <tr>
        <td>
          <a class="Dimension_LeftRight_Button_BottomLink" href="#"
            onclick="addList(document.frmMain.FFFFFFFF, document.frmMain.AAAAAAAA);return false;"
            onfocus="setWindowElementFocus(this); window.status='Exclude'; return true;"
            onblur="this.className='Dimension_LeftRight_Button_BottomLink'; window.status=''; return true;"
            onkeypress="this.className='Dimension_LeftRight_Button_BottomLink_active'; return true;"
            onkeyup="this.className='Dimension_LeftRight_Button_BottomLink_focus'; return true;">
            <table class="Dimension_LeftRight_Button_Bottom"
              onmousedown="this.className='Dimension_LeftRight_Button_Bottom_active'; return true;"
              onmouseup="this.className='Dimension_LeftRight_Button_Bottom'; return true;"
              onmouseover="this.className='Dimension_LeftRight_Button_Bottom_hover'; window.status='Exclude'; return true;"
              onmouseout="this.className='Dimension_LeftRight_Button_Bottom'; window.status=''; return true;">
              <tr>
                <td class="Dimension_LeftRight_Button_Bottom_bg">
                  <img class="Dimension_LeftRight_Button_Icon Dimension_LeftRight_Button_Icon_Exclude" src="../../../../../web/images/blank.gif" alt="Exclude" title="Exclude"/>
                </td>
              </tr>
            </table>
          </a>
        </td>
      </tr>
    </table>
  </td>
  <td class="Dimension_ContentCell" colspan="2">
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>
          <select name="FFFFFFFF" multiple="" id="GGGGGGGG" class="Dimension_RightSelect_width HHHHHHHH">
            <option value="IIIIIIII">JJJJJJJJ</option>  <!-- This line should be repeated as many elements there are -->
          </select>
        </td>
        <td class="DimensionUDArrows_ContentCell">
          <table border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td>
                <a class="Dimension_UpDown_Button_TopLink" href="#"
                  onclick="moveElementInList(document.frmMain.FFFFFFFF, -1);return false;"
                  onfocus="setWindowElementFocus(this); window.status='Go up'; return true;"
                  onblur="window.status=''; return true;"
                  onkeypress="this.className='Dimension_UpDown_Button_TopLink_active'; return true;"
                  onkeyup="this.className='Dimension_UpDown_Button_TopLink_focus'; return true;">
                  <table class="Dimension_UpDown_Button_Top"
                    onmousedown="this.className='Dimension_UpDown_Button_Top_active'; return true;"
                    onmouseup="this.className='Dimension_UpDown_Button_Top'; return true;"
                    onmouseover="this.className='Dimension_UpDown_Button_Top_hover'; window.status='Go up'; return true;"
                    onmouseout="this.className='Dimension_UpDown_Button_Top'; window.status=''; return true;">
                    <tr>
                      <td class="Dimension_UpDown_Button_Top_bg">
                        <img class="Dimension_UpDown_Button_Icon Dimension_UpDown_Button_Icon_Up" src="../../../../../web/images/blank.gif" alt="Go up" title="Go up"/>
                      </td>
                    </tr>
                  </table>
                </a>
              </td>
            </tr>
            <tr>
              <td class="Dimension_UpDown_Button_Separator">
              </td>
            </tr>
            <tr>
              <td>
                <a class="Dimension_UpDown_Button_BottomLink" href="#"
                  onclick="moveElementInList(document.frmMain.FFFFFFFF, 1);return false;"
                  onfocus="setWindowElementFocus(this); window.status='Go down'; return true;"
                  onblur="window.status=''; return true;"
                  onkeypress="this.className='Dimension_UpDown_Button_BottomLink_active'; return true;"
                  onkeyup="this.className='Dimension_UpDown_Button_BottomLink_focus'; return true;">
                  <table class="Dimension_UpDown_Button_Bottom"
                    onmousedown="this.className='Dimension_UpDown_Button_Bottom_active'; return true;"
                    onmouseup="this.className='Dimension_UpDown_Button_Bottom'; return true;"
                    onmouseover="this.className='Dimension_UpDown_Button_Bottom_hover'; window.status='Go down'; return true;"
                    onmouseout="this.className='Dimension_UpDown_Button_Bottom'; window.status=''; return true;">
                    <tr>
                      <td class="Dimension_UpDown_Button_Bottom_bg">
                        <img class="Dimension_UpDown_Button_Icon Dimension_UpDown_Button_Icon_Down" src="../../../../../web/images/blank.gif" alt="Go down" title="Go down"/>
                      </td>
                    </tr>
                  </table>
                </a>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </td>
</tr>

The parameter name is used in the html above and should be substituted with your own needed text.


Parameter Required Type Use Possible Values
AAAAAAAA Yes name Name of the left list element. Used several times to refer the list element
BBBBBBBB No id Id of the left list element.
CCCCCCCC No class Fixed height of the left list
Dimension_LeftSelect_height it sets a fixed height of 70px
DDDDDDDD Yes (if element exists) value Value of the left list element. It should be a natural number and should not be repeated
EEEEEEEE Yes (if element exists) option content Text of the left list element.
FFFFFFFF Yes name Name of the right list element. Used several times to refer the list element
GGGGGGGG No id Id of the right list element.
HHHHHHHH No class Fixed height of the right list
Dimension_RightSelect_height it sets a fixed height of 70px
IIIIIIII Yes (if element exists) value Value of the right list element. It should be a natural number and should not be repeated
JJJJJJJJ Yes (if element exists) option content Text of the right list element.


Actions

The different button actions that could be done are:


Action Description Icon
Include Move elements from left list to right list DG-250-Dimensional-iconInclude.png
Exclude Move elements from right list to left list DG-250-Dimensional-iconExclude.png
Up Move up the selected elements one position (it runs in the right list) DG-250-Dimensional-iconUp.png
Down Move down the selected elements one position (it runs in the right list) DG-250-Dimensional-iconDown.png


Status

The different button status are set automatically when they are required. These status are:


Status Visual Appearence
Normal DG-250-Dimensional-Normal.png
Focus DG-250-Dimensional-Focus.png
Hover DG-250-Dimensional-Hover.png
Press DG-250-Dimensional-Press.png


External Dependencies

File Required Dependence Type Function Use
windowKeyboard.js Yes Internal setWindowElementFocus(obj) It is embedded in the html code to set the focus in the element when clicked
utils.js Yes Internal addList(sourceList, destinationList, selectAll) It is embedded in the html code to move elements between lists
utils.js Yes Internal moveElementInList(list, incr) It is embedded in the html code to move up or down elements of the right list


Field Button - Validation Date Box

DG-250-FB-Date.png

HTML Code

<table border="0" cellspacing="0" cellpadding="0" summary="" style="padding-top: 0px;">
  <tr>
    <td class="TextBox_ContentCell">
      <input dojoType="openbravo:DateTextbox" 
        lowerThan="AAAAAAAA"
        greaterThan="BBBBBBBB"
        displayFormat="CCCCCCCC"
        saveFormat="DDDDDDDD"
        class="TextBox_btn_OneCell_width EEEEEEEE"
        required="FFFFFFFF"
        type="text"
        name="GGGGGGGG"
        id="HHHHHHHH"
        size="10"
        maxlength="10"
        value=""
        onkeyup="autoCompleteDate(this.textbox, this.displayFormat);return true;">
      </input>
      <script>djConfig.searchIds.push("HHHHHHHH");</script>
    </td>
    <td class="FieldButton_ContentCell">
      <a class="FieldButtonLink"
        href="#"
        onfocus="setWindowElementFocus(this); window.status='Calendar'; return true;" onblur="window.status=''; return true;"
        onkeypress="this.className='FieldButtonLink_active'; return true;"
        onkeyup="this.className='FieldButtonLink_focus'; return true;"
        onclick="showCalendar('frmMain.GGGGGGGG', document.frmMain.GGGGGGGG.value, false);return false;" >
        <table class="FieldButton"
          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>

The parameter name is used in the html above and should be substituted with your own needed text.


Parameter Required Type Use Possible Values
AAAAAAAA No lowerThan Id of the input which current input should be lower
BBBBBBBB No greaterThan Id of the input which current input should be greater
CCCCCCCC Yes displayFormat The display format in which the validation will operate
DD-MM-YYYY
YYYY-MM-DD
MM-DD-YYYY
DDDDDDDD Yes saveFormat
DD-MM-YYYY
YYYY-MM-DD
MM-DD-YYYY
EEEEEEEE No class Yellow background if the field is required
required if it is required
FFFFFFFF No required Html notation if the field is required
yes if it is required
no if it is not required
GGGGGGGG Yes name Name of the element
HHHHHHHH Yes id Id of the element. Its use is spreaded


Actions

The different field button actions that could be done are:


Action Description Icon
On click Show/hide a calendar DG-250-FB-iconCalendar.png


Status

The different field button status are set automatically when they are required. These status are:


Status Visual Appearence
Normal DG-250-FB-Normal.png
Focus DG-250-FB-Focus.png
Hover DG-250-FB-Hover.png
Press DG-250-FB-Press.png


External Dependencies

File Required Dependence Type Function Use
windowKeyboard.js Yes Internal setWindowElementFocus(obj) It is embedded in the html code to set the focus in the element when clicked
utils.js Yes Internal showCalendar(id, value, debug, format, showsTime, showsOtherMonths) It is embedded in the html code to show the calendar
jscalendar/calendar.js Yes utils.js The javascript app which render and display the calendar
jscalendar/lang/calendar-xx.js Yes jscalendar/calendar.js The language configuration of the calendar (change xx by en or es or whatever language you need). This language should be set automatically using xml engine
default/DateTextBox.js Yes Internal autoCompleteDate(field, fmt) Functions needed to parse and manipulate the date
dojo/dojo.js Yes Internal dojoType="openbravo:DateTextbox" Dojo 0.4.3: functions needed to parse and manipulate the date and the notification error messages
dojoConfig.js Yes dojo/dojo.js Configuration parameters of dojo


Field Button - Selector

DG-250-FB-Selector.png

HTML Code

<table border="0" cellspacing="0" cellpadding="0" summary="" style="padding-top: 0px;">
  <tr>
    <td class="TextBox_ContentCell">
      <input type="hidden" name="AAAAAAAA" id="BBBBBBBB" value=""></input> 
      <input class="dojoValidateValid TextBox_btn_TwoCells_width" type="text" name="CCCCCCCC" maxlength="20" value=""></input>
    </td>
    <td class="FieldButton_ContentCell">
      <a class="FieldButtonLink"
        href="#"
        onfocus="setWindowElementFocus(this); window.status='DDDDDDDD'; return true;" onblur="window.status=''; return true;"
        onkeypress="this.className='FieldButtonLink_active'; return true;"
        onkeyup="this.className='FieldButtonLink_focus'; return true;" onclick="openSearch(null, null, 'EEEEEEEE', 'FFFFFFFF', false, 'frmMain', 'AAAAAAAA', 'CCCCCCCC', document.frmMain.CCCCCCCC.value);return false;">
        <table class="FieldButton"
          onmouseout="this.className='FieldButton';window.status='';return true;"
          onmouseover="this.className='FieldButton_hover';window.status='Search';return true;"
          onmousedown="this.className='FieldButton_active';return true;"
          onmouseup="this.className='FieldButton';return true;">
          <tr>
            <td class="FieldButton_bg">
              <img alt="DDDDDDDD" class="FieldButton_Icon GGGGGGGG" title="DDDDDDDD" src="../../../../../web/images/blank.gif" border="0"></img>
            </td>
          </tr>
        </table>
      </a>
    </td>
  </tr>
</table>

The parameter name is used in the html above and should be substituted with your own needed text.


Parameter Required Type Use Possible Values
AAAAAAAA Yes name Name of the hidden input (the one that will be submitted)
BBBBBBBB Yes id Id of the hidden input (the one that will be submitted)
CCCCCCCC Yes name Name of the visible input (for visualization purposes only)
DDDDDDDD Yes windows status - alt - title Description displayed on windows status bar, on mouse over and if image not available See the table above
EEEEEEEE Yes javascript parameter Url of the selector servlet See the table above
FFFFFFFF Yes javascript parameter Title of the popup See the table above
GGGGGGGG Yes class Displayed field button icon See the table above


Selector Type Icon DDDDDDDD EEEEEEEE FFFFFFFF GGGGGGGG
Business Partner DG-250-FB-iconBusinessPartner.png Business Partner ../info/BusinessPartner.html SELECTOR_BUSINESS FieldButton_Icon_BusinessPartner
Project DG-250-FB-iconProject.png Project ../info/Project.html SELECTOR_PROJECT FieldButton_Icon_Project
Product DG-250-FB-iconProduct.png Product ../info/ProductComplete.html SELECTOR_PRODUCT FieldButton_Icon_Product
Account DG-250-FB-iconAccount.png Account ../info/AccountElementValue.html SELECTOR_ACCOUNTELEMENTVALUE FieldButton_Icon_Account
Locator DG-250-FB-iconLocator.png Locator ../info/Locator.html SELECTOR_LOCATOR FieldButton_Icon_Locator
Location DG-250-FB-iconLocation.png Location ../info/Location_FS.html SELECTOR_LOCATION FieldButton_Icon_Location


Actions

The different actions that could be done are:


Action Description
On click Open selector
Enter key Search with the given input


Status

The different button status are set automatically when they are required. These status are:


Status Visual Appearence
Normal DG-250-FB-Normal.png
Focus DG-250-FB-Focus.png
Hover DG-250-FB-Hover.png
Press DG-250-FB-Press.png


External Dependencies

File Required Dependence Type Function Use
windowKeyboard.js Yes Internal setWindowElementFocus(obj) It is embedded in the html code to set the focus in the element when clicked
search.js Yes Internal openSearch(strTop, strLeft, strSelectorName, strWindowName, validate, strForm, strItem, strSpanId, strValueID) It is embedded in the html field button code to open the selector popup

Also in the <head> of the html, in onLoadDo(), at the end you should put

keyArray[keyArray.length] = new keyArrayItem("ENTER", "**The onclick of the field button**", "null");

each one of each field button selector there is


Combo Box

DG-250-Combo-Normal.png

HTML Code

<select name="AAAAAAAA" id="BBBBBBBB" class="CCCCCCCC DDDDDDDD" required="EEEEEEEE">
  <option value="FFFFFFFF">GGGGGGGG</option>  <!-- This line should be repeated as many elements there are -->
</select>

The parameter name is used in the html above and should be substituted with your own needed text.


Parameter Required Type Use Possible Values
AAAAAAAA Yes name Name of the combo box
BBBBBBBB Yes id Id of the combo box
CCCCCCCC Yes class Style for normal or required combo
Combo normal combo
ComboKey required combo
DDDDDDDD Yes class Defines the width of the combo box
Combo_OneCell_width 1 cell size
Combo_TwoCells_width 2 cells size
Combo_ThreeCells_width 3 cells size
Combo_FourCells_width 4 cells size
Combo_FiveCells_width 5 cells size
Combo_SixCells_width 6 cells size
EEEEEEEE No required Html notation if the field is required
yes if it is required
no if it is not required
FFFFFFFF Yes (if element exists) value Value of the combo element
GGGGGGGG Yes (if element exists) option content Text of the combo element


Actions

The different combo actions that could be done are:


Action Description Icon
On click Expand/Collapse the combo


Status

The different combo status are set automatically when they are required. These status are:


Status Visual Appearence
Normal DG-250-Combo-Normal.png
Required DG-250-Combo-Required.png
Focus DG-250-Combo-Focus.png


Textbox

DG-250-Textbox-Normal.png

HTML Code

<input type="text" 
  name="AAAAAAAA"
  id="BBBBBBBB"
  class="dojoValidateValid CCCCCCCC DDDDDDDD"
  required="EEEEEEEE"
  value="FFFFFFFF"
  maxlength="GGGGGGGG">
</input>

The parameter name is used in the html above and should be substituted with your own needed text.


Parameter Required Type Use Possible Values
AAAAAAAA No name Name of the textbox
BBBBBBBB No id Id of the textbox
CCCCCCCC No class Style for normal or required textbox
normal textbox
required required textbox
DDDDDDDD Yes class Defines the width of the combo box
TextBox_OneCell_width 1 cell size
TextBox_TwoCells_width 2 cells size
TextBox_ThreeCells_width 3 cells size
TextBox_FourCells_width 4 cells size
TextBox_FiveCells_width 5 cells size
TextBox_SixCells_width 6 cells size
EEEEEEEE No required Html notation if the field is required
yes if it is required
no if it is not required
FFFFFFFF Yes value Initial value of the textbox element
GGGGGGGG Yes maxlength Maximun number of characters of the textbox


Actions

The different textbox actions that could be done are:


Action Description Icon
Write Write text in the textbox
Delete/Supr Delete/Supr text of the textbox
Copy Copy text from the textbox
Cut Cut text from the textbox
Paste Paste text to the textbox


Status

The different textbox status are set automatically when they are required. These status are:


Status Visual Appearence
Normal DG-250-Textbox-Normal.png
Required DG-250-Textbox-Required.png
Focus DG-250-Textbox-Focus.png


Real Number Textbox

DG-250-Textbox-Normal.png

HTML Code

<input dojoType="openbravo:RealNumberTextbox"
  name="AAAAAAAA"
  id="BBBBBBBB"
  class="CCCCCCCC DDDDDDDD"
  required="EEEEEEEE"
  value="FFFFFFFF"
  maxlength="GGGGGGGG"
  lowerThan="HHHHHHHH"
  greaterThan="IIIIIIII"
  outputformat="JJJJJJJJ">
</input>
<script>djConfig.searchIds.push("BBBBBBBB");</script>

The parameter name is used in the html above and should be substituted with your own needed text.


Parameter Required Type Use Possible Values
AAAAAAAA No name Name of the textbox
BBBBBBBB Yes id Id of the textbox
CCCCCCCC No class Style for normal or required textbox
normal textbox
required required textbox
DDDDDDDD Yes class Defines the width of the combo box
TextBox_OneCell_width 1 cell size
TextBox_TwoCells_width 2 cells size
TextBox_ThreeCells_width 3 cells size
TextBox_FourCells_width 4 cells size
TextBox_FiveCells_width 5 cells size
TextBox_SixCells_width 6 cells size
EEEEEEEE No required Html notation if the field is required
yes if it is required
no if it is not required
FFFFFFFF Yes value Initial value of the textbox element
GGGGGGGG Yes maxlength Maximun number of characters of the textbox
HHHHHHHH No lowerThan Id of the input which current input should be lower
IIIIIIII No greaterThan Id of the input which current input should be greater
JJJJJJJJ No outputformat Output format for the input The different output formats are specified in config/Format.xml

Actions

The different textbox actions that could be done are:


Action Description Icon
Write Write text in the textbox
Delete/Supr Delete/Supr text of the textbox
Copy Copy text from the textbox
Cut Cut text from the textbox
Paste Paste text to the textbox


Status

The different textbox status are set automatically when they are required. These status are:


Status Visual Appearence
Normal DG-250-Textbox-Normal.png
Required DG-250-Textbox-Required.png
Focus DG-250-Textbox-Focus.png


External Dependencies

File Required Dependence Type Function Use
utils.js Yes Internal Number format related functions It is very important to be imported BEFORE importing dojo.js
dojo/dojo.js Yes Internal dojoType="openbravo:RealNumberTextbox" Dojo 0.4.3: functions needed to validate the textbox
dojoConfig.js Yes dojo/dojo.js Configuration parameters of dojo



ERP 2.50:Developers Guide/Concepts/UI Fundamentals | ERP 2.50:Developers Guide/Concepts/UI/Javascript Utilities 

Retrieved from "http://wiki.openbravo.com/wiki/ERP_2.50:Developers_Guide/Concepts/UI/Look_and_feel"

This page has been accessed 23,192 times. This page was last modified on 14 June 2011, at 11:03. Content is available under Creative Commons Attribution-ShareAlike 2.5 Spain License.