The Composer is the main editor of the Embedded Wizard Studio. It provides a simple visual programming environment, where you assemble your GUI components and the entire application by conveniently Drag & Drop the respective project members. In other words, you use the Composer to determine the visual aspect and the function of your application. The Composer assumes the center area of Embedded Wizard Studio:

Composer window

In Embedded Wizard Studio you develop GUI components and the application by composing them from project members represented visually by small building blocks, so-called bricks. The idea behind a brick is based on the fact, that humans can percept visual symbols in a very effective way, often better than a pure text is percept. Instead of describing the project members in text form you manage them as handy building blocks.

Every brick displays an icon, type or origin information and the name of the represented project member. For example, a variable member named keyStartValue with int32 data type is represented by following brick:

Depending on the role of the represented project member, bricks can be classified and distinguished in three shape categories. The shape together with the displayed icon provide a convenient way to recognize the role of the corresponding project member:

Category	Example	Description
Data		Bricks with pointed sides represent entities of data, e.g. variables, properties, arrays, constants, autoobjects, etc.
Logic		Bricks with beveled sides represent entities of logic, e.g. methods, slot methods, etc.
Other		Bricks with rectangular shape represent all others entities. In most cases they are complex definitions containing other embedded members inside. For example units, classes, etc.

Being represented by bricks, the project members can be freely arranged within the entire Composer area. This is in particular very convenient and helps you to keep an overview in complex projects containing hundreds of members. For example, you can place methods and related variables side by side. You are completely free in how the bricks are arranged. The position and the size of a brick have no effect on the function of your application.

If you are editing a GUI component (technically seen a class descended from the Mosaic class Core::Group), the Composer displays a dedicated area where you can see and conveniently edit the appearance of the component. This so-called canvas area is surrounded by a thick blue border and arranged always in the top-left corner of the Composer:

The canvas area affects all project members, which provide own graphical presentation, usually views and other embedded GUI components. Instead of being shown as bricks, those members appear then with their real appearance in the canvas area. In particular they are displayed as images or text in the same manner as they will appear on the screen in the target system. Please note, graphical members lying outside the canvas area are clipped or even invisible.

You can consider the canvas area as a kind of virtual machine which is able to emulate all essential characteristics of the particular target system like its respective color format or screen resolution. Accordingly, what you see in the canvas area is what you finally get in your target device.

With annotation members (annotation legend, annotation group or annotation arrow) you add description to your project or you group project members together. Therefore, instead of being shown as bricks the annotations are displayed as dedicated text blocks or arrows directly within the Composer area. Annotations have no effect on the function of your application:

Since a class inherits all members from its base class, displaying all those members in Composer would quickly become confusing. Therefore, when you edit a class, the Composer conceals implicitly the bricks for members defined in the ancestor classes but not overridden in the actual class. In other words, the Composer shows only those bricks which are added or modified in the actual class by hiding all other inherited and not overridden bricks.

As soon as you override an inherited member, its brick appears in Composer. The overridden brick, however, is shown with gray font. In this manner you can distinguish between members you have added to the actual class and members inherited (and overridden) from ancestor classes:

Bricks for overridden members appear with gray font

Please note, that the above described concealing mechanism does not affect the graphical members displayed in the canvas area. See also the section Invisible views.

In case of errors in the inheritance of project members, the Composer highlights the affected bricks with red font. In this manner you can recognize, that there is a problem with a particular project member:

Please note, that Embedded Wizard Studio reports the corresponding error messages in the Log window including tips of how to solve the problem:

All project members, which provide own graphical presentation (usually views and other embedded GUI components) are displayed within the dedicated canvas area, similarly as they appear later on the screen in your target device. However, unlike the target device, the canvas area shows also those views, which are actually configured as being invisible. In other words, when you set the property Visible of a view to the value false, the view is still displayed in canvas area.

