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

From InfiniteERP Wiki
Jump to: navigation, search
Languages: 

English

Template

This sub-template doesn't display properly when not included. Please see Template:Languages for the complete version.

Usage

This template is designed to simplify Template:Languages, by allowing a simpler syntax for adding new languages. Each language is included by calling this template with the following parameters:

  • Language code (e.g. fr)
  • (optional) Page name - if not supplied the page is automatically worked out based on where the language template is included.

This template should not be used anywhere except in the Languages template. </noinclude> | Translate this article...

{{#hierarchy-top:}}

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

File:DG-250-Backbone-Main.png

HTML Code

<source lang="html4strict"><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>

</form> </body></source>

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

File:DG-250-Backbone-Popup.png

HTML Code

<source lang="html4strict"><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>
CCCCCCCC
<img src="../../../../../web/images/blank.gif" border="0" class="Popup_InfoBar_Icon_info" />
DDDDDDDD 
 </form>

</body></source>

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 File:DG-250-Backbone-Popup-iconProcess.png
Popup_WindowLogo_Icon_searchFiltered File:DG-250-Backbone-Popup-iconSearchFilter.png
Popup_WindowLogo_Icon_info File:DG-250-Backbone-Popup-iconInfo.png
Popup_WindowLogo_Icon_password File:DG-250-Backbone-Popup-iconPassword.png
Popup_WindowLogo_Icon_debtPayment File:DG-250-Backbone-Popup-iconDebtPayment.png
Popup_WindowLogo_Icon_relatedInfo File:DG-250-Backbone-Popup-iconRelatedInfo.png
Popup_WindowLogo_Icon_help File:DG-250-Backbone-Popup-iconHelp.png
Popup_WindowLogo_Icon_account File:DG-250-Backbone-Popup-iconAccount.png
Popup_WindowLogo_Icon_attachment File:DG-250-Backbone-Popup-iconAttachment.png
Popup_WindowLogo_Icon_attribute File:DG-250-Backbone-Popup-iconAttribute.png
Popup_WindowLogo_Icon_businessPartner File:DG-250-Backbone-Popup-iconBusinessPartner.png
Popup_WindowLogo_Icon_cashJornal File:DG-250-Backbone-Popup-iconCashJornal.png
Popup_WindowLogo_Icon_image File:DG-250-Backbone-Popup-iconImage.png
Popup_WindowLogo_Icon_invoice File:DG-250-Backbone-Popup-iconInvoice.png
Popup_WindowLogo_Icon_invoiceLine File:DG-250-Backbone-Popup-iconInvoiceLine.png
Popup_WindowLogo_Icon_location File:DG-250-Backbone-Popup-iconLocation.png
Popup_WindowLogo_Icon_locator File:DG-250-Backbone-Popup-iconLocator.png
Popup_WindowLogo_Icon_okCancel File:DG-250-Backbone-Popup-iconOkCancel.png
Popup_WindowLogo_Icon_product File:DG-250-Backbone-Popup-iconProduct.png
Popup_WindowLogo_Icon_productComplete File:DG-250-Backbone-Popup-iconProductComplete.png
Popup_WindowLogo_Icon_project File:DG-250-Backbone-Popup-iconProject.png
Popup_WindowLogo_Icon_request File:DG-250-Backbone-Popup-iconRequest.png
Popup_WindowLogo_Icon_salesOrder File:DG-250-Backbone-Popup-iconSalesOrder.png
Popup_WindowLogo_Icon_salesOrderLine File:DG-250-Backbone-Popup-iconSalesOrderLine.png
Popup_WindowLogo_Icon_shipment File:DG-250-Backbone-Popup-iconShipment.png
Popup_WindowLogo_Icon_shipmentReceipt File:DG-250-Backbone-Popup-iconShipmentReceipt.png
Popup_WindowLogo_Icon_task File:DG-250-Backbone-Popup-iconTask.png
Popup_WindowLogo_Icon_userContact File:DG-250-Backbone-Popup-iconUserContact.png
Popup_WindowLogo_Icon_workflow File:DG-250-Backbone-Popup-iconWorkflow.png
Popup_WindowLogo_Icon_organizeMenu File:DG-250-Backbone-Popup-iconOrganizeMenu.png
Popup_WindowLogo_Icon_error File:DG-250-Backbone-Popup-iconError.png
Popup_WindowLogo_Icon_heartbeat File:DG-250-Backbone-Popup-iconHeartbeat.png
Popup_WindowLogo_Icon_registration File:DG-250-Backbone-Popup-iconRegistration.png
Popup_WindowLogo_Icon_moduleInstall File: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

<source lang="html4strict">

...

</source>

In popup windows it is defined as

<source lang="html4strict">

...

</source> So in main windows it has 6 cells per row and in popup windows it has 4 cells per row. Each 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 () should have a different class depending of the form element that it is going to content. These classes are:


is described in its chapter
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
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:

File:DG-250-Label.png

HTML Code

<source lang="html4strict">AAAAAAAA</source>

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:

File:DG-250-LabelLink.png

HTML Code

<source lang="html4strict"> 

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

</source>

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

File:DG-250-Button-Normal.png

HTML Code

<source lang="html4strict">

 <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);">
<img class="Button_Icon DDDDDDDD" alt="EEEEEEEE" title="EEEEEEEE" src="../../../../../web/images/blank.gif" border="0"/> GGGGGGGG 
 </button>

</source>

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 File:DG-250-Button-iconProcess.png
Button_Icon_back File:DG-250-Button-iconBack.png
Button_Icon_next File:DG-250-Button-iconNext.png
Button_Icon_ok File:DG-250-Button-iconOk.png
Button_Icon_cancel File:DG-250-Button-iconCancel.png
Button_Icon_clear File:DG-250-Button-iconClear.png
Button_Icon_pdf File:DG-250-Button-iconPdf.png
Button_Icon_html File:DG-250-Button-iconHtml.png
Button_Icon_search File:DG-250-Button-iconSearch.png
Button_Icon_scanUpdates File:DG-250-Button-iconScanUpdates.png
Button_Icon_save File:DG-250-Button-iconSave.png
Button_Icon_download File:DG-250-Button-iconDownload.png
Button_Icon_edit File:DG-250-Button-iconEdit.png
Button_Icon_erase File:DG-250-Button-iconErase.png
Button_Icon_password File:DG-250-Button-iconPassword.png
Button_Icon_contract File:DG-250-Button-iconContract.png
Button_Icon_expand File:DG-250-Button-iconExpand.png
Button_Icon_lock File:DG-250-Button-iconLock.png
Button_Icon_unlock File: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 File:DG-250-Button-Normal.png
Default action File:DG-250-Button-Default.png
Focus File:DG-250-Button-Focus.png
Hover File:DG-250-Button-Hover.png
Press File:DG-250-Button-Press.png
Inactive File: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

File:DG-250-Checkbox-Normal-C.png

HTML Code

<source lang="html4strict"><input type="checkbox" name="AAAAAAAA" value="BBBBBBBB" CCCCCCCC id="DDDDDDDD" onclick="EEEEEEEE"></input></source>


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 File:DG-250-Checkbox-Normal-UnC.png
Focus-Unchecked File:DG-250-Checkbox-Focus-UnC.png
Normal-Checked File:DG-250-Checkbox-Normal-C.png
Focus-Checked File:DG-250-Checkbox-Focus-C.png


Radio Button

File:DG-250-RadioButton-Normal-C.png

HTML Code

<source lang="html4strict"><input type="radio" name="AAAAAAAA" value="BBBBBBBB" CCCCCCCC id="DDDDDDDD" onclick="EEEEEEEE" class="RadioButton"></input></source>


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 File:DG-250-RadioButton-Normal-UnC.png
Focus-Unchecked File:DG-250-RadioButton-Focus-UnC.png
Normal-Checked File:DG-250-RadioButton-Normal-C.png
Focus-Checked File:DG-250-RadioButton-Focus-C.png

List

File:DG-250-List.png

HTML Code

<source lang="html4strict">

     <select class="List_width AAAAAAAA" name="BBBBBBBB" multiple="" id="CCCCCCCC"></select>

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

                   <img class="List_Button_Icon List_Button_Icon_Add" src="../../../../../web/images/blank.gif" alt="Add" title="Add"/>

           </a>

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

                   <img class="List_Button_Icon List_Button_Icon_Delete" src="../../../../../web/images/blank.gif" alt="Delete selected elements" title="Delete selected elements"/>

           </a>

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

                   <img class="List_Button_Icon List_Button_Icon_DeleteAll" src="../../../../../web/images/blank.gif" alt="Delete all elements" title="Delete all elements"/>

           </a>

</source>

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 File:DG-250-List-iconAdd.png
Delete Remove the selected element of the list File:DG-250-List-iconDelete.png
Delete All Remove all the elements of the list File:DG-250-List-iconDeleteAll.png


Status

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


Status Visual Appearence
Normal File:DG-250-List-Normal.png
Focus File:DG-250-List-Focus.png
Hover File:DG-250-List-Hover.png
Press File: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:

<source lang="javascript"> var frm = document.FFFFFFFFF; markCheckedAllElements(frm.BBBBBBBB); </source>

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

File:DG-250-Dimensional.png

HTML Code

<source lang="html4strict"> 

   <select name="AAAAAAAA" multiple="" id="BBBBBBBB" class="Dimension_LeftSelect_width CCCCCCCC">
     <option value="DDDDDDDD">EEEEEEEE</option>  
   </select>

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

                 <img class="Dimension_LeftRight_Button_Icon Dimension_LeftRight_Button_Icon_Include" src="../../../../../web/images/blank.gif" alt="Include" title="Include"/>

         </a>

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

                 <img class="Dimension_LeftRight_Button_Icon Dimension_LeftRight_Button_Icon_Exclude" src="../../../../../web/images/blank.gif" alt="Exclude" title="Exclude"/>

         </a>

         <select name="FFFFFFFF" multiple="" id="GGGGGGGG" class="Dimension_RightSelect_width HHHHHHHH">
           <option value="IIIIIIII">JJJJJJJJ</option>  
         </select>

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

                       <img class="Dimension_UpDown_Button_Icon Dimension_UpDown_Button_Icon_Up" src="../../../../../web/images/blank.gif" alt="Go up" title="Go up"/>

               </a>

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

                       <img class="Dimension_UpDown_Button_Icon Dimension_UpDown_Button_Icon_Down" src="../../../../../web/images/blank.gif" alt="Go down" title="Go down"/>

               </a>

</source> 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 File:DG-250-Dimensional-iconInclude.png
Exclude Move elements from right list to left list File:DG-250-Dimensional-iconExclude.png
Up Move up the selected elements one position (it runs in the right list) File:DG-250-Dimensional-iconUp.png
Down Move down the selected elements one position (it runs in the right list) File:DG-250-Dimensional-iconDown.png


Status

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


Status Visual Appearence
Normal File:DG-250-Dimensional-Normal.png
Focus File:DG-250-Dimensional-Focus.png
Hover File:DG-250-Dimensional-Hover.png
Press File: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

File:DG-250-FB-Date.png

HTML Code

<source lang="html4strict">

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

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

             <img alt="Calendar" class="FieldButton_Icon FieldButton_Icon_Calendar" title="Calendar" src="../../../../../web/images/blank.gif" border="0"></img>

     </a>

</source>

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 File: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 File:DG-250-FB-Normal.png
Focus File:DG-250-FB-Focus.png
Hover File:DG-250-FB-Hover.png
Press File: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

File:DG-250-FB-Selector.png

HTML Code

<source lang="html4strict">

     <input type="hidden" name="AAAAAAAA" id="BBBBBBBB" value=""></input> 
     <input class="dojoValidateValid TextBox_btn_TwoCells_width" type="text" name="CCCCCCCC" maxlength="20" value=""></input>

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

             <img alt="DDDDDDDD" class="FieldButton_Icon GGGGGGGG" title="DDDDDDDD" src="../../../../../web/images/blank.gif" border="0"></img>

     </a>

</source>

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 File:DG-250-FB-iconBusinessPartner.png Business Partner ../info/BusinessPartner.html SELECTOR_BUSINESS FieldButton_Icon_BusinessPartner
Project File:DG-250-FB-iconProject.png Project ../info/Project.html SELECTOR_PROJECT FieldButton_Icon_Project
Product File:DG-250-FB-iconProduct.png Product ../info/ProductComplete.html SELECTOR_PRODUCT FieldButton_Icon_Product
Account File:DG-250-FB-iconAccount.png Account ../info/AccountElementValue.html SELECTOR_ACCOUNTELEMENTVALUE FieldButton_Icon_Account
Locator File:DG-250-FB-iconLocator.png Locator ../info/Locator.html SELECTOR_LOCATOR FieldButton_Icon_Locator
Location File: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 File:DG-250-FB-Normal.png
Focus File:DG-250-FB-Focus.png
Hover File:DG-250-FB-Hover.png
Press File: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

File:DG-250-Combo-Normal.png

HTML Code

<source lang="html4strict"><select name="AAAAAAAA" id="BBBBBBBB" class="CCCCCCCC DDDDDDDD" required="EEEEEEEE"> 

 <option value="FFFFFFFF">GGGGGGGG</option>

</select></source>

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 File:DG-250-Combo-Normal.png
Required File:DG-250-Combo-Required.png
Focus File:DG-250-Combo-Focus.png


Textbox

File:DG-250-Textbox-Normal.png

HTML Code

<source lang="html4strict"><input type="text" 

 name="AAAAAAAA"
 id="BBBBBBBB"
 class="dojoValidateValid CCCCCCCC DDDDDDDD"
 required="EEEEEEEE"
 value="FFFFFFFF"
 maxlength="GGGGGGGG">

</input></source>

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 File:DG-250-Textbox-Normal.png
Required File:DG-250-Textbox-Required.png
Focus File:DG-250-Textbox-Focus.png


Real Number Textbox

File:DG-250-Textbox-Normal.png

HTML Code

<source lang="html4strict"><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></source>

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 File:DG-250-Textbox-Normal.png
Required File:DG-250-Textbox-Required.png
Focus File: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
Languages: 

English

 |   Bahasa Indonesia

Template

This sub-template doesn't display properly when not included. Please see Template:Languages for the complete version.

Usage

This template is designed to simplify Template:Languages, by allowing a simpler syntax for adding new languages. Each language is included by calling this template with the following parameters:

  • Language code (e.g. fr)
  • (optional) Page name - if not supplied the page is automatically worked out based on where the language template is included.

This template should not be used anywhere except in the Languages template. </noinclude> | Translate this article...

{{#hierarchy-bottom:}}

Retrieved from "https://wiki.infinite-erp.co.id/index.php?title=ERP/2.50/Developers_Guide/Concepts/UI/Look_and_feel&oldid=2786"