Skip to main content
Skip table of contents

DBM User Masks Tutorial

(warning) NOT READY FOR PUBLISHING!

During this tutorial, we will create a simple XML user mask and display it in DBM.

Files used and their meaning

File

Description

test.xml

Contains the mapping from database fields to XML tag names used in the layout

test.xsl

Contains the layout description used to create an HTML page

sub.xsl

Contains basic XSL templates and JavaScript snippets
(normally not modified for a custom project)

CreateUniqueIDAttribute.xsl

Internal XSL transformation
(normally not modified for a custom project)

The files test.xml, test.xsl and CreateUniqueIDAttribute.xsl must be referenced correctly in the DIGAS registry \DBM\UserMasks\test.

A simple XML file defining the data


XML
<?xml version="1.0" encoding="ISO-8859-1"?>
<root>
      <Titel mapping="@TITLE"></Titel>
      <Bearbeiter mapping="@EDITOR"></Bearbeiter>
      <Info mapping="test/summary"></Info>
      <Error mapping="test/error"></Error>
      <Produkt mapping="test/produkt"></Produkt>
</root>

Standard database fields are referenced with a leading @.

User-defined database fields should start with a unique namespace identifier (for example your company name) and can have a hierarchical structure (for example test/phone/mobile and test/phone/work).

A simple XSL file defining the layout


XML
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" version="1.0" encoding="ISO-8859-1"/>

<xsl:include href="sub.xsl" />


<xsl:template match="/">
<html>     
      <head>
      </head>
      <body scroll="no" style="background-color:buttonface;" >
            <form name="f" >
                  Titel
                  <xsl:apply-templates select="root/Titel" mode="input" />
                  Mehr Info
                  <xsl:apply-templates select="root/Info" mode="input" />
            </form>
      </body>
</html>
</xsl:template>

</xsl:stylesheet>

This simple layout file is missing advanced formatting like setting font-family and font-size or grouping information in columns or lines. But it shows the basic structure, which is common to all layout files. It uses a template in sub.xls to handle a database field with the HTML <input> tag.

In the DBM it looks like…

XSL Templates for HTML controls in sub.xls

The file sub.xls, included in the above example, contains XSL templates making it easy to display and edit data in HTML controls. The templates are used in the following way:


XML
<xsl:apply-templates select="XPATH" mode="CONTROL" >
      <xsl:with-param name="PARAM_1">VALUE_1</xsl:with-param>
      …
      <xsl:with-param name="PARAM_N">VALUE_N</xsl:with-param>
</xsl:apply-templates>

where

XPATHis the tag name for a database field to show/edit in the control
CONTROLis the identifier for one of the predefined controls in sub.xsl
PARAM_1 to Ncontain the values to parameterize the control

Edit field and checkbox

Use mode=”input”

Parameter

Default

Description

type

text

Set control type: text or checkbox

style

width=100%

Set CSS-style

readonly

0

Set readonly state

tabindex


Set tab index: -1 for none

handlerKeyUp


Set onKeyUp event handler

handlerClick


Set onClick event handler

handlerChange


Set onChange event handler

vUniqueID


Set the identifier which is used to access the control from JavaScript.

For example (if vUniqueID is set to inputTitle): f [ inputTitle ] . value = “Hallo” ;

name


Set name manually. The name is used to identify data transferred between HTML page and DBM. Setting it manually creates a control which is not connected to the database

Example for a checkbox:

XML
<p/>
<xsl:apply-templates select="root/Error" mode="input" >
      <xsl:with-param name="type">checkbox</xsl:with-param>
      <xsl:with-param name="style">WIDTH='20px';</xsl:with-param>
</xsl:apply-templates>
Error

In the DBM it looks like…

Combobox

Use mode=”combo”

Parameter

Default

Description

size

1

Number of items shown. A value of 1 displays creates a  drop down combo.

style


Set CSS-style

multiple


Allow multi-selection

tabindex


Set tab index: -1 for none

handlerFocus


Set onFocus event handler

handlerKeyDown


Set onKeyDown event handler

handlerChange


Set onChange event handler

vUniqueID


Set the identifier, which is used to access the control from JavaScript.

For example (if vUniqueID is set to inputTitle): f [ inputTitle ] . value = “Hallo” ;

list


Values displayed in the user interface

valueList


According values stored in the database. The relation between list and valueList texts is by order number. The n-th item in list is related to the n-th item in valueList.

Example for a combobox:

XML
<xsl:call-template name="java_ComboBox" />


<xsl:element name="script" > <xsl:attribute       name="type">text/javascript</xsl:attribute>    
      <xsl:comment>
      var prod_list1 = "item1,item2,item3";
      var prod_list2 = "valueA,valueB,valueC";
      //
      </xsl:comment>
</xsl:element>

The template java_ComboBox must be called once in your xsl code to initialize combo box handling.

XML
<p/> Produkt
<xsl:apply-templates select="root/Produkt" mode="combo" >
      <xsl:with-param name="vUniqueID">comboProduktId</xsl:with-param>
      <xsl:with-param name="list">prod_list1</xsl:with-param>
      <xsl:with-param name="valueList">prod_list2</xsl:with-param>
</xsl:apply-templates>

where prod_list1 and prod_list2 are javascript variables containing comma separated lists of the items to be displayed in the combobox drop down and their according values stored in the database entries.

In the DBM it looks like…

When choosing item2 in the user interface the value valueB is written to the database entry:


<TEST>
  <SUMMARY>Platz für mehr Informationen...</SUMMARY>
  <ERROR>0</ERROR>
  <PRODUKT>valueB</PRODUKT>
</TEST>

Textarea

Use mode=”textarea”

Multi-line edit box

Plain text

Use mode=”plain_text”

_table extensions

HTML table are usually used when designing the custom dialogs. Therefore a template with extended name exists (additional text “_table”) for many of the above-mentioned control templates in sub.xsl. It can be used inside of tables and offers a label parameter.

Example:

XML
<p/>
<table cellspacing="0" width="100%" cellPadding="0" border="0" >       
      <colgroup>
            <col width="10%" />
            <col width="90%"/>
      </colgroup>            

      <tr>
      <xsl:apply-templates select="root/Titel" mode="input_table" >
            <xsl:with-param name="label">Titel</xsl:with-param>
      </xsl:apply-templates>                   
      </tr>


      <tr>
      <xsl:apply-templates select="root/Info" mode="input_table" >
            <xsl:with-param name="label">Info</xsl:with-param>
      </xsl:apply-templates>                   
      </tr>                  
</table>








JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.