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
});
}
});
});
Last updated: Sep 21, 2015