Hide menu Last updated: Jul 09 2014

Table of contents


Since commands are encapsulated into their own objects with no knowledge of the user interface or their visual representation, a pattern is needed in order to generate widgets from commands in a generic manner. This has been achieved using a builder pattern.


Command consumers or other objects that are responsible for displaying commands in the user interface should instantiate builders based on what they wish to display, for example, if buttons are the type of widget needed then a button builder should be used.

The builders have two public methods: the first is the create method which takes a command and a container that the built widget should be added to. It builds the widget based on the command and listens to the necessary properties on the command in order to update the UI when the commands state changes. The second is the remove method which also takes a command and a container as arguments but removes the widget that represents the given command from the container.

Here is an example of the button builder in use:

], function (Toolbar, ButtonBuilder, ToggleCommand) {

    var toolbar = new Toolbar(),
        builder = new ButtonBuilder(),
        model = { enabled: true },
        command = new ToggleCommand({
            model: model,
            property: "enabled"

    builder.create(command, toolbar);