Command builders

2 min

The command pattern in Optimizely Content Management System (CMS) encapsulates interface actions into reusable objects, which separates logic for executing an action from concrete widgets and objects into its testable unit. Because commands encapsulate into their 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 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 widget you want, 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 representing the given command from the container.

Example

The following example shows the button builder in use:

require([
    "dijit/Toolbar",
    "epi/shell/command/builder/ButtonBuilder",
    "epi/shell/command/ToggleCommand"
  ],
  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);
  }
);