Versions Compared

Old Version 10

changes.mady.by.user Paulo Tsuchiya

Saved on

compared with

New Version Current

changes.mady.by.user admin

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


The PushButton component allows users to create interactive buttons within their displays.

It is implemented deriving from the ToggleButton control, amiable in the Windows WPF graphical system, and also in the Web HTML5 pages.

On this page:

Table of Contents
maxLevel3
stylenone

Requirements

This component is Portable. It runs both on Windows and on Web Pages hosted in any platform.

PushButton vs Button

The PushButton and Button controls have similar appearance, but there are distinctions on how typically they are used.

The Button is typically used in combination with the Action Dynamic. When there is an action connected with the Button, its appearance will automatically act to the Mouse Over events, and when is pressed, a visual feedback is provided. The pressed visual stays only while the button is pressed, but there is no state or dynamic property connected with the Button.

The PushButton (or ToggleButton), on the other hand, can be in either a Checked or Not Checked state, with its appearance reflecting this state. The button updates its state only after a click, toggling between down and up with each click.

  • No actions:  if there is no Dynamic action on the button, neither a tag on Linked Value, the element is just a static drawing.
  • Is Pressed: if there a Dynamic action, but no tag on Linked Value, the visual will change with Mouse Over and Pressed states. 
  • Is Checked: If there is a tag on the Linked Value, the visual will change with the Mouse Over state, and with the value of the linked tag.

Configuration

After dragging and dropping the component into the Drawing area, double-click it to open the graphical element

  1. Go to Displays / Draw.
  2. On the Components Panel, select Interaction, then PushButton.
  3. Click or drag-and-drop it on the Drawing area to use it.
  4. Double-click the component to open the configuration window.
It specifies with It enables can user's to It associates checkbox , enumeration, This linkage means that the state of the Push(checked or unchecked) will reflect the changes in the selected object in your application.

Sets the binding mode for the component. The options are:

  • TwoWay updates the data source and UI interchangeably;

  • OutputOnly allows data output without user input;

    • InputOnly accepts user input without updating the data source. ""

    PushButton Settings

    Field

    Description

    Label Text

    Specifies the text displayed

    in the PushButton.

    Localize

    Enables the label text

    to be dynamically adjusted based on the

    user’s locale settings, ensuring the interface is accessible and understandable

    for users from different language backgrounds.

    Linked Value (IsChecked)

    Associates the

    button with a tag

    value, or object.

    Binding

    When tag is greater than zero, the visual of the PushButton will show as Sunken, when its zero it will show as raised. 

    Linked Value Is ReadOnly

    When checked (Read-Only), the visual of control will vary according the tag, but the value of the tag will not change when clicking in the control. 

    When not checked (not read-only) when the PushButton is clicked the value of the tag in LinkedValue is toggled:

    • If value was not zero, it is set to zero.
    • If the value was zero, it is set to one. 

    BorderThickness

    Specifies the thickness of the PushButton border. The

    Apply

    button applies the specified border thickness.

    Shadow Effect

    Adds a Shadow to emphasize the visual of Raised or Sunken. 


    Tip
    titleBoder Raised or Sunken

    You can draw the PushButton to show its border raised on sunken, but typically you use only the Raised options, and the Sunken will be applied automatically when the application is running based on the value of the tag in the Linked Value (IsChecked) property. 


    Label Settings

    Label Settings

    Field

    Description

    Position

    It defines

    Defines the label's position. There

    are the

    following options are available:

    Auto: The label position is determined automatically based on the available space and button size.

    Top: The label is positioned above the button.

    Left: The label is positioned to the left of the button.

    Inside: The label is positioned inside the button, usually centered.

    None: The button has no visible label.

    Width

    It defines

    Defines the label's width.

    Auto

    When enabled,

    it

    defines the label's width automatically.

    Preview

    It

    This option is available only when you link an object to the button. Preview options control the preview of the label content or data bindings. These options indicate the data linked to the button.

    Linked tag: Displays the object path of a linked tag, such as "Tag.Temperature.Value".

    Whitespace: Shows a white space as a placeholder.

    Placeholder: Displays the symbol

    "

    ‘#

    "

    ’ as a placeholder.

    Format

    It

    This option is available only when

    you link

    an object is linked to the button. It allows you to define an expression to format the selected label. For example

    : N1 (

    , ‘N1’ formats a number with

    1 decimal place).

    one decimal place.



    Hover Color

    The colors of the button hover effect can be redefined under Display > Themes by adjusting the HoverBackground and HoverBorder options for the active theme.

    Image Added

    Runtime Execution

    The visual of the element, will show Raised or Sunken according to the Linked Value configuration. 

    if the Is ReadOnly option is not selected, when there is a mouse click in the object, the value of the tag in LinkedValue is toggled. 

    If there is an Action Dynamic connected with the element, the actions will be executed according to the mouse event configured. 

    Image Added application instantly performs the linked action when users press the PushButton. This button provides immediate feedback, confirming the interaction. The event handler then executes the command, such as initiating a process, starting data logging, or resetting an alarm, ensuring prompt responses.

    In this section:

    Page Tree
    root@parent
    spacesV10