Area: Optimizely CMS
Applies to versions: 10 and higher
Other versions:

Command builders

Recommended reading 

This topic describes command builders used when working with widgets and actions in the Optimizely user interface.

How it works

The command pattern in Optimizely encapsulates interface actions into reusable objects, which separates logic for executing an action from concrete widgets and objects into its own testable unit. 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);
Do you find this information helpful? Please log in to provide feedback.

Last updated: Oct 27, 2016

Recommended reading