Requiring Objects

You can use the require function to get various objects from Content Studio:

notifier

You can use this object to display notification messages in Content Studio (see Hello World).

actions

You can use this object to create your own menu items and shortcuts, which you can then add to Content Studio menus.

content-studio

This object represents the whole Content Studio application and you can use it to:

• Open and close content editors.

• Create and display your own side panels (which appear in the same area as the Sections, Search and Clipboard panels).

• Open external browser windows.

• Listen for various events and do something when they occur.

Using the actions object

Try this:

actions = require('actions');
myaction = actions.createAction('My Action', 'shortcut M');
actions.addAction(myaction, 'file');

Now look at the File menu. Your action should appear at the bottom of the menu:

The Action object you have created also has methods - you can, for example, enable and disable the menu option using its enabled method:

myaction.enabled(false);

The menu entry should now be disabled. To re-enable it, enter:

myaction.enabled(true);

Using the content-studio object

You can get access to the content-studio object and use its methods in just the same way. This code, for example, opens your default browser and displays a web page:

cs = require('content-studio');
cs.browse('http://www.escenic.com');

Displaying side panels

You can create and display your own side panels in the same area as the built-in Sections, Search and Clipboard panels. This is slightly more complicated. The following code, for example, creates a browser panel in which it is possible to display user interface components defined with HTML and Javascript.

var cs = require('content-studio');
var mypanel = 'http://example.com/studio/sidepanel/test';
var mypanelIconURI = 'http://example.com/studio/sidepanel/test/icon.png';
var browserui;

cs.on('panel-init', function(panelcontrol) {
  if (panelcontrol.uri == mypanel) {
    browserui = panelcontrol.show('browser');
    browserui.uri = "/webservice-extensions/test/index.html";
  }
});

cs.createPanel(mypanel, '&Test', 'shift F9', mypanelIconURI);

In this example, cs.createPanel() creates a new panel called Test that can be identified by the URI http://example.com/studio/sidepanel/test, as well as the panel icons with URI http://example.com/studio/sidepanel/test/icon.png.

The panel is represented by a PanelControl object and when it is created, cs emits a panel-init event. This causes the function registered with the cs.on() call to be executed. This event function checks which panel control has been created and executes an appropriate action - in this case calling the panel control's show() method to initialize a browser user interface component inside the panel.

You can then use this browser user interface component by setting its uri property to point to an HTML file you have created. The content of this HTML file is then displayed in the panel.

The last parameter of the cs.createPanel() method specifies a set of icons to be used as the panel's button. It must consist of either 3 or 5 32*32 pixel images, stacked vertically in the following sequence from the top:

1. The default button state.

2. The hover state: used when the mouse pointer is held over the button.

3. The selected state: used when the panel is selected.

4. The alert state: used when the cs.alert() method has been called and the panel is not selected (optional).

5. The alert+hover state: used when the cs.alert() method has been called and the mouse pointer is held over the button (optional).

If you do not specify a set of icons for your panel (that is, if you omit the last parameter of the cs.createPanel() method) then Content Studio will use a default icon set that looks like this:

For more information about how to create a browser UI component, see Creating Browser UIs. For information about the on() method and event handling, see Handling Events.