Menu Module

User experience

Almost all menu functionality is available using Vitrall icon placed in the upper left corner of the Vitrall window. Menu module provides a simple status bar located on the bottom of Vitrall window.

General Remarks


Layout is done implicitly, we assume that all the components are laid out vertically. Setting horizontalLayout property to true will make an exception to this rule. For example, to lay out OK and Cancel buttons horizontally, set horizontalLayout to true for the second button (and only this one).

If this property is set to true for ControlElementSet, then the whole set is laid out horizontally in respect to its siblings. The inner elements of the set are laid out normally, i.e. vertically. In other words, this property isn't recursive.

If this property is set to true for SelectionElement, then the appropriate elements of selection are laid out horizontally (if possible - e.g. think of a dropdown where it isn't possible).


Whenever there are some requirements concerning the control (currently it only makes sense regarding the Number control and its min/max values and that it requires its content to be a number, Number's and Text's MaxWidthInChars/Digits doesn't count here as is only a visualization hint for the client), they should be enforced by the client. Of course, it is also a good idea to check them on the server side.


The initial menu is sent as part of the configuration message. Each panel is a channel.

The channel is also used to send updates, both from the server and from the client. For example, when a client wants to update the value of the control with id 6 in panel with id 3, the following message needs to be sent:

channel 3 update {"controls":{"6":{"value":1.6}}} 

The same syntax is used when the server changes the control.

To remove an element (with id 9) from the list (which has id = 5), the following update is sent:

channel 3 update {"controls":{"5":{"controls":{"9":null}}}} 

To inform server, that elements 20 and 21 were selected in a multiple selection list:

channel 3 update {"controls":{"5":{"selected":[20,21]}}}


./vitralld demonstration.xml --var additions=menutest