26
Mar

Implement an Interface to a GUI Component in Embedded Wizard | #07


Implement an Interface to a GUI component When you create a new GUI component within
your own GUI project, you will also design an interface, which allows the configuration
of the component instances during both design time as well as during runtime. Let’s imagine
an ordinary and very simple push button component. Such push buttons usually display a caption
or an icon indicating the particular function of the button within the application. Without
the possibility to configure the button, it would be necessary to implement every button
as an individual component with its individual caption or icon. By implementing an interface,
it is sufficient to have a generic button component with the caption or icon being configurable
via an interface. Now you are going to learn how you add such
interface to our welcome screen component. As you remember, the welcome screen displays
a text containing the version number of the display. Now let’s assume, this version number
varies depending on the hardware used. Our interface should thus allow to explicitly
specify the version number which should be displayed on the welcome screen. In Embedded Wizard, you use for this purpose
so-called “properties”. A property can be considered as a variable. It stores data within
the component and every instance of the component may store different data. The difference to
an ordinary variable is, that every time the property is modified, an associated “onset”
method is executed whereas a dedicated “onget” method is executed if the data of the property
is read. Within such methods, the component can for example react to the alternation of
the property and update its appearance. Back to our specific case, the property should
store the version number and modifying the property will update the text shown in the
component. So let’s switch back to the component “WelcomeDialog”.
From the Gallery folder “Chora”, add an item “Property”. Select the first brick “Property” of the three
just added bricks and press “F2” on your keyboard to rename it. Now enter in the Inspector the new name “Version”
for this property and confirm it by pressing “Enter”. Keep the member “Version” selected and look
in the middle area of the Inspector for its attributes “Type” and “Default” and change
them to the type “string” and the value “1.0”. Now select the brick “OnGetVersion” and press
the key “Del” on your keyboard in order to delete it. This brick represents an “onget”
method, which is – as just just explaind – executed when evaluating the property. In
our case, we don’t want any particular functionality to be triggered when reading that property. Double-click on the brick “OnSetVersion” to
show its implementation in the Code Editor. This brick represents the onset method associated
with the property. Here you can see the default implementation
of the onset method. Interesting in this context are the used keywords “pure” and “value”.
With “pure”, the implementation can access the memory where the property’s actual content
is stored. The keyword “value”, in turn, represents the new value just being assigned to the property. By comparing both expressions in the if-condition,
the onset method verifies whether the assigned value is equal to the value which is already
stored in the property. If this is true, the onset method exits without executing any further
code. In the other case, when the values differ, the implementation of the onset method will
store the new value within the property. You can see it in line 6. The unique missing operation
in this template is the update of the displayed text as a reaction to the alternation of the
property. For this purpose, let’s modify the implementation
of the “OnSetVersion” method. So, let’s go down and say “Text.String=”Welcome
tonCoffee Machine ” + value;” With that last code line, the onset method
performs an assignment to the property “String” of the object “Text”. The assigned expression
is a string resulting from the concatenation of a string literal (which is enclosed between
the double quote signs) and the new value of our property. The concatenation itself
is expressed by the plus operator. Accordingly, every time a new value is assigned to our
property “Version”, the text view is updated and shows the new version number. Now, switch back to the component “Application::Application”
and select the object “WelcomeDialog”. In the middle area of the Inspector, look
for its property “Version” and change it to the other value, for example, “2.3”. Please
make sure to type in the double quote signs that belong to the expression. As you see in the Inspector window, our welcome
screen now exposes the new property “Version”. You are able to select this property and modify
it exactly as you did in the previous steps with other properties of other objects. Moreover,
the moment you modified the property, the welcome screen is being updated, showing a
new text with the just specified version number “2.3”. This works automatically because modifying
the property triggers the execution of its associated onset method. And, as you remember,
this onset method performs code to update the text view with a new string.

Tags: , ,

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *