Form designer: basic properties of visual components

Visual components, may contain the following properties and a combination of such properties, depending on the kind of component

Name

The Name property is needed to identify the component. It is displayed in the data structure, it can be referred to when describing dynamic properties. The name is assigned automatically when the component is created and can also be changed to your own. For a visual component, the name must be unique among other visual components on the form. For a logical component, the name must be unique within its visual component.

Property to contain child components

This property is not directly editable from the "property inspector".
Components such as Form, Panel, TableCell, Map, SmartbusBar may contain child components that can be dragged there from the palette or by pasting from the buffer. The nesting level can be viewed in the "structure".
Some other components, such as Table, HistoricChart, RealtimeChart, can also contain child components, which are also displayed in the structure, but cannot be directly modified by the user, - they are controlled by the properties of these components.

Layout (size and position)

Allows you to control the size and position of the component. If (in the configurator mode) a component is selected, then it has "handles" for resizing and it can also be dragged with the mouse to change its position. Moving of a group of selected objects is supported also. When resizing and positioning with the mouse, a resolution of 10 pixels is used. The exact size can be set in the property inspector.
In the property inspector, the following properties are available:

  • Width - width of the component in pixels.
  • Height - height of the component in pixels.
  • Left, Top - the position of the upper left corner of the component in pixels, relative to the left and upper borders of the parent component.
  • Right, Bottom - position of the bottom right corner of the component in pixels, relative to the right and bottom borders of the parent component.
  • Horizontal stick - behavior of the component in runtime when the width of the parent component changes
    • "Left" - anchor to the left edge of the parent component. If the width of the parent component changes, then the "Left" and "Width" properties of this component will remain unchanged, and the "Right" property will change.
    • "Right" - anchor to the right edge of the parent component. If the width of the parent component changes, then the "Right" and "Width" properties of this component will remain unchanged, and the "Left" property will change.
    • "Left & Right" - snaps to the left and right edges of the parent component. If the width of the parent component changes, then the "Left" and "Right" properties of this component will remain unchanged, and the "Width" will change.
    • "Scale" - snaps to the left and right edges of the parent component. If the width of the parent component changes, then the values ​​of the "Left", "Right" and "Width" properties of this component will be scaled in proportion to the change in the width of the parent component.
  • Vertical stick - same behavior as Horizontal stick, but controls the behavior when the height of the parent component changes.
  • Drag parent - If "true" then when dragging this component with the mouse, not this component itself will be dragged, but the parent component.
  • Resize parent - If "true" then when resizing this component with the mouse, the size of the parent component will change, not this component itself.

Font

Allows you to control the properties of the font.

  • Font family - Set the font family. A list of multiple font family names and/or a common font name for the selected element. The values ​​are separated by commas to indicate that they are alternatives. The browser will select from the list the first font that is installed.
  • Size font size in pixels
  • Scale size - If "yes", the font size will be proportionally scaled when resizing this component in runtime.
  • Color - font color
  • Bold - bold style
  • Italic - italic
  • Underline - underline

Text

Specifies the text to display.

  • Text is the actual text to be displayed. The use of variables is not allowed here.
  • Horizontal layout - text alignment horizontally relative to the component borders - to the left, to the right, in the center
  • Vertical layout - vertical alignment relative to the component borders
  • Padding - additional padding for text in pixels, left, right, top, bottom

Border

Controls the display of the frame border of the component.

  • Thickness - Thickness in pixels of the border.
  • Radius - Border rounding radius in percent.
  • "Border-bottom" - a group of properties for the lower part of the border:
    • Bottom style - Bottom border style, "none" - no border, "solid" - solid line, or one of the effects
    • Bottom color - The color of the bottom border.

The same properties can be separately set for the top, left, and right borders.

Opacity (opacity)

The opacity of the component. Decimal number from 0 to 1. 1 - the component is completely opaque, 0 - the component is completely transparent. A fully transparent component is available only in runtime, in edit mode it is only partially transparent. Also, a completely transparent component will not respond to mouse interaction in runtime. If a component is transparent, then all of its child components is also transparent.

Color

Sets the background color of the component. In the property inspector, you can use the built-in editor to select a color, or set the color as a string. Colors with alpha channel (with transparency) are supported. You can specify an empty string to set a transparent background. When you set color in form of string, you can use color english names, a hexadecimal color code after the # sign, and a four-number rgba notation.

PointerEvents (mouse events)

Allows you to disable mouse events for the component. For a component with disabled mouse events, when the user interacts with this component, logical mouseEvents will not fire. Also buttons can not be pressed.

Hint (tooltip)

Specifies a text description for the component that will be displayed when the user moves the mouse cursor over this component.

Canselecttext (the ability to select text)

Enables or disables text selection ("Yes"/"No" values). The value "Parent" - uses the settings of the parent component.