Add a button to the toolbar

It is possible to add custom buttons to the Xopus interface. You can add buttons and asign them to specific elements.

This part of the API is deprecated because the next major release of Xopus will incorporate a full replacement for this API. 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. I have attached an example depricated.js.

Example

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.

Example

b.role = "myRoleString"

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

Example

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