Basic concepts: Visually aided programming

Embedded Wizard Studio provides a very effective environment for the development of GUI applications. It is based on the idea of visually aided programming, where software entities are arranged and connected with the mouse by simple Drag & Drop them. From our point of view it was self-evident to combine the visual programming and the GUI application development – the both concepts complement each other. In this manner, you compose the appearance of an application and implement its complete functionality. No further development tools are needed.

The typical workflow with Embedded Wizard starts in the Gallery Templates window where you select the desired software entity. Then you Drag & Drop it into the Composer window. Finally by using mouse you arrange and resize the just added member. For example, you can add the Filled Rectangle view:

Please note the area in the top-left corner of the Composer window surrounded by the thick blue border. It is called the Canvas and it is intended to accommodate all graphical members like the Filled Rectangle view. In principle, what you see in this Canvas area is what you will get on the display in your device. Thus in the Canvas area you compose the appearance of your GUI application.

Other, non graphical members are represented consequently by so-called bricks. The shape, the icon and the text color of the brick do reflect its particular function within the application. For example, bricks with pointed sides represent entities of data (e.g. variables) and bricks with beveled sides represent entities of logic (e.g. methods). On the other hand, bricks displayed with gray font represent inherited and overridden members (in object-oriented sense):

In the next typical workflow step you inspect and adjust the settings of the previously added members. For this purpose you use the Inspector window. The Inspector displays all attributes of members selected currently in the Composer. Accordingly using the Inspector you can modify them. For example, you change the color at the bottom-left corner of the Filled Rectangle view:

Finally, a member containing other embedded members can be opened similarly as you open a folder in Windows file explorer - you simply double click on it. Then the content of the affected member is revealed in a new Composer page and you can verify or modify it. For example, double clicking on the updateTimer object opens the implementation of the corresponding Core::Timer class: