Graphical objects organization

Introduction

The objects that make up the user interface of a Q Application are organized in the UI folder.

All the graphical objects directly children of the UI folder, or of one of its subfolders, are object types; they are then available in the Types panel to create instances.

Hierarchical organization

Typically a user interface is organized in a hierarchical way, that is the different elements that compose it are organized in a tree in a more specific way according to their function.

The hierarchy of graphical objects within the information model is determined by graphical object containers, the only ones that can contain other graphical objects. The position of the objects in the information model determines their position in the layout, at both design time and runtime (see Concepts of layout).

Window

The Window object is the root container graphical object. It must be present when you want to generate a Q Application with a user interface. Inside, all the objects that make up the user interface and the related logics are organized.

It is possible to create several Window objects, to associate with different Presentation engines (see Presentation engine). For this reason, a Window object can only exist as a type.

Panels

A panel is a type of container that aggregates several relevant graphical objects. The navigation in a Q Application typically takes place between the different panels set up.

User interface navigation

Navigation within a user interface can be created both with graphical objects dedicated to navigation (for example the Navigation Panel and Dynamic Panel objects) and with customized logics within NetLogic (see NetLogic).

The objects dedicated to navigation include interaction mechanisms and runtime logics to navigate between different set panels. Such objects at runtime create and delete GUI nodes depending on the user’s navigation.

For the description of the objects for navigation refer to the Reference on objects and variables section of this manual.

Reusable graphical objects: widget

Typically in a user interface it is necessary to consistently present - at runtime - and efficiently manage - at design time - structures of nodes that are identical but associated with different data. To do this types of graphical objects are needed with which to create identical objects. These types are conventionally defined as widgets. A widget can be a single graphical object or a group of graphical objects, designed for a specific purpose of display in the user interface and which includes all the necessary logic, created with dynamic links and/or NetLogic.

Note

the association with different data in the various instances of the same widget is typically done through an alias, defined in the widget.

For example, a MotorWidget widget might consist of a panel containing a circular Gauge object to display speed and two labels to describe the numeric values of speed and torque. The widget can be created at design time or at runtime for each motor whose values we want to display. Since the widget is an object, any changes to the widget structure and formatting propagate across all instances.

../../_images/e67a6f6006f1f9b3716d8e223f8b1e7faabe45e4.svg

To find out how to design a widget of this type, see Design a widget to display the values of multiple motors.

Hint

different widget instances can be nested to create complex yet easily manageable GUI modules.