Creating components from templates: Value Display

With this template you can add a new Value Display component to your project. Value Display is a kind of virtual instrument to show e.g. measured values. As such this widget is not suitable to be controlled by the user interactively.

Components created with this template are intended to be adapted to your particular design expectations. After adding the new Value Display you should edit the component, change its appearance and if desired also its behavior. Once you have adapted the component, you can embed instances of this Value Display wherever you need in your GUI project. Because it serves as template, it is intentionally kept very simple. Nevertheless, Value Displays created by the template are working widgets. If desired, they can already be used as they are. The following figure demonstrates the default appearance of the Value Display created by using the here described component template:

The approach with component templates has two functions. Primarily the templates should simplify the development of new components. Instead of creating the Value Display from scratch you can use the available template. The second function is more educative. The template implements fully working Value Display component you can investigate and learn about the corresponding programming aspects. The template is well documented. It contains annotations and inline comments with instructions helping you to understand how the component works and how it can be adapted to your particular needs.

This chapter provides an overview how the Value Display component template is used within your own application and how you adapt this component according to your particular needs. You will find here also further details concerning the internal implementation of the Value Display component.

Component templates versus ready-to-use widgets

Besides the here described Value Display component template, Embedded Wizard provides also a ready to use Value Display widget. It is finished implemented and ready to be used as it is. Within a certain limits, the appearance and partially also the behavior of the Value Display widget can be configured. The advantage of the approach is, that to customize it you don't need to write a single line of code. The flexibility of the provided widget, however, is limited by its implementation.

With the component template you are not limited. But you have to take care of the adaptation of the so created component. You have to write code. More deep understanding is required. Summarized, the ready to use widgets follow a convenient, simple but also limited approach where you don't need to write a single line of code. With the here described component templates you have to write code by which you are flexible to create very individual and sophisticated widgets. Which of the both approaches applies to you does depend on your application case. By understanding the differences in the both concepts you can select the optimal one.

Add new Value Display component

To create a new Value Display component from a template you simply Drag & Drop it between the Templates window and the Composer with an opened unit. This is important in that by using the component templates you add in fact a new class to your project. Classes, in turn, can exist within units only. The following are the typical steps to create a new Value Display component from a template:

First switch to the Composer page for the respective unit, where you want to add the new Value Display component.

Then ensure that the Templates window is visible.

In Templates window switch to the folder Component Templates.

In the folder locate the Value Display template.

Drag & Drop the template into the Composer window:

Eventually name the new added component.

The new created Value Display component appears accompanied by annotation providing helpful tips how to proceed. If undesired, you can select and delete the annotation.

Use the Value Display component

Once you have created the Value Display component, you can use it to assemble more complex components. Technically seen, you embed an instance of the Value Display class in-place within some superior GUI component. At the runtime, the superior GUI component takes care of the correct initialization and the displaying of all embedded components, so they appear similarly as you have composed them at the design time.

Step 1. Add new Value Display instance

The following are the typical steps to create a new instance of an already existing Value Display component:

First switch to the Composer page for the respective GUI component, where you want to add the new Value Display.

Then ensure that the Browser window is visible.

Within the Browser locate the class of the previously created Value Display. This can be done easily with Browser's own filter function.

Select the found class in the Browser window.

Drag & Drop the selected class into the Composer area.

Eventually name the new instance according to its function within the GUI component (e.g. VoltageView).

Component templates are intended to create widgets which can be modified and adapted to your particular design expectations. In the following sections you will learn how to do this. Originally, if not yet modified, the Value Display appears as a white rectangle with black text displaying the value. Our intention is to keep the component templates as minimalistic as possible so they don't distract you with less important design details.

Step 2. Inspect the Value Display instance

As long as the Value Display is selected you can inspect and modify its properties conveniently in the Inspector window as demonstrated with the property Bounds in the screenshot below. This is in so far worth mentioning as diverse features of the Value Display are controlled by the corresponding properties. If you are not familiar with the concept of a property and the usage of Inspector window, please read first the preceding chapter Compositing component appearance.

The Value Display component descends from the Mosaic class Core::Group. Consequently, most of the properties listed in the above screenshot are inherited from this base class. Particular to the Value Display are only few following properties:

Property

Description

CurrentValue

The property CurrentValue stores the momentary value of the component.

Outlet

The property Outlet can refer to any other int32 property the value display component should remain synchronized with. When the referred property is modified by another widget, the value display is automatically notified to remain in sync with the property.

This approach follows the Model-View-Controller (MVC) programming paradigm. Here the value display component represents the view and the property referred via Outlet can be seen as a part of the model. See also Outlet properties.

Unit

The property Unit stores an optional string to append to the displayed value.

Step 3. Arrange the Value Display within the superior component

Once added to the component, you can freely move the Value Display instance, or you simply grab one of its corners and resize it in this way. You can control the position and the size of the component also by directly modifying its property Bounds. If you want the Value Display to appear behind other views you can reorder it explicitly.

IMPORTANT

Please note, this document is actually UNDER CONSTRUCTION. It is incomplete. We are working on it ...