Skip to main content

Moving Dialogs

If a user interface programmed by you contains dialogs, then these can be grabbed and moved in the background area at runtime. The visualization user can use the mouse (or other pointing device) to move the dialog to any position. As a result, areas which were hidden when initially opened now become visible. This can be useful if, for example, when an opening dialog obscures information on the user interface. The system remembers the new position for the next opening.

When moving, the visualization user usually uses the mouse to grab a dialog in the title bar. For standard dialogs, the title bar is therefore configured as its pointer area.

In your own dialogs, the background area is configured for this. However, you can also program any other or additional pointer ranges. To do this, delimit areas with the Invisible Input element and enable its Used as pointer area property. The element must not have an input configuration. This is useful if the background area of the dialog is rather small and therefore difficult to grab, or if the title area is not part of the background area.

. Requirements

  • The Support client animations and overlay of native elements property is enabled In the Visualization Manager.

    Note: Moving dialogs is only possible when the overlay feature is enabled. However, this is not supported in the integrated visualization. As a result, moving dialog fields cannot be implemented with this variant.

  • Besides the main visualization, a Dialog type visualization is part of the user interface.

  • At runtime, the visualization is displayed in either WebVisu variant or TargetVisu variant.

    Note: Moving dialogs is not possible in the integrated visualization.

Programming an input area in your own dialog

The VisuDemoOverlay.project sample project includes a user interface with the Dlg_Desktop_ControlsDetails dialog. The following steps describe its implementation so that you can grab in the title bar and move it as a visualization user at runtime.

For more information, see the following: Example: Overlaying of Elements

  1. Open and extract the sample project and update the device.

  2. Open the Project Environment dialog and update the profile on the Visualization Profile tab.

    Using movable dialogs is possible in version 4.1.0.0 and higher.

  3. In the Devices view, click the Visualization Manager object.

    On the Settings tab, the Support client animations and overlay of native elements option is enabled, which enables the overlay functionality.

  4. In the visualization editor, open the Dlg_Desktop_ControlsDetails dialog.

  5. In the Visualization Toolbox view, find the Invisible Input element and drag it to the editor.

  6. Drag the borders of the element over the title bar. Do not cover the close menu.

  7. Select the new element in the element list and then switch to the Properties view.

    Hint: Make sure that all properties are displayed in the view. If necessary, enable the Advanced option.

  8. Enable the Used as pointer area property of the selected element.

    The dialog now has its own pointer area and can be grabbed there to move it.

    _visu_img_example_demo_overlay_invisable_input.png

  9. Compile the application and start the application as WebVisu(http://localhost:8080/webvisu.htm).

    The application runs. In the Dashboard below Control, you can click the exclamation mark to open the Control Details dialog. You can now grab the dialog in its pointer area and move it.

In this section: