Tutorial: Presenting a dialog to the user

A common pattern for an action is to present a dialog to the user in order to either give some information or let the user make a choice. oXygen XML Author Web Author offers an API to present a dialog which matches the look and feel of the entire app and which is tested to work on all supported platforms.

The example below contains an action that presents some information about the element currently at the caret position.

/**
 * The action that shows a dialog with information about the element at caret.
 *
 * @param {sync.api.Editor} editor The editor.
 */
ShowTagAction = function(editor) {
  this.editor = editor;
  this.dialog = workspace.createDialog();
  this.dialog.setTitle('Element Information');
  this.dialog.setButtonConfiguration(sync.api.Dialog.ButtonConfiguration.OK);
};
ShowTagAction.prototype = new sync.actions.AbstractAction('');

/** The display name of the action */
ShowTagAction.prototype.getDisplayName = function() {
  return 'Show element info';
};

/** The actual action execution. */
ShowTagAction.prototype.actionPerformed = function(callback) {
  var oxyNode = this.editor.getSelectionManager().getSelection().getNodeAtCaret();
  if (oxyNode) {
      this.dialog.getElement().innerHTML = 'The tag of the element is: ' + oxyNode.getTagName();
      this.dialog.show();
  }
};

/** This action is enabled only when we do not have a selection */
ShowTagAction.prototype.isEnabled = function() {
  var oxyNode = this.editor.getSelectionManager().getSelection().getNodeAtCaret();
  if (oxyNode) {
    return oxyNode.getType() == goog.dom.NodeType.ELEMENT;
  }
  return false;
};

This action can be added to a toolbar or in the context menu as described in the Implementing a Custom Action tutorial.

To use it, place the caret inside an element and invoke the action. A dialog with the tag name of the element should be displayed.