Hide menu Last updated: Sep 21 2015

Because commands are encapsulated into their own objects with no reference for the user interface or their visual representation, you need a builder pattern to generate widgets from commands in a generic manner.

A command consumer (or other objects that are responsible for displaying commands in the user interface) should instantiate a builder based on what you want to display. For example, if a button is the type of widget you want then use a button builder.

The builders have two public methods:

  • create. Takes a command and a container to which you add the built widget. The create method builds the widget from the command and uses the properties on the command to update the UI when the command's state changes.
  • remove. Takes a command and a container as arguments but removes the widget that represents the given command from the container.

The following example shows 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);