Widgets for Dynamic Server Pages

Widget definitions for Dynamic Server Pages (DSPs) are used to generate the HTML elements and controls used to represent fields, labels, occurrences, and entities displayed in the client browser.

DSP widgets have associated properties that can be used to style the HTML and control some aspects of its behavior. They also have associated web triggers such as OnChange, OnBlur, OnSyntaxError that can be used to control browser-side behavior using JavaScript.

The appearance of the generated HTML controls depends not only on the widget properties, but also on the client browser and the operating system. Some browsers do not support all controls and even when they do, the appearance can vary. If a control is not supported, an HTML text input control is used instead. Depending on the Uniface data type, this can also affect the display formats that may be applied.

For more information on the properties and triggers supported by individual widgets, see Widget Reference: Dynamic Server Pages.

Default Logical Widgets

Each DSP widget may be referenced by multiple logical widgets, which are named configurations of the widget that set some of its properties. For more information, see Logical Widgets.

Uniface provides a default set of logical widget definitions, which are declared in the [webwidgets] section of usys.ini. You are not restricted to these pre-defined widgets—you can define your own logical widgets in this section.

[webwidgets]
EditBox=htmlinput(html:type=text;detail=dblclick)
TextArea=htmltextarea(detail=dblclick)
CommandButton=htmlinput(html:type=button;clientsyntaxcheck=false)[syntax=ned]
CommandButton_updatable=htmlinput(html:type=button;clientsyntaxcheck=false)
CheckBox=htmlinput(html:type=checkbox)
DropDownList=htmlselect(html:size=1)
ListBox=htmlselect(html:size=3)
...

Because different logical widgets set different properties, the resulting HTML control in the DSP can look and behave differently. For example, the logical widgets EditBox and CommandButton are both mapped to the htmlinput widget. The value of the type property is different, resulting in a different HTML control in the generated DSP.

Some controls, such as buttons, are considered read-only by nature, so the CommandButton logical widget has its field syntax set to NED (non-editable). However, to allow such fields to be created or changed by the Uniface JavaScript API, a non-protected (updatable) logical widget is also provided. For more information, see Read-Only Fields in Dynamic Server Pages.

Widgets in the Layout

Widgets are included in the layout by copying objects (primarily fields) from the component structure to the HTML layout of the component. This results in an XHTML element that is bound to the field (or occurrence, or entity) by an id attribute, such as ufld:NAME.ENTITY.MODEL. For example, the following layout shows the elements representing a list box and radio group:

 <select id="ufld:LISTBOX.ENTITY.MODEL">
   <option>Select Element</option>
 </select>


 <input type="radio" id="ufld:RADIO_GROUP.ENTITY.MODEL"/><br/><br/>

Related Topics