Definition of the x-axis radius of the ellipse used to round the corners of the rectangle.
5.2.16.1 Attributes
5.2.16.1.1 RadiusX
Definition of the x-axis radius of the ellipse used to round the corners of the rectangle.
If a value for RadiusX is specified but not RadiusY (or vice versa), this value applies to RadiusX and
RadiusY.
Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]
Origin: Rectangle [} 345]
See also
Attribute getter: getRadiusX [} 1616]
Attribute setter: setRadiusX [} 1616]
Note: Available since version 1.8
5.2.16.1.2 RadiusXUnit
Pixel unit. At this point, only pixels can be used as a unit.
Scheme: tchmi:framework#/definitions/PixelUnit [} 2128]
Origin: Rectangle [} 345]
See also
Attribute getter: getRadiusXUnit [} 1618]
The attribute can only be read and therefore has no setter.
Note: Available since version 1.8
5.2.16.1.3 RadiusY
Definition of the y-axis radius of the ellipse used to round the corners of the rectangle.
If a value for RadiusX is specified but not RadiusY (or vice versa), this value applies to RadiusX and
RadiusY.
Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]
Origin: Rectangle [} 345]
See also
Attribute getter: getRadiusY [} 1617]
Attribute setter: setRadiusY [} 1617]
Note: Available since version 1.8
5.2.16.1.4 RadiusYUnit
Pixel unit. At this point, only pixels can be used as a unit.
Scheme: tchmi:framework#/definitions/PixelUnit [} 2128]
Origin: Rectangle [} 345]
See also
Attribute getter: getRadiusYUnit [} 1617]
The attribute can only be read and therefore has no setter.
Note: Available since version 1.8
5.2.16.1.5 FillColor
Defines the fill color of the control.
Scheme: tchmi:framework#/definitions/Color [} 2094]
Origin: Rectangle [} 345]
See also
Attribute getter: getFillColor [} 1612]
Attribute setter: setFillColor [} 1612]
Note: Available since version 1.8
5.2.16.1.6 StrokeColor
Defines the stroke color of the control.
Scheme: tchmi:framework#/definitions/SolidColor [} 2133]
Origin: Rectangle [} 345]
See also
Attribute getter: getStrokeColor [} 1612]
Attribute setter: setStrokeColor [} 1613]
Note: Available since version 1.8
5.2.16.1.7 StrokeStyle
Definition of the stroke style. Comma or space-separated list of numbers that specify the length of strokes
and spaces. If an odd number is specified, the list is repeated once. Example: "5, 3, 2" is equivalent to "5, 3,
2, 5, 3, 2".
Scheme: tchmi:general#/definitions/String [} 2069]
Origin: Rectangle [} 345]
See also
Attribute getter: getStrokeStyle [} 1615]
Attribute setter: setStrokeStyle [} 1615]
Note: Available since version 1.8
5.2.16.1.8 StrokeThickness
Defines the stroke thickness of the control in pixels.
Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]
Origin: Rectangle [} 345]
See also
Attribute getter: getStrokeThickness [} 1613]
Attribute setter: setStrokeThickness [} 1614]
Note: Available since version 1.8
5.2.16.1.9 StrokeThicknessUnit
Pixel unit. At this point, only pixels can be used as a unit.
Scheme: tchmi:framework#/definitions/PixelUnit [} 2128]
Origin: Rectangle [} 345]
See also
Attribute getter: getStrokeThicknessUnit [} 1614]
The attribute can only be read and therefore has no setter.
Note: Available since version 1.8
5.2.17 Textblock
A text block is a control in which text can be displayed.
Attributes
Category: Colors
Name Description
TextColor [} 361] Definition of the text color
BackgroundColor [} 433] Definition of the background color
BorderColor [} 432] Definition of the border color of the control
Category: Layout
Name Description
Left [} 426] Definition of the distance from the left side to the left
side of the surrounding control
LeftUnit [} 426] Definition of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Top [} 426] Definition of the distance from the top side to the top
side of the surrounding control
TopUnit [} 426] Selection of the unit of the distance to the top side of
the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Right [} 429] Definition of the distance from the right side to the
right side of the surrounding control
RightUnit [} 429] Selection of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Bottom [} 429] Definition of the distance from the bottom side to the
bottom side of the surrounding control
BottomUnit [} 429] Selection of the unit of the distance to the bottom
side of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Width [} 427] Definition of the external width of the control
WidthUnit [} 427] Selection of the unit of the width:
· Pixels for an absolute width
· Percent for a relative width
Height [} 428] Definition of the external height of the control
HeightUnit [} 428] Selection of the unit of the height:
· Pixels for an absolute height
· Percent for a relative height
MaxWidth [} 437] Definition of the maximum width if the control size is
defined as dynamic
MaxWidthUnit [} 437] Selection of the unit of the maximum width:
· Pixels for an absolute value
· Percent for a relative value
MinWidth [} 438] Definition of the minimum width if the control size is
defined as dynamic
MinWidthUnit [} 438] Selection of the unit of the minimum width:
· Pixels for an absolute value
· Percent for a relative value
MaxHeight [} 436] Definition of the maximum height if the control size is
defined as dynamic
MaxHeightUnit [} 437] Selection of the unit of the maximum height:
· Pixels for an absolute value
· Percent for a relative value
MinHeight [} 436] Definition of the minimum height if the control size is
defined as dynamic
Name Description
MinHeightUnit [} 436] Selection of the unit of the minimum height:
· Pixels for an absolute value
· Percent for a relative value
RenderedLeft [} 430] Calculated distance in pixels from the left side to the
left side of the surrounding control
RenderedTop [} 430] Calculated distance in pixels from the top side to the
top side of the surrounding control
RenderedRight [} 431] Calculated distance in pixels from the right side to the
right side of the surrounding control
RenderedBottom [} 430] Calculated distance in pixels from the bottom side to
the bottom side of the surrounding control
RenderedWidth [} 431] Calculated width of the control in pixels
RenderedHeight [} 431] Calculated height of the control in pixels
GridRowIndex [} 432] Definition of the row of a grid in which the control is to
be displayed
GridColumnIndex [} 432] Definition of the column of a grid in which the control
is to be displayed
Opacity [} 438] Definition of the transparency of the entire control
Visibility [} 439] Selection of the visibility of a control:
· Visible: Control is visible
· Hidden: Control is invisible, but is drawn – controls
behind it cannot be operated
· Collapsed: Control is invisible and is not drawn –
controls behind it can be operated
ZIndex [} 440] Definition of the position on the Z-axis
Transform [} 439] Definition of a transformation of a control:
· Translate: Translate in X-, Y-, Z-direction
· Rotate: Rotate by an angle
· Scale: Zoom by a factor
· Skew: Sides shown skewed by an angle
· Origin: Set the origin of the transformation relative
to the position of the control
· Perspective: Set the perspective of the
transformations of all child elements
BoxShadow [} 440] Definition of a shadow
WidthMode [} 427] Selection of the method of calculating the width:
· Value: The width is defined by the width entered.
· Parent: The width is defined by the distance to the
left and right side of the parent element. The
'Width' attribute is ignored in all calculations!
HeightMode [} 360] Selection of the method of calculating the height:
· Value: The height is defined by the height entered.
· Parent: The height is defined by the distance to the
upper and lower side of the parent element. The
'Height' attribute is ignored in all calculations!
· Content: The height is defined by the length of the
text. The 'Height' attribute is ignored in all
calculations!
Category: Common
Name Description
Text [} 361] Definition of the text
IsEnabled [} 425] Selection of whether a control should be activated
Id [} 424] Definition of the name of the control
Type [} 439] Type name of the control.
ClassNames [} 425] Definition of control classes
IsAttached [} 425] If a control is logically assigned in the DOM.
ToolTip [} 438] Definition of the tool tip for the control
Category: Border
Name Description
BorderRadius [} 433] Definition of the radius of the four corners to round
them off
BorderStyle [} 433] Selection of the border style of the four sides of the
control
BorderWidth [} 433] Definition of the border width of the four sides of the
control
Category: Background Image
Name Description
BackgroundImage [} 434] Definition of an image that is located above the
background color
BackgroundImageHeight [} 435] Definition of the height of the background image
BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background
image:
· Pixels for an absolute height
· Percent for a relative height
BackgroundImageWidth [} 434] Definition of the width of the background image
BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background
image:
· Pixels for an absolute width
· Percent for a relative width
BackgroundImagePadding [} 435] Definition of an additional distance between the
border of the control and background image for the
four sides
BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background
image within the control
BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the
background image within the control
Category: Text
Name Description
TextHorizontalAlignment [} 361] Selecting the horizontal alignment of the text
TextVerticalAlignment [} 361] Selecting the vertical alignment of the text
ContentPadding [} 359] Definition of the distance between the text and the
control border
WordWrap [} 362] Selecting whether the text should be wrapped if it is
too long to fit in one row
TextFontFamily [} 359] Definition of the font using the name of the font family
or the keyword
TextFontSize [} 359] Definition of the font size
TextFontSizeUnit [} 359] Selecting the font size unit:
· Pixels for an absolute size
· Percent for a relative size
TextFontStyle [} 360] Selecting the font style:
· Normal
· Italic: italic
· Oblique: slanted
TextFontWeight [} 360] Selecting the font weight:
· Normal
· Bold: bold
Events
Category: Framework
Name Description
onAttached [} 440] The control was added to the display.
onDetached [} 440] The control was removed from the display.
onInitialized [} 441] The control was initialized.
onMoved [} 443] The control was moved in relation to the browser
window.
onResized [} 444] The size of the control was changed.
Category: Operator
Name Description
onPressed [} 443] A mouse click was executed or a touch screen was
briefly touched.
onMouseClick [} 441] The left mouse button was clicked over the control
and released.
onMouseDoubleClick [} 441] The left mouse button was clicked twice over the
control and released.
onMouseRightClick [} 442] The right mouse button was clicked over the control
and released.
onMouseDown [} 441] A mouse button was depressed over the control.
onMouseEnter [} 442] The mouse pointer was moved over the control.
onMouseLeave [} 442] The mouse pointer has left the control.
onMouseUp [} 443] A mouse button was released over the control.
onMouseDownLeft [} 441] The left mouse button was depressed over the
control.
onMouseDownRight [} 441] The right mouse button was depressed over the
control.
onMouseMove [} 442] The mouse was moved over the control.
onMouseOver [} 442] The mouse pointer was moved over the control or
one of its children.
onMouseOut [} 442] The mouse pointer has left the control or one of its
child controls.
onMouseUpLeft [} 443] The left mouse button was released over the control.
onMouseUpRight [} 443] The right mouse button was released over the
control.
onMouseWheel [} 443] The mouse wheel was moved over the control.
onTouchStart [} 444] A finger/stylus was placed against a touch screen.
onTouchMove [} 444] A finger/stylus was moved on a touch screen.
onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.
onTouchCancel [} 444] An interaction with a touch screen was aborted.
Access rights
Name Description
observe [} 444] Determines whether the control is generally
observable.
operate [} 445] Determines whether the control is generally operable.
Inheritance hierarchy
Control [} 419]
Text block
Note: Available since version 1.8
See also
API reference [} 1618] for this control
5.2.17.1 Attributes
5.2.17.1.1 ContentPadding
Defines the distance of the text to the border.
Scheme: tchmi:framework#/definitions/Padding [} 2127]
Origin: Textblock [} 353]
See also
Attribute getter: getContentPadding [} 1630]
Attribute setter: setContentPadding [} 1631]
Note: Available since version 1.8
5.2.17.1.2 TextFontFamily
Comma-separated list of fonts as font family or keyword: 'serif', 'sans-serif', 'monospace'.
Scheme: tchmi:framework#/definitions/FontFamily [} 2108]
Origin: Textblock [} 353]
See also
Attribute getter: getTextFontFamily [} 1634]
Attribute setter: setTextFontFamily [} 1635]
Note: Available since version 1.8
5.2.17.1.3 TextFontSize
The font size. If the percent is specified as the unit, this is relative to the font size of the parent element.
Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]
Origin: Textblock [} 353]
See also
Attribute getter: getTextFontSize [} 1628]
Attribute setter: setTextFontSize [} 1628]
Note: Available since version 1.8
5.2.17.1.4 TextFontSizeUnit
Pixels, or percent for relative sizes.
Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]
Origin: Textblock [} 353]
See also
Attribute getter: getTextFontSizeUnit [} 1629]
Attribute setter: setTextFontSizeUnit [} 1629]
Note: Available since version 1.8
5.2.17.1.5 TextFontStyle
Font style (normal, italic: oblique with special characters, oblique)
Scheme: tchmi:framework#/definitions/FontStyle [} 2108]
Origin: Textblock [} 353]
See also
Attribute getter: getTextFontStyle [} 1632]
Attribute setter: setTextFontStyle [} 1633]
Note: Available since version 1.8
5.2.17.1.6 TextFontWeight
Font weight (normal, bold).
Scheme: tchmi:framework#/definitions/FontWeight [} 2109]
Origin: Textblock [} 353]
See also
Attribute getter: getTextFontWeight [} 1633]
Attribute setter: setTextFontWeight [} 1634]
Note: Available since version 1.8
5.2.17.1.7 HeightMode
Selection of the method of calculating the height. The available options are:
· Value: The height is defined by the height entered.
· Parent: The height is defined by the distance to the top and bottom side. The Height attribute is
ignored in all calculations!
· Content: The height is defined by the text length of the control.
Note: Learn how controls can be positioned and their size defined [} 127].
Scheme: tchmi:framework#/definitions/SizeModeWithContent [} 2133]
Origin: Textblock [} 353]
See also
Attribute getter: getHeightMode [} 1625]
Attribute setter: setHeightMode [} 1625]
Note: Available since version 1.8
5.2.17.1.8 TextHorizontalAlignment
Scheme: tchmi:framework#/definitions/HorizontalAlignment [} 2118]
Origin: Textblock [} 353]
See also
Attribute getter: getTextHorizontalAlignment [} 1630]
Attribute setter: setTextHorizontalAlignment [} 1630]
Note: Available since version 1.8
5.2.17.1.9 TextVerticalAlignment
Scheme: tchmi:framework#/definitions/VerticalAlignment [} 2147]
Origin: Textblock [} 353]
See also
Attribute getter: getTextVerticalAlignment [} 1627]
Attribute setter: setTextVerticalAlignment [} 1627]
Note: Available since version 1.8
5.2.17.1.10 Text
Contents of the text block.
Scheme: tchmi:general#/definitions/String [} 2069]
Origin: Textblock [} 353]
See also
Attribute getter: getText [} 1626]
Attribute setter: setText [} 1626]
Note: Available since version 1.8
5.2.17.1.11 TextColor
Scheme: tchmi:framework#/definitions/SolidColor [} 2133]
Origin: Textblock [} 353]
See also
Attribute getter: getTextColor [} 1624]
Attribute setter: setTextColor [} 1624]
Note: Available since version 1.8
5.2.17.1.12 WordWrap
Wraps the text if it is too long to fit in one row.
Scheme: tchmi:general#/definitions/Boolean [} 2060]
Origin: Textblock [} 353]
See also
Attribute getter: getWordWrap [} 1631]
Attribute setter: setWordWrap [} 1632]
Note: Available since version 1.8
5.2.18 Textbox
A text box is a control in which text can be displayed and entered.
Attributes
Category: Colors
Name Description
TextColor [} 370] Definition of the text color
BackgroundColor [} 433] Definition of the background color
BorderColor [} 432] Definition of the border color of the control
Category: Layout
Name Description
Left [} 426] Definition of the distance from the left side to the left
side of the surrounding control
LeftUnit [} 426] Definition of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Top [} 426] Definition of the distance from the top side to the top
side of the surrounding control
TopUnit [} 426] Selection of the unit of the distance to the top side of
the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Right [} 429] Definition of the distance from the right side to the
right side of the surrounding control
RightUnit [} 429] Selection of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Bottom [} 429] Definition of the distance from the bottom side to the
bottom side of the surrounding control
BottomUnit [} 429] Selection of the unit of the distance to the bottom
side of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Width [} 427] Definition of the external width of the control
WidthUnit [} 427] Selection of the unit of the width:
· Pixels for an absolute width
· Percent for a relative width
Height [} 428] Definition of the external height of the control
HeightUnit [} 428] Selection of the unit of the height:
· Pixels for an absolute height
· Percent for a relative height
MaxWidth [} 437] Definition of the maximum width if the control size is
defined as dynamic
MaxWidthUnit [} 437] Selection of the unit of the maximum width:
· Pixels for an absolute value
· Percent for a relative value
MinWidth [} 438] Definition of the minimum width if the control size is
defined as dynamic
MinWidthUnit [} 438] Selection of the unit of the minimum width:
· Pixels for an absolute value
· Percent for a relative value
MaxHeight [} 436] Definition of the maximum height if the control size is
defined as dynamic
MaxHeightUnit [} 437] Selection of the unit of the maximum height:
· Pixels for an absolute value
· Percent for a relative value
MinHeight [} 436] Definition of the minimum height if the control size is
defined as dynamic
Name Description
MinHeightUnit [} 436] Selection of the unit of the minimum height:
· Pixels for an absolute value
· Percent for a relative value
RenderedLeft [} 430] Calculated distance in pixels from the left side to the
left side of the surrounding control
RenderedTop [} 430] Calculated distance in pixels from the top side to the
top side of the surrounding control
RenderedRight [} 431] Calculated distance in pixels from the right side to the
right side of the surrounding control
RenderedBottom [} 430] Calculated distance in pixels from the bottom side to
the bottom side of the surrounding control
RenderedWidth [} 431] Calculated width of the control in pixels
RenderedHeight [} 431] Calculated height of the control in pixels
GridRowIndex [} 432] Definition of the row of a grid in which the control is to
be displayed
GridColumnIndex [} 432] Definition of the column of a grid in which the control
is to be displayed
Opacity [} 438] Definition of the transparency of the entire control
Visibility [} 439] Selection of the visibility of a control:
· Visible: Control is visible
· Hidden: Control is invisible, but is drawn – controls
behind it cannot be operated
· Collapsed: Control is invisible and is not drawn –
controls behind it can be operated
ZIndex [} 440] Definition of the position on the Z-axis
Transform [} 439] Definition of a transformation of a control:
· Translate: Translate in X-, Y-, Z-direction
· Rotate: Rotate by an angle
· Scale: Zoom by a factor
· Skew: Sides shown skewed by an angle
· Origin: Set the origin of the transformation relative
to the position of the control
· Perspective: Set the perspective of the
transformations of all child elements
BoxShadow [} 440] Definition of a shadow
WidthMode [} 427] Selection of the method of calculating the width:
· Value: The width is defined by the width entered.
· Parent: The width is defined by the distance to the
left and right side of the parent element. The
"Width" attribute is ignored in all calculations!
HeightMode [} 428] Selection of the method of calculating the height:
· Value: The height is defined by the height entered.
· Parent: The height is defined by the distance to the
top and bottom side of the parent element. The
"Height" attribute is ignored in all calculations!
Category: Common
Name Description
Text [} 370] Definition of the text
AutoFocusOut [} 371] Determines whether the control element
automatically loses focus when the user confirms or
ends his input by pressing Enter or Escape.
IsEnabled [} 425] Selection of whether a control should be activated
Id [} 424] Definition of the name of the control
Type [} 439] Type name of the control.
ClassNames [} 425] Definition of control classes
IsAttached [} 425] If a control is logically assigned in the DOM.
ToolTip [} 438] Definition of the tool tip for the control
Category: Border
Name Description
BorderRadius [} 433] Definition of the radius of the four corners to round
them off
BorderStyle [} 433] Selection of the border style of the four sides of the
control
BorderWidth [} 433] Definition of the border width of the four sides of the
control
Category: Background Image
Name Description
BackgroundImage [} 434] Definition of an image that is located above the
background color
BackgroundImageHeight [} 435] Definition of the height of the background image
BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background
image:
· Pixels for an absolute height
· Percent for a relative height
BackgroundImageWidth [} 434] Definition of the width of the background image
BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background
image:
· Pixels for an absolute width
· Percent for a relative width
BackgroundImagePadding [} 435] Definition of an additional distance between the
border of the control and background image for the
four sides
BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background
image within the control
BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the
background image within the control
Category: Text
Name Description
TextHorizontalAlignment [} 369] Selecting the alignment of the text
TextVerticalAlignment [} 369] Selecting the vertical alignment of the text
TextFontFamily [} 368] Definition of the font using the name of the font family
or the keyword
TextFontSize [} 368] Definition of the font size
TextFontSizeUnit [} 368] Selecting the font size unit:
· Pixels for an absolute size
· Percent for a relative size
TextFontStyle [} 369] Selecting the font style:
· Normal
· Italic: italic
· Oblique: slanted
TextFontWeight [} 369] Selecting the font weight:
· Normal
· Bold: bold
WordWrap [} 371] Selecting whether the text should wrap if it is too long
to fit in one row
ContentPadding [} 368] Definition of the distance between the text and the
control border
Multiline [} 370] Selecting whether a multi-line text should be allowed
Placeholder [} 370] Definition of a placeholder, which is displayed if no
text is entered
Events
Category: Control
Name Description
onTextChanged [} 372] The text has been changed.
Category: Framework
Name Description
onAttached [} 440] The control was added to the display.
onDetached [} 440] The control was removed from the display.
onInitialized [} 441] The control was initialized.
onMoved [} 443] The control was moved in relation to the browser
window.
onResized [} 444] The size of the control was changed.
Category: Operator
Name Description
onUserInteractionFinished [} 372] The user has finished the interaction with the control.
onFocusIn [} 371] The control now has the focus.
onFocusOut [} 371] The control has lost focus.
onUserInteractionCanceled [} 372] The user has terminated the interaction with the
control element.
onPressed [} 443] A mouse click was executed or a touch screen was
briefly touched.
onMouseClick [} 441] The left mouse button was clicked over the control
and released.
onMouseDoubleClick [} 441] The left mouse button was clicked twice over the
control and released.
onMouseRightClick [} 442] The right mouse button was clicked over the control
and released.
onMouseDown [} 441] A mouse button was depressed over the control.
onMouseEnter [} 442] The mouse pointer was moved over the control.
onMouseLeave [} 442] The mouse pointer has left the control.
onMouseUp [} 443] A mouse button was released over the control.
onMouseDownLeft [} 441] The left mouse button was depressed over the
control.
onMouseDownRight [} 441] The right mouse button was depressed over the
control.
onMouseMove [} 442] The mouse was moved over the control.
onMouseOver [} 442] The mouse pointer was moved over the control or
one of its children.
onMouseOut [} 442] The mouse pointer has left the control or one of its
child controls.
onMouseUpLeft [} 443] The left mouse button was released over the control.
onMouseUpRight [} 443] The right mouse button was released over the
control.
onMouseWheel [} 443] The mouse wheel was moved over the control.
onTouchStart [} 444] A finger/stylus was placed against a touch screen.
onTouchMove [} 444] A finger/stylus was moved on a touch screen.
onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.
onTouchCancel [} 444] An interaction with a touch screen was aborted.
Access rights
Name Description
observe [} 444] Determines whether the control is generally
observable.
operate [} 445] Determines whether the control is generally operable.
Inheritance hierarchy
Control [} 419]
Text box
Note: Available since version 1.8
See also
API reference [} 1635] for this control
5.2.18.1 Attributes
5.2.18.1.1 ContentPadding
Defines the distance of the text to the border.
Scheme: tchmi:framework#/definitions/Padding [} 2127]
Origin: Textbox [} 362]
See also
Attribute getter: getContentPadding [} 1649]
Attribute setter: setContentPadding [} 1649]
Note: Available since version 1.8
5.2.18.1.2 TextFontFamily
Comma-separated list of fonts as font family or keyword: 'serif', 'sans-serif', 'monospace'.
Scheme: tchmi:framework#/definitions/FontFamily [} 2108]
Origin: Textbox [} 362]
See also
Attribute getter: getTextFontFamily [} 1652]
Attribute setter: setTextFontFamily [} 1653]
Note: Available since version 1.8
5.2.18.1.3 TextFontSize
The font size. If the percent is specified as the unit, this is relative to the font size of the parent element.
Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]
Origin: Textbox [} 362]
See also
Attribute getter: getTextFontSize [} 1645]
Attribute setter: setTextFontSize [} 1645]
Note: Available since version 1.8
5.2.18.1.4 TextFontSizeUnit
Pixels, or percent for relative sizes.
Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]
Origin: Textbox [} 362]
See also
Attribute getter: getTextFontSizeUnit [} 1646]
Attribute setter: setTextFontSizeUnit [} 1646]
Note: Available since version 1.8
5.2.18.1.5 TextFontStyle
Font style (normal, italic: oblique with special characters, oblique)
Scheme: tchmi:framework#/definitions/FontStyle [} 2108]
Origin: Textbox [} 362]
See also
Attribute getter: getTextFontStyle [} 1650]
Attribute setter: setTextFontStyle [} 1651]
Note: Available since version 1.8
5.2.18.1.6 TextFontWeight
Font weight (normal, bold).
Scheme: tchmi:framework#/definitions/FontWeight [} 2109]
Origin: Textbox [} 362]
See also
Attribute getter: getTextFontWeight [} 1651]
Attribute setter: setTextFontWeight [} 1652]
Note: Available since version 1.8
5.2.18.1.7 TextHorizontalAlignment
Scheme: tchmi:framework#/definitions/HorizontalAlignment [} 2118]
Origin: Textbox [} 362]
See also
Attribute getter: getTextHorizontalAlignment [} 1644]
Attribute setter: setTextHorizontalAlignment [} 1644]
Note: Available since version 1.8
5.2.18.1.8 TextVerticalAlignment
Schema: tchmi:framework#/definitions/VerticalAlignment [} 2147]
Origin: Text box [} 362]
See also
Attribute getter: getTextVerticalAlignment [} 1643]
Attribute setter: setTextVerticalAlignment [} 1643]
Note: Available since version 1.8
Not applicable from version 1.10.1018.48
5.2.18.1.9 Multiline
Determines whether multi-line text should be allowed.
Scheme: tchmi:general#/definitions/Boolean [} 2060]
Origin: Textbox [} 362]
See also
Attribute getter: getMultiline [} 1649]
Attribute setter: setMultiline [} 1650]
Note: Available since version 1.8
5.2.18.1.10 Placeholder
Placeholder which is displayed if no text is entered.
Scheme: tchmi:general#/definitions/String [} 2069]
Origin: Textbox [} 362]
See also
Attribute getter: getPlaceholder [} 1647]
Attribute setter: setPlaceholder [} 1647]
Note: Available since version 1.8
5.2.18.1.11 Text
Contents of the text box.
Scheme: tchmi:general#/definitions/String [} 2069]
Origin: Textbox [} 362]
See also
Attribute getter: getText [} 1642]
Attribute setter: setText [} 1642]
Note: Available since version 1.8
5.2.18.1.12 TextColor
Scheme: tchmi:framework#/definitions/SolidColor [} 2133]
Origin: Textbox [} 362]
See also
Attribute getter: getTextColor [} 1641]
Attribute setter: setTextColor [} 1641]
Note: Available since version 1.8
5.2.18.1.13 WordWrap
Wraps the text if it is too long to fit in one row.
Scheme: tchmi:general#/definitions/Boolean [} 2060]
Origin: Textbox [} 362]
See also
Attribute getter: getWordWrap [} 1648]
Attribute setter: setWordWrap [} 1648]
Note: Available since version 1.8
5.2.18.1.14 AutoFocusOut
Determines whether the control element automatically loses focus when the user confirms or ends his input
by pressing Enter or Escape.
Scheme: tchmi:general#/definitions/Boolean [} 2060]
Origin: Textbox [} 362]
See also
Attribute getter: getAutoFocusOut [} 1653]
Attribute setter: setAutoFocusOut [} 1654]
Note: Available since version 1.10
5.2.18.2 Events
5.2.18.2.1 onFocusIn
The control now has the focus.
Origin: Textbox [} 362]
Note: Available since version 1.8
5.2.18.2.2 onFocusOut
The control has lost focus.
Origin: Textbox [} 362]
Note: Available since version 1.8
5.2.18.2.3 onTextChanged
The text has been changed.
Origin: Textbox [} 362]
Note: Available since version 1.8
5.2.18.2.4 onUserInteractionFinished
The user has finished the interaction with the control.
Origin: Textbox [} 362]
Note: Available since version 1.8
5.2.18.2.5 onUserInteractionCanceled
The user has terminated the interaction with the control element.
Origin: Textbox [} 362]
Note: Available since version 1.10
5.2.19 Toggle Button
The toggle button is a switching element that can be switched between two states. The 'Toggle Group'
attribute can be used to interconnect different toggle buttons. When a new toggle button is activated, the
previously activated button is automatically deactivated.
Attributes
Category: Colors
Name Description
BackgroundColor [} 433] Definition of the background color
BorderColor [} 432] Definition of the border color of the control
Category: Layout
Name Description
Left [} 426] Definition of the distance from the left side to the left
side of the surrounding control
LeftUnit [} 426] Definition of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Top [} 426] Definition of the distance from the top side to the top
side of the surrounding control
TopUnit [} 426] Selection of the unit of the distance to the top side of
the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Right [} 429] Definition of the distance from the right side to the
right side of the surrounding control
RightUnit [} 429] Selection of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Bottom [} 429] Definition of the distance from the bottom side to the
bottom side of the surrounding control
BottomUnit [} 429] Selection of the unit of the distance to the bottom
side of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Width [} 427] Definition of the external width of the control
WidthUnit [} 427] Selection of the unit of the width:
· Pixels for an absolute width
· Percent for a relative width
Height [} 428] Definition of the external height of the control
HeightUnit [} 428] Selection of the unit of the height:
· Pixels for an absolute height
· Percent for a relative height
MaxWidth [} 437] Definition of the maximum width if the control size is
defined as dynamic
MaxWidthUnit [} 437] Selection of the unit of the maximum width:
· Pixels for an absolute value
· Percent for a relative value
MinWidth [} 438] Definition of the minimum width if the control size is
defined as dynamic
MinWidthUnit [} 438] Selection of the unit of the minimum width:
· Pixels for an absolute value
· Percent for a relative value
MaxHeight [} 436] Definition of the maximum height if the control size is
defined as dynamic
MaxHeightUnit [} 437] Selection of the unit of the maximum height:
· Pixels for an absolute value
· Percent for a relative value
MinHeight [} 436] Definition of the minimum height if the control size is
defined as dynamic
Name Description
MinHeightUnit [} 436] Selection of the unit of the minimum height:
· Pixels for an absolute value
· Percent for a relative value
RenderedLeft [} 430] Calculated distance in pixels from the left side to the
left side of the surrounding control
RenderedTop [} 430] Calculated distance in pixels from the top side to the
top side of the surrounding control
RenderedRight [} 431] Calculated distance in pixels from the right side to the
right side of the surrounding control
RenderedBottom [} 430] Calculated distance in pixels from the bottom side to
the bottom side of the surrounding control
RenderedWidth [} 431] Calculated width of the control in pixels
RenderedHeight [} 431] Calculated height of the control in pixels
GridRowIndex [} 432] Definition of the row of a grid in which the control is to
be displayed
GridColumnIndex [} 432] Definition of the column of a grid in which the control
is to be displayed
Opacity [} 438] Definition of the transparency of the entire control
Visibility [} 439] Selection of the visibility of a control:
· Visible: Control is visible
· Hidden: Control is invisible, but is drawn – controls
behind it cannot be operated
· Collapsed: Control is invisible and is not drawn –
controls behind it can be operated
ZIndex [} 440] Definition of the position on the Z-axis
Transform [} 439] Definition of a transformation of a control:
· Translate: Translate in X-, Y-, Z-direction
· Rotate: Rotate by an angle
· Scale: Zoom by a factor
· Skew: Sides shown skewed by an angle
· Origin: Set the origin of the transformation relative
to the position of the control
· Perspective: Set the perspective of the
transformations of all child elements
BoxShadow [} 440] Definition of a shadow
WidthMode [} 427] Selection of the method of calculating the width:
· Value: The width is defined by the width entered.
· Parent: The width is defined by the distance to the
left and right side of the parent element. The
"Width" attribute is ignored in all calculations!
HeightMode [} 428] Selection of the method of calculating the height:
· Value: The height is defined by the height entered.
· Parent: The height is defined by the distance to the
top and bottom side of the parent element. The
"Height" attribute is ignored in all calculations!
Category: Common
Name Description
Text [} 169] Definition of the text displayed in the button
StateSymbol [} 171] Reflects the pressed state of the button for the
assigned symbol and vice versa.
If the button is pressed, the symbol is set to true.
If the button is released, the symbol is set to false.
If the symbol is set to true independent of the button,
the button is pressed.
If the symbol is set to false independent of the button,
the button is released.
During an active user interaction, no value changes
of the symbol are transferred to the button.
ToggleGroup [} 378] User-defined name for a group. Only one control in
this group can be active.
ToggleState [} 378] Internal state of the control. This can be Normal or
Active.
IsEnabled [} 425] Selection of whether a control should be activated
Id [} 424] Definition of the name of the control
Type [} 439] Type name of the control.
ClassNames [} 425] Definition of control classes
IsAttached [} 425] If a control is logically assigned in the DOM.
ToolTip [} 438] Definition of the tool tip for the control
Category: Border
Name Description
BorderRadius [} 433] Definition of the radius of the four corners to round
them off
BorderStyle [} 433] Selection of the border style of the four sides of the
control
BorderWidth [} 433] Definition of the border width of the four sides of the
control
Category: Icon
Name Description
Icon [} 168] Definition of an optional image in the button
IconWidth [} 170] Definition of the width of the icon
IconWidthUnit [} 170] Definition of the unit of the width:
· Pixels for an absolute width
· Percent for a relative width
IconHeight [} 167] Definition of the height of the icon
IconHeightUnit [} 167] Definition of the unit of height:
· Pixels for an absolute height
· Percent for a relative height
IconHorizontalAlignment [} 168] Selecting the horizontal alignment of the icon within
the control
IconVerticalAlignment [} 169] Selecting the vertical alignment of the icon within the
control
IconPadding [} 168] Definition of the distance of the icon to the border
Category: Background Image
Name Description
BackgroundImage [} 434] Definition of an image that is located above the
background color
BackgroundImageHeight [} 435] Definition of the height of the background image
BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background
image:
· Pixels for an absolute height
· Percent for a relative height
BackgroundImageWidth [} 434] Definition of the width of the background image
BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background
image:
· Pixels for an absolute width
· Percent for a relative width
BackgroundImagePadding [} 435] Definition of an additional distance between the
border of the control and background image for the
four sides
BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background
image within the control
BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the
background image within the control
Category: Text
Name Description
TextColor [} 169] Definition of the text color
TextFontFamily [} 166] Definition of the font using the name of the font family
or the keyword
TextFontSize [} 166] Definition of the font size
TextFontSizeUnit [} 166] Definition of the font size unit:
· Pixels for an absolute size
· Percent for a relative size
TextFontStyle [} 167] Selecting the font style:
· Normal
· Italic: italic
· Oblique: slanted
TextFontWeight [} 167] Selecting the font weight of the text:
· Normal
· Bold: Bold
TextPadding [} 169] Definition of the distance of the text to the border
TextVerticalAlignment [} 170] Selecting the vertical alignment of the text
TextHorizontalAlignment [} 168] Selecting the horizontal alignment of the text
WordWrap [} 171] Selecting whether the text wraps if it is too long for
one row
Events
Category: Control
Name Description
onToggleStateChanged [} 379] The ToggleState value of the button has changed.
Category: Framework
Name Description
onAttached [} 440] The control was added to the display.
onDetached [} 440] The control was removed from the display.
onInitialized [} 441] The control was initialized.
onMoved [} 443] The control was moved in relation to the browser
window.
onResized [} 444] The size of the control was changed.
Category: Operator
Name Description
onToggleStateChanged [} 379] The ToggleState value of the button has changed.
onStateChanged [} 171] The pressed state has changed.
onStatePressed [} 171] The pressed state has changed from not pressed to
pressed.
onStateReleased [} 172] The pressed state has changed from pressed to not
pressed.
onPressed [} 443] A mouse click was executed or a touch screen was
briefly touched.
onMouseClick [} 441] The left mouse button was clicked over the control
and released.
onMouseDoubleClick [} 441] The left mouse button was clicked twice over the
control and released.
onMouseRightClick [} 442] The right mouse button was clicked over the control
and released.
onMouseDown [} 441] A mouse button was depressed over the control.
onMouseEnter [} 442] The mouse pointer was moved over the control.
onMouseLeave [} 442] The mouse pointer has left the control.
onMouseUp [} 443] A mouse button was released over the control.
onMouseDownLeft [} 441] The left mouse button was depressed over the
control.
onMouseDownRight [} 441] The right mouse button was depressed over the
control.
onMouseMove [} 442] The mouse was moved over the control.
onMouseOver [} 442] The mouse pointer was moved over the control or
one of its children.
onMouseOut [} 442] The mouse pointer has left the control or one of its
child controls.
onMouseUpLeft [} 443] The left mouse button was released over the control.
onMouseUpRight [} 443] The right mouse button was released over the
control.
onMouseWheel [} 443] The mouse wheel was moved over the control.
onTouchStart [} 444] A finger/stylus was placed against a touch screen.
onTouchMove [} 444] A finger/stylus was moved on a touch screen.
onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.
onTouchCancel [} 444] An interaction with a touch screen was aborted.
Access rights
Name Description
observe [} 444] Determines whether the control is generally
observable.
operate [} 445] Determines whether the control is generally operable.
Inheritance hierarchy
Control [} 419]
Button [} 160]
Toggle Button
See also
API reference [} 1654] for this control
5.2.19.1 Attributes
5.2.19.1.1 ToggleGroup
User-defined name for a group. Only one control in this group can be active.
From version 1.10 a toggle group can consist of controls of the type Toggle Button [} 372] and Checkbox
[} 172].
Scheme: tchmi:general#/definitions/String [} 2069]
Origin: Toggle Button [} 372]
See also
Attribute getter: getToggleGroup [} 1661]
Attribute setter: setToggleGroup [} 1662]
Note: Available since version 1.8
5.2.19.1.2 ToggleState
Internal state of the control. This can be Normal or Active.
Scheme: tchmi:framework#/definitions/ToggleState [} 2135]
Origin: Toggle Button [} 372]
See also
Attribute getter: getToggleState [} 1662]
Attribute setter: setToggleState [} 1663]
Note: Available since version 1.10
5.2.19.2 Events
5.2.19.2.1 onToggleStateChanged
The ToggleState [} 378] value of the button has changed.
Origin: Toggle Button [} 372]
Note: Available since version 1.8
5.2.20 Trend Line Chart
A TrendLineChart is a trend element in which curves of historicized symbols can be displayed.
A description of the configuration can be found in chapter Configuration [} 386].
Attributes
Category: Colors
Name Description
BackgroundColor [} 433] Definition of the background color
BorderColor [} 432] Definition of the border color of the control
GridBackgroundColor [} 389] Definition of the background color of the coordinate
system
GridLineColor [} 389] Definition of the color of the coordinate grid
SubgridLineColor [} 396] Definition of the color of the coordinate subgrid
XLabelFontColor [} 403] Definition of the font color of the x-axis labels
XAxisColor [} 399] Definition of the color of the x-axis
XAxisNameFontColor [} 401] Definition of the font color of the X-axis name
MenuBarLabelFontColor [} 391] Definition of the font color of the menu bar
SectionsBackgroundColor [} 393] Definition of the background color of the control
TooltipFontColor [} 397] Definition of the color of the tooltip
TooltipBackgroundColor [} 397] Definition of the background color of the tooltip
Category: Layout
Name Description
Left [} 426] Definition of the distance from the left side to the left
side of the surrounding control
LeftUnit [} 426] Definition of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Top [} 426] Definition of the distance from the top side to the top
side of the surrounding control
TopUnit [} 426] Selection of the unit of the distance to the top side of
the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Right [} 429] Definition of the distance from the right side to the
right side of the surrounding control
RightUnit [} 429] Selection of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Bottom [} 429] Definition of the distance from the bottom side to the
bottom side of the surrounding control
BottomUnit [} 429] Selection of the unit of the distance to the bottom
side of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Width [} 427] Definition of the external width of the control
WidthUnit [} 427] Selection of the unit of the width:
· Pixels for an absolute width
· Percent for a relative width
Height [} 428] Definition of the external height of the control
HeightUnit [} 428] Selection of the unit of the height:
· Pixels for an absolute height
· Percent for a relative height
MaxWidth [} 437] Definition of the maximum width if the control size is
defined as dynamic
MaxWidthUnit [} 437] Selection of the unit of the maximum width:
· Pixels for an absolute value
· Percent for a relative value
MinWidth [} 438] Definition of the minimum width if the control size is
defined as dynamic
MinWidthUnit [} 438] Selection of the unit of the minimum width:
· Pixels for an absolute value
· Percent for a relative value
MaxHeight [} 436] Definition of the maximum height if the control size is
defined as dynamic
MaxHeightUnit [} 437] Selection of the unit of the maximum height:
· Pixels for an absolute value
· Percent for a relative value
MinHeight [} 436] Definition of the minimum height if the control size is
defined as dynamic
Name Description
MinHeightUnit [} 436] Selection of the unit of the minimum height:
· Pixels for an absolute value
· Percent for a relative value
RenderedLeft [} 430] Calculated distance in pixels from the left side to the
left side of the surrounding control
RenderedTop [} 430] Calculated distance in pixels from the top side to the
top side of the surrounding control
RenderedRight [} 431] Calculated distance in pixels from the right side to the
right side of the surrounding control
RenderedBottom [} 430] Calculated distance in pixels from the bottom side to
the bottom side of the surrounding control
RenderedWidth [} 431] Calculated width of the control in pixels
RenderedHeight [} 431] Calculated height of the control in pixels
GridRowIndex [} 432] Definition of the row of a grid in which the control is to
be displayed
GridColumnIndex [} 432] Definition of the column of a grid in which the control
is to be displayed
Opacity [} 438] Definition of the transparency of the entire control
Visibility [} 439] Selection of the visibility of a control:
· Visible: Control is visible
· Hidden: Control is invisible, but is drawn – controls
behind it cannot be operated
· Collapsed: Control is invisible and is not drawn –
controls behind it can be operated
ZIndex [} 440] Definition of the position on the Z-axis
Transform [} 439] Definition of a transformation of a control:
· Translate: Translate in X-, Y-, Z-direction
· Rotate: Rotate by an angle
· Scale: Zoom by a factor
· Skew: Sides shown skewed by an angle
· Origin: Set the origin of the transformation relative
to the position of the control
· Perspective: Set the perspective of the
transformations of all child elements
BoxShadow [} 440] Definition of a shadow
WidthMode [} 427] Selection of the method of calculating the width:
· Value: The width is defined by the width entered.
· Parent: The width is defined by the distance to the
left and right side of the parent element. The
"Width" attribute is ignored in all calculations!
HeightMode [} 428] Selection of the method of calculating the height:
· Value: The height is defined by the height entered.
· Parent: The height is defined by the distance to the
top and bottom side of the parent element. The
"Height" attribute is ignored in all calculations!
Category: Common
Name Description
Start [} 395] Definition of the start time at which the display should
begin
End [} 389] Definition of the end time at which the display should
end
LineGraphDescriptions [} 391] Definition of the historicized variables to be displayed
in the graph and their method of display
Interval [} 390] Definition of the interval at which the data are
updated
MouseMode [} 393] Selection of the mouse mode that is active after
stopping:
· ZoomX: By drawing a rectangle, an area can be
defined in the X direction which is to be zoomed in
on.
· ZoomXY: By drawing a rectangle, an area can be
defined in the X and Y direction which is to be
zoomed in on.
· PanX: The observed area can be shifted in the X
direction in the display area of the graph by dragand-
drop.
· PanXY: The observed area can be shifted in the X
and Y direction in the display area of the graph by
drag-and-drop.
IsEnabled [} 425] Selection of whether a control should be activated
Id [} 424] Definition of the name of the control
Type [} 439] Type name of the control.
ClassNames [} 425] Definition of control classes
IsAttached [} 425] If a control is logically assigned in the DOM.
ToolTip [} 438] Definition of the tool tip for the control
Category: Border
Name Description
BorderRadius [} 433] Definition of the radius of the four corners to round
them off
BorderStyle [} 433] Selection of the border style of the four sides of the
control
BorderWidth [} 433] Definition of the border width of the four sides of the
control
Category: Background Image
Name Description
BackgroundImage [} 434] Definition of an image that is located above the
background color
BackgroundImageHeight [} 435] Definition of the height of the background image
BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background
image:
· Pixels for an absolute height
· Percent for a relative height
BackgroundImageWidth [} 434] Definition of the width of the background image
BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background
image:
· Pixels for an absolute width
· Percent for a relative width
BackgroundImagePadding [} 435] Definition of an additional distance between the
border of the control and background image for the
four sides
BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background
image within the control
BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the
background image within the control
Category: XAxis
Name Description
ShowXAxis [} 394] Selecting whether the X-axis is to be displayed
XShowLabels [} 404] Selecting whether the X-axis labels are to be
displayed
XMainTickSteps [} 404] Definition of the number of main X-axis subdivisions
ShowXSubTicks [} 395] Selecting whether the auxiliary X-axis subdivisions
are to be displayed
XSubTickSteps [} 404] Definition of the number of auxiliary X-axis
subdivisions
ShowXAxisName [} 394] Selecting whether the X-axis name is to be displayed
XAxisName [} 401] Definition of the X-axis name
XLabelFontFamily [} 403] Definition of the font using the name of the font family
or the keyword
XLabelFontSize [} 403] Definition of the font size for the X-axis labels
XLabelFontWeight [} 404] Selecting the font weight of the X-axis labels:
· Normal
· Bold: bold
XAxisWidth [} 402] Definition of the X-axis width
XAxisNameFontFamily [} 401] Definition of the font using the name of the font family
or the keyword
XAxisNameFontSize [} 401] Definition of the font size of the X-axis name
XAxisNameFontWeight [} 402] Selecting of the font weight of the X-axis name:
· Normal
· Bold: bold
XAxisFormat [} 400] Definition of the formatting of the X-axis labels
Category: YAxis
Name Description
YAxis [} 405] Definition of one or more Y-axes
ShowYSubTicks [} 395] Selecting whether the auxiliary subdivisions on the Yaxis
are to be displayed
YAxisWidth [} 405] Definition of the Y-axis width
YLabelFontFamily [} 405] Definition of the font using the name of the font family
or the keyword
YLabelFontSize [} 405] Definition of the font size for the Y-axis labels
YLabelFontSizeUnit [} 406] Selecting the font size unit for the Y-axis labels:
· Pixels for an absolute size
· Percent for a relative size
YLabelFontWeight [} 406] Selecting the font weight of the Y-axis labels:
· Normal
· Bold: bold
YMainTickSteps [} 406] Definition of the number of main Y-axis subdivisions
YSubTickSteps [} 407] Definition of the number of auxiliary Y-axis
subdivisions
Category: Grid
Name Description
ShowGrid [} 393] Selecting whether the coordinate grid is to be
displayed
GridLineWidth [} 390] Definition of the line width of the coordinate grid
GridShowHorizontalLines [} 390] Selecting whether the horizontal lines of the
coordinate grid are to be displayed
GridShowVerticalLines [} 390] Selecting whether the vertical lines of the coordinate
grid are to be displayed
Category: Subgrid
Name Description
SubridLineWidth [} 396] Definition of the line width of the coordinate subgrid
system
SubgridShowHorizontalLines [} 396] Selecting whether the horizontal lines of the
coordinate subgrid are to be displayed
SubgridShowVerticalLines [} 396] Selecting whether the vertical lines of the coordinate
subgrid are to be displayed
Category: Menubar
Name Description
ShowMenuBar [} 394] Selection of whether the menu bar is to be displayed
MenuBarPosition [} 392] Selection of the position of the menu bar:
· Bottom: Underside
· Top: Top side
MenuBarLabelFontFamily [} 391] Definition of the font using the name of the font family
or the keyword
MenuBarLabelFontSize [} 391] Definition of the font size
MenuBarLabelFontStyle [} 392] Selecting the font style:
· Normal
· Italic: italic
· Oblique: slanted
MenuBarLabelFontWeight [} 392] Selecting the font weight:
· Normal
· Bold: Bold
Category: Tooltip
Name Description
ShowTooltip [} 394] Selecting whether the tooltips should be displayed in
stop mode
TooltipFormat [} 398] · Definition of the formatting of the tooltips.
TooltipFontFamily [} 397] Definition of the font using the name of the font family
or the keyword
TooltipFontSize [} 397] Definition of the font size
TooltipFontWeight [} 398] Selecting the font weight:
· Normal
· Bold: Bold
Events
Category: Framework
Name Description
onAttached [} 440] The control was added to the display.
onDetached [} 440] The control was removed from the display.
onInitialized [} 441] The control was initialized.
onMoved [} 443] The control was moved in relation to the browser
window.
onResized [} 444] The size of the control was changed.
Category: Operator
Name Description
onPressed [} 443] A mouse click was executed or a touch screen was
briefly touched.
onMouseClick [} 441] The left mouse button was clicked over the control
and released.
onMouseDoubleClick [} 441] The left mouse button was clicked twice over the
control and released.
onMouseRightClick [} 442] The right mouse button was clicked over the control
and released.
onMouseDown [} 441] A mouse button was depressed over the control.
onMouseEnter [} 442] The mouse pointer was moved over the control.
onMouseLeave [} 442] The mouse pointer has left the control.
onMouseUp [} 443] A mouse button was released over the control.
onMouseDownLeft [} 441] The left mouse button was depressed over the
control.
onMouseDownRight [} 441] The right mouse button was depressed over the
control.
onMouseMove [} 442] The mouse was moved over the control.
onMouseOver [} 442] The mouse pointer was moved over the control or
one of its children.
onMouseOut [} 442] The mouse pointer has left the control or one of its
child controls.
onMouseUpLeft [} 443] The left mouse button was released over the control.
onMouseUpRight [} 443] The right mouse button was released over the
control.
onMouseWheel [} 443] The mouse wheel was moved over the control.
onTouchStart [} 444] A finger/stylus was placed against a touch screen.
onTouchMove [} 444] A finger/stylus was moved on a touch screen.
onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.
onTouchCancel [} 444] An interaction with a touch screen was aborted.
Access rights
Name Description
observe [} 444] Determines whether the control is generally
observable.
operate [} 445] Determines whether the control is generally operable.
Inheritance hierarchy
Control [} 419]
Trend line chart
See also
API reference [} 1663] for this control
Note: Available since version 1.10
5.2.20.1 Configuration
A TrendLineChart can be configured as follows:
1. Define the Y-axes of the coordinate system with the help of the dialog "YAxis Definitions" of the attribute
"YAxis".
1.1. Define the desired number of Y-axes to which the symbols in the following are to be assigned.
1.2. Adjust the settings of the Y-axis/axes if necessary.
2. Define the variables that are to be displayed in the trend element with the help of the dialog
"LineGraphDescriptions" of the attribute "LineGraphDescriptions" of the category "Common".
2.1. Add a Line Graph Description for each of the variables.
2.2. Select the appropriate variable in each description under "Symbol".
It is only possible to select variables for which historization has been activated beforehand.
2.3. Under "Y-Axis ID", select the Y-axis to which the symbol is to be assigned. If you don't select a Y-axis,
an automatically scaling Y-axis bearing the name of the symbol will be generated.
3. Adapt the start and end point of the period to be observed.
Example: Last ten minutes in the past:
3.1. Set the value of the attribute "Start" of the category "Common" to "PT10M".
4. Adapt the X-axis scaling by setting the attribute "XMainTickSteps" of the category "X-Axis" to "5".
5. Activate the attribute "ShowMenubar" of the category "Menubar".
5.2.20.2 Dialogs
5.2.20.2.1 LineGraphDescription dialog
The settings of the graphs and their assignment to the individual symbols that are to be displayed in the
TrendLineChart can be changed with this dialog.
Items List of all objects added
Delete the selected object
Change the object order (top = left)
Add a new object
Properties Settings for the Y-axis assignment selected under
"Elements"
Symbol Selection of the historicized symbol
Y-Axis Id Selection of the Y-axis with which the symbol is to be
connected
Line width Definition of the line width of the graph
Point dot Selecting whether the individual data points are to be
marked
Point dot radius Definition of the radius of the data points
Point dot stroke width Definition of the width of the dotted line
Point dot in stopmode Selection of whether the individual data points are to
be drawn when the display is stopped in the trend
element.
5.2.20.2.2 YAxis Definition Dialog
This dialog can be used to add and parameterize the different Y-axes.
Items List of all objects added
Delete the selected object
Change the object order (top = left)
Add a new object
Properties Settings of the Y-axis definition selected under
"Elements"
Id Definition of a unique ID of the Y-axis
Position Position of the Y-axis on the graph
· Left side of the graph
· Right side of the graph
Main-tick-min-value Definition of the beginning of the displayed value
range
Main-tick-max-value Definition of the end of the displayed value range
Auto scaling Selecting whether the value range should be
automatically adjusted according to the values to be
displayed in the array
Decimal places Definition of decimal places
Show labels Selecting whether the label of the Y-axis is to be
displayed
Show axis name Selecting whether the axis name should be displayed
next to the axis in the graph
Axis name Definition of the axis name, which can optionally be
displayed next to the axis
Axis name font family Definition of the font
Axis name font size Definition of the font size
Axis name font weight Selecting the font weight
· Bold
· Normal
Unit Definition of the unit
5.2.20.3 Attributes
5.2.20.3.1 ActualEndTime
Actual end time (read-only).
Scheme: tchmi:general#/definitions/DateTime [} 2062]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getActualEndTime [} 1684]
Note: Available since version 1.10
5.2.20.3.2 ActualStartTime
Actual start point (read-only).
Scheme: tchmi:general#/definitions/DateTime [} 2062]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getActualStartTime [} 1683]
Note: Available since version 1.10
5.2.20.3.3 End
Definition of the end time at which the display should end.
Scheme: tchmi:framework#/definitions/TrendLineChartEnd [} 2143]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getEnd [} 1683]
Attribute setter: setEnd [} 1684]
Note: Available since version 1.10
5.2.20.3.4 GridBackgroundColor
Definition of the background color of the coordinate system.
Scheme: tchmi:framework#/definitions/Color [} 2094]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getGridBackgroundColor [} 1674]
Attribute setter: setGridBackgroundColor [} 1674]
Note: Available since version 1.10
5.2.20.3.5 GridLineColor
Definition of the color of the coordinate grid.
Scheme: tchmi:framework#/definitions/SolidColor [} 2133]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getGridLineColor [} 1675]
Attribute setter: setGridLineColor [} 1675]
Note: Available since version 1.10
5.2.20.3.6 GridLineWidth
Definition of the line width of the coordinate grid.
Scheme: tchmi:general#/definitions/Number [} 2067]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getGridLineWidth [} 1714]
Attribute setter: setGridLineWidth [} 1715]
Note: Available since version 1.10
5.2.20.3.7 GridShowHorizontalLines
Selecting whether the horizontal lines of the coordinate grid are to be displayed. The number of horizontal
grid lines is defined by the attribute YMainTickSteps [} 406].
Scheme: tchmi:general#/definitions/Boolean [} 2060]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getGridShowHorizontalLines [} 1713]
Attribute setter: setGridShowHorizontalLines [} 1714]
Note: Available since version 1.10
5.2.20.3.8 GridShowVerticalLines
Selecting whether the vertical lines of the coordinate grid are to be displayed. The number of vertical grid
lines is defined by the attribute XMainTickSteps [} 404].
Scheme: tchmi:general#/definitions/Boolean [} 2060]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getGridShowVerticalLines [} 1712]
Attribute setter: setGridShowVerticalLines [} 1713]
Note: Available since version 1.10
5.2.20.3.9 Interval
Definition of the interval at which the data are updated.
Scheme: tchmi:general#/definitions/Number [} 2067]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getInterval [} 1686]
Attribute setter: setInterval [} 1686]
Note: Available since version 1.10
5.2.20.3.10 LineGraphDescription
Definition of the historicized variables to be displayed in the graph and their method of display.
Scheme: tchmi:framework#/definitions/TrendLineChartLineGraphDescriptionDefinitionList [} 2144]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getLineGraphDescription [} 1685]
Attribute setter: setLineGraphDescription [} 1685]
Note: Available since version 1.10
5.2.20.3.11 MenuBarLabelFontColor
Definition of the font color of the menu bar.
Scheme: tchmi:framework#/definitions/SolidColor [} 2133]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getMenuBarLabelFontColor [} 1678]
Attribute setter: setMenuBarLabelFontColor [} 1679]
Note: Available since version 1.10
5.2.20.3.12 MenuBarLabelFontFamily
Definition of the font using the name of the font family or the keyword.
Scheme: tchmi:framework#/definitions/FontFamily [} 2108]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getMenuBarLabelFontFamily [} 1720]
Attribute setter: setMenuBarLabelFontFamily [} 1720]
Note: Available since version 1.10
5.2.20.3.13 MenuBarLabelFontSize
Definition of the font size.
Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getMenuBarLabelFontSize [} 1721]
Attribute setter: setMenuBarLabelFontSize [} 1721]
Note: Available since version 1.10
5.2.20.3.14 MenuBarLabelFontSizeUnit
Selection of the unit of the font size in the menu bar (pixel or percent).
Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getMenuBarLabelFontSizeUnit [} 1722]
Attribute setter: setMenuBarLabelFontSizeUnit [} 1722]
Note: Available since version 1.10
5.2.20.3.15 MenuBarLabelFontStyle
Font style (normal, italics: inclined with special characters, oblique: inclined)
Scheme: tchmi:framework#/definitions/FontStyle [} 2108]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getMenuBarLabelFontStyle [} 1724]
Attribute setter: setMenuBarLabelFontStyle [} 1724]
Note: Available since version 1.10
5.2.20.3.16 MenuBarLabelFontWeight
Selection of the font weight for the menu bar (normal, bold).
Scheme: tchmi:framework#/definitions/FontWeight [} 2109]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getMenuBarLabelFontWeight [} 1723]
Attribute setter: setMenuBarLabelFontWeight [} 1723]
Note: Available since version 1.10
5.2.20.3.17 MenuBarPosition
Selection of the position of the menu bar (Bottom, Top).
Scheme: tchmi:framework#/definitions/ChartMenuBarPosition [} 2089]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getMenuBarPosition [} 1719]
Attribute setter: setMenuBarPosition [} 1719]
Note: Available since version 1.10
5.2.20.3.18 MouseMode
Selection of the mouse mode that is active after stopping.
· ZoomX: By drawing a rectangle, an area can be defined in the X direction which is to be zoomed in on.
· ZoomXY: By drawing a rectangle, an area can be defined in the X and Y direction which is to be
zoomed in on.
· PanX: The observed area can be shifted in the X direction in the display area of the graph by drag-anddrop.
· PanXY: The observed area can be shifted in the X and Y direction in the display area of the graph by
drag-and-drop.
Scheme: tchmi:framework#/definitions/ChartMouseMode [} 2090]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getMouseMode [} 1687]
Attribute setter: setMouseMode [} 1687]
Note: Available since version 1.10
5.2.20.3.19 SectionsBackgroundColor
Definition of the background color of the control.
Scheme: tchmi:framework#/definitions/Color [} 2094]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getSectionsBackgroundColor [} 1681]
Attribute setter: setSectionsBackgroundColor [} 1682]
Note: Available since version 1.10
5.2.20.3.20 ShowGrid
Selecting whether the coordinate grid is to be displayed.
Scheme: tchmi:general#/definitions/Boolean [} 2060]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getShowGrid [} 1711]
Attribute setter: setShowGrid [} 1712]
Note: Available since version 1.10
5.2.20.3.21 ShowMenubar
Selection of whether the menu bar is to be displayed.
Scheme: tchmi:general#/definitions/Boolean [} 2060]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getShowMenubar [} 1718]
Attribute setter: setShowMenubar [} 1718]
Note: Available since version 1.10
5.2.20.3.22 ShowTooltip
Selecting whether the tooltips should be displayed in stop mode.
Scheme: tchmi:general#/definitions/Boolean [} 2060]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getShowTooltip [} 1725]
Attribute setter: setShowTooltip [} 1725]
Note: Available since version 1.10
5.2.20.3.23 ShowXAxis
Selecting whether the X-axis is to be displayed.
Scheme: tchmi:general#/definitions/Boolean [} 2060]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getShowXAxis [} 1687]
Attribute setter: setShowXAxis [} 1688]
Note: Available since version 1.10
5.2.20.3.24 ShowXAxisName
Selecting whether the X-axis name is to be displayed.
Scheme: tchmi:general#/definitions/Boolean [} 2060]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getShowXAxisName [} 1697]
Attribute setter: setShowXAxisName [} 1697]
Note: Available since version 1.10
5.2.20.3.25 ShowXSubTicks
Selecting whether the auxiliary X-axis subdivisions are to be displayed.
Scheme: tchmi:general#/definitions/Boolean [} 2060]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getShowXSubTicks [} 1690]
Attribute setter: setShowXSubTicks [} 1691]
Note: Available since version 1.10
5.2.20.3.26 ShowYSubTicks
Selecting whether the auxiliary subdivisions on the Y-axis are to be displayed.
Scheme: tchmi:general#/definitions/Boolean [} 2060]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getShowYSubTicks [} 1705]
Attribute setter: setShowYSubTicks [} 1705]
Note: Available since version 1.10
5.2.20.3.27 Start
Definition of the start time at which the display should begin.
Scheme: tchmi:framework#/definitions/TrendLineChartStart [} 2144]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getStart [} 1682]
Attribute setter: setStart [} 1682]
Note: Available since version 1.10
5.2.20.3.28 SubgridLineColor
Definition of the color of the coordinate subgrid.
Scheme: tchmi:framework#/definitions/SolidColor [} 2133]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getSubgridLineColor [} 1676]
Attribute setter: setSubgridlineColor [} 1676]
Note: Available since version 1.10
5.2.20.3.29 SubgridLineWidth
Definition of the line width of the coordinate subgrid.
Scheme: tchmi:general#/definitions/Number [} 2067]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getSubgridLineWidth [} 1717]
Attribute setter: setSubgridLineWidth [} 1717]
Note: Available since version 1.10
5.2.20.3.30 SubgridShowHorizontalLines
Selecting whether the horizontal lines of the coordinate subgrid are to be displayed. The number of
horizontal auxiliary coordinate lines is defined by the attribute YSubTickSteps.
Scheme: tchmi:general#/definitions/Boolean [} 2060]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getSubgridShowHorizontalLines [} 1716]
Attribute setter: setSubgridShowHorizontalLines [} 1717]
Note: Available since version 1.10
5.2.20.3.31 SubgridShowVerticalLines
Selecting whether the vertical lines of the coordinate subgrid are to be displayed. The number of vertical
auxiliary coordinate lines is defined by the attribute XSubTickSteps [} 404].
Scheme: tchmi:general#/definitions/Boolean [} 2060]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getSubgridShowVerticalLines [} 1715]
Attribute setter: setSubgridShowVerticalLines [} 1716]
Note: Available since version 1.10
5.2.20.3.32 TooltipBackgroundColor
Definition of the background color of the coordinate system.
Scheme: tchmi:framework#/definitions/Color [} 2094]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getTooltipBackgroundColor [} 1680]
Attribute setter: setTooltipBackgroundColor [} 1681]
Note: Available since version 1.10
5.2.20.3.33 TooltipFontColor
Definition of the font color of the tooltip.
Scheme: tchmi:framework#/definitions/SolidColor [} 2133]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getTooltipFontColor [} 1679]
Attribute setter: setTooltipFontColor [} 1680]
Note: Available since version 1.10
5.2.20.3.34 TooltipFontFamily
Definition of the font using the name of the font family or the keyword.
Scheme: tchmi:framework#/definitions/FontFamily [} 2108]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getTooltipFontFamily [} 1726]
Attribute setter: setTooltipFontFamily [} 1727]
Note: Available since version 1.10
5.2.20.3.35 TooltipFontSize
Definition of the font size.
Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getTooltipFontSize [} 1727]
Attribute setter: setTooltipFontSize [} 1728]
Note: Available since version 1.10
5.2.20.3.36 TooltipFontSizeUnit
Selecting the unit of the font size in the tooltips (pixel or percent).
Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getTooltipFontSizeUnit [} 1728]
Attribute setter: setTooltipFontSizeUnit [} 1729]
Note: Available since version 1.10
5.2.20.3.37 TooltipFontWeight
Selecting the font weight for the tooltips (normal, bold).
Scheme: tchmi:framework#/definitions/FontWeight [} 2109]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getTooltipFontWeight [} 1729]
Attribute setter: setTooltipFontWeight [} 1730]
Note: Available since version 1.10
5.2.20.3.38 TooltipFormat
Definition of the formatting of the tooltips.
Schema: tchmi:framework#/definitions/Function [} 2109]
The selected function defines the tooltip display. It is called as soon as the mouse cursor is positioned on a
point and/or an error. In addition it contains the current time stamp of the mouse, which is specified in
milliseconds, a list of points and a list of errors. The respective list is empty if there are no points or errors at
this position.
A function must fulfill the following signature in order to be offered in the engineering. The parameters
mentioned here are set by the control. Further parameters are possible and can be specified per instance in
the engineering.
Example: The value for the Linear Gauge is set by the control. The further parameter "maxDecimals" is
specified in Engineering for each instance.
[ Function ]
exampleFunction(actTime: number, points: TcHmiTrendLineChart.TooltipInformationObject[], errors:
TcHmiTrendLineChart.TooltipErrorInformationObject[]): string;
Parameter
Name Type Description
actTime number [} 1997]
tchmi:general#/definitions/Number
[} 2067]
The current time stamp of the
mouse position in milliseconds
since 01/01/1970.
points TcHmiTrendLineChart.TooltipInfor
mationObject [} 1733][]
tchmi:framework#/definitions/
TrendLineChartTooltipInformationLi
st [} 2146]
The recorded points located at the
mouse position (within the point
radius).
errors TcHmiTrendLineChart.TooltipErrorI
nformationObject [} 1733][]
tchmi:framework#/definitions/
TrendLineChartTooltipErrorInforma
tionList [} 2145]
The recorded errors located at the
mouse position.
Return value
Type Description
string [} 1997]
tchmi:general#/definitions/String [} 2069]
The tooltip to be displayed. HTML is allowed here.
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getTooltipFormat [} 1725]
Attribute setter: setTooltipFormat [} 1726]
Note: Available since version 1.10
5.2.20.3.39 XAxisColor
Definition of the color of the X-axis.
Scheme: tchmi:framework#/definitions/SolidColor [} 2133]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getXAxisColor [} 1673]
Attribute setter: setXAxisColor [} 1673]
Note: Available since version 1.10
5.2.20.3.40 XAxisFormat
Schema: tchmi:framework#/definitions/Function [} 2109]
Definition of the formatting of the X-axis labels.
The selected function defines the X-axis labels. It is called for each displayed value of the main X-axis
subdivision. In addition it contains the respective time stamp, which is specified in milliseconds.
A function must fulfill the following signature in order to be offered in the engineering. The parameters
mentioned here are set by the control. Further parameters are possible and can be specified per instance in
the engineering.
Example: The value for the Linear Gauge is set by the control. The further parameter "maxDecimals" is
specified in Engineering for each instance.
[ Function ]
exampleFunction(value: number): string;
Parameter
Name Type Description
value number [} 1997]
tchmi:general#/definitions/Number
[} 2067]
The current numerical value of the
X-axis in milliseconds since
01/01/1970.
Return value
Type Description
string [} 1997]
tchmi:general#/definitions/String [} 2069]
The new value of the main X-axis subdivision. HTML
is not allowed here.
Origin: Trend line chart [} 379]
See also
Attribute getter: getXAxisFormat [} 1702]
Attribute setter: setXAxisFormat [} 1703]
Note: Available since version 1.10
5.2.20.3.41 XAxisName
Definition of the X-axis name.
Scheme: tchmi:general#/definitions/String [} 2069]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getXAxisName [} 1698]
Attribute setter: setXAxisName [} 1698]
Note: Available since version 1.10
5.2.20.3.42 XAxisNameFontColor
Definition of the font color of the X-axis name.
Scheme: tchmi:framework#/definitions/SolidColor [} 2133]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getXAxisNameFontColor [} 1676]
Attribute setter: setXAxisNameFontColor [} 1677]
Note: Available since version 1.10
5.2.20.3.43 XAxisNameFontFamily
Definition of the font using the name of the font family or the keyword.
Scheme: tchmi:framework#/definitions/FontFamily [} 2108]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getXAxisNameFontFamily [} 1699]
Attribute setter: setXAxisNameFontFamily [} 1699]
Note: Available since version 1.10
5.2.20.3.44 XAxisNameFontSize
Definition of the font size of the X-axis name.
Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getXAxisNameFontSize [} 1699]
Attribute setter: setXAxisNameFontSize [} 1700]
Note: Available since version 1.10
5.2.20.3.45 XAxisNameFontSizeUnit
Pixels, or percent for relative sizes.
Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getXAxisNameFontSizeUnit [} 1700]
Attribute setter: setXAxisNameFontSizeUnit [} 1701]
Note: Available since version 1.10
5.2.20.3.46 XAxisNameFontWeight
Selection of the font weight of the X-axis name (normal, bold).
Scheme: tchmi:framework#/definitions/FontWeight [} 2109]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getXAxisNameFontWeight [} 1701]
Attribute setter: setXAxisNameFontWeight [} 1702]
Note: Available since version 1.10
5.2.20.3.47 XAxisWidth
Definition of the axis width.
Scheme: tchmi:general#/definitions/Number [} 2067]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getXAxisWidth [} 1696]
Attribute setter: setXAxisWidth [} 1696]
Note: Available since version 1.10
5.2.20.3.48 XLabelFontColor
Definition of the color of the X-axis labels.
Scheme: tchmi:framework#/definitions/SolidColor [} 2133]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getXLabelFontColor [} 1677]
Attribute setter: setXLabelFontColor [} 1678]
Note: Available since version 1.10
5.2.20.3.49 XLabelFontFamily
Definition of the font using the name of the font family or the keyword.
Scheme: tchmi:framework#/definitions/FontFamily [} 2108]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getXLabelFontFamily [} 1692]
Attribute setter: setXLabelFontFamily [} 1693]
Note: Available since version 1.10
5.2.20.3.50 XLabelFontSize
Definition of the font size for the X-axis labels.
Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getXLabelFontSize [} 1693]
Attribute setter: setXLabelFontSize [} 1693]
Note: Available since version 1.10
5.2.20.3.51 XLabelFontSizeUnit
Pixels, or percent for relative sizes.
Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getXLabelFontSizeUnit [} 1694]
Attribute setter: setXLabelFontSizeUnit [} 1694]
Note: Available since version 1.10
5.2.20.3.52 XLabelFontWeight
Selection of the font weight of the X-axis labels (normal, bold).
Scheme: tchmi:framework#/definitions/FontWeight [} 2109]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getXLabelFontWeight [} 1695]
Attribute setter: setXLabelFontWeight [} 1695]
Note: Available since version 1.10
5.2.20.3.53 XMainTickSteps
Definition of the number of main X-axis subdivisions.
Scheme: tchmi:general#/definitions/Number [} 2067]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getXMainTickSteps [} 1689]
Attribute setter: setXMainTickSteps [} 1690]
Note: Available since version 1.10
5.2.20.3.54 XShowLabels
Selecting whether the X-axis labels are to be displayed
Scheme: tchmi:general#/definitions/Boolean [} 2060]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getXShowLabels [} 1688]
Attribute setter: setXShowLabels [} 1689]
Note: Available since version 1.10
5.2.20.3.55 XSubTickSteps
Definition of the number of auxiliary X-axis subdivisions.
Scheme: tchmi:general#/definitions/Number [} 2067]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getXSubTickSteps [} 1691]
Attribute setter: setXSubTickSteps [} 1692]
Note: Available since version 1.10
5.2.20.3.56 YAxis
Definition of one or more Y-axes.
Scheme: tchmi:framework#/definitions/ChartYAxisDefinitionList [} 2093]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getYAxis [} 1703]
Attribute setter: setYAxis [} 1704]
Note: Available since version 1.10
5.2.20.3.57 YAxisWidth
Definition of the Y-axis width.
Scheme: tchmi:general#/definitions/Number [} 2067]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getYAxisWidth [} 1711]
Attribute setter: setYAxisWidth [} 1711]
Note: Available since version 1.10
5.2.20.3.58 YLabelFontFamily
Definition of the font using the name of the font family or the keyword.
Scheme: tchmi:framework#/definitions/FontFamily [} 2108]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getYLabelFontFamily [} 1707]
Attribute setter: setYLabelFontFamily [} 1707]
Note: Available since version 1.10
5.2.20.3.59 YLabelFontSize
Definition of the font size for the Y-axis labels.
Scheme: tchmi:framework#/definitions/MeasurementValue [} 2123]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getYLabelFontSize [} 1708]
Attribute setter: setYLabelFontSize [} 1708]
Note: Available since version 1.10
5.2.20.3.60 YLabelFontSizeUnit
Selection of the unit of the font size of the Y-axis labels (pixel or percent).
Scheme: tchmi:framework#/definitions/MeasurementUnit [} 2123]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getYLabelFontSizeUnit [} 1709]
Attribute setter: setYLabelFontSizeUnit [} 1709]
Note: Available since version 1.10
5.2.20.3.61 YLabelFontWeight
Selection of the font weight of the Y-axis labels (normal, bold).
Scheme: tchmi:framework#/definitions/FontWeight [} 2109]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getYLabelFontWeight [} 1710]
Attribute setter: setYLabelFontWeight [} 1710]
Note: Available since version 1.10
5.2.20.3.62 YMainTickSteps
Definition of the number of main Y-axis subdivisions.
Scheme: tchmi:general#/definitions/Number [} 2067]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getYMainTickSteps [} 1704]
Attribute setter: setYMainTickSteps [} 1705]
Note: Available since version 1.10
5.2.20.3.63 YSubTickSteps
Definition of the number of auxiliary Y-axis subdivisions.
Scheme: tchmi:general#/definitions/Number [} 2067]
Origin: Trend Line Chart [} 379]
See also
Attribute getter: getYSubTickSteps [} 1706]
Attribute setter: setYSubTickSteps [} 1706]
Note: Available since version 1.10
5.2.20.4 Themed Resources
These resources cannot be defined per instance, but only for several/all trend line charts via the theme file
[} 531]. If you really want to change only one instance, you must create a class [} 528] for it.
Note: Available since version 1.10
5.2.20.4.1 YAxisGenerated
This is the axis definition that is used for Y-axes if nothing is defined in the attribute YAxis [} 405].
Scheme: tchmi:framework#/definitions/ChartYAxisDefinition [} 2090]
Origin: Trend Line Chart [} 379]
Note: Available since version 1.10
5.2.21 Video
Video can be played with the video control. The supported video formats are defined by the browser used.
Attributes
Category: Colors
Name Description
BackgroundColor [} 433] Definition of the background color
BorderColor [} 432] Definition of the border color of the control
Category: Layout
Name Description
Left [} 426] Definition of the distance from the left side to the left
side of the surrounding control
LeftUnit [} 426] Definition of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Top [} 426] Definition of the distance from the top side to the top
side of the surrounding control
TopUnit [} 426] Selection of the unit of the distance to the top side of
the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Right [} 429] Definition of the distance from the right side to the
right side of the surrounding control
RightUnit [} 429] Selection of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Bottom [} 429] Definition of the distance from the bottom side to the
bottom side of the surrounding control
BottomUnit [} 429] Selection of the unit of the distance to the bottom
side of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Width [} 427] Definition of the external width of the control
WidthUnit [} 427] Selection of the unit of the width:
· Pixels for an absolute width
· Percent for a relative width
Height [} 428] Definition of the external height of the control
HeightUnit [} 428] Selection of the unit of the height:
· Pixels for an absolute height
· Percent for a relative height
MaxWidth [} 437] Definition of the maximum width if the control size is
defined as dynamic
MaxWidthUnit [} 437] Selection of the unit of the maximum width:
· Pixels for an absolute value
· Percent for a relative value
MinWidth [} 438] Definition of the minimum width if the control size is
defined as dynamic
MinWidthUnit [} 438] Selection of the unit of the minimum width:
· Pixels for an absolute value
· Percent for a relative value
MaxHeight [} 436] Definition of the maximum height if the control size is
defined as dynamic
MaxHeightUnit [} 437] Selection of the unit of the maximum height:
· Pixels for an absolute value
· Percent for a relative value
MinHeight [} 436] Definition of the minimum height if the control size is
defined as dynamic
Name Description
MinHeightUnit [} 436] Selection of the unit of the minimum height:
· Pixels for an absolute value
· Percent for a relative value
RenderedLeft [} 430] Calculated distance in pixels from the left side to the
left side of the surrounding control
RenderedTop [} 430] Calculated distance in pixels from the top side to the
top side of the surrounding control
RenderedRight [} 431] Calculated distance in pixels from the right side to the
right side of the surrounding control
RenderedBottom [} 430] Calculated distance in pixels from the bottom side to
the bottom side of the surrounding control
RenderedWidth [} 431] Calculated width of the control in pixels
RenderedHeight [} 431] Calculated height of the control in pixels
GridRowIndex [} 432] Definition of the row of a grid in which the control is to
be displayed
GridColumnIndex [} 432] Definition of the column of a grid in which the control
is to be displayed
Opacity [} 438] Definition of the transparency of the entire control
Visibility [} 439] Selection of the visibility of a control:
· Visible: Control is visible
· Hidden: Control is invisible, but is drawn – controls
behind it cannot be operated
· Collapsed: Control is invisible and is not drawn –
controls behind it can be operated
ZIndex [} 440] Definition of the position on the Z-axis
Transform [} 439] Definition of a transformation of a control:
· Translate: Translate in X-, Y-, Z-direction
· Rotate: Rotate by an angle
· Scale: Zoom by a factor
· Skew: Sides shown skewed by an angle
· Origin: Set the origin of the transformation relative
to the position of the control
· Perspective: Set the perspective of the
transformations of all child elements
BoxShadow [} 440] Definition of a shadow
WidthMode [} 413] Selection of the method of calculating the width:
· Value: The width is defined by the width entered.
· Parent: The width is defined by the distance to the
upper and lower sides of the parent element. The
'Width' attribute is ignored in all calculations!
· Content: The width is calculated from the height
while maintaining the aspect ratio of the video. If
the attributes 'Width Mode' and 'Height Mode' are
set to Content, the video is drawn in its original
size. The 'Width' attribute is ignored in all
calculations!
HeightMode [} 413] Selection of the method of calculating the height:
· Value: The height is defined by the height entered.
· Parent: The height is defined by the distance to the
upper and lower side of the parent element. The
'Height' attribute is ignored in all calculations!
Name Description
· Content: The height is calculated from the width
while maintaining the aspect ratio of the video. If
the attributes 'Width Mode [} 409]' and 'Height
Mode' are set to Content, the video is drawn in its
original size. The 'Height' attribute is ignored in all
calculations!
OriginalWidth [} 416] Plays back the original width of the video or 0 if it is
not available.
OriginalHeight [} 416] Plays back the original height of the video or 0 if it is
not available.
Category: Common
Name Description
SrcList [} 414] Definition of a list of videos that can be played back
IsEnabled [} 425] Selection of whether a control should be activated
Id [} 424] Definition of the name of the control
Type [} 439] Type name of the control.
ClassNames [} 425] Definition of control classes
IsAttached [} 425] If a control is logically assigned in the DOM.
ToolTip [} 438] Definition of the tool tip for the control
Category: Border
Name Description
BorderRadius [} 433] Definition of the radius of the four corners to round
them off
BorderStyle [} 433] Selection of the border style of the four sides of the
control
BorderWidth [} 433] Definition of the border width of the four sides of the
control
Category: Background Image
Name Description
BackgroundImage [} 434] Definition of an image that is located above the
background color
BackgroundImageHeight [} 435] Definition of the height of the background image
BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background
image:
· Pixels for an absolute height
· Percent for a relative height
BackgroundImageWidth [} 434] Definition of the width of the background image
BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background
image:
· Pixels for an absolute width
· Percent for a relative width
BackgroundImagePadding [} 435] Definition of an additional distance between the
border of the control and background image for the
four sides
BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background
image within the control
BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the
background image within the control
Category: Video
Name Description
Volume [} 414] Definition of the volume of the video
Mute [} 414] Selecting whether the sound is to be switched off
Playbackrate [} 415] Definition of a playback rate. The normal playback
speed is multiplied by this value to obtain the current
rate.
CurrentTime [} 415] Definition of the current playback time of the video
Duration [} 416] Plays the length of the video in seconds or 0 if it is
not available.
isEnded [} 415] Returns a Boolean value indicating whether playback
has finished or not.
isPlaying [} 415] Returns a Boolean value indicating whether the video
is currently playing or not.
Category: Player
Name Description
Controls [} 416] Selecting whether the integrated control elements are
to be displayed
Autoplay [} 417] Selecting whether the video should be started
automatically
Loop [} 417] Selecting whether the video is to be repeated
automatically on a permanent basis
Poster [} 417] Definition of a startup image to be displayed until the
operator starts or rewinds the video. If nothing is
specified here, nothing is displayed until the first
image of the video has been loaded.
Events
Category: Control
Name Description
onLoadedData [} 418] The video was loaded successfully.
onError [} 418] The video was not loaded successfully.
onVolumeChange [} 418] The volume of the video has been changed.
onDurationChange [} 418] The duration of the video has changed.
onIsEndedChange [} 418] The video was terminated.
onIsPlayingChange [} 418] The video has changed its playback status.
onTimeUpdate [} 418] The playback position has been changed.
Category: Framework
Name Description
onAttached [} 440] The control was added to the display.
onDetached [} 440] The control was removed from the display.
onInitialized [} 441] The control was initialized.
onMoved [} 443] The control was moved in relation to the browser
window.
onResized [} 444] The size of the control was changed.
Category: Operator
Name Description
onPressed [} 443] A mouse click was executed or a touch screen was
briefly touched.
onMouseClick [} 441] The left mouse button was clicked over the control
and released.
onMouseDoubleClick [} 441] The left mouse button was clicked twice over the
control and released.
onMouseRightClick [} 442] The right mouse button was clicked over the control
and released.
onMouseDown [} 441] A mouse button was depressed over the control.
onMouseEnter [} 442] The mouse pointer was moved over the control.
onMouseLeave [} 442] The mouse pointer has left the control.
onMouseUp [} 443] A mouse button was released over the control.
onMouseDownLeft [} 441] The left mouse button was depressed over the
control.
onMouseDownRight [} 441] The right mouse button was depressed over the
control.
onMouseMove [} 442] The mouse was moved over the control.
onMouseOver [} 442] The mouse pointer was moved over the control or
one of its children.
onMouseOut [} 442] The mouse pointer has left the control or one of its
child controls.
onMouseUpLeft [} 443] The left mouse button was released over the control.
onMouseUpRight [} 443] The right mouse button was released over the
control.
onMouseWheel [} 443] The mouse wheel was moved over the control.
onTouchStart [} 444] A finger/stylus was placed against a touch screen.
onTouchMove [} 444] A finger/stylus was moved on a touch screen.
onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.
onTouchCancel [} 444] An interaction with a touch screen was aborted.
Access rights
Name Description
observe [} 444] Determines whether the control is generally
observable.
operate [} 445] Determines whether the control is generally operable.
Inheritance hierarchy
Control [} 419]
Video
See also
API reference [} 1736] for this control
5.2.21.1 Attributes
5.2.21.1.1 HeightMode
Selection of the method of calculating the height. The available options are:
· Value: The height is defined by the height entered.
· Parent: The height is defined by the distance to the top and bottom side. The Height attribute is
ignored in all calculations!
· Content: The height is calculated from the width while maintaining the aspect ratio of the video. If
Width Mode [} 413] and Height Mode are set to Content, the video is drawn in its original size.
Note: Learn how controls can be positioned and their size defined [} 127].
Scheme: tchmi:framework#/definitions/SizeModeWithContent [} 2133]
Origin: Video [} 407]
See also
Attribute getter: getHeightMode [} 1742]
Attribute setter: setHeightMode [} 1742]
Note: Available since version 1.8
5.2.21.1.2 WidthMode
Selection of the method of calculating the width. The available options are:
· Value: The width is defined by the width entered.
· Parent: The width is defined by the distance to the left and right side. The Width attribute is ignored in
all calculations!
· Content: The width is calculated from the height while maintaining the aspect ratio of the video. If
Width Mode and Height Mode [} 413] are set to Content, the video is drawn in its original size.
Note: Learn how controls can be positioned and their size defined [} 127].
Scheme: tchmi:framework#/definitions/SizeModeWithContent [} 2133]
Origin: Video [} 407]
See also
Attribute getter: getWidthMode [} 1743]
Attribute setter: setWidthMode [} 1743]
Note: Available since version 1.8
5.2.21.1.3 SrcList
A list of videos that the browser should play.
The videos are not played one after the other, but the browser tries to play each video until it finds a format
that it supports.
If the format type is not set, the browser tries to detect the code itself.
You can check the current status of browser support on the external website http://caniuse.com/.
Scheme: tchmi:framework#/definitions/VideoSourceList [} 2147]
Origin: Video [} 407]
See also
Attribute getter: getSrcList [} 1744]
Attribute setter: setSrcList [} 1744]
Note: Available since version 1.8
5.2.21.1.4 Volume
Volume of the video. The number 0 sets the video to mute while 1 means full volume.
Scheme: tchmi:framework#/definitions/Fraction [} 2109]
Origin: Video [} 407]
See also
Attribute getter: getVolume [} 1745]
Attribute setter: setVolume [} 1745]
Note: Available since version 1.8
5.2.21.1.5 Mute
Determines whether the sound is switched off.
Scheme: tchmi:general#/definitions/Boolean [} 2060]
Origin: Video [} 407]
See also
Attribute getter: getMute [} 1746]
Attribute setter: setMute [} 1746]
Note: Available since version 1.8
5.2.21.1.6 Playbackrate
The normal playback speed is multiplied by this value to obtain the current rate. Thus, the value 1.0
represents the normal speed.
Scheme: tchmi:general#/definitions/Number [} 2067]
Origin: Video [} 407]
See also
Attribute getter: getPlaybackrate [} 1747]
Attribute setter: setPlaybackrate [} 1747]
Note: Available since version 1.8
5.2.21.1.7 isEnded
Returns a Boolean value indicating whether playback has finished or not.
Scheme: tchmi:general#/definitions/Boolean [} 2060]
Origin: Video [} 407]
See also
Attribute getter: getIsEnded [} 1748]
The attribute can only be read and therefore has no setter.
Note: Available since version 1.8
5.2.21.1.8 isPlaying
Returns a Boolean value indicating whether the video is currently playing or not.
Scheme: tchmi:general#/definitions/Boolean [} 2060]
Origin: Video [} 407]
See also
Attribute getter: getIsPlaying [} 1748]
The attribute can only be read and therefore has no setter.
Note: Available since version 1.8
5.2.21.1.9 CurrentTime
The current playback time of the video.
Scheme: tchmi:general#/definitions/Number [} 2067]
Origin: Video [} 407]
See also
Attribute getter: getCurrentTime [} 1749]
Attribute setter: setCurrentTime [} 1749]
Note: Available since version 1.8
5.2.21.1.10 Duration
Plays the length of the video in seconds or 0 if it is not available.
Scheme: tchmi:general#/definitions/Number [} 2067]
Origin: Video [} 407]
See also
Attribute getter: getDuration [} 1749]
The attribute can only be read and therefore has no setter.
Note: Available since version 1.8
5.2.21.1.11 OriginalWidth
Plays back the original width of the video or 0 if it is not available.
Scheme: tchmi:general#/definitions/Number [} 2067]
Origin: Video [} 407]
See also
Attribute getter: getOriginalWidth [} 1750]
The attribute can only be read and therefore has no setter.
Note: Available since version 1.8
5.2.21.1.12 OriginalHeight
Plays back the original height of the video or 0 if it is not available.
Scheme: tchmi:general#/definitions/Number [} 2067]
Origin: Video [} 407]
See also
Attribute getter: getOriginalHeight [} 1750]
The attribute can only be read and therefore has no setter.
Note: Available since version 1.8
5.2.21.1.13 Controls
Determines whether control elements are to be displayed. The user can control playback, adjust the volume
and pause/resume the video.
Some browsers do not allow automatic [} 417] or application-based [} 1754] start of a video. You
should therefore carry out intensive tests to determine whether it makes sense to deactivate the
control elements.
Scheme: tchmi:general#/definitions/Boolean [} 2060]
Origin: Video [} 407]
See also
Attribute getter: getControls [} 1751]
Attribute setter: setControls [} 1751]
Note: Available since version 1.8
5.2.21.1.14 Autoplay
Specifies whether the video is to be started directly.
Caution: In some browsers this is not allowed by default. In part this is possible again when the sound is
switched off [} 414].
Scheme: tchmi:general#/definitions/Boolean [} 2060]
Origin: Video [} 407]
See also
Attribute getter: getAutoplay [} 1752]
Attribute setter: setAutoplay [} 1752]
Note: Available since version 1.8
5.2.21.1.15 Loop
When the video is finished, it starts again from the beginning.
Scheme: tchmi:general#/definitions/Boolean [} 2060]
Origin: Video [} 407]
See also
Attribute getter: getLoop [} 1753]
Attribute setter: setLoop [} 1753]
Note: Available since version 1.8
5.2.21.1.16 Poster
A URL representing an individual image that is displayed until the user plays or winds the video.
If this attribute is not set, nothing is displayed until the first video frame is available. From this point in time,
this first frame is used.
Schema: tchmi:general#/definitions/String [} 2069]
Origin: Video [} 407]
See also
Attribute getter: getPoster [} 1754]
Attribute setter: setPoster [} 1754]
Note: Available since version 1.8
5.2.21.2 Events
5.2.21.2.1 onError
The video was not loaded successfully.
Origin: Video [} 407]
Note: Available since version 1.8
5.2.21.2.2 onLoadedData
The video was loaded successfully.
Origin: Video [} 407]
Note: Available since version 1.8
5.2.21.2.3 onVolumeChange
The volume [} 414] of the video has been changed.
Origin: Video [} 407]
Note: Available since version 1.8
5.2.21.2.4 onDurationChange
The duration of the video [} 416] has changed.
Origin: Video [} 407]
Note: Available since version 1.8
5.2.21.2.5 onIsEndedChange
The video was terminated [} 415].
Origin: Video [} 407]
Note: Available since version 1.8
5.2.21.2.6 onIsPlayingChange
The video has changed its playback status [} 415].
Origin: Video [} 407]
Note: Available since version 1.8
5.2.21.2.7 onTimeUpdate
The playback position [} 415] has been changed.
Origin: Video [} 407]
Note: Available since version 1.8
5.3 System Controls
Note: Some display names of attributes have been renamed from version 1.10.
Name Description
Control [} 419] No instance of this class can be created. This page
serves only as a list of the attributes that this class
provides.
Base class of all controls.
Container Control [} 445] No instance of this class can be created. This page
serves only as a list of the attributes that this class
provides.
Base class for all controls that can contain controls.
Container [} 451] Container for other controls.
Content [} 456] No instance of this class can be created. This page
serves only as a list of the attributes that this class
provides.
A reusable container that can be loaded in a region.
Grid [} 461] Layout grid for controls that can react fluidly and
responsively.
HTML Host [} 472] Container for HTML content. Can be edited in the
HTML editor of the Designer.
Partial [} 476] No instance of this class can be created. This page
serves only as a list of the attributes that this class
provides.
A base class for reusable control containers.
Region [} 482] Container for content controls. (created via "Add new
file" in Solution View).
User Control [} 490] No instance of this class can be created. This page
serves only as a list of the attributes that this class
provides.
A reusable collection of controls.
User Control Host [} 495] No instance of this class can be created. This page
serves only as a list of the attributes that this class
provides.
Container for user controls.
View [} 501] No instance of this class can be created. This page
serves only as a list of the attributes that this class
provides.
Top-level control for a TcHmi visualization.
5.3.1 Control
No instance of this class can be created. This page serves only as a list of the attributes that this class
provides. It is the basic class of all controls.
Attributes
Category: Colors
Name Description
BackgroundColor [} 433] Definition of the background color
BorderColor [} 432] Definition of the border color of the control
Category: Layout
Name Description
Left [} 426] Definition of the distance from the left side to the left
side of the surrounding control
LeftUnit [} 426] Definition of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Top [} 426] Definition of the distance from the top side to the top
side of the surrounding control
TopUnit [} 426] Selection of the unit of the distance to the top side of
the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Right [} 429] Definition of the distance from the right side to the
right side of the surrounding control
RightUnit [} 429] Selection of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Bottom [} 429] Definition of the distance from the bottom side to the
bottom side of the surrounding control
BottomUnit [} 429] Selection of the unit of the distance to the bottom
side of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Width [} 427] Definition of the external width of the control
WidthUnit [} 427] Selection of the unit of the width:
· Pixels for an absolute width
· Percent for a relative width
Height [} 428] Definition of the external height of the control
HeightUnit [} 428] Selection of the unit of the height:
· Pixels for an absolute height
· Percent for a relative height
MaxWidth [} 437] Definition of the maximum width if the control size is
defined as dynamic
MaxWidthUnit [} 437] Selection of the unit of the maximum width:
· Pixels for an absolute value
· Percent for a relative value
MinWidth [} 438] Definition of the minimum width if the control size is
defined as dynamic
MinWidthUnit [} 438] Selection of the unit of the minimum width:
· Pixels for an absolute value
· Percent for a relative value
MaxHeight [} 436] Definition of the maximum height if the control size is
defined as dynamic
MaxHeightUnit [} 437] Selection of the unit of the maximum height:
· Pixels for an absolute value
· Percent for a relative value
MinHeight [} 436] Definition of the minimum height if the control size is
defined as dynamic
Name Description
MinHeightUnit [} 436] Selection of the unit of the minimum height:
· Pixels for an absolute value
· Percent for a relative value
RenderedLeft [} 430] Calculated distance in pixels from the left side to the
left side of the surrounding control
RenderedTop [} 430] Calculated distance in pixels from the top side to the
top side of the surrounding control
RenderedRight [} 431] Calculated distance in pixels from the right side to the
right side of the surrounding control
RenderedBottom [} 430] Calculated distance in pixels from the bottom side to
the bottom side of the surrounding control
RenderedWidth [} 431] Calculated width of the control in pixels
RenderedHeight [} 431] Calculated height of the control in pixels
GridRowIndex [} 432] Definition of the row of a grid in which the control is to
be displayed
GridColumnIndex [} 432] Definition of the column of a grid in which the control
is to be displayed
Opacity [} 438] Definition of the transparency of the entire control
Visibility [} 439] Selection of the visibility of a control:
· Visible: Control is visible
· Hidden: Control is invisible, but is drawn – controls
behind it cannot be operated
· Collapsed: Control is invisible and is not drawn –
controls behind it can be operated
ZIndex [} 440] Definition of the position on the Z-axis
Transform [} 439] Definition of a transformation of a control:
· Translate: Translate in X-, Y-, Z-direction
· Rotate: Rotate by an angle
· Scale: Zoom by a factor
· Skew: Sides shown skewed by an angle
· Origin: Set the origin of the transformation relative
to the position of the control
· Perspective: Set the perspective of the
transformations of all child elements
BoxShadow [} 440] Definition of a shadow
WidthMode [} 427] Selection of the method of calculating the width:
· Value: The width is defined by the width entered.
· Parent: The width is defined by the distance to the
left and right side of the parent element. The
"Width" attribute is ignored in all calculations!
HeightMode [} 428] Selection of the method of calculating the height:
· Value: The height is defined by the height entered.
· Parent: The height is defined by the distance to the
top and bottom side of the parent element. The
"Height" attribute is ignored in all calculations!
Category: Common
Name Description
Id [} 424] Definition of the name of the control
Type [} 439] Type name of the control.
ClassNames [} 425] Definition of control classes
IsAttached [} 425] If a control is logically assigned in the DOM.
ToolTip [} 438] Definition of the tool tip for the control
IsEnabled [} 425] Selection of whether a control should be activated
Category: Border
Name Description
BorderRadius [} 433] Definition of the radius of the four corners to round
them off
BorderStyle [} 433] Selection of the border style of the four sides of the
control
BorderWidth [} 433] Definition of the border width of the four sides of the
control
Category: Background Image
Name Description
BackgroundImage [} 434] Definition of an image that is located above the
background color
BackgroundImageHeight [} 435] Definition of the height of the background image
BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background
image:
· Pixels for an absolute height
· Percent for a relative height
BackgroundImageWidth [} 434] Definition of the width of the background image
BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background
image:
· Pixels for an absolute width
· Percent for a relative width
BackgroundImagePadding [} 435] Definition of an additional distance between the
border of the control and background image for the
four sides
BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background
image within the control
BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the
background image within the control
Events
Category: Framework
Name Description
onAttached [} 440] The control was added to the display.
onDetached [} 440] The control was removed from the display.
onInitialized [} 441] The control was initialized.
onMoved [} 443] The control was moved in relation to the browser
window.
onResized [} 444] The size of the control was changed.
Category: Operator
Name Description
onPressed [} 443] A mouse click was executed or a touch screen was
briefly touched.
onMouseClick [} 441] The left mouse button was clicked over the control
and released.
onMouseDoubleClick [} 441] The left mouse button was clicked twice over the
control and released.
onMouseRightClick [} 442] The right mouse button was clicked over the control
and released.
onMouseDown [} 441] A mouse button was depressed over the control.
onMouseEnter [} 442] The mouse pointer was moved over the control.
onMouseLeave [} 442] The mouse pointer has left the control.
onMouseUp [} 443] A mouse button was released over the control.
onMouseDownLeft [} 441] The left mouse button was depressed over the
control.
onMouseDownRight [} 441] The right mouse button was depressed over the
control.
onMouseMove [} 442] The mouse was moved over the control.
onMouseOver [} 442] The mouse pointer was moved over the control or
one of its children.
onMouseOut [} 442] The mouse pointer has left the control or one of its
child controls.
onMouseUpLeft [} 443] The left mouse button was released over the control.
onMouseUpRight [} 443] The right mouse button was released over the
control.
onMouseWheel [} 443] The mouse wheel was moved over the control.
onTouchStart [} 444] A finger/stylus was placed against a touch screen.
onTouchMove [} 444] A finger/stylus was moved on a touch screen.
onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.
onTouchCancel [} 444] An interaction with a touch screen was aborted.
Access rights
Name Description
observe [} 444] Determines whether the control is generally
observable.
operate [} 445] Determines whether the control is generally operable.
Inheritance hierarchy
Control
See also
API reference [} 1051] for this control
5.3.1.1 Attributes
5.3.1.1.1 Id
Name of the control.
Schema: tchmi:framework#/definitions/Id [} 2118]
Origin: Control [} 419]
See also
Attribute getter: getId [} 1056]
The attribute can only be read and therefore has no setter.
Note: Available since version 1.8
5.3.1.1.2 IsEnabled
Activation status of a control. Only active controls react to mouse and touch.
Schema: tchmi:general#/definitions/Boolean [} 2060]
Origin: Control [} 419]
See also
Attribute getter: getIsEnabled [} 1056]
Attribute setter: setIsEnabled [} 1057]
Note: Available since version 1.8
5.3.1.1.3 ClassNames
Definition of the class(es) of the control. These classes can be addressed within the theme.
Schema: tchmi:framework#/definitions/ClassNameList [} 2093]
Origin: Control [} 419]
See also
Attribute getter: getClassNames [} 1059]
Attribute setter: setClassNames [} 1060]
Note: Available since version 1.10
5.3.1.1.4 IsAttached
Indicates the status regarding whether the control is currently logically integrated inside the DOM.
Schema: tchmi:general#/definitions/Boolean [} 2060]
Origin: Control [} 419]
See also
Attribute getter: getIsAttached [} 1060]
The attribute can only be read and therefore has no setter.
Note: Available since version 1.8
5.3.1.1.5 Left
Definition of the distance from the left side to the left side of the surrounding control. This value may be
empty if Width [} 427] and Right [} 429] are filled out.
Note: Learn how controls can be positioned and their size defined [} 127].
Schema: tchmi:framework#/definitions/MeasurementValue [} 2123]
Origin: Control [} 419]
See also
Attribute getter: getLeft [} 1061]
Attribute setter: setLeft [} 1061]
Note: Available since version 1.8
5.3.1.1.6 LeftUnit
Pixels, or percent for relative positioning.
Schema: tchmi:framework#/definitions/MeasurementUnit [} 2123]
Origin: Control [} 419]
See also
Attribute getter: getLeftUnit [} 1061]
Attribute setter: setLeftUnit [} 1062]
Note: Available since version 1.8
5.3.1.1.7 Top
Definition of the distance from the top side to the top side of the surrounding control. This value may be
empty if Height [} 428] and Bottom [} 429] are filled out.
Note: Learn how controls can be positioned and their size defined [} 127].
Schema: tchmi:framework#/definitions/MeasurementValue [} 2123]
Origin: Control [} 419]
See also
Attribute getter: getTop [} 1062]
Attribute setter: setTop [} 1063]
Note: Available since version 1.8
5.3.1.1.8 TopUnit
Pixels, or percent for relative positioning.
Schema: tchmi:framework#/definitions/MeasurementUnit [} 2123]
Origin: Control [} 419]
See also
Attribute getter: getTopUnit [} 1063]
Attribute setter: setTopUnit [} 1064]
Note: Available since version 1.8
5.3.1.1.9 Width
External width of the control. Left [} 426] and Right [} 429]are used to calculate the size if this value is
empty. This value is only interpreted if the attribute Width Mode [} 427] has the value Value.
Note: Learn how controls can be positioned and their size defined [} 127].
Schema: tchmi:framework#/definitions/MeasurementValue [} 2123]
Origin: Control [} 419]
See also
Attribute getter: getWidth [} 1066]
Attribute setter: setWidth [} 1067]
Note: Available since version 1.8
5.3.1.1.10 WidthUnit
Pixels, or percent for relative positioning.
Schema: tchmi:framework#/definitions/MeasurementUnit [} 2123]
Origin: Control [} 419]
See also
Attribute getter: getWidthUnit [} 1067]
Attribute setter: setWidthUnit [} 1067]
Note: Available since version 1.8
5.3.1.1.11 WidthMode
Selection of the method of calculating the width. The available options are:
· Value: The width is defined by the width entered.
· Parent: The width is defined by the distance to the left and right side. The Width attribute is ignored in
all calculations!
Note: Learn how controls can be positioned and their size defined [} 127].
Schema: tchmi:framework#/definitions/SizeMode [} 2133]
Origin: Control [} 419]
See also
Attribute getter: getWidthMode [} 1069]
Attribute setter: setWidthMode [} 1069]
Note: Available since version 1.8
5.3.1.1.12 Height
External height of the control. Top [} 426] and Bottom [} 429] attributes are used to calculate the size if this
value is empty. This value is only interpreted if the attribute Height Mode [} 428] has the value Value.
Note: Learn how controls can be positioned and their size defined [} 127].
Schema: tchmi:framework#/definitions/MeasurementValue [} 2123]
Origin: Control [} 419]
See also
Attribute getter: getHeight [} 1064]
Attribute setter: setHeight [} 1065]
Note: Available since version 1.8
5.3.1.1.13 HeightUnit
Pixels, or percent for relative positioning.
Schema: tchmi:framework#/definitions/MeasurementUnit [} 2123]
Origin: Control [} 419]
See also
Attribute getter: getHeightUnit [} 1065]
Attribute setter: setHeightUnit [} 1066]
5.3.1.1.14 HeightMode
Selection of the method of calculating the height. The available options are:
· Value: The height is defined by the height entered.
· Parent: The height is defined by the distance to the top and bottom side. The Height attribute is
ignored in all calculations!
Note: Learn how controls can be positioned and their size defined [} 127].
Schema: tchmi:framework#/definitions/SizeMode [} 2133]
Origin: Control [} 419]
See also
Attribute getter: getHeightMode [} 1068]
Attribute setter: setHeightMode [} 1068]
Note: Available since version 1.8
5.3.1.1.15 Right
Definition of the distance from the right side to the right side of the surrounding control. This value is only
used if one of the two attributes Left [} 426] and Width [} 427]is not used.
Note: Learn how controls can be positioned and their size defined [} 127].
Schema: tchmi:framework#/definitions/MeasurementValue [} 2123]
Origin: Control [} 419]
See also
Attribute getter: getRight [} 1072]
Attribute setter: setRight [} 1072]
Note: Available since version 1.8
5.3.1.1.16 RightUnit
Pixels, or percent for relative positioning.
Schema: tchmi:framework#/definitions/MeasurementUnit [} 2123]
Origin: Control [} 419]
See also
Attribute getter: getRightUnit [} 1073]
Attribute setter: setRightUnit [} 1073]
Note: Available since version 1.8
5.3.1.1.17 Bottom
Definition of the distance from the bottom side to the bottom side of the surrounding control. This value is
only used if one of the two attributes Top [} 426] and Height [} 428] is not used.
Note: Learn how controls can be positioned and their size defined [} 127].
Schema: tchmi:framework#/definitions/MeasurementValue [} 2123]
Origin: Control [} 419]
See also
Attribute getter: getBottom [} 1070]
Attribute setter: setBottom [} 1070]
Note: Available since version 1.8
5.3.1.1.18 BottomUnit
Pixels, or percent for relative positioning.
Schema: tchmi:framework#/definitions/MeasurementUnit [} 2123]
Origin: Control [} 419]
See also
Attribute getter: getBottomUnit [} 1071]
Attribute setter: setBottomUnit [} 1071]
Note: Available since version 1.8
5.3.1.1.19 RenderedLeft
Returns the calculated distance in pixels between the left side and the left side of the higher-level control.
This value always returns a value, irrespective of the positioning of a control.
This value very probably has rounding inaccuracies.
Note: Learn how controls can be positioned and their size defined [} 127].
Schema: tchmi:framework#/definitions/MeasurementValue [} 2123]
Origin: Control [} 419]
See also
Attribute getter: getRenderedLeft [} 1081]
The attribute can only be read and therefore has no setter.
Note: Available since version 1.10
5.3.1.1.20 RenderedTop
Returns the calculated distance in pixels between the top side and the top side of the higher-level control.
This value always returns a value, irrespective of the positioning of a control.
This value very probably has rounding inaccuracies.
Note: Learn how controls can be positioned and their size defined [} 127].
Schema: tchmi:framework#/definitions/MeasurementValue [} 2123]
Origin: Control [} 419]
See also
Attribute getter: getRenderedTop [} 1081]
The attribute can only be read and therefore has no setter.
Note: Available since version 1.10
5.3.1.1.21 RenderedBottom
Returns the calculated distance in pixels between the bottom side and the bottom side of the higher-level
control. This value always returns a value, irrespective of the positioning of a control.
This value very probably has rounding inaccuracies.
Note: Learn how controls can be positioned and their size defined [} 127].
Schema: tchmi:framework#/definitions/MeasurementValue [} 2123]
Origin: Control [} 419]
See also
Attribute getter: getRenderedBottom [} 1082]
The attribute can only be read and therefore has no setter.
Note: Available since version 1.10
5.3.1.1.22 RenderedRight
Returns the calculated distance in pixels between the right side and the right side of the higher-level control.
This value always returns a value, irrespective of the positioning of a control.
This value very probably has rounding inaccuracies.
Note: Learn how controls can be positioned and their size defined [} 127].
Schema: tchmi:framework#/definitions/MeasurementValue [} 2123]
Origin: Control [} 419]
See also
Attribute getter: getRenderedRight [} 1082]
The attribute can only be read and therefore has no setter.
Note: Available since version 1.10
5.3.1.1.23 RenderedWidth
Returns the calculated width of the control in pixels. This value always returns a value, irrespective of the
positioning of a control.
This value very probably has rounding inaccuracies.
Note: Learn how controls can be positioned and their size defined [} 127].
Schema: tchmi:framework#/definitions/MeasurementValue [} 2123]
Origin: Control [} 419]
See also
Attribute getter: getRenderedWidth [} 1083]
The attribute can only be read and therefore has no setter.
Note: Available since version 1.10
5.3.1.1.24 RenderedHeight
Returns the calculated height of the control in pixels. This value always returns a value, irrespective of the
positioning of a control.
This value very probably has rounding inaccuracies.
Note: Learn how controls can be positioned and their size defined [} 127].
Schema: tchmi:framework#/definitions/MeasurementValue [} 2123]
Origin: Control [} 419]
See also
Attribute getter: getRenderedHeight [} 1083]
The attribute can only be read and therefore has no setter.
Note: Available since version 1.10
5.3.1.1.25 GridColumnIndex
Definition of the column of a grid [} 461] in which the control is to be displayed.
The attribute has no effect if the control is not in such a container.
Schema: tchmi:general#/definitions/UDINT [} 2070]
Origin: Control [} 419]
See also
Attribute getter: getGridColumnIndex [} 1058]
Attribute setter: setGridColumnIndex [} 1059]
Note: Available since version 1.8
5.3.1.1.26 GridRowIndex
Definition of the row of a grid [} 461] in which the control is to be displayed.
The attribute has no effect if the control is not in such a container.
Schema: tchmi:general#/definitions/UDINT [} 2070]
Origin: Control [} 419]
See also
Attribute getter: getGridRowIndex [} 1057]
Attribute setter: setGridRowIndex [} 1058]
Note: Available since version 1.8
5.3.1.1.27 BorderColor
Border color
A border is only displayed if Border Color, Border Width [} 433] and Border Style [} 433] have been set.
Schema: tchmi:framework#/definitions/Color [} 2094]
Origin: Control [} 419]
See also
Attribute getter: getBorderColor [} 1084]
Attribute setter: setBorderColor [} 1084]
Note: Available since version 1.8
Note: Only SolidColor is possible before TcHmi version 1.10.
5.3.1.1.28 BorderWidth
Definition of the border width of the four sides of the control.
A border is only displayed if Border Color [} 432], Border Width and Border Style [} 433] have been set.
Note: Learn how controls can be positioned and their size defined [} 127].
Schema: tchmi:framework#/definitions/BorderWidth [} 2077]
Origin: Control [} 419]
See also
Attribute getter: getBorderWidth [} 1085]
Attribute setter: setBorderWidth [} 1085]
Note: Available since version 1.8
5.3.1.1.29 BorderStyle
Selection of the border style of the four sides of the control. The possible settings are none, solid line, dotted
line or dashed line
A border is only displayed if Border Color, Border Width [} 433] and Border Style have been set.
Schema: tchmi:framework#/definitions/BorderStyle [} 2076]
Origin: Control [} 419]
See also
Attribute getter: getBorderStyle [} 1085]
Attribute setter: setBorderStyle [} 1086]
Note: Available since version 1.8
5.3.1.1.30 BorderRadius
Definition of the radius of the four corners of a border to round them off.
Schema: tchmi:framework#/definitions/BorderRadius [} 2075]
Origin: Control [} 419]
See also
Attribute getter: getBorderRadius [} 1086]
Attribute setter: setBorderRadius [} 1087]
Note: Available since version 1.8
5.3.1.1.31 BackgroundColor
Definition of the background color. This is displayed if no background image or a transparent background
image is set.
Schema: tchmi:framework#/definitions/Color [} 2094]
Origin: Control [} 419]
See also
Attribute getter: getBackgroundColor [} 1087]
Attribute setter: setBackgroundColor [} 1088]
Note: Available since version 1.8
5.3.1.1.32 BackgroundImage
An image that is above the background color.
Schema: tchmi:framework#/definitions/Path [} 2128]
Origin: Control [} 419]
See also
Attribute getter: getBackgroundImage [} 1088]
Attribute setter: setBackgroundImage [} 1089]
Note: Available since version 1.8
5.3.1.1.33 BackgroundImageWidth
Numerical value of the width of the background image.
Schema: tchmi:framework#/definitions/MeasurementValue [} 2123]
Origin: Control [} 419]
See also
Attribute getter: getBackgroundImageWidth [} 1090]
Attribute setter: setBackgroundImageWidth [} 1091]
Note: Available since version 1.8
5.3.1.1.34 BackgroundImageWidthUnit
Pixels, or percent for relative positioning.
Schema: tchmi:framework#/definitions/MeasurementUnit [} 2123]
Origin: Control [} 419]
See also
Attribute getter: getBackgroundImageWidthUnit [} 1091]
Attribute setter: setBackgroundImageWidthUnit [} 1091]
Note: Available since version 1.8
5.3.1.1.35 BackgroundImageHeight
Numerical value of the height of the background image.
Schema: tchmi:framework#/definitions/MeasurementValue [} 2123]
Origin: Control [} 419]
See also
Attribute getter: getBackgroundImageHeight [} 1092]
Attribute setter: setBackgroundImageHeight [} 1092]
Note: Available since version 1.8
5.3.1.1.36 BackgroundImageHeightUnit
Pixels, or percent for relative positioning.
Schema: tchmi:framework#/definitions/MeasurementUnit [} 2123]
Origin: Control [} 419]
See also
Attribute getter: getBackgroundImageHeightUnit [} 1089]
Attribute setter: setBackgroundImageHeightUnit [} 1090]
Note: Available since version 1.8
5.3.1.1.37 BackgroundImagePadding
Definition of an additional distance between the border of the control and background image for the four
sides.
Schema: tchmi:framework#/definitions/Padding [} 2127]
Origin: Control [} 419]
See also
Attribute getter: getBackgroundImagePadding [} 1095]
Attribute setter: setBackgroundImagePadding [} 1095]
Note: Available since version 1.8
5.3.1.1.38 BackgroundImageHorizontalAlignment
Definition of the alignment of the background image within the control
Schema: tchmi:framework#/definitions/HorizontalAlignment [} 2118]
Origin: Control [} 419]
See also
Attribute getter: getBackgroundImageHorizontalAlignment [} 1093]
Attribute setter: setBackgroundImageHorizontalAlignment [} 1093]
Note: Available since version 1.8
5.3.1.1.39 BackgroundImageVerticalAlignment
Definition of the alignment of the background image within the control
Schema: tchmi:framework#/definitions/VerticalAlignment [} 2147]
Origin: Control [} 419]
See also
Attribute getter: getBackgroundImageVerticalAlignment [} 1094]
Attribute setter: setBackgroundImageVerticalAlignment [} 1094]
Note: Available since version 1.8
5.3.1.1.40 MinHeight
Definition of the minimum height if the control size is defined as dynamic.
Maximum Height [} 436] overwrites the calculated height, but Minimum Height overwrites Maximum Height.
Note: Learn how controls can be positioned and their size defined [} 127].
Schema: tchmi:framework#/definitions/MeasurementValue [} 2123]
Origin: Control [} 419]
See also
Attribute getter: getMinHeight [} 1075]
Attribute setter: setMinHeight [} 1076]
Note: Available since version 1.8
5.3.1.1.41 MinHeightUnit
Pixels, or percent for relative positioning.
Schema: tchmi:framework#/definitions/MeasurementUnit [} 2123]
Origin: Control [} 419]
See also
Attribute getter: getMinHeightUnit [} 1076]
Attribute setter: setMinHeightUnit [} 1077]
Note: Available since version 1.8
5.3.1.1.42 MaxHeight
Definition of the maximum height if the control size is defined as dynamic.
Maximum Height overwrites the calculated height, but Minimum Height [} 436] overwrites Maximum Height.
Note: Learn how controls can be positioned and their size defined [} 127].
Schema: tchmi:framework#/definitions/MeasurementValue [} 2123]
Origin: Control [} 419]
See also
Attribute getter: getMaxHeight [} 1079]
Attribute setter: setMaxHeight [} 1079]
Note: Available since version 1.8
5.3.1.1.43 MaxHeightUnit
Pixels, or percent for relative positioning.
Schema: tchmi:framework#/definitions/MeasurementUnit [} 2123]
Origin: Control [} 419]
See also
Attribute getter: getMaxHeightUnit [} 1080]
Attribute setter: setMaxHeightUnit [} 1080]
Note: Available since version 1.8
5.3.1.1.44 MaxWidth
Definition of the maximum width if the control size is defined as dynamic.
Maximum Width overwrites the calculated width, but Minimum Width [} 438] overwrites Maximum Width.
Note: Learn how controls can be positioned and their size defined [} 127].
Schema: tchmi:framework#/definitions/MeasurementValue [} 2123]
Origin: Control [} 419]
See also
Attribute getter: getMaxWidth [} 1077]
Attribute setter: setMaxWidth [} 1078]
Note: Available since version 1.8
5.3.1.1.45 MaxWidthUnit
Pixels, or percent for relative positioning.
Schema: tchmi:framework#/definitions/MeasurementUnit [} 2123]
Origin: Control [} 419]
See also
Attribute getter: getMaxWidthUnit [} 1078]
Attribute setter: setMaxWidthUnit [} 1079]
Note: Available since version 1.8
5.3.1.1.46 MinWidth
Definition of the minimum width if the control size is defined as dynamic.
Maximum Width overwrites the calculated width, but Minimum Width [} 437] overwrites Maximum Width.
Note: Learn how controls can be positioned and their size defined [} 127].
Schema: tchmi:framework#/definitions/MeasurementValue [} 2123]
Origin: Control [} 419]
See also
Attribute getter: getMinWidth [} 1073]
Attribute setter: setMinWidth [} 1074]
Note: Available since version 1.8
5.3.1.1.47 MinWidthUnit
Pixels, or percent for relative positioning.
Schema: tchmi:framework#/definitions/MeasurementUnit [} 2123]
Origin: Control [} 419]
See also
Attribute getter: getMinWidthUnit [} 1074]
Attribute setter: setMinWidthUnit [} 1075]
Note: Available since version 1.8
5.3.1.1.48 Opacity
Transparency of the entire control.
The number 0 sets the control to fully transparent, while 1 means fully visible.
Schema: tchmi:framework#/definitions/Fraction [} 2109]
Origin: Control [} 419]
See also
Attribute getter: getOpacity [} 1097]
Attribute setter: setOpacity [} 1097]
Note: Available since version 1.8
5.3.1.1.49 Tooltip
Tool tip for the control.
This is displayed for a short time when the mouse is held above a control.
Schema: tchmi:general#/definitions/String [} 2069]
Origin: Control [} 419]
See also
Attribute getter: getTooltip [} 1099]
Attribute setter: setTooltip [} 1100]
Note: Available since version 1.8
5.3.1.1.50 Transform
Transforms a control.
The control can be rotated, scaled, translated or skewed.
Furthermore, the origin of the transformation and the perspective can be set once.
Schema: tchmi:framework#/definitions/TransformList [} 2135]
Origin: Control [} 419]
See also
Attribute getter: getTransform [} 1097]
Attribute setter: setTransform [} 1098]
Note: Available since version 1.8
5.3.1.1.51 Type
Type name of the control.
Schema: tchmi:framework#/definitions/ControlType [} 2098]
Origin: Control [} 419]
See also
Attribute getter: getType [} 1101]
The attribute can only be read and therefore has no setter.
Note: Available since version 1.8
5.3.1.1.52 Visibility
Visibility of a control.
· The default value Visible displays the control directly.
· If the setting is Hide, the control continues to react to the mouse or to touches. It is also involved in the
size calculations with fluid designs.
· If Collapsed is used, the control doesn't use up any space, not does it receive any mouse interaction
or touches.
Schema: tchmi:framework#/definitions/Visibility [} 2148]
Origin: Control [} 419]
See also
Attribute getter: getVisibility [} 1096]
Attribute setter: setVisibility [} 1096]
Note: Available since version 1.8
5.3.1.1.53 ZIndex
Definition of the position on the Z-axis.
The following applies: The higher the entry, the more the control is in the foreground. A control with a larger
Z index hides a control with a smaller Z index.
Note: Learn how controls can be positioned and their size defined [} 127].
Schema: tchmi:general#/definitions/UDINT [} 2070]
Origin: Control [} 419]
See also
Attribute getter: getZindex [} 1098]
Attribute setter: setZindex [} 1099]
Note: Available since version 1.8
5.3.1.1.54 BoxShadow
Definition of a box shadow.
Schema: tchmi:framework#/definitions/BoxShadowList [} 2078]
Origin: Control [} 419]
See also
Attribute getter: getBoxShadow [} 1100]
Attribute setter: setBoxShadow [} 1101]
Note: Available since version 1.8
5.3.1.2 Events
5.3.1.2.1 onAttached
The control was added to the display.
Origin: Control [} 419]
Note: Available since version 1.8
5.3.1.2.2 onDetached
The control was removed from the display.
Origin: Control [} 419]
Note: Available since version 1.8
5.3.1.2.3 onInitialized
The control was initialized. Not all of the values of the binding are available yet.
Origin: Control [} 419]
Note: Available since version 1.8
5.3.1.2.4 onMouseClick
The left mouse button was clicked over the control and released.
This event is also triggered by interaction with a touch screen. This can be prevented by enabling
'preventDefault' [} 48] on the corresponding touch event.
Origin: Control [} 419]
Note: Available since version 1.8
5.3.1.2.5 onMouseDoubleClick
The left mouse button was clicked twice over the control and released.
Origin: Control [} 419]
Note: Available since version 1.8
5.3.1.2.6 onMouseDown
A mouse button was depressed over the control.
This event is also triggered by interaction with a touch screen. This can be prevented by enabling
'preventDefault' [} 48] on the corresponding touch event.
Origin: Control [} 419]
Note: Available since version 1.8
5.3.1.2.7 onMouseDownLeft
The left mouse button was depressed over the control.
This event is also triggered by interaction with a touch screen. This can be prevented by enabling
'preventDefault' [} 48] on the corresponding touch event.
Origin: Control [} 419]
Note: Available since version 1.8
5.3.1.2.8 onMouseDownRight
The right mouse button was depressed over the control.
Origin: Control [} 419]
Note: Available since version 1.8
5.3.1.2.9 onMouseEnter
The mouse pointer was moved over the control.
onMouseLeave becomes active on leaving the control.
As opposed to onMouseOver [} 442], this event is called only once on reaching the control, regardless of the
child control.
Origin: Control [} 419]
Note: Available since version 1.8
5.3.1.2.10 onMouseLeave
The mouse pointer has left the control.
onMouseEnter [} 442] is called on reaching the control.
As opposed to onMouseOut [} 442], this event is called only once on leaving the control, regardless of the
child control.
Origin: Control [} 419]
Note: Available since version 1.8
5.3.1.2.11 onMouseMove
The mouse was moved over the control.
Origin: Control [} 419]
Note: Available since version 1.8
5.3.1.2.12 onMouseOut
The mouse pointer has left the control or one of its child controls.
The event onMouseLeave [} 442] observes only the control itself.
onMouseOver [} 442] becomes active on reaching the control or one of its children.
Origin: Control [} 419]
Note: Available since version 1.8
5.3.1.2.13 onMouseOver
The mouse pointer was moved over the control or one of its children. The event onMouseEnter [} 442]
observes only the control itself.
onMouseOut [} 442] becomes active on leaving the control or one of its children.
Origin: Control [} 419]
5.3.1.2.14 onMouseRightClick
The right mouse button was clicked over the control and released.
Origin: Control [} 419]
Note: Available since version 1.8
5.3.1.2.15 onMouseUp
A mouse button was released over the control.
This event is also triggered by interaction with a touch screen. This can be prevented by enabling
'preventDefault' [} 48] on the corresponding touch event.
Origin: Control [} 419]
Note: Available since version 1.8
5.3.1.2.16 onMouseUpLeft
The left mouse button was released over the control.
This event is also triggered by interaction with a touch screen. This can be prevented by enabling
'preventDefault' [} 48] on the corresponding touch event.
Origin: Control [} 419]
Note: Available since version 1.8
5.3.1.2.17 onMouseUpRight
The right mouse button was released over the control.
Origin: Control [} 419]
Note: Available since version 1.8
5.3.1.2.18 onMouseWheel
The mouse wheel was moved over the control.
Origin: Control [} 419]
Note: Available since version 1.8
5.3.1.2.19 onMoved
The control was moved in relation to the browser window.
Note: Learn how controls can be positioned [} 127].
Origin: Control [} 419]
Note: Available since version 1.8
5.3.1.2.20 onPressed
A mouse click was executed or a touch screen was briefly touched.
Origin: Control [} 419]
Note: Available since version 1.8
5.3.1.2.21 onResized
The size of the control was changed.
Note: Learn how the size of controls can be defined [} 127].
Origin: Control [} 419]
Note: Available since version 1.8
5.3.1.2.22 onTouchCancel
An interaction with a touch screen was aborted.
Origin: Control [} 419]
Note: Available since version 1.8
5.3.1.2.23 onTouchEnd
A finger/stylus was lifted off a touch screen.
Origin: Control [} 419]
Note: Available since version 1.8
5.3.1.2.24 onTouchMove
A finger/stylus was moved on a touch screen.
Origin: Control [} 419]
Note: Available since version 1.8
5.3.1.2.25 onTouchStart
A finger/stylus was placed against a touch screen.
Origin: Control [} 419]
Note: Available since version 1.8
5.3.1.3 Permissions
5.3.1.3.1 observe
Determines whether the control is generally observable.
If this right is missing, the control is not displayed.
Origin: Control [} 419]
See also
See also User management at control level [} 511].
Note: Available since version 1.8
5.3.1.3.2 operate
Determines whether the control is generally operable.
If the main function of a control is the interaction (e.g. button [} 160]), a light-colored overlay is drawn if the
right is missing.
Origin: Control [} 419]
See also
See also User management at control level [} 511].
Note: Available since version 1.8
5.3.2 Container Control
No instance of this class can be created. This page serves only as a list of the attributes that this class
provides. It is the basic class for all controls that can contain controls.
Attributes
Category: Colors
Name Description
BackgroundColor [} 433] Definition of the background color
BorderColor [} 432] Definition of the border color of the control
Category: Layout
Name Description
Left [} 426] Definition of the distance from the left side to the left
side of the surrounding control
LeftUnit [} 426] Definition of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Top [} 426] Definition of the distance from the top side to the top
side of the surrounding control
TopUnit [} 426] Selection of the unit of the distance to the top side of
the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Right [} 429] Definition of the distance from the right side to the
right side of the surrounding control
RightUnit [} 429] Selection of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Bottom [} 429] Definition of the distance from the bottom side to the
bottom side of the surrounding control
BottomUnit [} 429] Selection of the unit of the distance to the bottom
side of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Width [} 427] Definition of the external width of the control
WidthUnit [} 427] Selection of the unit of the width:
· Pixels for an absolute width
· Percent for a relative width
Height [} 428] Definition of the external height of the control
HeightUnit [} 428] Selection of the unit of the height:
· Pixels for an absolute height
· Percent for a relative height
MaxWidth [} 437] Definition of the maximum width if the control size is
defined as dynamic
MaxWidthUnit [} 437] Selection of the unit of the maximum width:
· Pixels for an absolute value
· Percent for a relative value
MinWidth [} 438] Definition of the minimum width if the control size is
defined as dynamic
MinWidthUnit [} 438] Selection of the unit of the minimum width:
· Pixels for an absolute value
· Percent for a relative value
MaxHeight [} 436] Definition of the maximum height if the control size is
defined as dynamic
MaxHeightUnit [} 437] Selection of the unit of the maximum height:
· Pixels for an absolute value
· Percent for a relative value
MinHeight [} 436] Definition of the minimum height if the control size is
defined as dynamic
Name Description
MinHeightUnit [} 436] Selection of the unit of the minimum height:
· Pixels for an absolute value
· Percent for a relative value
RenderedLeft [} 430] Calculated distance in pixels from the left side to the
left side of the surrounding control
RenderedTop [} 430] Calculated distance in pixels from the top side to the
top side of the surrounding control
RenderedRight [} 431] Calculated distance in pixels from the right side to the
right side of the surrounding control
RenderedBottom [} 430] Calculated distance in pixels from the bottom side to
the bottom side of the surrounding control
RenderedWidth [} 431] Calculated width of the control in pixels
RenderedHeight [} 431] Calculated height of the control in pixels
GridRowIndex [} 432] Definition of the row of a grid in which the control is to
be displayed
GridColumnIndex [} 432] Definition of the column of a grid in which the control
is to be displayed
Opacity [} 438] Definition of the transparency of the entire control
Visibility [} 439] Selection of the visibility of a control:
· Visible: Control is visible
· Hidden: Control is invisible, but is drawn – controls
behind it cannot be operated
· Collapsed: Control is invisible and is not drawn –
controls behind it can be operated
ZIndex [} 440] Definition of the position on the Z-axis
Transform [} 439] Definition of a transformation of a control:
· Translate: Translate in X-, Y-, Z-direction
· Rotate: Rotate by an angle
· Scale: Zoom by a factor
· Skew: Sides shown skewed by an angle
· Origin: Set the origin of the transformation relative
to the position of the control
· Perspective: Set the perspective of the
transformations of all child elements
BoxShadow [} 440] Definition of a shadow
WidthMode [} 450] Selection of the method of calculating the width:
· Value: The width is defined by the width entered.
· Parent: The width is defined by the distance to the
left and right side of the parent element. The
"Width" attribute is ignored in all calculations!
· Content: The height is defined by the width of the
content. The "Width" attribute is ignored in all
calculations!
HeightMode [} 450] Selection of the method of calculating the height:
· Value: The height is defined by the height entered.
· Parent: The height is defined by the distance to the
top and bottom side of the parent element. The
"Height" attribute is ignored in all calculations!
Name Description
· Content: The height is defined by the height of the
content. The "Height" attribute is ignored in all
calculations!
Category: Common
Name Description
Id [} 424] Definition of the name of the control
Type [} 439] Type name of the control.
ClassNames [} 425] Definition of control classes
IsAttached [} 425] If a control is logically assigned in the DOM.
ToolTip [} 438] Definition of the tool tip for the control
IsEnabled [} 450] Selection of whether the control is enabled
Category: Border
Name Description
BorderRadius [} 433] Definition of the radius of the four corners to round
them off
BorderStyle [} 433] Selection of the border style of the four sides of the
control
BorderWidth [} 433] Definition of the border width of the four sides of the
control
Category: Background Image
Name Description
BackgroundImage [} 434] Definition of an image that is located above the
background color
BackgroundImageHeight [} 435] Definition of the height of the background image
BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background
image:
· Pixels for an absolute height
· Percent for a relative height
BackgroundImageWidth [} 434] Definition of the width of the background image
BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background
image:
· Pixels for an absolute width
· Percent for a relative width
BackgroundImagePadding [} 435] Definition of an additional distance between the
border of the control and background image for the
four sides
BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background
image within the control
BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the
background image within the control
Events
Category: Framework
Name Description
onAttached [} 440] The control was added to the display.
onDetached [} 440] The control was removed from the display.
onInitialized [} 441] The control was initialized.
onMoved [} 443] The control was moved in relation to the browser
window.
onResized [} 444] The size of the control was changed.
Category: Operator
Name Description
onPressed [} 443] A mouse click was executed or a touch screen was
briefly touched.
onMouseClick [} 441] The left mouse button was clicked over the control
and released.
onMouseDoubleClick [} 441] The left mouse button was clicked twice over the
control and released.
onMouseRightClick [} 442] The right mouse button was clicked over the control
and released.
onMouseDown [} 441] A mouse button was depressed over the control.
onMouseEnter [} 442] The mouse pointer was moved over the control.
onMouseLeave [} 442] The mouse pointer has left the control.
onMouseUp [} 443] A mouse button was released over the control.
onMouseDownLeft [} 441] The left mouse button was depressed over the
control.
onMouseDownRight [} 441] The right mouse button was depressed over the
control.
onMouseMove [} 442] The mouse was moved over the control.
onMouseOver [} 442] The mouse pointer was moved over the control or
one of its children.
onMouseOut [} 442] The mouse pointer has left the control or one of its
child controls.
onMouseUpLeft [} 443] The left mouse button was released over the control.
onMouseUpRight [} 443] The right mouse button was released over the
control.
onMouseWheel [} 443] The mouse wheel was moved over the control.
onTouchStart [} 444] A finger/stylus was placed against a touch screen.
onTouchMove [} 444] A finger/stylus was moved on a touch screen.
onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.
onTouchCancel [} 444] An interaction with a touch screen was aborted.
Access rights
Name Description
observe [} 444] Determines whether the control is generally
observable.
operate [} 445] Determines whether the control is generally operable.
Inheritance hierarchy
Control [} 419]
Container Control
See also
API reference [} 1105] for this control
5.3.2.1 Attributes
5.3.2.1.1 HeightMode
Selection of the method of calculating the height. The available options are:
· Value: The height is defined by the height entered.
· Parent: The height is defined by the distance to the top and bottom side. The Height attribute is
ignored in all calculations!
· Content: The width is defined by the children of the control.
Note: Learn how controls can be positioned and their size defined [} 127].
Schema: tchmi:framework#/definitions/SizeModeWithContent [} 2133]
Origin: Container Control [} 445]
See also
Attribute getter: getHeightMode [} 1110]
Attribute setter: setHeightMode [} 1111]
Note: Available since version 1.8
5.3.2.1.2 IsEnabled
Activation status of a control. This overwrites the status of the child control. Only active controls react to
mouse and touch
Schema: tchmi:general#/definitions/Boolean [} 2060]
Origin: Container Control [} 445]
See also
Attribute getter: getIsEnabled [} 1112]
Attribute setter: setIsEnabled [} 1113]
Note: Available since version 1.8
5.3.2.1.3 WidthMode
Selection of the method of calculating the width. The available options are:
· Value: The width is defined by the width entered.
· Parent: The width is defined by the distance to the left and right side. The Width attribute is ignored in
all calculations!
· Content: The width is defined by the children of the control.
Note: Learn how controls can be positioned and their size defined [} 127].
Schema: tchmi:framework#/definitions/SizeModeWithContent [} 2133]
Origin: Container Control [} 445]
See also
Attribute getter: getWidthMode [} 1111]
Attribute setter: setWidthMode [} 1112]
Note: Available since version 1.8
5.3.3 Container
The container control offers the option of grouping other controls. All controls that are added to a container
are defined relative to the position of the container and are shifted automatically with the container. This
control can also be used for the subdivision and arrangement of a control, for example a view or a content.
Attributes
Category: Colors
Name Description
BackgroundColor [} 433] Definition of the background color
BorderColor [} 432] Definition of the border color of the control
Category: Layout
Name Description
Left [} 426] Definition of the distance from the left side to the left
side of the surrounding control
LeftUnit [} 426] Definition of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Top [} 426] Definition of the distance from the top side to the top
side of the surrounding control
TopUnit [} 426] Selection of the unit of the distance to the top side of
the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Right [} 429] Definition of the distance from the right side to the
right side of the surrounding control
RightUnit [} 429] Selection of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Bottom [} 429] Definition of the distance from the bottom side to the
bottom side of the surrounding control
BottomUnit [} 429] Selection of the unit of the distance to the bottom
side of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Width [} 427] Definition of the external width of the control
WidthUnit [} 427] Selection of the unit of the width:
· Pixels for an absolute width
· Percent for a relative width
Height [} 428] Definition of the external height of the control
HeightUnit [} 428] Selection of the unit of the height:
· Pixels for an absolute height
· Percent for a relative height
MaxWidth [} 437] Definition of the maximum width if the control size is
defined as dynamic
MaxWidthUnit [} 437] Selection of the unit of the maximum width:
· Pixels for an absolute value
· Percent for a relative value
MinWidth [} 438] Definition of the minimum width if the control size is
defined as dynamic
MinWidthUnit [} 438] Selection of the unit of the minimum width:
· Pixels for an absolute value
· Percent for a relative value
MaxHeight [} 436] Definition of the maximum height if the control size is
defined as dynamic
MaxHeightUnit [} 437] Selection of the unit of the maximum height:
· Pixels for an absolute value
· Percent for a relative value
MinHeight [} 436] Definition of the minimum height if the control size is
defined as dynamic
Name Description
MinHeightUnit [} 436] Selection of the unit of the minimum height:
· Pixels for an absolute value
· Percent for a relative value
RenderedLeft [} 430] Calculated distance in pixels from the left side to the
left side of the surrounding control
RenderedTop [} 430] Calculated distance in pixels from the top side to the
top side of the surrounding control
RenderedRight [} 431] Calculated distance in pixels from the right side to the
right side of the surrounding control
RenderedBottom [} 430] Calculated distance in pixels from the bottom side to
the bottom side of the surrounding control
RenderedWidth [} 431] Calculated width of the control in pixels
RenderedHeight [} 431] Calculated height of the control in pixels
GridRowIndex [} 432] Definition of the row of a grid in which the control is to
be displayed
GridColumnIndex [} 432] Definition of the column of a grid in which the control
is to be displayed
Opacity [} 438] Definition of the transparency of the entire control
Visibility [} 439] Selection of the visibility of a control:
· Visible: Control is visible
· Hidden: Control is invisible, but is drawn – controls
behind it cannot be operated
· Collapsed: Control is invisible and is not drawn –
controls behind it can be operated
ZIndex [} 440] Definition of the position on the Z-axis
Transform [} 439] Definition of a transformation of a control:
· Translate: Translate in X-, Y-, Z-direction
· Rotate: Rotate by an angle
· Scale: Zoom by a factor
· Skew: Sides shown skewed by an angle
· Origin: Set the origin of the transformation relative
to the position of the control
· Perspective: Set the perspective of the
transformations of all child elements
BoxShadow [} 440] Definition of a shadow
WidthMode [} 450] Selection of the method of calculating the width:
· Value: The width is defined by the width entered.
· Parent: The width is defined by the distance to the
left and right side of the parent element. The
"Width" attribute is ignored in all calculations!
· Content: The height is defined by the width of the
content. The "Width" attribute is ignored in all
calculations!
HeightMode [} 450] Selection of the method of calculating the height:
· Value: The height is defined by the height entered.
· Parent: The height is defined by the distance to the
top and bottom side of the parent element. The
"Height" attribute is ignored in all calculations!
Name Description
· Content: The height is defined by the height of the
content. The "Height" attribute is ignored in all
calculations!
Category: Common
Name Description
IsEnabled [} 450] Selection of whether the control is enabled
Id [} 424] Definition of the name of the control
Type [} 439] Type name of the control.
ClassNames [} 425] Definition of control classes
IsAttached [} 425] If a control is logically assigned in the DOM.
ToolTip [} 438] Definition of the tool tip for the control
Category: Border
Name Description
BorderRadius [} 433] Definition of the radius of the four corners to round
them off
BorderStyle [} 433] Selection of the border style of the four sides of the
control
BorderWidth [} 433] Definition of the border width of the four sides of the
control
Category: Background Image
Name Description
BackgroundImage [} 434] Definition of an image that is located above the
background color
BackgroundImageHeight [} 435] Definition of the height of the background image
BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background
image:
· Pixels for an absolute height
· Percent for a relative height
BackgroundImageWidth [} 434] Definition of the width of the background image
BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background
image:
· Pixels for an absolute width
· Percent for a relative width
BackgroundImagePadding [} 435] Definition of an additional distance between the
border of the control and background image for the
four sides
BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background
image within the control
BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the
background image within the control
Events
Category: Framework
Name Description
onAttached [} 440] The control was added to the display.
onDetached [} 440] The control was removed from the display.
onInitialized [} 441] The control was initialized.
onMoved [} 443] The control was moved in relation to the browser
window.
onResized [} 444] The size of the control was changed.
Category: Operator
Name Description
onPressed [} 443] A mouse click was executed or a touch screen was
briefly touched.
onMouseClick [} 441] The left mouse button was clicked over the control
and released.
onMouseDoubleClick [} 441] The left mouse button was clicked twice over the
control and released.
onMouseRightClick [} 442] The right mouse button was clicked over the control
and released.
onMouseDown [} 441] A mouse button was depressed over the control.
onMouseEnter [} 442] The mouse pointer was moved over the control.
onMouseLeave [} 442] The mouse pointer has left the control.
onMouseUp [} 443] A mouse button was released over the control.
onMouseDownLeft [} 441] The left mouse button was depressed over the
control.
onMouseDownRight [} 441] The right mouse button was depressed over the
control.
onMouseMove [} 442] The mouse was moved over the control.
onMouseOver [} 442] The mouse pointer was moved over the control or
one of its children.
onMouseOut [} 442] The mouse pointer has left the control or one of its
child controls.
onMouseUpLeft [} 443] The left mouse button was released over the control.
onMouseUpRight [} 443] The right mouse button was released over the
control.
onMouseWheel [} 443] The mouse wheel was moved over the control.
onTouchStart [} 444] A finger/stylus was placed against a touch screen.
onTouchMove [} 444] A finger/stylus was moved on a touch screen.
onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.
onTouchCancel [} 444] An interaction with a touch screen was aborted.
Access rights
Name Description
observe [} 444] Determines whether the control is generally
observable.
operate [} 445] Determines whether the control is generally operable.
Inheritance hierarchy
Control [} 419]
Container Control [} 445]
Container
See also
API reference [} 1114] for this control
5.3.4 Content
A content control is an independent container object that can be loaded in a region [} 482]. This control can
be used, for example, to subdivide operating concepts into various contents. It is created under the TcHmi
project tree with the context menu Add new Item…
Attributes
Category: Colors
Name Description
BackgroundColor [} 433] Definition of the background color
BorderColor [} 432] Definition of the border color of the control
Category: Layout
Name Description
Left [} 426] Definition of the distance from the left side to the left
side of the surrounding control
LeftUnit [} 426] Definition of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Top [} 426] Definition of the distance from the top side to the top
side of the surrounding control
TopUnit [} 426] Selection of the unit of the distance to the top side of
the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Right [} 429] Definition of the distance from the right side to the
right side of the surrounding control
RightUnit [} 429] Selection of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Bottom [} 429] Definition of the distance from the bottom side to the
bottom side of the surrounding control
BottomUnit [} 429] Selection of the unit of the distance to the bottom
side of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Width [} 427] Definition of the external width of the control
WidthUnit [} 427] Selection of the unit of the width:
· Pixels for an absolute width
· Percent for a relative width
Height [} 428] Definition of the external height of the control
HeightUnit [} 428] Selection of the unit of the height:
· Pixels for an absolute height
· Percent for a relative height
MaxWidth [} 437] Definition of the maximum width if the control size is
defined as dynamic
MaxWidthUnit [} 437] Selection of the unit of the maximum width:
· Pixels for an absolute value
· Percent for a relative value
MinWidth [} 438] Definition of the minimum width if the control size is
defined as dynamic
MinWidthUnit [} 438] Selection of the unit of the minimum width:
· Pixels for an absolute value
· Percent for a relative value
MaxHeight [} 436] Definition of the maximum height if the control size is
defined as dynamic
MaxHeightUnit [} 437] Selection of the unit of the maximum height:
· Pixels for an absolute value
· Percent for a relative value
MinHeight [} 436] Definition of the minimum height if the control size is
defined as dynamic
Name Description
MinHeightUnit [} 436] Selection of the unit of the minimum height:
· Pixels for an absolute value
· Percent for a relative value
RenderedLeft [} 430] Calculated distance in pixels from the left side to the
left side of the surrounding control
RenderedTop [} 430] Calculated distance in pixels from the top side to the
top side of the surrounding control
RenderedRight [} 431] Calculated distance in pixels from the right side to the
right side of the surrounding control
RenderedBottom [} 430] Calculated distance in pixels from the bottom side to
the bottom side of the surrounding control
RenderedWidth [} 431] Calculated width of the control in pixels
RenderedHeight [} 431] Calculated height of the control in pixels
GridRowIndex [} 432] Definition of the row of a grid in which the control is to
be displayed
GridColumnIndex [} 432] Definition of the column of a grid in which the control
is to be displayed
Opacity [} 438] Definition of the transparency of the entire control
Visibility [} 439] Selection of the visibility of a control:
· Visible: Control is visible
· Hidden: Control is invisible, but is drawn – controls
behind it cannot be operated
· Collapsed: Control is invisible and is not drawn –
controls behind it can be operated
ZIndex [} 440] Definition of the position on the Z-axis
Transform [} 439] Definition of a transformation of a control:
· Translate: Translate in X-, Y-, Z-direction
· Rotate: Rotate by an angle
· Scale: Zoom by a factor
· Skew: Sides shown skewed by an angle
· Origin: Set the origin of the transformation relative
to the position of the control
· Perspective: Set the perspective of the
transformations of all child elements
BoxShadow [} 440] Definition of a shadow
WidthMode [} 450] Selection of the method of calculating the width:
· Value: The width is defined by the width entered.
· Parent: The width is defined by the distance to the
left and right side of the parent element. The
"Width" attribute is ignored in all calculations!
· Content: The height is defined by the width of the
content. The "Width" attribute is ignored in all
calculations!
HeightMode [} 450] Selection of the method of calculating the height:
· Value: The height is defined by the height entered.
· Parent: The height is defined by the distance to the
top and bottom side of the parent element. The
"Height" attribute is ignored in all calculations!
Name Description
· Content: The height is defined by the height of the
content. The "Height" attribute is ignored in all
calculations!
Category: Common
Name Description
IsEnabled [} 450] Selection of whether the control is enabled
Id [} 424] Definition of the name of the control
Type [} 439] Type name of the control.
ClassNames [} 425] Definition of control classes
IsAttached [} 425] If a control is logically assigned in the DOM.
ToolTip [} 438] Definition of the tool tip for the control
Category: Border
BorderRadius [} 433] Definition of the radius of the four corners to round
them off
BorderStyle [} 433] Selection of the border style of the four sides of the
control
BorderWidth [} 433] Definition of the border width of the four sides of the
control
Category: Background Image
Name Description
BackgroundImage [} 434] Definition of an image that is located above the
background color
BackgroundImageHeight [} 435] Definition of the height of the background image
BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background
image:
· Pixels for an absolute height
· Percent for a relative height
BackgroundImageWidth [} 434] Definition of the width of the background image
BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background
image:
· Pixels for an absolute width
· Percent for a relative width
BackgroundImagePadding [} 435] Definition of an additional distance between the
border of the control and background image for the
four sides
BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background
image within the control
BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the
background image within the control
Events
Category: Framework
Name Description
onAttached [} 440] The control was added to the display.
onDetached [} 440] The control was removed from the display.
onInitialized [} 441] The control was initialized.
onMoved [} 443] The control was moved in relation to the browser
window.
onResized [} 444] The size of the control was changed.
Category: Operator
Name Description
onPressed [} 443] A mouse click was executed or a touch screen was
briefly touched.
onMouseClick [} 441] The left mouse button was clicked over the control
and released.
onMouseDoubleClick [} 441] The left mouse button was clicked twice over the
control and released.
onMouseRightClick [} 442] The right mouse button was clicked over the control
and released.
onMouseDown [} 441] A mouse button was depressed over the control.
onMouseEnter [} 442] The mouse pointer was moved over the control.
onMouseLeave [} 442] The mouse pointer has left the control.
onMouseUp [} 443] A mouse button was released over the control.
onMouseDownLeft [} 441] The left mouse button was depressed over the
control.
onMouseDownRight [} 441] The right mouse button was depressed over the
control.
onMouseMove [} 442] The mouse was moved over the control.
onMouseOver [} 442] The mouse pointer was moved over the control or
one of its children.
onMouseOut [} 442] The mouse pointer has left the control or one of its
child controls.
onMouseUpLeft [} 443] The left mouse button was released over the control.
onMouseUpRight [} 443] The right mouse button was released over the
control.
onMouseWheel [} 443] The mouse wheel was moved over the control.
onTouchStart [} 444] A finger/stylus was placed against a touch screen.
onTouchMove [} 444] A finger/stylus was moved on a touch screen.
onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.
onTouchCancel [} 444] An interaction with a touch screen was aborted.
Access rights
Name Description
observe [} 444] Determines whether the control is generally
observable.
operate [} 445] Determines whether the control is generally operable.
Inheritance hierarchy
Control [} 419]
Container Control [} 445]
Partial [} 476]
Content
See also
API reference [} 1119] for this control
5.3.5 Grid
The grid is a layout grid that can be used for the development of fluid and responsive designs. With the help
of the grid, parts of the page or the entire page can be divided into various cells. On the basis of the cells you
can then design the page by adding controls to the various cells and defining the behavior of the cells when
changing the browser size. The grid offers a great many different configuration options. You can find the
description of an example configuration in the chapter Configuration [} 466].
Attributes
Category: Colors
Name Description
BackgroundColor [} 433] Definition of the background color
BorderColor [} 432] Definition of the border color of the control
Category: Layout
Name Description
Left [} 426] Definition of the distance from the left side to the left
side of the surrounding control
LeftUnit [} 426] Definition of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Top [} 426] Definition of the distance from the top side to the top
side of the surrounding control
TopUnit [} 426] Selection of the unit of the distance to the top side of
the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Right [} 429] Definition of the distance from the right side to the
right side of the surrounding control
RightUnit [} 429] Selection of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Bottom [} 429] Definition of the distance from the bottom side to the
bottom side of the surrounding control
BottomUnit [} 429] Selection of the unit of the distance to the bottom
side of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Width [} 427] Definition of the external width of the control
WidthUnit [} 427] Selection of the unit of the width:
· Pixels for an absolute width
· Percent for a relative width
Height [} 428] Definition of the external height of the control
HeightUnit [} 428] Selection of the unit of the height:
· Pixels for an absolute height
· Percent for a relative height
MaxWidth [} 437] Definition of the maximum width if the control size is
defined as dynamic
MaxWidthUnit [} 437] Selection of the unit of the maximum width:
· Pixels for an absolute value
· Percent for a relative value
MinWidth [} 438] Definition of the minimum width if the control size is
defined as dynamic
MinWidthUnit [} 438] Selection of the unit of the minimum width:
· Pixels for an absolute value
· Percent for a relative value
MaxHeight [} 436] Definition of the maximum height if the control size is
defined as dynamic
MaxHeightUnit [} 437] Selection of the unit of the maximum height:
· Pixels for an absolute value
· Percent for a relative value
MinHeight [} 436] Definition of the minimum height if the control size is
defined as dynamic
Name Description
MinHeightUnit [} 436] Selection of the unit of the minimum height:
· Pixels for an absolute value
· Percent for a relative value
RenderedLeft [} 430] Calculated distance in pixels from the left side to the
left side of the surrounding control
RenderedTop [} 430] Calculated distance in pixels from the top side to the
top side of the surrounding control
RenderedRight [} 431] Calculated distance in pixels from the right side to the
right side of the surrounding control
RenderedBottom [} 430] Calculated distance in pixels from the bottom side to
the bottom side of the surrounding control
RenderedWidth [} 431] Calculated width of the control in pixels
RenderedHeight [} 431] Calculated height of the control in pixels
GridRowIndex [} 432] Definition of the row of a grid in which the control is to
be displayed
GridColumnIndex [} 432] Definition of the column of a grid in which the control
is to be displayed
Opacity [} 438] Definition of the transparency of the entire control
Visibility [} 439] Selection of the visibility of a control:
· Visible: Control is visible
· Hidden: Control is invisible, but is drawn – controls
behind it cannot be operated
· Collapsed: Control is invisible and is not drawn –
controls behind it can be operated
ZIndex [} 440] Definition of the position on the Z-axis
Transform [} 439] Definition of a transformation of a control:
· Translate: Translate in X-, Y-, Z-direction
· Rotate: Rotate by an angle
· Scale: Zoom by a factor
· Skew: Sides shown skewed by an angle
· Origin: Set the origin of the transformation relative
to the position of the control
· Perspective: Set the perspective of the
transformations of all child elements
BoxShadow [} 440] Definition of a shadow
WidthMode [} 472] Selection of the method of calculating the width
HeightMode [} 471] Selection of the method of calculating the height
Category: Common
Name Description
ColumnOptions [} 471] Definition of the columns
RowOptions [} 471] Definition of the rows
CellOptions [} 470] Definition of the cells
CellWrap [} 470] Selection of whether the cells should wrap within the
row
IsEnabled [} 450] Selection of whether the control is enabled
Id [} 424] Definition of the name of the control
Type [} 439] Type name of the control.
ClassNames [} 425] Definition of control classes
IsAttached [} 425] If a control is logically assigned in the DOM.
ToolTip [} 438] Definition of the tool tip for the control
Category: Border
Name Description
BorderRadius [} 433] Definition of the radius of the four corners to round
them off
BorderStyle [} 433] Selection of the border style of the four sides of the
control
BorderWidth [} 433] Definition of the border width of the four sides of the
control
Category: Background Image
Name Description
BackgroundImage [} 434] Definition of an image that is located above the
background color
BackgroundImageHeight [} 435] Definition of the height of the background image
BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background
image:
· Pixels for an absolute height
· Percent for a relative height
BackgroundImageWidth [} 434] Definition of the width of the background image
BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background
image:
· Pixels for an absolute width
· Percent for a relative width
BackgroundImagePadding [} 435] Definition of an additional distance between the
border of the control and background image for the
four sides
BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background
image within the control
BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the
background image within the control
Events
Category: Framework
Name Description
onAttached [} 440] The control was added to the display.
onDetached [} 440] The control was removed from the display.
onInitialized [} 441] The control was initialized.
onMoved [} 443] The control was moved in relation to the browser
window.
onResized [} 444] The size of the control was changed.
Category: Operator
Name Description
onPressed [} 443] A mouse click was executed or a touch screen was
briefly touched.
onMouseClick [} 441] The left mouse button was clicked over the control
and released.
onMouseDoubleClick [} 441] The left mouse button was clicked twice over the
control and released.
onMouseRightClick [} 442] The right mouse button was clicked over the control
and released.
onMouseDown [} 441] A mouse button was depressed over the control.
onMouseEnter [} 442] The mouse pointer was moved over the control.
onMouseLeave [} 442] The mouse pointer has left the control.
onMouseUp [} 443] A mouse button was released over the control.
onMouseDownLeft [} 441] The left mouse button was depressed over the
control.
onMouseDownRight [} 441] The right mouse button was depressed over the
control.
onMouseMove [} 442] The mouse was moved over the control.
onMouseOver [} 442] The mouse pointer was moved over the control or
one of its children.
onMouseOut [} 442] The mouse pointer has left the control or one of its
child controls.
onMouseUpLeft [} 443] The left mouse button was released over the control.
onMouseUpRight [} 443] The right mouse button was released over the
control.
onMouseWheel [} 443] The mouse wheel was moved over the control.
onTouchStart [} 444] A finger/stylus was placed against a touch screen.
onTouchMove [} 444] A finger/stylus was moved on a touch screen.
onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.
onTouchCancel [} 444] An interaction with a touch screen was aborted.
Access rights
Name Description
observe [} 444] Determines whether the control is generally
observable.
operate [} 445] Determines whether the control is generally operable.
Inheritance hierarchy
Control [} 419]
Container Control [} 445]
Grid
See also
API reference [} 1124] for this control
5.3.5.1 Configuration
A grid control can be configured in different ways. An example configuration of the Desktop.view together
with a grid control is explained below. Prior to this you should read the chapter on Positioning and calculation
of the size of controls [} 127] as the basis for this example.
1. Create a new project.
2. Open the Desktop.view.
The Desktop.view has a fixed size as a default setting. If the browser size changes, therefore, the
Desktop.view and its contents do not adapt themselves. In the following steps the view will be adjusted so
that it changes its size dynamically with the browser size.
3. Select the view.
4. Change the "Width" attribute to 100 %.
With this setting the size of the view adapts itself automatically to the size of the browser. The viewport of the
graphic editor can now be used to simulate a desired browser size and test the effect on the visualization.
5. Add a grid control to the interface.
6. Change the following attributes: Left = 20 px, Top = 100 px, Right = 20 px.
7. Select the "Parent" mode for the "Width Mode" attribute.
With these settings the size of the grid control adapts itself to the size of the parent element accordingly. In
this case the parent element is the Desktop.view.
8. Insert a second column with the help of the "Column Options [} 469]" dialog.
9. Insert a text block in each column by drag and drop.
10. Change the position of both controls to: Left = 120, Top = 140
With these settings the right-hand cell will be shifted automatically to the row below if there is insufficient
space in the browser to display both side by side. You can test this function by changing the width of the
integrated LiveView [} 60] window or the browser instance. So far the grid has not adapted itself
automatically in height. The consequence of this is that only half of each of the two text blocks is displayed if
the right-hand cell is displayed in the second row.
11. Select the "Content" mode in the "Height Mode" attribute of the grid control.
12. Also select the "Content" mode in the "Height Mode" attribute of the view.
With these settings not only will the grid be enlarged according to its contents, but also the view. In this way
you can ensure that all contents are displayed so as to be reachable if the right-hand cell jumps to the row
below. In order to be able to distinguish better between the two cells, their background colors will be set in
the following.
13. Insert two cells with the help of the "Cell Options [} 467]" dialog.
14. Change the first cell option to: Background Color = #FFCA0000, Column Index = 0, Row Index = 0
15. Change the second cell option to: Background Color = #FFFFFF00, Column Index = 1, Row Index = 0
At the moment, both cells close and thus the entire row are bordering the lowermost control. In the row
settings, for example, a minimum row height can be specified.
16. Change the "Row Min Height" attribute of the row option to 300 px with the help of the "Row Options
[} 469]" dialog.
If the browser height is larger than the grid, a white border will be displayed at the moment. To make sure
that the visu completely fills the browser with each browser size, the following step must be carried out.
17. Change the "Minimum Height" attribute of the view to 100 %.
In summary, you have created your first visualization with the help of the grid control according to the
responsive design approach. This visualization fills the entire browser regardless of the browser size. If
insufficient width is available, the content of the second column is automatically displayed in the row below. If
on the other hand the height is insufficient, it will be expanded automatically according to the content to be
displayed.
Sample project: https://infosys.beckhoff.com/content/1033/TE2000_TC3_HMI_Engineering/Resources/
zip/4010038539.zip
5.3.5.2 Dialogs
5.3.5.2.1 Cell Options Dialog
You can change the cell settings with this dialog.
Items List of all objects added
Delete the selected object
Change the object order (top = left)
Add a new object
Category: Colors
Name Description
BackgroundColor [} 433] Definition of the background color
BorderColor [} 432] Definition of the border color of the control
BorderColor [} 432] Definition of the border color of the control
BorderRadius [} 433] Definition of the radius of the four corners to round
them off
BorderStyle [} 433] Selection of the border style of the four sides of the
control
BorderWidth [} 433] Definition of the border width of the four sides of the
control
Category: Background Image
Name Description
BackgroundImage [} 434] Definition of an image that is located above the
background color
BackgroundImageHeight [} 435] Definition of the height of the background image
BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background
image:
· Pixels for an absolute height
· Percent for a relative height
BackgroundImageWidth [} 434] Definition of the width of the background image
BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background
image:
· Pixels for an absolute width
· Percent for a relative width
BackgroundImagePadding [} 435] Definition of an additional distance between the
border of the control and background image for the
four sides
BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background
image within the control
BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the
background image within the control
BackgroundImageWidth [} 434] Definition of the width of the background image
BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background
image:
· Pixels for an absolute width
· Percent for a relative width
BackgroundImageHeight [} 435] Definition of the height of the background image
BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background
image:
· Pixels for an absolute height
· Percent for a relative height
BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the
background image within the control
BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background
image within the control
BackgroundImagePadding [} 435] Definition of an additional distance between the
border of the control and background image for the
four sides
Category: Border
Name Description
Border Width Definition of the border width of the four sides of the
cell
Border Style Selection of the border style of the four sides of the
cell
Category: Layout
Name Description
Grid Column Index Definition of the column of a grid that is to be defined
by the cell option
Grid Row Index Definition of the row of a grid that is to be defined by
the cell option
Padding Definition of an additional distance between the cell
border and the controls added to the cell for the four
sides
5.3.5.2.2 Column Options Dialog
You can change the number of columns and their settings with this dialog.
Items List of all objects added
Delete the selected object
Change the object order (top = left)
Add a new object
Category: Layout
Name Description
Column Width Definition of the column width
WidthMode [} 472] Selection of the method of calculating the width
HeightMode [} 471] Selection of the method of calculating the height
Column Max Width Definition of the maximum column width
Column Min Width Definition of the minimum column width
Overflow Selection of whether controls that have been added
to the row but placed outside the row area should be
displayed
5.3.5.2.3 Row Options Dialog
You can change the number of rows and their settings with this dialog.
Items List of all objects added
Delete the selected object
Change the object order (top = left)
Add a new object
Category: Layout
Name Description
Row Height Definition of the row height
HeightMode [} 471] Selection of the method of calculating the height
Row Max Height Definition of the maximum row height
Row Min Height Definition of the minimum row height
Overflow Selection of whether controls that have been added
to the row but placed outside the row area should be
displayed
5.3.5.3 Attributes
5.3.5.3.1 CellOptions
Definition for the cells.
Here you can define a specific feature for each cell. In each definition a row and column index defines which
cell is to be addressed.
You can define:
· background color (identical to Control Background Color [} 433])
· border color (identical to Control Border Color [} 432])
· background image (identical to Control Background Image [} 434])
· width of the background image (identical to Control Background Image Width [} 434])
· height of the background image (identical to Control Background Image Height [} 435])
· horizontal alignment of the background image (identical to Control Background Image [} 435])
· vertical alignment of the background image (identical to Control Background Image [} 436])
· border width (identical to Control Border Width [} 433])
· border style (identical to Control Border Style [} 433])
· padding (identical to Control Internal Distance [} 435])
Schema: tchmi:framework#/definitions/CellOptions [} 2079]
Origin: Grid [} 461]
See also
Attribute getter: getCellOptions [} 1133]
Attribute setter: setCellOptions [} 1134]
Note: Available since version 1.8
5.3.5.3.2 CellWrap
Determines whether the cells should wrap within the row.
Schema: tchmi:general#/definitions/Boolean [} 2060]
Origin: Grid [} 461]
See also
Attribute getter: getCellWrap [} 1134]
Attribute setter: setCellWrap [} 1135]
Note: Available since version 1.8
5.3.5.3.3 ColumnOptions
Definition for the columns and thus their number.
You can define:
· Width (similar to Control Width [} 427])
· Width Mode (similar to Control Width Mode [} 427])
· Minimum Width (identical to Control Minimum Width [} 438])
· Maximum Width (identical to Control Maximum Width [} 437])
· Overflow determines whether a child control is truncated if it is larger than the cell.
Note: Learn how controls can be positioned and their size defined [} 127].
Schema: tchmi:framework#/definitions/ColumnOptions [} 2095]
Origin: Grid [} 461]
See also
Attribute getter: getColumnOptions [} 1131]
Attribute setter: setColumnOptions [} 1132]
Note: Available since version 1.8
5.3.5.3.4 HeightMode
Selection of the method of calculating the height. The available options are:
· Value: The height is defined by the height entered.
· Parent: The height is defined by the distance to the top and bottom side. The Height attribute is
ignored in all calculations!
· Content: The width is defined by the children of the control.
Note: Learn how controls can be positioned and their size defined [} 127].
Schema: tchmi:framework#/definitions/SizeModeWithContent [} 2133]
Origin: Grid [} 461]
See also
Attribute getter: getHeightMode [} 1130]
Attribute setter: setHeightMode [} 1130]
Note: Available since version 1.8
5.3.5.3.5 RowOptions
Definition for the rows and thus their number.
You can define:
· Height (similar to Control Height [} 428])
· Height Mode (similar to Control Height Mode [} 428])
· Minimum Height (identical to Control Minimum Height [} 436])
· Maximum Height (identical to Control Maximum Height [} 436])
· Overflow determines whether a child control is truncated if it is larger than the cell.
Note: Learn how controls can be positioned and their size defined [} 127].
Schema: tchmi:framework#/definitions/RowOptions [} 2130]
Origin: Grid [} 461]
See also
Attribute getter: getRowOptions [} 1132]
Attribute setter: setRowOptions [} 1133]
Note: Available since version 1.8
5.3.5.3.6 WidthMode
Selection of the method of calculating the width. The available options are:
· Value: The width is defined by the width entered.
· Parent: The width is defined by the distance to the left and right side. The Width attribute is ignored in
all calculations!
· Content: The width is defined by the children of the control.
Note: Learn how controls can be positioned and their size defined [} 127].
Schema: tchmi:framework#/definitions/SizeModeWithContent [} 2133]
Origin: Grid [} 461]
See also
Attribute getter: getWidthMode [} 1130]
Attribute setter: setWidthMode [} 1131]
Note: Available since version 1.8
5.3.6 HTML host
The HTML host is a container for HTML contents. This control can be edited in the HTML editor of the
Designer.
Attributes
Category: Colors
Name Description
BackgroundColor [} 433] Definition of the background color
BorderColor [} 432] Definition of the border color of the control
Category: Layout
Name Description
Left [} 426] Definition of the distance from the left side to the left
side of the surrounding control
LeftUnit [} 426] Definition of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Top [} 426] Definition of the distance from the top side to the top
side of the surrounding control
TopUnit [} 426] Selection of the unit of the distance to the top side of
the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Right [} 429] Definition of the distance from the right side to the
right side of the surrounding control
RightUnit [} 429] Selection of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Bottom [} 429] Definition of the distance from the bottom side to the
bottom side of the surrounding control
BottomUnit [} 429] Selection of the unit of the distance to the bottom
side of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Width [} 427] Definition of the external width of the control
WidthUnit [} 427] Selection of the unit of the width:
· Pixels for an absolute width
· Percent for a relative width
Height [} 428] Definition of the external height of the control
HeightUnit [} 428] Selection of the unit of the height:
· Pixels for an absolute height
· Percent for a relative height
MaxWidth [} 437] Definition of the maximum width if the control size is
defined as dynamic
MaxWidthUnit [} 437] Selection of the unit of the maximum width:
· Pixels for an absolute value
· Percent for a relative value
MinWidth [} 438] Definition of the minimum width if the control size is
defined as dynamic
MinWidthUnit [} 438] Selection of the unit of the minimum width:
· Pixels for an absolute value
· Percent for a relative value
MaxHeight [} 436] Definition of the maximum height if the control size is
defined as dynamic
MaxHeightUnit [} 437] Selection of the unit of the maximum height:
· Pixels for an absolute value
· Percent for a relative value
MinHeight [} 436] Definition of the minimum height if the control size is
defined as dynamic
Name Description
MinHeightUnit [} 436] Selection of the unit of the minimum height:
· Pixels for an absolute value
· Percent for a relative value
RenderedLeft [} 430] Calculated distance in pixels from the left side to the
left side of the surrounding control
RenderedTop [} 430] Calculated distance in pixels from the top side to the
top side of the surrounding control
RenderedRight [} 431] Calculated distance in pixels from the right side to the
right side of the surrounding control
RenderedBottom [} 430] Calculated distance in pixels from the bottom side to
the bottom side of the surrounding control
RenderedWidth [} 431] Calculated width of the control in pixels
RenderedHeight [} 431] Calculated height of the control in pixels
GridRowIndex [} 432] Definition of the row of a grid in which the control is to
be displayed
GridColumnIndex [} 432] Definition of the column of a grid in which the control
is to be displayed
Opacity [} 438] Definition of the transparency of the entire control
Visibility [} 439] Selection of the visibility of a control:
· Visible: Control is visible
· Hidden: Control is invisible, but is drawn – controls
behind it cannot be operated
· Collapsed: Control is invisible and is not drawn –
controls behind it can be operated
ZIndex [} 440] Definition of the position on the Z-axis
Transform [} 439] Definition of a transformation of a control:
· Translate: Translate in X-, Y-, Z-direction
· Rotate: Rotate by an angle
· Scale: Zoom by a factor
· Skew: Sides shown skewed by an angle
· Origin: Set the origin of the transformation relative
to the position of the control
· Perspective: Set the perspective of the
transformations of all child elements
BoxShadow [} 440] Definition of a shadow
WidthMode [} 427] Selection of the method of calculating the width:
· Value: The width is defined by the width entered.
· Parent: The width is defined by the distance to the
left and right side of the parent element. The
"Width" attribute is ignored in all calculations!
HeightMode [} 428] Selection of the method of calculating the height:
· Value: The height is defined by the height entered.
· Parent: The height is defined by the distance to the
top and bottom side of the parent element. The
"Height" attribute is ignored in all calculations!
Category: Common
Name Description
IsEnabled [} 425] Selection of whether a control should be activated
Id [} 424] Definition of the name of the control
Type [} 439] Type name of the control.
ClassNames [} 425] Definition of control classes
IsAttached [} 425] If a control is logically assigned in the DOM.
ToolTip [} 438] Definition of the tool tip for the control
Category: Border
Name Description
BorderRadius [} 433] Definition of the radius of the four corners to round
them off
BorderStyle [} 433] Selection of the border style of the four sides of the
control
BorderWidth [} 433] Definition of the border width of the four sides of the
control
Category: Background Image
Name Description
BackgroundImage [} 434] Definition of an image that is located above the
background color
BackgroundImageHeight [} 435] Definition of the height of the background image
BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background
image:
· Pixels for an absolute height
· Percent for a relative height
BackgroundImageWidth [} 434] Definition of the width of the background image
BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background
image:
· Pixels for an absolute width
· Percent for a relative width
BackgroundImagePadding [} 435] Definition of an additional distance between the
border of the control and background image for the
four sides
BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background
image within the control
BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the
background image within the control
Events
Category: Framework
Name Description
onAttached [} 440] The control was added to the display.
onDetached [} 440] The control was removed from the display.
onInitialized [} 441] The control was initialized.
onMoved [} 443] The control was moved in relation to the browser
window.
onResized [} 444] The size of the control was changed.
Category: Operator
Name Description
onPressed [} 443] A mouse click was executed or a touch screen was
briefly touched.
onMouseClick [} 441] The left mouse button was clicked over the control
and released.
onMouseDoubleClick [} 441] The left mouse button was clicked twice over the
control and released.
onMouseRightClick [} 442] The right mouse button was clicked over the control
and released.
onMouseDown [} 441] A mouse button was depressed over the control.
onMouseEnter [} 442] The mouse pointer was moved over the control.
onMouseLeave [} 442] The mouse pointer has left the control.
onMouseUp [} 443] A mouse button was released over the control.
onMouseDownLeft [} 441] The left mouse button was depressed over the
control.
onMouseDownRight [} 441] The right mouse button was depressed over the
control.
onMouseMove [} 442] The mouse was moved over the control.
onMouseOver [} 442] The mouse pointer was moved over the control or
one of its children.
onMouseOut [} 442] The mouse pointer has left the control or one of its
child controls.
onMouseUpLeft [} 443] The left mouse button was released over the control.
onMouseUpRight [} 443] The right mouse button was released over the
control.
onMouseWheel [} 443] The mouse wheel was moved over the control.
onTouchStart [} 444] A finger/stylus was placed against a touch screen.
onTouchMove [} 444] A finger/stylus was moved on a touch screen.
onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.
onTouchCancel [} 444] An interaction with a touch screen was aborted.
Access rights
Name Description
observe [} 444] Determines whether the control is generally
observable.
operate [} 445] Determines whether the control is generally operable.
Inheritance hierarchy
Control [} 419]
HTML host
See also
API reference [} 1138] for this control
5.3.7 Partial
No instance of this class can be created. This page serves only as a list of the attributes that this class
provides. It is the basic class for reusable control containers.
Attributes
Category: Colors
Name Description
BackgroundColor [} 433] Definition of the background color
BorderColor [} 432] Definition of the border color of the control
Category: Layout
Name Description
Left [} 426] Definition of the distance from the left side to the left
side of the surrounding control
LeftUnit [} 426] Definition of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Top [} 426] Definition of the distance from the top side to the top
side of the surrounding control
TopUnit [} 426] Selection of the unit of the distance to the top side of
the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Right [} 429] Definition of the distance from the right side to the
right side of the surrounding control
RightUnit [} 429] Selection of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Bottom [} 429] Definition of the distance from the bottom side to the
bottom side of the surrounding control
BottomUnit [} 429] Selection of the unit of the distance to the bottom
side of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Width [} 427] Definition of the external width of the control
WidthUnit [} 427] Selection of the unit of the width:
· Pixels for an absolute width
· Percent for a relative width
Height [} 428] Definition of the external height of the control
HeightUnit [} 428] Selection of the unit of the height:
· Pixels for an absolute height
· Percent for a relative height
MaxWidth [} 437] Definition of the maximum width if the control size is
defined as dynamic
MaxWidthUnit [} 437] Selection of the unit of the maximum width:
· Pixels for an absolute value
· Percent for a relative value
MinWidth [} 438] Definition of the minimum width if the control size is
defined as dynamic
MinWidthUnit [} 438] Selection of the unit of the minimum width:
· Pixels for an absolute value
· Percent for a relative value
MaxHeight [} 436] Definition of the maximum height if the control size is
defined as dynamic
MaxHeightUnit [} 437] Selection of the unit of the maximum height:
· Pixels for an absolute value
· Percent for a relative value
MinHeight [} 436] Definition of the minimum height if the control size is
defined as dynamic
Name Description
MinHeightUnit [} 436] Selection of the unit of the minimum height:
· Pixels for an absolute value
· Percent for a relative value
RenderedLeft [} 430] Calculated distance in pixels from the left side to the
left side of the surrounding control
RenderedTop [} 430] Calculated distance in pixels from the top side to the
top side of the surrounding control
RenderedRight [} 431] Calculated distance in pixels from the right side to the
right side of the surrounding control
RenderedBottom [} 430] Calculated distance in pixels from the bottom side to
the bottom side of the surrounding control
RenderedWidth [} 431] Calculated width of the control in pixels
RenderedHeight [} 431] Calculated height of the control in pixels
GridRowIndex [} 432] Definition of the row of a grid in which the control is to
be displayed
GridColumnIndex [} 432] Definition of the column of a grid in which the control
is to be displayed
Opacity [} 438] Definition of the transparency of the entire control
Visibility [} 439] Selection of the visibility of a control:
· Visible: Control is visible
· Hidden: Control is invisible, but is drawn – controls
behind it cannot be operated
· Collapsed: Control is invisible and is not drawn –
controls behind it can be operated
ZIndex [} 440] Definition of the position on the Z-axis
Transform [} 439] Definition of a transformation of a control:
· Translate: Translate in X-, Y-, Z-direction
· Rotate: Rotate by an angle
· Scale: Zoom by a factor
· Skew: Sides shown skewed by an angle
· Origin: Set the origin of the transformation relative
to the position of the control
· Perspective: Set the perspective of the
transformations of all child elements
BoxShadow [} 440] Definition of a shadow
WidthMode [} 450] Selection of the method of calculating the width:
· Value: The width is defined by the width entered.
· Parent: The width is defined by the distance to the
left and right side of the parent element. The
"Width" attribute is ignored in all calculations!
· Content: The height is defined by the width of the
content. The "Width" attribute is ignored in all
calculations!
HeightMode [} 450] Selection of the method of calculating the height:
· Value: The height is defined by the height entered.
· Parent: The height is defined by the distance to the
top and bottom side of the parent element. The
"Height" attribute is ignored in all calculations!
Name Description
· Content: The height is defined by the height of the
content. The "Height" attribute is ignored in all
calculations!
Category: Common
Name Description
IsEnabled [} 450] Selection of whether the control is enabled
Id [} 424] Definition of the name of the control
Type [} 439] Type name of the control.
ClassNames [} 425] Definition of control classes
IsAttached [} 425] If a control is logically assigned in the DOM.
ToolTip [} 438] Definition of the tool tip for the control
Category: Border
Name Description
BorderRadius [} 433] Definition of the radius of the four corners to round
them off
BorderStyle [} 433] Selection of the border style of the four sides of the
control
BorderWidth [} 433] Definition of the border width of the four sides of the
control
Category: Background Image
Name Description
BackgroundImage [} 434] Definition of an image that is located above the
background color
BackgroundImageHeight [} 435] Definition of the height of the background image
BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background
image:
· Pixels for an absolute height
· Percent for a relative height
BackgroundImageWidth [} 434] Definition of the width of the background image
BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background
image:
· Pixels for an absolute width
· Percent for a relative width
BackgroundImagePadding [} 435] Definition of an additional distance between the
border of the control and background image for the
four sides
BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background
image within the control
BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the
background image within the control
Events
Category: Framework
Name Description
onAttached [} 440] The control was added to the display.
onDetached [} 440] The control was removed from the display.
onInitialized [} 441] The control was initialized.
onMoved [} 443] The control was moved in relation to the browser
window.
onResized [} 444] The size of the control was changed.
Category: Operator
Name Description
onPressed [} 443] A mouse click was executed or a touch screen was
briefly touched.
onMouseClick [} 441] The left mouse button was clicked over the control
and released.
onMouseDoubleClick [} 441] The left mouse button was clicked twice over the
control and released.
onMouseRightClick [} 442] The right mouse button was clicked over the control
and released.
onMouseDown [} 441] A mouse button was depressed over the control.
onMouseEnter [} 442] The mouse pointer was moved over the control.
onMouseLeave [} 442] The mouse pointer has left the control.
onMouseUp [} 443] A mouse button was released over the control.
onMouseDownLeft [} 441] The left mouse button was depressed over the
control.
onMouseDownRight [} 441] The right mouse button was depressed over the
control.
onMouseMove [} 442] The mouse was moved over the control.
onMouseOver [} 442] The mouse pointer was moved over the control or
one of its children.
onMouseOut [} 442] The mouse pointer has left the control or one of its
child controls.
onMouseUpLeft [} 443] The left mouse button was released over the control.
onMouseUpRight [} 443] The right mouse button was released over the
control.
onMouseWheel [} 443] The mouse wheel was moved over the control.
onTouchStart [} 444] A finger/stylus was placed against a touch screen.
onTouchMove [} 444] A finger/stylus was moved on a touch screen.
onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.
onTouchCancel [} 444] An interaction with a touch screen was aborted.
Access rights
Name Description
observe [} 444] Determines whether the control is generally
observable.
operate [} 445] Determines whether the control is generally operable.
Inheritance hierarchy
Control [} 419]
Container Control [} 445]
Partial
See also
API reference [} 1143] for this control
5.3.8 Region
The region is a container for content controls. The content to be displayed can be defined using the "Target
Content" attribute.
Attributes
Category: Colors
Name Description
BackgroundColor [} 433] Definition of the background color
BorderColor [} 432] Definition of the border color of the control
Category: Layout
Name Description
Left [} 426] Definition of the distance from the left side to the left
side of the surrounding control
LeftUnit [} 426] Definition of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Top [} 426] Definition of the distance from the top side to the top
side of the surrounding control
TopUnit [} 426] Selection of the unit of the distance to the top side of
the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Right [} 429] Definition of the distance from the right side to the
right side of the surrounding control
RightUnit [} 429] Selection of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Bottom [} 429] Definition of the distance from the bottom side to the
bottom side of the surrounding control
BottomUnit [} 429] Selection of the unit of the distance to the bottom
side of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Width [} 427] Definition of the external width of the control
WidthUnit [} 427] Selection of the unit of the width:
· Pixels for an absolute width
· Percent for a relative width
Height [} 428] Definition of the external height of the control
HeightUnit [} 428] Selection of the unit of the height:
· Pixels for an absolute height
· Percent for a relative height
MaxWidth [} 437] Definition of the maximum width if the control size is
defined as dynamic
MaxWidthUnit [} 437] Selection of the unit of the maximum width:
· Pixels for an absolute value
· Percent for a relative value
MinWidth [} 438] Definition of the minimum width if the control size is
defined as dynamic
MinWidthUnit [} 438] Selection of the unit of the minimum width:
· Pixels for an absolute value
· Percent for a relative value
MaxHeight [} 436] Definition of the maximum height if the control size is
defined as dynamic
MaxHeightUnit [} 437] Selection of the unit of the maximum height:
· Pixels for an absolute value
· Percent for a relative value
MinHeight [} 436] Definition of the minimum height if the control size is
defined as dynamic
Name Description
MinHeightUnit [} 436] Selection of the unit of the minimum height:
· Pixels for an absolute value
· Percent for a relative value
RenderedLeft [} 430] Calculated distance in pixels from the left side to the
left side of the surrounding control
RenderedTop [} 430] Calculated distance in pixels from the top side to the
top side of the surrounding control
RenderedRight [} 431] Calculated distance in pixels from the right side to the
right side of the surrounding control
RenderedBottom [} 430] Calculated distance in pixels from the bottom side to
the bottom side of the surrounding control
RenderedWidth [} 431] Calculated width of the control in pixels
RenderedHeight [} 431] Calculated height of the control in pixels
GridRowIndex [} 432] Definition of the row of a grid in which the control is to
be displayed
GridColumnIndex [} 432] Definition of the column of a grid in which the control
is to be displayed
Opacity [} 438] Definition of the transparency of the entire control
Visibility [} 439] Selection of the visibility of a control:
· Visible: Control is visible
· Hidden: Control is invisible, but is drawn – controls
behind it cannot be operated
· Collapsed: Control is invisible and is not drawn –
controls behind it can be operated
ZIndex [} 440] Definition of the position on the Z-axis
Transform [} 439] Definition of a transformation of a control:
· Translate: Translate in X-, Y-, Z-direction
· Rotate: Rotate by an angle
· Scale: Zoom by a factor
· Skew: Sides shown skewed by an angle
· Origin: Set the origin of the transformation relative
to the position of the control
· Perspective: Set the perspective of the
transformations of all child elements
BoxShadow [} 440] Definition of a shadow
WidthMode [} 488] Selection of the method of calculating the width:
· Value: The width is defined by the width entered.
· Parent: The width is defined by the distance to the
left and right side. The "Width" attribute is ignored
in all calculations!
· Content: The width is defined by the children of the
content control. The "Width" attribute is ignored in
all calculations!
HeightMode [} 488] Selection of the method of calculating the height:
· Value: The height is defined by the height entered.
· Parent: The height is defined by the distance to the
top and bottom side of the parent element. The
"Height" attribute is ignored in all calculations!
Name Description
· Content: The height is defined by the children of
the content control. The "Height" attribute is
ignored in all calculations!
Category: Common
Name Description
IsEnabled [} 425] Selection of whether a control should be activated
Id [} 424] Definition of the name of the control
Type [} 439] Type name of the control.
ClassNames [} 425] Definition of control classes
IsAttached [} 425] If a control is logically assigned in the DOM.
ToolTip [} 438] Definition of the tool tip for the control
TargetContent [} 488] Definition of the path to the content control that is to
be displayed
ScaleMode [} 489] Selection of the scaling of the content that is
displayed in the region:
· None: No scaling of the content
· ScaleToFill: The content is displayed over the
entire size of the control. The proportions are
thereby ignored.
· ScaleToFit: The content is displayed as large as
possible without extending beyond the edges of
the control. The proportions are retained.
· ScaleToFitWidth: The content is displayed over the
entire width of the control. The proportions are
retained.
· ScaleToFitHeight: The content is displayed over
the entire height of the control. The proportions are
retained.
Scrolling [} 489] Selection of the scrolling behavior of the content:
· No
· Yes
· Auto
A browser has to be used to test the scrolling.
Category: Border
Name Description
BorderRadius [} 433] Definition of the radius of the four corners to round
them off
BorderStyle [} 433] Selection of the border style of the four sides of the
control
BorderWidth [} 433] Definition of the border width of the four sides of the
control
Category: Background Image
Name Description
BackgroundImage [} 434] Definition of an image that is located above the
background color
BackgroundImageHeight [} 435] Definition of the height of the background image
BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background
image:
· Pixels for an absolute height
· Percent for a relative height
BackgroundImageWidth [} 434] Definition of the width of the background image
BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background
image:
· Pixels for an absolute width
· Percent for a relative width
BackgroundImagePadding [} 435] Definition of an additional distance between the
border of the control and background image for the
four sides
BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background
image within the control
BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the
background image within the control
Events
Category: Control
Name Description
onTargetContentReplaced [} 489] The content control was replaced.
Category: Framework
Name Description
onAttached [} 440] The control was added to the display.
onDetached [} 440] The control was removed from the display.
onInitialized [} 441] The control was initialized.
onMoved [} 443] The control was moved in relation to the browser
window.
onResized [} 444] The size of the control was changed.
Category: Operator
Name Description
onPressed [} 443] A mouse click was executed or a touch screen was
briefly touched.
onMouseClick [} 441] The left mouse button was clicked over the control
and released.
onMouseDoubleClick [} 441] The left mouse button was clicked twice over the
control and released.
onMouseRightClick [} 442] The right mouse button was clicked over the control
and released.
onMouseDown [} 441] A mouse button was depressed over the control.
onMouseEnter [} 442] The mouse pointer was moved over the control.
onMouseLeave [} 442] The mouse pointer has left the control.
onMouseUp [} 443] A mouse button was released over the control.
onMouseDownLeft [} 441] The left mouse button was depressed over the
control.
onMouseDownRight [} 441] The right mouse button was depressed over the
control.
onMouseMove [} 442] The mouse was moved over the control.
onMouseOver [} 442] The mouse pointer was moved over the control or
one of its children.
onMouseOut [} 442] The mouse pointer has left the control or one of its
child controls.
onMouseUpLeft [} 443] The left mouse button was released over the control.
onMouseUpRight [} 443] The right mouse button was released over the
control.
onMouseWheel [} 443] The mouse wheel was moved over the control.
onTouchStart [} 444] A finger/stylus was placed against a touch screen.
onTouchMove [} 444] A finger/stylus was moved on a touch screen.
onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.
onTouchCancel [} 444] An interaction with a touch screen was aborted.
Access rights
Name Description
observe [} 444] Determines whether the control is generally
observable.
operate [} 445] Determines whether the control is generally operable.
Inheritance hierarchy
Control [} 419]
Region
See also
API reference [} 1148] for this control
5.3.8.1 Attributes
5.3.8.1.1 WidthMode
Selection of the method of calculating the width. The available options are:
· Value: The width is defined by the width entered.
· Parent: The width is defined by the distance to the left and right side. The Width attribute is ignored in
all calculations!
· Content: The width is defined by the children of the content control.
Note: Learn how controls can be positioned and their size defined [} 127].
Schema: tchmi:framework#/definitions/SizeModeWithContent [} 2133]
Origin: Region [} 482]
See also
Attribute getter: getWidthMode [} 1154]
Attribute setter: setWidthMode [} 1155]
Note: Available since version 1.8
5.3.8.1.2 HeightMode
Selection of the method of calculating the height. The available options are:
· Value: The height is defined by the height entered.
· Parent: The height is defined by the distance to the top and bottom side. The Height attribute is
ignored in all calculations!
· Content: The height is defined by the children of the content control.
Note: Learn how controls can be positioned and their size defined [} 127].
Schema: tchmi:framework#/definitions/SizeModeWithContent [} 2133]
Origin: Region [} 482]
See also
Attribute getter: getHeightMode [} 1153]
Attribute setter: setHeightMode [} 1154]
Note: Available since version 1.8
5.3.8.1.3 TargetContent
Path to the content [} 456] control.
Schema: tchmi:framework#/definitions/ContentPath [} 2097]
Origin: Region [} 482]
See also
Attribute getter: getTargetContent [} 1155]
Attribute setter: setTargetContent [} 1156]
Note: Available since version 1.8
5.3.8.1.4 ScaleMode
Defines the scaling of the control.
Possible values:
· None (Standard)
· ScaleToFit
· ScaleToFitWidth
· ScaleToFitHeight
· ScaleToFill
Schema: tchmi:framework#/definitions/ScaleMode [} 2132]
Origin: Region [} 482]
See also
Attribute getter: getScaleMode [} 1156]
Attribute setter: setScaleMode [} 1157]
Note: Available since version 1.8
5.3.8.1.5 Scrolling
Defines whether the content can be scrolled.
Possible values:
· No (Standard)
· Yes
· Auto
Schema: tchmi:framework#/definitions/ScrollMode [} 2132]
Origin: Region [} 482]
See also
Attribute getter: getScrolling [} 1157]
Attribute setter: setScrolling [} 1157]
Note: Available since version 1.8
5.3.8.2 Events
5.3.8.2.1 onTargetContentReplaced
The content control was replaced. The new control is not yet displayed at this point in time.
Origin: Region [} 482]
Note: Available since version 1.8
5.3.9 User Control
A user control is a reusable collection of controls which, after creation, is available in the toolbox like a
standard control. The control is created under the TC HMI project tree with the context menu Add new
Item…
When adding a user control, a user control host is created that has the user control as a child element.
Therefore, every change to an attribute (for example the background color) acts from the outside
on the user control host and from the inside on the user control.
Attributes
Category: Colors
Name Description
BackgroundColor [} 433] Definition of the background color
BorderColor [} 432] Definition of the border color of the control
Category: Layout
Name Description
Left [} 426] Definition of the distance from the left side to the left
side of the surrounding control
LeftUnit [} 426] Definition of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Top [} 426] Definition of the distance from the top side to the top
side of the surrounding control
TopUnit [} 426] Selection of the unit of the distance to the top side of
the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Right [} 429] Definition of the distance from the right side to the
right side of the surrounding control
RightUnit [} 429] Selection of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Bottom [} 429] Definition of the distance from the bottom side to the
bottom side of the surrounding control
BottomUnit [} 429] Selection of the unit of the distance to the bottom
side of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Width [} 427] Definition of the external width of the control
WidthUnit [} 427] Selection of the unit of the width:
· Pixels for an absolute width
· Percent for a relative width
Height [} 428] Definition of the external height of the control
HeightUnit [} 428] Selection of the unit of the height:
· Pixels for an absolute height
· Percent for a relative height
MaxWidth [} 437] Definition of the maximum width if the control size is
defined as dynamic
MaxWidthUnit [} 437] Selection of the unit of the maximum width:
· Pixels for an absolute value
· Percent for a relative value
MinWidth [} 438] Definition of the minimum width if the control size is
defined as dynamic
MinWidthUnit [} 438] Selection of the unit of the minimum width:
· Pixels for an absolute value
· Percent for a relative value
MaxHeight [} 436] Definition of the maximum height if the control size is
defined as dynamic
MaxHeightUnit [} 437] Selection of the unit of the maximum height:
· Pixels for an absolute value
· Percent for a relative value
MinHeight [} 436] Definition of the minimum height if the control size is
defined as dynamic
Name Description
MinHeightUnit [} 436] Selection of the unit of the minimum height:
· Pixels for an absolute value
· Percent for a relative value
RenderedLeft [} 430] Calculated distance in pixels from the left side to the
left side of the surrounding control
RenderedTop [} 430] Calculated distance in pixels from the top side to the
top side of the surrounding control
RenderedRight [} 431] Calculated distance in pixels from the right side to the
right side of the surrounding control
RenderedBottom [} 430] Calculated distance in pixels from the bottom side to
the bottom side of the surrounding control
RenderedWidth [} 431] Calculated width of the control in pixels
RenderedHeight [} 431] Calculated height of the control in pixels
GridRowIndex [} 432] Definition of the row of a grid in which the control is to
be displayed
GridColumnIndex [} 432] Definition of the column of a grid in which the control
is to be displayed
Opacity [} 438] Definition of the transparency of the entire control
Visibility [} 439] Selection of the visibility of a control:
· Visible: Control is visible
· Hidden: Control is invisible, but is drawn – controls
behind it cannot be operated
· Collapsed: Control is invisible and is not drawn –
controls behind it can be operated
ZIndex [} 440] Definition of the position on the Z-axis
Transform [} 439] Definition of a transformation of a control:
· Translate: Translate in X-, Y-, Z-direction
· Rotate: Rotate by an angle
· Scale: Zoom by a factor
· Skew: Sides shown skewed by an angle
· Origin: Set the origin of the transformation relative
to the position of the control
· Perspective: Set the perspective of the
transformations of all child elements
BoxShadow [} 440] Definition of a shadow
WidthMode [} 450] Selection of the method of calculating the width:
· Value: The width is defined by the width entered.
· Parent: The width is defined by the distance to the
left and right side of the parent element. The
"Width" attribute is ignored in all calculations!
· Content: The height is defined by the width of the
content. The "Width" attribute is ignored in all
calculations!
HeightMode [} 450] Selection of the method of calculating the height:
· Value: The height is defined by the height entered.
· Parent: The height is defined by the distance to the
top and bottom side of the parent element. The
"Height" attribute is ignored in all calculations!
Name Description
· Content: The height is defined by the height of the
content. The "Height" attribute is ignored in all
calculations!
Category: Common
Name Description
IsEnabled [} 450] Selection of whether the control is enabled
Id [} 424] Definition of the name of the control
Type [} 439] Type name of the control.
ClassNames [} 425] Definition of control classes
IsAttached [} 425] If a control is logically assigned in the DOM.
ToolTip [} 438] Definition of the tool tip for the control
Category: Border
Name Description
BorderRadius [} 433] Definition of the radius of the four corners to round
them off
BorderStyle [} 433] Selection of the border style of the four sides of the
control
BorderWidth [} 433] Definition of the border width of the four sides of the
control
Category: Background Image
Name Description
BackgroundImage [} 434] Definition of an image that is located above the
background color
BackgroundImageHeight [} 435] Definition of the height of the background image
BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background
image:
· Pixels for an absolute height
· Percent for a relative height
BackgroundImageWidth [} 434] Definition of the width of the background image
BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background
image:
· Pixels for an absolute width
· Percent for a relative width
BackgroundImagePadding [} 435] Definition of an additional distance between the
border of the control and background image for the
four sides
BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background
image within the control
BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the
background image within the control
Events
Category: Framework
Name Description
onAttached [} 440] The control was added to the display.
onDetached [} 440] The control was removed from the display.
onInitialized [} 441] The control was initialized.
onMoved [} 443] The control was moved in relation to the browser
window.
onResized [} 444] The size of the control was changed.
Category: Operator
Name Description
onPressed [} 443] A mouse click was executed or a touch screen was
briefly touched.
onMouseClick [} 441] The left mouse button was clicked over the control
and released.
onMouseDoubleClick [} 441] The left mouse button was clicked twice over the
control and released.
onMouseRightClick [} 442] The right mouse button was clicked over the control
and released.
onMouseDown [} 441] A mouse button was depressed over the control.
onMouseEnter [} 442] The mouse pointer was moved over the control.
onMouseLeave [} 442] The mouse pointer has left the control.
onMouseUp [} 443] A mouse button was released over the control.
onMouseDownLeft [} 441] The left mouse button was depressed over the
control.
onMouseDownRight [} 441] The right mouse button was depressed over the
control.
onMouseMove [} 442] The mouse was moved over the control.
onMouseOver [} 442] The mouse pointer was moved over the control or
one of its children.
onMouseOut [} 442] The mouse pointer has left the control or one of its
child controls.
onMouseUpLeft [} 443] The left mouse button was released over the control.
onMouseUpRight [} 443] The right mouse button was released over the
control.
onMouseWheel [} 443] The mouse wheel was moved over the control.
onTouchStart [} 444] A finger/stylus was placed against a touch screen.
onTouchMove [} 444] A finger/stylus was moved on a touch screen.
onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.
onTouchCancel [} 444] An interaction with a touch screen was aborted.
Access rights
Name Description
observe [} 444] Determines whether the control is generally
observable.
operate [} 445] Determines whether the control is generally operable.
Inheritance hierarchy
Control [} 419]
Container Control [} 445]
Partial [} 476]
User Control
See also
API reference [} 1158] for this control
5.3.10 User Control Host
The user control host is an administration container for user controls [} 495]. It is created automatically when
using a user control.
Changes since version 1.10
Form version 1.10, the attribute TargetUserControl is mandatory at the time of compilation and can no longer
be changed at runtime.
A missing attribute TargetUserControl and errors in the configuration of the UserControl defined in
TargetUserControl now lead to compilation errors that can indicate an error in the configuration.
Attributes
Category: Colors
Name Description
BackgroundColor [} 433] Definition of the background color
BorderColor [} 432] Definition of the border color of the control
Category: Layout
Name Description
Left [} 426] Definition of the distance from the left side to the left
side of the surrounding control
LeftUnit [} 426] Definition of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Top [} 426] Definition of the distance from the top side to the top
side of the surrounding control
TopUnit [} 426] Selection of the unit of the distance to the top side of
the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Right [} 429] Definition of the distance from the right side to the
right side of the surrounding control
RightUnit [} 429] Selection of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Bottom [} 429] Definition of the distance from the bottom side to the
bottom side of the surrounding control
BottomUnit [} 429] Selection of the unit of the distance to the bottom
side of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Width [} 427] Definition of the external width of the control
WidthUnit [} 427] Selection of the unit of the width:
· Pixels for an absolute width
· Percent for a relative width
Height [} 428] Definition of the external height of the control
HeightUnit [} 428] Selection of the unit of the height:
· Pixels for an absolute height
· Percent for a relative height
MaxWidth [} 437] Definition of the maximum width if the control size is
defined as dynamic
MaxWidthUnit [} 437] Selection of the unit of the maximum width:
· Pixels for an absolute value
· Percent for a relative value
MinWidth [} 438] Definition of the minimum width if the control size is
defined as dynamic
MinWidthUnit [} 438] Selection of the unit of the minimum width:
· Pixels for an absolute value
· Percent for a relative value
MaxHeight [} 436] Definition of the maximum height if the control size is
defined as dynamic
MaxHeightUnit [} 437] Selection of the unit of the maximum height:
· Pixels for an absolute value
· Percent for a relative value
MinHeight [} 436] Definition of the minimum height if the control size is
defined as dynamic
Name Description
MinHeightUnit [} 436] Selection of the unit of the minimum height:
· Pixels for an absolute value
· Percent for a relative value
RenderedLeft [} 430] Calculated distance in pixels from the left side to the
left side of the surrounding control
RenderedTop [} 430] Calculated distance in pixels from the top side to the
top side of the surrounding control
RenderedRight [} 431] Calculated distance in pixels from the right side to the
right side of the surrounding control
RenderedBottom [} 430] Calculated distance in pixels from the bottom side to
the bottom side of the surrounding control
RenderedWidth [} 431] Calculated width of the control in pixels
RenderedHeight [} 431] Calculated height of the control in pixels
GridRowIndex [} 432] Definition of the row of a grid in which the control is to
be displayed
GridColumnIndex [} 432] Definition of the column of a grid in which the control
is to be displayed
Opacity [} 438] Definition of the transparency of the entire control
Visibility [} 439] Selection of the visibility of a control:
· Visible: Control is visible
· Hidden: Control is invisible, but is drawn – controls
behind it cannot be operated
· Collapsed: Control is invisible and is not drawn –
controls behind it can be operated
ZIndex [} 440] Definition of the position on the Z-axis
Transform [} 439] Definition of a transformation of a control:
· Translate: Translate in X-, Y-, Z-direction
· Rotate: Rotate by an angle
· Scale: Zoom by a factor
· Skew: Sides shown skewed by an angle
· Origin: Set the origin of the transformation relative
to the position of the control
· Perspective: Set the perspective of the
transformations of all child elements
BoxShadow [} 440] Definition of a shadow
WidthMode [} 500] Selection of the method of calculating the width:
· Value: The width is defined by the width entered.
· Parent: The width is defined by the distance to the
left and right side. The "Width" attribute is ignored
in all calculations!
· Content: The width is defined by the user control
that is displayed in the user control host. The
"Width" attribute is ignored in all calculations!
HeightMode [} 500] Selection of the method of calculating the height:
· Value: The height is defined by the height entered.
· Parent: The height is defined by the distance to the
top and bottom side of the parent element. The
"Height" attribute is ignored in all calculations!
Name Description
· Content: The height is defined by the user control
that is displayed in the user control host. The
"Height" attribute is ignored in all calculations!
Category: Common
Name Description
TargetUserControl [} 501] Definition of the path to the user control that is to be
displayed
IsEnabled [} 501] Selection of whether the control should be enabled
Id [} 424] Definition of the name of the control
Type [} 439] Type name of the control.
ClassNames [} 425] Definition of control classes
IsAttached [} 425] If a control is logically assigned in the DOM.
ToolTip [} 438] Definition of the tool tip for the control
Category: Border
Name Description
BorderRadius [} 433] Definition of the radius of the four corners to round
them off
BorderStyle [} 433] Selection of the border style of the four sides of the
control
BorderWidth [} 433] Definition of the border width of the four sides of the
control
Category: Background Image
Name Description
BackgroundImage [} 434] Definition of an image that is located above the
background color
BackgroundImageHeight [} 435] Definition of the height of the background image
BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background
image:
· Pixels for an absolute height
· Percent for a relative height
BackgroundImageWidth [} 434] Definition of the width of the background image
BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background
image:
· Pixels for an absolute width
· Percent for a relative width
BackgroundImagePadding [} 435] Definition of an additional distance between the
border of the control and background image for the
four sides
BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background
image within the control
BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the
background image within the control
Events
Category: Control
Name Description
onTargetUserControlReplaced [} 501] The user control was replaced.
Category: Framework
Name Description
onAttached [} 440] The control was added to the display.
onDetached [} 440] The control was removed from the display.
onInitialized [} 441] The control was initialized.
onMoved [} 443] The control was moved in relation to the browser
window.
onResized [} 444] The size of the control was changed.
Category: Operator
Name Description
onPressed [} 443] A mouse click was executed or a touch screen was
briefly touched.
onMouseClick [} 441] The left mouse button was clicked over the control
and released.
onMouseDoubleClick [} 441] The left mouse button was clicked twice over the
control and released.
onMouseRightClick [} 442] The right mouse button was clicked over the control
and released.
onMouseDown [} 441] A mouse button was depressed over the control.
onMouseEnter [} 442] The mouse pointer was moved over the control.
onMouseLeave [} 442] The mouse pointer has left the control.
onMouseUp [} 443] A mouse button was released over the control.
onMouseDownLeft [} 441] The left mouse button was depressed over the
control.
onMouseDownRight [} 441] The right mouse button was depressed over the
control.
onMouseMove [} 442] The mouse was moved over the control.
onMouseOver [} 442] The mouse pointer was moved over the control or
one of its children.
onMouseOut [} 442] The mouse pointer has left the control or one of its
child controls.
onMouseUpLeft [} 443] The left mouse button was released over the control.
onMouseUpRight [} 443] The right mouse button was released over the
control.
onMouseWheel [} 443] The mouse wheel was moved over the control.
onTouchStart [} 444] A finger/stylus was placed against a touch screen.
onTouchMove [} 444] A finger/stylus was moved on a touch screen.
onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.
onTouchCancel [} 444] An interaction with a touch screen was aborted.
Access rights
Name Description
observe [} 444] Determines whether the control is generally
observable.
operate [} 445] Determines whether the control is generally operable.
Inheritance hierarchy
Control [} 419]
User Control Host
See also
API reference [} 1163] for this control
5.3.10.1 Attributes
5.3.10.1.1 HeightMode
Selection of the method of calculating the height. The available options are:
· Value: The height is defined by the height entered.
· Parent: The height is defined by the distance to the top and bottom side. The Height attribute is
ignored in all calculations!
· Content: The width is defined by the children of the user control.
Note: Learn how controls can be positioned and their size defined [} 127].
Schema: tchmi:framework#/definitions/SizeModeWithContent [} 2133]
Origin: User Control Host [} 495]
See also
Attribute getter: getHeightMode [} 1169]
Attribute setter: setHeightMode [} 1169]
Note: Available since version 1.8
5.3.10.1.2 WidthMode
Selection of the method of calculating the width. The available options are:
· Value: The width is defined by the width entered.
· Parent: The width is defined by the distance to the left and right side. The Width attribute is ignored in
all calculations!
· Content: The width is defined by the children of the user control.
Note: Learn how controls can be positioned and their size defined [} 127].
Schema: tchmi:framework#/definitions/SizeModeWithContent [} 2133]
Origin: User Control Host [} 495]
See also
Attribute getter: getWidthMode [} 1170]
Attribute setter: setWidthMode [} 1170]
Note: Available since version 1.8
5.3.10.1.3 IsEnabled
Activation status of a control. This overwrites the status of the user control [} 490]. Only active controls react
to mouse and touch
Schema: tchmi:general#/definitions/Boolean [} 2060]
Origin: User Control Host [} 495]
See also
Attribute getter: getIsEnabled [} 1172]
Attribute setter: setIsEnabled [} 1172]
Note: Available since version 1.8
5.3.10.1.4 TargetUserControl
Path to the user control [} 490].
Schema: tchmi:framework#/definitions/UserControlPath [} 2147]
Origin: User Control Host [} 495]
See also
Attribute getter: getTargetUserControl [} 1171]
Attribute setter: setTargetUserControl [} 1171]
Note: Available since version 1.8
ReadOnly from version 1.10
5.3.10.2 Events
5.3.10.2.1 onTargetUserControlReplaced
The user control was replaced. The new control is not yet displayed at this point in time.
Origin: User Control Host [} 495]
Note: Available since version 1.8
5.3.11 View
A view is the top-level control of a visualization. The control is created under the TC HMI project tree with the
context menu Add new Item…
Attributes
Category: Colors
Name Description
BackgroundColor [} 433] Definition of the background color
BorderColor [} 432] Definition of the border color of the control
Category: Layout
Name Description
Left [} 426] Definition of the distance from the left side to the left
side of the surrounding control
LeftUnit [} 426] Definition of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Top [} 426] Definition of the distance from the top side to the top
side of the surrounding control
TopUnit [} 426] Selection of the unit of the distance to the top side of
the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Right [} 429] Definition of the distance from the right side to the
right side of the surrounding control
RightUnit [} 429] Selection of the unit of the distance to the right side
of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Bottom [} 429] Definition of the distance from the bottom side to the
bottom side of the surrounding control
BottomUnit [} 429] Selection of the unit of the distance to the bottom
side of the surrounding control:
· Pixels for absolute positioning
· Percent for relative positioning
Width [} 427] Definition of the external width of the control
WidthUnit [} 427] Selection of the unit of the width:
· Pixels for an absolute width
· Percent for a relative width
Height [} 428] Definition of the external height of the control
HeightUnit [} 428] Selection of the unit of the height:
· Pixels for an absolute height
· Percent for a relative height
MaxWidth [} 437] Definition of the maximum width if the control size is
defined as dynamic
MaxWidthUnit [} 437] Selection of the unit of the maximum width:
· Pixels for an absolute value
· Percent for a relative value
MinWidth [} 438] Definition of the minimum width if the control size is
defined as dynamic
MinWidthUnit [} 438] Selection of the unit of the minimum width:
· Pixels for an absolute value
· Percent for a relative value
MaxHeight [} 436] Definition of the maximum height if the control size is
defined as dynamic
MaxHeightUnit [} 437] Selection of the unit of the maximum height:
· Pixels for an absolute value
· Percent for a relative value
MinHeight [} 436] Definition of the minimum height if the control size is
defined as dynamic
Name Description
MinHeightUnit [} 436] Selection of the unit of the minimum height:
· Pixels for an absolute value
· Percent for a relative value
RenderedLeft [} 430] Calculated distance in pixels from the left side to the
left side of the surrounding control
RenderedTop [} 430] Calculated distance in pixels from the top side to the
top side of the surrounding control
RenderedRight [} 431] Calculated distance in pixels from the right side to the
right side of the surrounding control
RenderedBottom [} 430] Calculated distance in pixels from the bottom side to
the bottom side of the surrounding control
RenderedWidth [} 431] Calculated width of the control in pixels
RenderedHeight [} 431] Calculated height of the control in pixels
GridRowIndex [} 432] Definition of the row of a grid in which the control is to
be displayed
GridColumnIndex [} 432] Definition of the column of a grid in which the control
is to be displayed
Opacity [} 438] Definition of the transparency of the entire control
Visibility [} 439] Selection of the visibility of a control:
· Visible: Control is visible
· Hidden: Control is invisible, but is drawn – controls
behind it cannot be operated
· Collapsed: Control is invisible and is not drawn –
controls behind it can be operated
ZIndex [} 440] Definition of the position on the Z-axis
Transform [} 439] Definition of a transformation of a control:
· Translate: Translate in X-, Y-, Z-direction
· Rotate: Rotate by an angle
· Scale: Zoom by a factor
· Skew: Sides shown skewed by an angle
· Origin: Set the origin of the transformation relative
to the position of the control
· Perspective: Set the perspective of the
transformations of all child elements
BoxShadow [} 440] Definition of a shadow
WidthMode [} 450] Selection of the method of calculating the width:
· Value: The width is defined by the width entered.
· Parent: The width is defined by the distance to the
left and right side of the parent element. The
"Width" attribute is ignored in all calculations!
· Content: The height is defined by the width of the
content. The "Width" attribute is ignored in all
calculations!
HeightMode [} 450] Selection of the method of calculating the height:
· Value: The height is defined by the height entered.
· Parent: The height is defined by the distance to the
top and bottom side of the parent element. The
"Height" attribute is ignored in all calculations!
Name Description
· Content: The height is defined by the height of the
content. The "Height" attribute is ignored in all
calculations!
Category: Common
Name Description
IsEnabled [} 450] Selection of whether the control is enabled
Id [} 424] Definition of the name of the control
Type [} 439] Type name of the control.
ClassNames [} 425] Definition of control classes
IsAttached [} 425] If a control is logically assigned in the DOM.
ToolTip [} 438] Definition of the tool tip for the control
Category: Border
Name Description
BorderRadius [} 433] Definition of the radius of the four corners to round
them off
BorderStyle [} 433] Selection of the border style of the four sides of the
control
BorderWidth [} 433] Definition of the border width of the four sides of the
control
Category: Background Image
Name Description
BackgroundImage [} 434] Definition of an image that is located above the
background color
BackgroundImageHeight [} 435] Definition of the height of the background image
BackgroundImageHeightUnit [} 435] Selection of the unit of the height of the background
image:
· Pixels for an absolute height
· Percent for a relative height
BackgroundImageWidth [} 434] Definition of the width of the background image
BackgroundImageWidthUnit [} 434] Selection of the unit of the width of the background
image:
· Pixels for an absolute width
· Percent for a relative width
BackgroundImagePadding [} 435] Definition of an additional distance between the
border of the control and background image for the
four sides
BackgroundImageVerticalAlignment [} 436] Definition of the vertical alignment of the background
image within the control
BackgroundImageHorizontalAlignment [} 435] Definition of the horizontal alignment of the
background image within the control
Events
Category: Framework
Name Description
onAttached [} 440] The control was added to the display.
onDetached [} 440] The control was removed from the display.
onInitialized [} 441] The control was initialized.
onMoved [} 443] The control was moved in relation to the browser
window.
onResized [} 444] The size of the control was changed.
Category: Operator
Name Description
onPressed [} 443] A mouse click was executed or a touch screen was
briefly touched.
onMouseClick [} 441] The left mouse button was clicked over the control
and released.
onMouseDoubleClick [} 441] The left mouse button was clicked twice over the
control and released.
onMouseRightClick [} 442] The right mouse button was clicked over the control
and released.
onMouseDown [} 441] A mouse button was depressed over the control.
onMouseEnter [} 442] The mouse pointer was moved over the control.
onMouseLeave [} 442] The mouse pointer has left the control.
onMouseUp [} 443] A mouse button was released over the control.
onMouseDownLeft [} 441] The left mouse button was depressed over the
control.
onMouseDownRight [} 441] The right mouse button was depressed over the
control.
onMouseMove [} 442] The mouse was moved over the control.
onMouseOver [} 442] The mouse pointer was moved over the control or
one of its children.
onMouseOut [} 442] The mouse pointer has left the control or one of its
child controls.
onMouseUpLeft [} 443] The left mouse button was released over the control.
onMouseUpRight [} 443] The right mouse button was released over the
control.
onMouseWheel [} 443] The mouse wheel was moved over the control.
onTouchStart [} 444] A finger/stylus was placed against a touch screen.
onTouchMove [} 444] A finger/stylus was moved on a touch screen.
onTouchEnd [} 444] A finger/stylus was lifted off a touch screen.
onTouchCancel [} 444] An interaction with a touch screen was aborted.
Access rights
Name Description
observe [} 444] Determines whether the control is generally
observable.
operate [} 445] Determines whether the control is generally operable.
Inheritance hierarchy
Control [} 419]
Container Control [} 445]
Partial [} 476]
View
See also
API reference [} 1173] for this control
5.4 User controls
A user control enables the re-use of existing controls in a separate control. Existing controls include the
system controls, the Beckhoff controls and the framework controls. The controls can be placed in the user
control by drag & drop.
Further information on the controls can be found in the chapter Creating a user control [} 36].
5.5 Framework controls
User-specific controls [} 2012] can be developed in JavaScript in order to integrate controls or libraries from
third-party suppliers or to map applicative requirements.
5.6 Control rights
Enables or prevents the editing or viewing of the respective control by the user groups configured. For more
information, see the chapter User Management [} 507].