Plugging in commands

You can add commands to a command consumer with the command pattern and its consumer and provider architecture. For example:

• You want to add a command that is not dependant on a specific model to operate on, such as a plug-in to the global toolbar to open a dialog.
• You want to add a command that is dependant on a model for its state, such as a command that plugs into the CMS publishmenu and operates on the currently selected page.

Plugging in a command

The global command registry lets you plug in commands in the system without having a reference to a specific widget instance. The global command registry maps command providers against keys so you can add a command provider that can feed a consumer with command if the global key matches. The following example shows how to create a command provider that adds the test command:

define([
    "dojo",
    "dojo/_base/declare",
    "epi/shell/command/_CommandProviderMixin",
    "samples/TestCommand"
], function (dojo, declare, _CommandProviderMixin, TestCommand) {

    return declare([_CommandProviderMixin], {

        constructor: function () {
            this.inherited(arguments);

            var testCommand = new TestCommand();
            this.add("commands", testCommand);
        }
    });
});

The following code shows the test command:

define([
    "dojo/_base/declare",
    "epi/shell/command/_Command"
],

function (declare, _Command) {

    return declare([_Command], {

        name: "Test",
        label: "Test command",
        tooltip: "Click to execute me",
        iconClass: "", //Define your own icon css class here.
        canExecute: true,

        _execute: function () {
            alert("Name: " + this.model.contentData.name);
        },

        _onModelChange: function () {
            //Here you can update canExecute depending on the model settings if your command is depending on the model state.
            console.log("New name: " + this.model.contentData.name);
        }
    });
});

Add the following code to your module initialzation. (This example shows how to plug into the publishmenu of Episerevr CMS.)

    var commandregistry = dependency.resolve("epi.globalcommandregistry");
    commandregistry.registerProvider("epi.cms.publishmenu", new MyCommandProvider());

Adding plug-in capabilities for your own classes and widgets

Add the extension functionality for your own widgets with the epi/shell/command/_WidgetCommandConsumerMixin mixin. Define the property commandKey: to a unique key such as samples.mywidgetkey. Third-party extensions use the key to plug into your menu.

define("samples.Toolbar", [
// Dojo
"dojo/_base/array",
"dojo/_base/lang",
"dojo/_base/declare",
"dojo/_base/lang",

// Dijit
"dijit/_Widget,
"dijit/_Container",
"dijit/form/Button",

// EPi CMS
"epi/shell/command/_WidgetCommandConsumerMixin"
],

function (
// Dojo
    array
    lang,
    declare,
    lang,

// Dijit
    _Widget,
    _Container,
    Button,

    _WidgetCommandConsumerMixin){
        return declare("samples.Toolbar", [_Widget, _Container, _WidgetCommandConsumerMixin], {
                //Get commands that has been registered to the global toolbar
                commandKey: "epi.cms.globalToolbar",

                onCommandsChanged: function (name, removed, added) {

                    //Add a button for each command
                    array.forEach(added, lang.hitch(this, function (command) {
                        //Create a button and bind onClick to command.execute
                        this.addChild(new Button({
                            label: command.label,
                            onClick: function() {
                                command.execute();
                            }
                        }));
                    }));

                    array.forEach(removed, function (command) {
                        //Remove the commands
                    });
                }
            });
});