dspcontainer

Example Logical Widget

Uniface provides a default logical widget called DspContainer, which mapped to this physical widget.

Triggers

• webtrigger OnChange—executed by the browser when a new DSP instance is assigned to the field. It is not fired when ProcScript is used to assign a new DSP instance to the field.
• webtrigger onSyntaxError —executed in response to the OnChange event in browser

Widget Properties

The DSP container widget supports the specified HTML attribute and style properties. For more information, see Widget Properties for the Dynamic Server Page.

It also supports the Uniface Component Name (componentname) property. For more information, see Component Name (componentname).

HTML Properties

This widget supports the following HTML properties:

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

Uniface Properties

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 Properties

Uniface Property	Technical Name
Background Color (BackColor)	backcolor
Syntax Check on Browser (ClientSyntaxCheck)	clientsyntaxcheck
Component Name (componentname)	componentname
Foreground Color (ForeColor)	forecolor

CSS Properties

The following tables described the supported CSS properties that can be used to style the dspcontainer widget and the logical widgets that map to it.

Background Properties

The following properties control the appearance and behavior of background colors and images.

Background Properties

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

Border Properties

The following properties control the appearance and behavior of widget borders.

Border Properties

Property	Technical Name	W3C Description
Adjacent Border Behavior	style:border-collapse	border-collapse
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.

Box Properties

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

Layout Properties

The following properties control the field dimensions and offsets.

Layout Properties

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.

List Properties

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

NLS Properties

These properties determine the direction of the text and of embeddings and overrides for the Unicode bidirectional algorithm.

NLS Properties

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.

Text Properties

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

Description

The dspcontainer allows you to implement your web page using multiple DSP components. This enables you to:

• Isolate and limit the data that needs to be updated in a web page. For example, while one DSP is being updated, the rest of the page remains the same and the user can continue with other activities.
• Control page loading by adding or changing components in your page dynamically. For example, you can postpone loading components that are initially not visible. This is called on-demand or delayed loading, and increases the response of the initial page loading.
• Build tab constructions, in which each tab page is a DSP component that is loaded into a DspContainer field, or each tab is a different instance of the same DSP.
• Show multiple instances of the same component in a single web page.
• Define the same entity more than once in a web page.

You need to define one DSP that acts as the master component. It can have one or more fields that are defined as dspcontainers.

The value of a DSP container field is mapped to the instance name of a DSP component. Assigning the instance name to the field attaches the instance to the dspcontainer and displays the layout of the instance inside the dspcontainer. The dspcontainer automatically instantiates the contained DSP component if this is not yet done.

The other component becomes a child of the first DSP. At runtime, the layout of the child component is displayed at the location of the dspcontainer field in the layout of the parent.

The componentname widget property specifies the DSP component to instantiate. If the componentname is not defined, the instance name is used as component name.

Assigning a DSP to the DspContainer

1. In a DSP component that will be used as the parent or master DSP, create a field and select DspContainer as the Widget Type.
2. Assign the instance name of another DSP component to this field's value. You can do this in the Initial Value field or in ProcScript, for example in the Execute trigger.
3. If you intend to assign different instances of the same DSP to the field, set the componentname property to the DSP component name and assign an instance name to the field value.

Instantiating, Attaching, and Detaching the DSP Instance

When DSP component instance name is assigned to the dspContainer:

• If the instance does not yet exist, it is instantiated and its exec operation is activated. The exec operation is responsible for returning a layout, web definitions, and data, just as it does for normal DSP components.
• If the instance is already available on the browser, and it has an attach operation defined, the attach operation is executed (instead of the exec operation). If no attach operation is implemented, the exec operation is activated.
• If an instance is already attached to the dspcontainer, it is detached and replaced by the new DSP component instance. If the old DSP component instance has the detach operation defined, it is executed. The old DSP component instance is then no longer attached to any dspcontainer and therefore not visible. To make it visible again, simply assign it to a dspcontainer field.
• If a DSP component instance is moved from one dspcontainer to another, its original dspcontainer fires its OnChange trigger because it no longer contains a DSP component instance and its field value will be empty.

Only attached DSP component instances are visible.

The attach and detach operations are predefined operations that you can optionally implement in the contained DSP to perform desired actions such as refreshing the data when the instance is attached, or issuing a message about unsaved data when it is detached. For more information, see operation attach and operation detach.

Layout and Style of Contained DSP

The location of the dspcontainer widget in the layout determines where the layout of the contained DSP component instance will be shown in the web page. The layout of both the parent and child components is handled by merging the HTML (I-Frames are not used).

During this merge:

• If the contained DSP has a header, it is removed.
• The <body> element of the contained DSP is replaced by a <span> element which contains the content of the DSP.
• HTML attributes set on the <body> are removed, and the contained DSP instance inherits class and style attributes from the parent.

Any link elements included in the layout of a contained DSP will be included in the whole page at runtime. If this link is to a CSS style sheet, the styles defined in the CSS are applied to the whole page, not just to the contained DSP.