HomeDev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunitySubmit a ticketLog In
GitHubNuGetDev CommunitySubmit a ticket

Command builders

Describes command builders used when working with widgets and actions in the Optimizely Content Management System (CMS) user interface.

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 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.

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);
              } 
           );