A Simple Extension
This simple extension adds bookmarking functionality to Content Studio. It adds two options, Bookmark and Remove bookmark to the Tools menu. Clicking on Bookmark adds the current editor to a list of bookmarks, clicking on Remove bookmark removes the current editor from the list of bookmarks. For each bookmarked editor, a menu item is added to the Tools menu. Clicking on a bookmark menu item opens the corresponding bookmarked editor.
Create a text file called main.js
in
C:\Users\
your-name\cs-extensions
(for example) and open it for editing, then add the code described
below.
A more complete version of this example can be downloaded from https://bitbucket.org/mogsie/studio-extension-tutorial-bookmarks. This mercurial repository takes the form of a tutorial. If you look at the "Commits" page (https://bitbucket.org/mogsie/studio-extension-tutorial-bookmarks/changesets) you will see that each revision is a "lesson" consisting of:
-
The code so far
-
The commit message, which contains a detailed explanation of the changes made in the step
-
A diff showing exactly what was changed since the previous step
The lessons are listed in reverse order, so start at the bottom.
If you install mercurial then you can download the repository, read the commit messages and try to create your own "fork" of the extension.
The extension Javascript code
Use require
to create the necessary
Content Studio
objects:
var notifier = require('notifier'); var actions = require('actions'); var CS = require('content-studio');
Create the Bookmark and Remove bookmark actions, and disable them - they will only be enabled when appropriate:
var bookmarkAction = actions.createAction('Bookmark', 'shortcut D'); var unbookmarkAction = actions.createAction('Remove bookmark', 'shortcut shift D'); bookmarkAction.enabled(false); removeBookmarkAction.enabled(false);
Create the other variables you will need - an array to hold the bookmarks, two variables to keep track of the current editor's URI and title, and an array to keep track the number of bookmarks:
var currentURI = null; var currentName = null; var allBookmarks = {};
Add the actions you have created to the Tools menu:
actions.addAction(bookmarkAction, 'tools'); actions.addAction(removeBookmarkAction, 'tools');
The Bookmark and Remove bookmark actions should only be enabled if an editor is open. In addition, the Bookmark action should only be enabled if the current editor is not bookmarked, and the Remove bookmark action should only be enabled if the current editor is bookmarked. So you need add a call to a function that will perform these checks and initialize the menu items correctly:
enableDisableActions();
Then, of course, you need to actually define this
enableDisableActions
function. The following function
first checks to see if an editor is actually open by checking the
currentURI
variable and disabling both actions if it
is null
. If not, it checks whether or not the current
editor is in the allBookmarks
array and
enables/disables the actions accordingly.
function enableDisableActions() { if (currentURI == null) { bookmarkAction.enabled(false); removeBookmarkAction.enabled(false); return; } if (allBookmarks[currentURI]) { removeBookmarkAction.enabled(true); bookmarkAction.enabled(false); } else { removeBookmarkAction.enabled(false); bookmarkAction.enabled(true); } }
Now you can add the actual bookmarking code that needs to be executed when the user clicks on one of your menu entries. Here is the code for the Bookmark action:
bookmarkAction.on('action', function() { if (currentURI == null) { return; } if (allBookmarks[currentURI]) { notifier.notify('Already bookmarked...'); return; } var uri = currentURI; var bookmark = actions.createAction(currentName); actions.addAction(bookmark, 'tools'); bookmark.on('action', function() { CS.openEditor(uri); }); allBookmarks[uri] = bookmark; enableDisableActions(); });
What is happening here? First of all currentURI
is
checked: if there is no current editor to bookmark, then the function
exits. Then if the current editor is already bookmarked, the function
displays a message and exits. If these checks are passed, then the
function:
-
Creates a new action with the name of the current editor (
currentName
) -
Adds this action to the Tools menu
-
Defines the event code for the new action
-
Adds the editor's URI to the
allBookmarks
array -
Calls
enableDisableActions
to update the state of the Bookmark and Remove Bookmark menu items.
Here is the corresponding code for the Remove Bookmark action:
removeBookmarkAction.on('action', function() { if (currentURI == null) { return; } if (! allBookmarks[currentURI]) { return; } var bookmark = allBookmarks[currentURI]; delete allBookmarks[currentURI]; actions.removeAction(bookmark); enableDisableActions(); });
As you can see, it's more or less a mirror of the Bookmark action code.
Finally, you need to add some code to react to changes in the current
editor. This code needs to set the currentURI
and
currentName
variables used in the functions described
above. Here is the missing event code:
function editorActive(editorControl) { console.log('Editor activated: ' + editorControl.uri); currentURI = editorControl.uri; currentName = editorControl.displayName; enableDisableActions(); } function editorInactive(editorControl) { console.log('Editor deactivated: ' + editorControl.uri); currentURI = null; currentName = null; enableDisableActions(); } CS.on('editor-active', editorActive); CS.on('editor-inactive', editorInactive);
Save main.js
.
The extension package file
In the same folder create a text file called
package.json
. Open it for editing and add the
following code:
{ "main" : "main.js", "name": "bookmarks", "version" : "1" }
Save package.json
.
Testing the extension
Open a command terminal and start Content Studio by entering the following command:
javaws http://content-engine-host/studio/Studio.jnlp?com.escenic.script.root=C:\Users\
your-name\cs-extensions
Select View from the menu bar while holding down
the Ctrl
key, then select Debug
> Developer Mode. Your
Tools menu should now contain the
Bookmark and Remove bookmark
options you have defined. If you open a content item in an editor and
click on the Bookmark option then a new option with
the name of the content item should be added to the
Tools menu. If you close the content item editor
and click on this new option, then the content item should be reopened
for editing.