This forced visibility affects only views, which are new within the actual class. For all other views, be it inherited from an ancestor class or existing within one of the embedded components, the visibility status is fully respected. This special behavior should help you to keep track of the views while you actively design your GUI component. In order to see the component as it will appear on the target device, start it in the Prototyper window.

Please note, whether a graphical member is actually visible or not depends also on other factors, like the position of the view, the arrangement of other views eventually covering each other, colors and contents used to show the view, etc..

Embedded Wizard manages the currently opened contents as individual Composer pages. For example, if you have three GUI components opened, then there are three corresponding Composer pages. To switch between and manage the opened pages use the Navigation bar found at the upper edge of the Composer window.

The Composer window is visible all the time and unlike other windows it can't be hidden or shown manually. You can, however, activate (focus) the Composer to then operate it with the keyboard:

The canvas area determines the initial size (the design size) of the edited GUI component and implies thus the size of all instances created of the component as well as the size of other components derived from it. The size is considered as initial because for every instance and every derived class the actual size can be modified subsequently. For example, when you embed an instance of one component within another component, the embedded component appears first with its initial size. You can, however, arrange and resize the embedded component as desired.

This explanation is insofar essential, as resizing an instance of the component may cause its views and other components embedded inside it being new arranged in order to match the new dimension. Therefore, you should choose already at the design time the optimal size for your component and using the property Layout specify how the views and other components embedded inside it should react to eventual later size changes.

Please note, that the size of the canvas changes in steps specified in the grid setting. You can however suppress this snap function temporarily by simply holding the key Shift pressed. While dragging the edges of the canvas area, its current size is displayed in a dedicated pane of the Status bar:

The dimension of the canvas area correlates directly with the value of the component's own property Bounds. Resizing the canvas area changes thus implicitly the value of this property. If this property has not yet been overridden, a brick representing this property will appear now in the Composer window. This is an expected behavior. If the brick overlays the canvas area or other members in Composer, you can move it freely:

The simplest way to add a new member is to Drag & Drop the corresponding template from the Templates window into the Composer or Inspector window. Embedded Wizard Studio includes per default an extensive set of templates for all project members and further templates for various application cases. For more details, see the description of the Templates window.

You can also Drag & Drop an existing member from the Browser into the Composer or Inspector window and thus duplicate or derive it. With the Browser window, Embedded Wizard Studio provides you a kind of auxiliary view on your project structure so that you can access project members and use them for various copy and derive operations. For more details, see the description of the Browser window.

Before you can perform operations in Composer you have first to select all project members you want to involve into the operation:

The selected members appear surrounded by a common rectangular selection frame. Additionally all selected bricks are displayed with slightly lightened background. For example, the following screenshot demonstrates the situation with two selected members: a graphical object within the canvas area and the onset method OnSetCaption:

Alternatively you can select members by dragging a rubber band around them. For this purpose:

Since Composer and Inspector windows are coupled together, selecting members within the Composer affects implicitly the selection in Inspector window and vice versa. Also please note, that the Status bar displays in its dedicated panes the number of selected members, the position and size of the selected member, or if several members are selected, the position and the size of the area surrounding them. Similarly, the Status bar displays the current mouse position and the size of the rubber band during an active selection operation:

The current selection in the Composer window correlates with the selection in the members area of the Inspector window. Accordingly, after selecting members in Composer you can inspect and modify their attributes and properties conveniently in the Inspector window.

Depending on its type, a project member can provide further contents enclosed inside it. For example, a class can contain methods, properties, variables. etc. In turn, methods are destined to accommodate implementation source code. Before you can see and modify those contents you have to explicitly open such member:

The content of the affected member appears either in a separate Composer page or in the Code Editor window depending on the type of the content. Now you can inspect and edit this content. To navigate between the opened Composer pages use the Navigation bar found above the upper edge of the Composer.

