Toolbox

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

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

class

Displayed window logo icon

Popup_WindowLogo_Icon_process
Popup_WindowLogo_Icon_searchFiltered
Popup_WindowLogo_Icon_info
Popup_WindowLogo_Icon_password
Popup_WindowLogo_Icon_debtPayment
Popup_WindowLogo_Icon_relatedInfo
Popup_WindowLogo_Icon_help
Popup_WindowLogo_Icon_account
Popup_WindowLogo_Icon_attachment
Popup_WindowLogo_Icon_attribute
Popup_WindowLogo_Icon_businessPartner
Popup_WindowLogo_Icon_cashJornal
Popup_WindowLogo_Icon_image
Popup_WindowLogo_Icon_invoice
Popup_WindowLogo_Icon_invoiceLine
Popup_WindowLogo_Icon_location
Popup_WindowLogo_Icon_locator
Popup_WindowLogo_Icon_okCancel
Popup_WindowLogo_Icon_product
Popup_WindowLogo_Icon_productComplete
Popup_WindowLogo_Icon_project
Popup_WindowLogo_Icon_request
Popup_WindowLogo_Icon_salesOrder
Popup_WindowLogo_Icon_salesOrderLine
Popup_WindowLogo_Icon_shipment
Popup_WindowLogo_Icon_shipmentReceipt
Popup_WindowLogo_Icon_task
Popup_WindowLogo_Icon_userContact
Popup_WindowLogo_Icon_workflow
Popup_WindowLogo_Icon_organizeMenu
Popup_WindowLogo_Icon_error
Popup_WindowLogo_Icon_heartbeat
Popup_WindowLogo_Icon_registration
Popup_WindowLogo_Icon_moduleInstall

CCCCCCCC

span

Popup title

DDDDDDDD

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
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:

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:

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

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

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

class

Displayed button icon

Button_Icon_process
Button_Icon_back
Button_Icon_next
Button_Icon_ok
Button_Icon_cancel
Button_Icon_clear
Button_Icon_pdf
Button_Icon_html
Button_Icon_search
Button_Icon_scanUpdates
Button_Icon_save
Button_Icon_download
Button_Icon_edit
Button_Icon_erase
Button_Icon_password
Button_Icon_contract
Button_Icon_expand
Button_Icon_lock
Button_Icon_unlock

EEEEEEEE

Yes

alt / title

Description displayed on mouse over and if image not available

FFFFFFFF

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
Default action
Focus
Hover
Press
Inactive

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
appStatus.js	No	External	disableButton(id)	Can be invoked, passing the button id as argument, to disable a button. If exists, this import is required

Checkbox

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
Focus-Unchecked
Normal-Checked
Focus-Checked

Radio Button

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
Focus-Unchecked
Normal-Checked
Focus-Checked

List

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

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

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
Delete	Remove the selected element of the list
Delete All	Remove all the elements of the list

Status

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

Status	Visual Appearence
Normal
Focus
Hover
Press

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

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

Id of the left list element.

CCCCCCCC

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

Id of the right list element.

HHHHHHHH

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
Exclude	Move elements from right list to left list
Up	Move up the selected elements one position (it runs in the right list)
Down	Move down the selected elements one position (it runs in the right list)

Status

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

Status	Visual Appearence
Normal
Focus
Hover
Press

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

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

lowerThan

Id of the input which current input should be lower

BBBBBBBB

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

class

Yellow background if the field is required

required

if it is required

FFFFFFFF

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

Status

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

Status	Visual Appearence
Normal
Focus
Hover
Press

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

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	DDDDDDDD	EEEEEEEE	FFFFFFFF	GGGGGGGG
Business Partner	Business Partner	../info/BusinessPartner.html	SELECTOR_BUSINESS	FieldButton_Icon_BusinessPartner
Project	Project	../info/Project.html	SELECTOR_PROJECT	FieldButton_Icon_Project
Product	Product	../info/ProductComplete.html	SELECTOR_PRODUCT	FieldButton_Icon_Product
Account	Account	../info/AccountElementValue.html	SELECTOR_ACCOUNTELEMENTVALUE	FieldButton_Icon_Account
Locator	Locator	../info/Locator.html	SELECTOR_LOCATOR	FieldButton_Icon_Locator
Location	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
Focus
Hover
Press

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

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

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
Required
Focus

Textbox

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

name

Name of the textbox

BBBBBBBB

Id of the textbox

CCCCCCCC

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

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
Required
Focus

Real Number Textbox

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

name

Name of the textbox

BBBBBBBB

Yes

Id of the textbox

CCCCCCCC

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

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

lowerThan

Id of the input which current input should be lower

IIIIIIII

greaterThan

Id of the input which current input should be greater

JJJJJJJJ

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
Required
Focus

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

Languages:

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 22,876 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.

Categories: Templates | Configuration ERP

Toolbox

PDF Books

Search

Participate

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

Contents

Introduction

Main Backbone

HTML Code

External Dependencies

Popup Backbone

HTML Code

External Dependencies

Form content

Label

HTML Code

Label Link

HTML Code

Actions

Button

HTML Code

Status

External Dependencies

Checkbox

HTML Code

Status

Radio Button

HTML Code

Status

List

HTML Code

Actions

Status

External Dependencies

Additional Information

Dimensional

HTML Code

Actions

Status

External Dependencies

Field Button - Validation Date Box

HTML Code

Actions

Status

External Dependencies

Field Button - Selector

HTML Code

Actions

Status

External Dependencies

Combo Box

HTML Code

Actions

Status

Textbox

HTML Code

Actions

Status

Real Number Textbox

HTML Code

Actions

Status

External Dependencies