Existing controls include the system controls,
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] l |
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].