If during a Drag & Drop operation the mouse pointer rests over a member for a period longer than 1 second, the affected member is automatically selected. Now the properties and attributes of the member are available in the Inspector window so that you can release the dragged content directly over them.

If the mouse pointer rests for a period longer than 2 seconds, the affected member is opened showing its enclosed content. In this manner you can navigate easily within your project during an active Drag & Drop operation until you reach the target location where you want to release the dragged content. Please note, that during an active Drag & Drop operation you can also switch between various Composer pages by using the Navigation bar.

All members displayed within the Composer window can be moved freely. In particular you can arrange the graphical objects within the canvas area and you can group annotations and related bricks together so that the content of the Composer is tidy and reflecting your development intention:

Please note, that the selected members are moved in steps specified in the grid setting. You can however suppress this snap function temporarily by simply pressing the key Shift. Additionally, while moving the selected members the Status bar displays in its dedicated panes the current position and the size of the selected member, or if several members are selected, the position and the size of the area surrounding them:

Alternatively and more precisely you can move the selected members by using the keyboard:

All members displayed within the Composer window can be resized freely. In particular you can arrange the graphical objects within the canvas area and you can align annotations and related bricks together so that the content of the Composer is tidy and reflecting your development intention:

If you have selected multiple graphical objects within the canvas area, these are resized and moved proportionally to the portion the respective member occupies within the selection frame. For example, the yellow rectangle in the following screenshot is half so wide as the selection frame. Accordingly, it will be half stretched unlike the red rectangle which occupies the entire width:

Similar occurs when you select and resize multiple bricks. However, bricks are not resized proportionally. When resizing bricks, the distance between the edges of a brick and the corresponding edges of the selection frame remains unchanged. Moreover, resizing bricks vertically has no effect. The height of a brick is fixed:

Please note, that while dragging the corner of the selection frame, the frame is resized in steps specified in the grid setting. You can however suppress this snap function temporarily by simply pressing the key Shift. Additionally, during the resize operation the Status bar displays in its dedicated panes the current position and the size of the selected member, or if several members are selected, the position and the size of the area surrounding them:

Alternatively and more precisely you can resize the selected members by using the keyboard. With the following shortcuts you can move the right and the bottom edges of the selection frame pixel-wise:

When working with Composer window, the resulting composition of project members (in particular members within the canvas area) is determined by the respective stacking order. Generally, members having higher order do overlay other remaining members with lower order. For example, in the following screenshot the order of the yellow rectangle is higher than the of the red rectangle:

You can perform the above operations also by using the corresponding commands from the menu Arrange.

Please note, that despite the explicitly specified order, bricks are displayed top most while the canvas area appears in the background of the Composer window. Annotations, in turn, are arranged between the canvas area and bricks. In other words, bricks appear above the canvas area even if they have an order lower than the of members existing within the canvas area.

The Composer window supports various Copy & Paste operations permitting you to duplicate and derive members by using the clipboard and keyboard shortcuts. To perform a Copy & Paste operation, do following:

Shortcut	Menu item	Description
CtrlV	EDIT➤Paste	Adds new members as exact duplicates of the members in the clipboard.
CtrlShiftV	EDIT➤Derived paste	Add new classes by deriving them from the classes in the clipboard. See also: Subclass an existing class
CtrlShiftAltV	EDIT➤Variant paste	Add new variant members by deriving them from the members in the clipboard. See also: Create new class variant Create new constant variant Create new bitmap resource variant Create new font resource variant Create new autoobject variant
CtrlAltV	EDIT➤Instance paste	Add new autoobject or embedded object members (instances) from the classes in the clipboard. See also: Create new autoobject Create new embedded object

By duplicating a member you create an exact copy of the original member including all associated attributes and properties like the position and the size of the member. Thus, after the copy operation you would usually move, resize and modify the duplicated members accordingly to your desired application case. You should also rename the members in order to keep your project tidy. Per default, new members retain the name of the original member by appending an additional unique and consecutive number.

