Edit online

Adding a Custom Image Decorator for Author Mode

The AuthorImageDecorator extension point allows you to add a custom decorator over images in Author mode. For example, you could use it to add a message over an image informing the user that they can double-click the image to edit it.

How to Implement an AuthorImageDecorator

To implement your own AuthorImageDecorator, follow this procedure:
  1. Implement the ro.sync.ecss.extensions.api.AuthorImageDecorator interface.
  2. To instruct Oxygen XML Editor Eclipse plugin to use this newly created implementation, use either of the following methods:
    1. If you have configured an extensions bundle, you can return the AuthorImageDecorator implementation using the ro.sync.ecss.extensions.api.ExtensionsBundle.getAuthorImageDecorator() method.
    2. Specify the AuthorImageDecorator in the Author image decorator individual extension in the Extensions tab of the Document Type configuration dialog box for your particular document type.

Example

The following example illustrates an implementation for presenting a simple message over an image that informs the user that they can double-click the image to edit it:

/**
 * Custom Author image decorator for drawing string over images.
 */
public class CustomAuthorImageDecorator extends AuthorImageDecorator {

  /**
   * @see ro.sync.ecss.extensions.api.AuthorImageDecorator#paint
(ro.sync.exml.view.graphics.Graphics, int, int, int, int,
 ro.sync.exml.view.graphics.Rectangle,
 ro.sync.ecss.extensions.api.node.AuthorNode,
 ro.sync.ecss.extensions.api.AuthorAccess, boolean)
   */
  @Override
  public void paint(Graphics g, int x, int y, int imageWidth, int imageHeight,
      Rectangle originalSize, AuthorNode element,
 AuthorAccess authorAccess, boolean wasAnnotated) {
    if ("image".equals(CommonsOperationsUtil.getLocalName(element.getName()))) {
      g.drawString(
          "[Double-click to edit image]",
          // Draw near the top-left corner
          x + 15,
          y + 15);
    }
  }

Example result: In the top-left corner of the image, the following message will be displayed: [Double-click to edit image].