Add a button to the toolbar in Xopus 3

It is possible to add custom buttons to the Xopus 3 interface (This is different in Xopus 4) . You can add buttons and asign them to specific elements.

This part of the API is deprecated because a full replacement for this API is planned. Because of this many customers prefer to wait for this release before using this API.

You can still use this deprecated API. It can be used by altering depricated.js in your xopus directory. Here are example contents for depricated.js.

function changeToolbarDefinition(logoMenuDefinition, toolbarDefinition)
{
  // some groups for reference
  var group =
  {
    standard: toolbarDefinition.getGroup('standard'),
    node:     toolbarDefinition.getGroup('node'),
    undo:     toolbarDefinition.getGroup('undo'), 
    edit:     toolbarDefinition.getGroup('edit'),
    format:   toolbarDefinition.getGroup('format'),
    list:     toolbarDefinition.getGroup('list'),
    insert:   toolbarDefinition.getGroup('insert'),
    custom:   toolbarDefinition.addGroup('custom', 0) // addGroup(name, position)
  };
  
  // this array is all yours!
  var buttons =
  [
    {
      title: 'Greet',
      group: group.custom,
      position: 0,
      callback: greet,
      image: 'media/icons/xopus.gif',
      key: null
      // decimal ASCII number, see asciitable.com
    },
    {
      title: 'Boldify',
      group: group.custom,
      position: 1,
      image: 'media/icons/bold.gif',
      key: 'Ctrl+#66', // CTRL+B
      role: 'example'
    },
    {
      title: 'Quit',
      group: group.custom,
      position: 0,
      callback: parent.parent.close,
      image: 'media/icons/exit.gif',
      key: 'Ctrl+#87' // CTRL+W
    },
    {
      title: 'Save All',
      group: group.custom,
      position: 0,
      command: 'XopusSaveAll',
      image: 'media/icons/saveall.gif'
    }
  ];
  
  // add the defined buttons
  for (var i in buttons)
  {
    // createButton(icon, shortcutKey, callback, enabled)
    var btn = toolbarDefinition.createButton(buttons[i].image, buttons[i].key, buttons[i].callback, true);
    
    if (buttons[i].role)
      btn.role = buttons[i].role;
    else if (buttons[i].command)
      btn.commandId = buttons[i].command + 'Command';
    
    // addButton(group, position, title, button)
    toolbarDefinition.addButton(buttons[i].group, buttons[i].position, buttons[i].title, btn);
  }
}

function greet ()
{
  alert ('Hello world!');
}

To specify the button for a specific element, you have to assign a role to the button, and define this role in your configuration. In the configuration you can apply the role to a specific element.

You can add a role to a button in the above example by setting the role property on the button. You can use teh following line with the above example. The create function returns the b variable, which contains the button.

b.role = "myRoleString"

Then in your configuration add the following to make the button active for the indicated element name.

<x:roleMapping>    
  <x:element name="mySpecificElementName"           
   role="myRoleString" />