The Composer window supports various Drag & Drop operations permitting you to duplicate and derive members by simply using the mouse. As such, Drag & Drop is a convenient complement for the typical clipboard functions. To perform a Drag & Drop operation, do following:

The following table provides an overview of the possible modifier key combinations you can use in conjunction with Drag & Drop and describes the resulting effects. Please note the form of the mouse pointer, which reflects the actual Drag & Drop effect:

Modifier keys	Mouse pointer	Description
Ctrl		Copies the dragged members so that you obtain an exact duplicate of them.
Alt		Copies the names of the dragged members so that you can drop the names into the Code Editor or into an edit field in the Inspector window.
CtrlShift		Add new classes by deriving them from the dragged classes. See also: Subclass an existing class
CtrlShiftAlt		Add new variant members by deriving them from the dragged members. See also: Create new class variant Create new constant variant Create new bitmap resource variant Create new font resource variant Create new autoobject variant
CtrlAlt		Add new autoobject or embedded object members (instances) from the dragged classes. See also: Create new autoobject Create new embedded object

The following screenshot demonstrates the practical usage of Drag & Drop. To duplicate a member (here an analog display widget) you select it first and then you move it with the mouse while holding the key Ctrl pressed:

Please note, by duplicating a member you create an exact copy of the original member including its associated attributes and properties. Thus, after the copy operation you would usually move, resize and modify the duplicated members accordingly to your desired application case. You should also rename the members in order to keep your project tidy. Per default, new members retain the name of the original member by appending an additional unique and consecutive number.

If you want to revert an overridden member to its original inherited state, delete it simply. If the affected member was represented by a brick, the brick disappears now. If the affected member was displayed within the canvas area, the member restores its original inherited state and is still available within the canvas area.

Please note, that inherited members as being defined in ancestor classes can't be deleted retrospectively. You can, however, use the delete operation to revert the original inherited state of such member. In other words, deleting an inherited member deletes its overriding - the member still exists.

The Composer supports various functions to help you to navigate within your project. For example, if you are editing a GUI component (precisely a class), you can navigate to the Composer page corresponding to the unit where this class is contained. The affected class definition is additionally selected in Composer so you can locate it easily.

The following table provides an overview of all Composer navigation functions as well as the associated keyboard shortcuts and the corresponding menu items:

Shortcut	Menu item	Description
CtrlShiftU	NAVIGATE➤Unit	Navigates to the Composer page of the unit containing the currently edited member.
CtrlShiftS	NAVIGATE➤Super class	Navigates to the Composer page corresponding to the immediate ancestor class of the currently edited class.
CtrlShiftA	NAVIGATE➤Ancestor	Navigates to the Composer page where the immediate ancestor of the currently selected member is defined. This command is useful by inherited members only.
CtrlShiftD	NAVIGATE➤First ancestor	Navigates to the Composer page where the original definition (the first ancestor) of the currently selected member. This command is useful by inherited members only.

The grid appears as a dot pattern filling the entire Composer area. With the grid enabled, the members do automatically snap at grid points when moving or resizing them:

Per default, the spacing between two grid points is 10 pixel. The currently selected grid spacing can be reviewed and also changed in the grid selection combo box in the upper area of the Embedded wizard Studio.

You can adjust the factor of how the Composer should scale its content. Typically, you zoom in to see the details in the canvas area and you zoom out to get the complete overview of the entire content available within the Composer:

Per default, the Composer shows its content with 1:1 factor (100 %), which means that one pixel in your designed GUI component corresponds to one pixel of the Composer window. The currently selected zoom factor can be reviewed and also changed in the zoom selection combo box in the upper area of the Embedded wizard Studio.

If the content of the Composer is larger than the Composer window itself, you have to scroll it. Usually you do it by using the scrollbars at the bottom and the right of the Composer window. Alternatively, you can scroll the content by simply grabbing and moving it with the mouse: