Versions Compared

Version Old Version 2 New Version 3
Changes made by

Jose Porto

Jose Porto

Saved on

Key

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

The work environment Draw provides all the tools for the construction of graphic screens displays for the application. You can start from empty screens displays and create objects, or you can embed ready-made objects with various visualization or action dynamics.

Drawing

To enter this environment click the Draw (Draw)
In Action.NET the environment Draw has three tabs:

  • Drawing where the screens displays are shown and can be edited. In the Drawing tab, there is a vertical toolbar on the left side of the desktop and a horizontal bar at the bottom of the same area, oriented to tasks on the objects within a screendisplay.

  • CodeBehind for writing screendisplay-related Scripts. In this tab there is a Source Code Editor and already appear the texts of the prototypes of the procedures that are activated by basic events on screensdisplays. If necessary, these texts must be filled with codes to modify the standard screen display procedure.

  • Symbols with the library of graphic symbols available in the project. In this grid you can edit symbol attributes. To create a symbol, right-click on an object on a screendisplay.

Displays Code Behind

- Screen Scripts

Use the tab CodeBehind to define a set of screendisplay-related functions. You can write code in both VB.Net and CSharp. You can also switch between the two. If you change the language selection, the system automatically converts the existing code to the corresponding one in the selected language.
If you need references to other pieces of code also created by you, use Run > Build > References to establish these references.
The functions placed in CodeBehind can be performed when opening or closing a screendisplay, or when the screen display is already open, depending on how you configure the code. You can use CodeBehind to define methods of handling mouse clicks on the screen display or input commands to run on specific screensdisplays.
For Dialog screensdisplays, use the predefined method DialogOnOK, which is called when the OK, also predefined in the dialog box, is pressed. If this method returns True, the dialog closes if it returns False, the dialogue remains open. This method is commonly used to ensure data validation in the dialog box (which should then prompt the user to correct incorrect entries before closing the dialog).
The code behind the screens displays has the following predefined methods:

Code Block
languagec#
DisplayOpening () - ExecutadoExecuted quandowhen athe telascreen estáis abrindoopening.
DisplayIsOpen () - ChamadoCalled emat intervalosregular regularesintervals deof tempotime enquantowhile ascreen telais estáopen
aberta
DisplayClosing () - ExecutadoExecuted quandowhen athe telascreen estáis se fechandoclosing.
DialogOnOK () - ChamadoCalled quandowhen o botãothe OK debutton umaof telaa dedialog diálogoscreen éis pressionadopressed:
                Retornando Returning 1 allows the permitedialog oto diálogobe serclosed Fechadoby pelothe sistemasystem.
                 RetornandoReturning 0 impedeprevents othe diálogodialog defrom serbeing fechadoclosed.

You can add your own variables and other DOT NET methods in this code text.

Info

NOTE - Because Client Screens displays are designed to work in distributed and web environments, we recommend avoiding the use of functions that do not allow "partial trust" execution, or that refer to physical file paths.

Drawing tools

The tab Drawing you have the following toolbars and controls to create, format, and configure screensdisplays:

  • Vertical Bar - On the left side of the Drawing tab. Use these buttons to draw shapes, add buttons, and create special windows. For details on these buttons, see Table 1.

  • Horizontal Bar - At the bottom of the Drawing tab. Use these buttons to group, combine, align, and pin selected objects. For more information, see Table 2.

  • Appearance, Dynamics, DisplaySettings and other settings - In the left panel of the tab, below the main menu buttons. These settings vary depending on the characteristics and functionality of the selected object type.

Drawing - Vertical Toolbar

The following table displays the Vertical toolbar icons of the Drawing space and their features.

Button

Description

Image Modified Selection Tool

  • Click an object to select it.

  • CTRL + click to select multiple objects (and groups of objects), one at a time. Hold down the CTRL key while clicking on each object.

  • Shift + click to switch selected object between more than one selected object.

  • Click an open area of the

screen

  • display, then select a group of elements, highlighting the elements while dragging the mouse and holding down the left mouse button.

  • Double-click an object to open the Dynamics configuration window, which allows settings for dynamic object properties.

Image Modified Direct Selection Tool

  • Use this tool to select an object within a group (and modify its properties). Click the object to select it.

  • You can also add, remove, and modify points in a polygon with the Direct Selection Tool:

    • To move the point, select it by clicking the point and holding the left mouse button

      Pressed. Drag the point to its new position.

    • Double-click a point to add a new point adjacent to the selected point.

    • To delete a selected point press the right button.

Image Modified Hand Tool

Use the Hand tool to modify the preview window by clicking on the bottom of the

screen

display and holding down the left mouse button then changing the

screen

display to the desired position.

Geometric objects tools

Use the right mouse button to end the use of each
tool. To add, change, and remove points after you create a polygon or poly-line, use the direct selection tool.

Image Modified
Rectangle

Creates a rectangle object.

Image Modified
Ellipse

Creates an ellipse object.

Image Modified
Polygon

Creates a polygon object.

Image Modified Polyline

Creates a polyline object.

Image Modified Button

Creates a button object.

Image Modified
Text Output

Creates a text output object.

Image Modified Text Box

Creates a text input/output object.
To link the I/O text object with a tag, double-click the I/O text object.

Image Modified CheckBox

Creates a "check box" object. By right-clicking the mouse button, you have access to the creation of the following other objects:
Image Modified Creates a radio button object Image Modified Creates a combo box object. Image Modified Creates a list box object.

Image ModifiedCreates a password object.
Image Modified Creates a "Catch date" object
Image Modified Creates a date/time text box object. Image Modified Creates a label object.
Image Modified Creates a slider object.
After selecting the object from this menu, it becomes the default object for this button in the vertical bar.

Image Modified Insert Symbol

Clicking this button shows the Symbol Library that includes both pre-defined and user-defined symbols.

Image Modified Symbol Factory

Opens the Symbol Factory app to obtain ready-made, vector symbols in wide variety.

Image Modified Image Resource

Opens the image library window (resources) to get images from them for use on the

screen

display.

Image Modified Web Browser

Creates a Web Browser object. By right-clicking the mouse button, you have access to the creation of the following other objects:
Image Modified Creates a Page Selector object, where users can go to choose directly to another

screen

display in the application.
Image Modified Creates a Report Viewer object. Image Modified Creates an XPS Viewer n object.
Image Modified Creates a child window object.
Image Modified Creates an external WPF component. - In this case appears a window for the choice of the object to be created, among the WPF controls registered in the project. See in "Setting up WPF components"
Note: After selecting the object from this menu, it becomes the default object for this button in the vertical bar.

Image Modified Alarm Window

Creates an Alarm Window object. Position the alarm window on the

screen

display and double-click on it to configure its parameters. For more information see "Setting up a Alarm Window" Also available is the icon for creating an AlarmArea object.

Image ModifiedTrend Window

Creates a Trend Window object. Position the trend window on the

screen

display and double-click on it to set up its parameters. For more information see "Setting up the Trend Window (Legacy)"

Image Modified DataGrid Window

Creates a DataGrid window object. Position the DataGrid window on the

screen

display double-click on it to configure its parameters. For more information see "Setting up a DataGrid Window"

Drawing - Horizontal Toolbar

The following table displays the horizontal toolbar icons of the Drawing space and its functionality.


Panel

On this page:

Table of Contents
maxLevel2