Widget Properties for the Dynamic Server Page
DSP widget properties are control the appearance of the Entity, Occurrence, and Field objects in the browser.
Each widget supports a number of properties, which fall into the following categories:
- Uniface properties—some Uniface style-related properties and syntax attributes are supported. They are mapped to the corresponding CSS and HTML properties. HID, YDI, NDI, YED, NED, and DIM are supported; YPR and NPR are not supported.
- Cascading Style Sheet (CSS) properties—the
allowable values of these properties are defined in the specification of CSS.
To prevent conflicts with the names of Uniface properties, the physical names of style widget properties are prefixed with
style:, for examplestyle:color=red. - HTML properties—each widget has a set of
supported HTML properties that are mapped to HTML attributes; the allowable values are defined in
the HTML specification.
HTML properties are prefixed with
html:, for example,html:size=10.For most widgets, if an HTML attribute is specified that is not supported by the widget, Uniface ignores it and does not convert it to an HTML attribute.
- Custom HTML attributes—Uniface supports any syntactically valid HTML attribute name when specified as
html:AttributeName. These are converted to HTML attributes and the browser determines how they are handled.Note: Avoid using special characters such as @, #, or quote marks in attribute names, as these may be treated differently, depending on the browser.
At runtime, Uniface uses these properties to generate the HTML used to present the server page in the client browser. The properties are converted to attributes in the HTML, and are merged with static properties already defined in cascading style sheets (CSS) and the layout.
The initial values of the widget properties can be set in ProcScript using the following commands:
- For field widgets: $properties and $fieldproperties
- For entities: $entityproperties and $curentproperties
- For occurrences: $occproperties
Once the DSP is loaded, the values of these properties can be dynamically changed in the browser using JavaScript API functions. For more information, see APIs: JavaScript.
Tip: In Dynamic Server Pages it is often preferable to change the values of widget properties using JavaScript rather than ProcScript.
Uniface applies properties in the following order of precedence:
- Properties set dynamically at runtime using JavaScript and ProcScript.
- Properties added manually in the HTML layout.
- Properties set declaratively in the Properties Inspector.
- Properties set for the logical widget in usys.ini.
- Default property values.
For more information on attributes supported by HTML controls, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input.
DSP Widget Properties
Background Properties
The following properties control the appearance and behavior of background colors and images.
| Property | Technical Name | W3C Description |
|---|---|---|
| Background Image Scrolls | style:background-attachment
|
background-attachment |
| Background Color | style:background-color
|
background-color |
| Background Image URL | style:background-image
|
background-image |
| Background Image Position | style:background-position
|
background-position |
| Background Image Title | style:background-repeat
|
background-repeat |
The following properties control the appearance and behavior of widget borders.
| Property | Technical Name | W3C Description |
|---|---|---|
| Border Color | style:border-color
|
border-color |
| Border Style | style:border-style
|
border-style |
| Border Width | style:border-width
|
border-width |
Box Properties
The following properties control the appearance and behavior of block and inline boxes.
| Property | Technical Name | W3C Description |
|---|---|---|
| Clear | style:clear
|
clear |
| Mouse Pointer | style:cursor
|
cursor |
| Display Behavior | style:display
|
display |
| Float | style:float
|
float |
| Overflow | style:overflow
|
overflow |
| Positioning Scheme | style:position
|
position |
| Vertical Alignment | style:vertical-align
|
vertical-align |
| Visibility | style:visibility
|
visibility |
| Z-index | style:z-index
|
z-index |
Common HTML Properties
| Property | Technical Name | W3C Description |
|---|---|---|
| Access Key | html:accesskey
|
accesskey |
| Style Class | html:class
|
class |
| Disable the Widget | html:disabled
|
disabled |
| Read Only | html:readonly
|
readonly |
| Tab Index | html:tabindex
|
tabindex |
| Tool Tip Text | html:title
|
title |
The following properties control the field dimensions and offsets.
| Property | Technical Name | W3C Description | Limitations |
|---|---|---|---|
| Bottom Offset | style:bottom
|
bottom | Percentages not supported for CommandButton |
| Height | style:height
|
height | Percentages not supported under Internet Explorer for CommandButton and TextArea: |
| Left Offset | style:left
|
left | |
| Margins | style:margin
|
margin | Percentages not supported under Internet Explorer for Picture |
| Maximum Height | style:max-height
|
max-height | Percentages not supported under Internet Explorer for CommandButton and TextArea: |
| Maximum Width | style:max-width
|
max-width | Percentages not supported under Internet Explorer for CommandButton |
| Minimum Height | style:min-height
|
min-height | Percentages not supported under Internet Explorer for CommandButton and TextArea: |
| Minimum Width | style:min-width
|
min-width | Percentages not supported under Internet Explorer for CommandButton. |
| Paddings | style:padding
|
padding | This property has no effect on Internet Explorer 6 for the RadioGroup |
| Right Offset | style:right
|
right | |
| Top Offset | style:top
|
top | Percentages not supported |
| Width | style:width
|
width | Percentages not supported under Internet Explorer for the CommandButton. |
List Properties
The following properties determine the appearance of lists.
| Property | Technical Name | W3C Description |
|---|---|---|
| List Style Image | style:list-style-image
|
list-style-image |
| List Style Position | style:list-style-position
|
list-style-position |
| List Style Type | style:list-style-type
|
list-style-type |
These properties determine the direction of the text and of embeddings and overrides for the Unicode bidirectional algorithm.
| Property | Technical Name | W3C Description | Limitations |
|---|---|---|---|
| Direction | style:direction
|
direction |
DropdownList, DatePicker: rtl not supported
|
| Unicode Bidirectional Behavior | style:Unicode-bidi
|
Unicode-bidi |
Text Properties
The following properties control the appearance of text in the field or label.
| Property | Technical Name | W3C Description | Limitations |
|---|---|---|---|
| Text Color | style:color
|
color | |
| Font Family | style:font-family
|
font-family | |
| Font Size | style:font-size
|
font-size | |
| Font Style | style:font-style
|
font-style | |
| Font Variation | style:font-variant
|
font-variant | |
| Font Weight | style:font-weight
|
font-weight | |
| Letter Spacing | style:letter-spacing
|
letter-spacing | |
| Line Height | style:line-height
|
line-height | |
| Text Alignment | style:text-align
|
text-align | The value justify is not supported for the EditBox, DropdownList, DatePicker, Password widgets. |
| Text Decoration | style:text-decoration
|
text-decoration |
The value blink is not supported under Internet Explorer for the EditBox, CommandButton, DropdownList, TextArea, Plain, Password widgets.
|
| Text Indent | style:text-indent
|
text-indent | |
| Text Transform | style:text-transform
|
text-transform | |
| White Space Behavior | style:white-space
|
white-space | |
| Word Spacing | style:word-spacing
|
word-spacing |
Uniface Properties
Most of the following properties represent Uniface properties that have no equivalent in HTML or CSS, or which are used when a Form is converted to a DSP.
| Uniface Property | Technical Name | Description | Default Value | ||
|---|---|---|---|---|---|
| StaticText Widget | RawHTML Widget | FlatButton Widget | |||
|
Background Color |
|
Background Color (BackColor) | none | none | none |
| Syntax Check on Browser | clientsyntaxcheck
|
Syntax Check on Browser (ClientSyntaxCheck) | none | none | none |
| Foreground Color | forecolor
|
Foreground Color (ForeColor) | none | none | none |
| HTML Text | rawhtml
|
Raw HTML (rawhtml) | False
|
True
|
False
|
| — | class: ClassName | class:ClassName | none | none | none |
