This page is deprecated and will be deleted shortly. See either Undo for Component Developers or Undo for Component Users instead.

Overview

The "undo" functionality is part of the Fluid framework. It can be used to provide undo support for any component that bears a model.

Currently, the Fluid components that support Undo are:

This page discribes:

  • how to enable undo on components that support it, and
  • how to build undo support into a component that you are creating.

Enabling Undo on Components that Support it

There are two ways to enable Undo on components that support it:

  1. Specify the undo decorator as an option to the component creation
  2. Manually create the undo decorator

Using the componentDecorators option

The simplest way to enable Undo functionality on a component that supports it is to use the componentDecorators option.

This section is currently incorrect.

Option Name

Value

componentDecorators

"fluid.undoDecorator"

Join the infusion-users mailing list and ask your questions there.

Example - Inline Edit

var opts = {
    componentDecorators: "fluid.undoDecorator"
};
var myEditor = fluid.inlineEdit("#myContainer", opts);

Requesting the "fluid.undoDecorator" will automatically enable the Undo functionality, and the component will be decorated with the necessary controls, etc.

For more control and flexibility, an Undo decorator can be manually created.

Manual Creation

fluid.undoDecorator(component, userOptions);

Parameters

component

The component parameter is a standard Fluid component to receive the "undo" functionality.

userOptions

Name

Description

Values

Default

selectors

Javascript object containing selectors for various fragments of the Undo decorator

The object can contain any subset of the following keys:
  undoContainer
  undoControl
  redoContainer
  redoControl
Any values not provided will revert to the default.

selectors: {
    undoContainer: ".undoContainer",
    undoControl: ".undoControl",
    redoContainer: ".redoContainer",
    redoControl: ".redoControl"
}

renderer

a function that renders the markup for the undo controls

 

function defaultRenderer(that, targetContainer) {
    var markup = "<span class='fluid-undo'>" + 
          "<span class='undoContainer'>[<a href='#' class='undoControl'>undo</a>]</span>" + 
          "<span class='redoContainer'>[<a href='#' class='redoControl'>redo</a>]</span>" + 
          "</span>";
    var markupNode = $(markup);
    targetContainer.append(markupNode);
    return markupNode;
}

Building Undo Support into a Component

Component developers must ensure that their component has certain features for Undo to work with it. A component must:

  1. Bear a model
  2. Initialize the Undo decorator if requested

Model

To support Undo, a component must bear a 'model,' a collection of Javascript objects which constitute the data which it is operating on. A model:

The actual contents of a model is, of course, entirely dependent on the component.

A model must have:

  1. events
  2. a renderer

Events

A component must maintain a list of 'listeners' who may subscribe to model-directed events representing updates to the model. The Fluid Framework provides an Event Firer that can be used for this:

fluid.myComponent = function(container, options) {
    var that = {};
      ...
    that.model = {};

    that.modelFirer = fluid.event.getEventFirer();
      ...
    return that;
};

The modelFirer provides three functions:

modelFirer.addListener(listener, namespace, exclusions);

Listeners registered using this function are notified when the model changes.

modelFirer.removeListener(listener);
modelFirer.fireEvent();

Rendering

The component must implement a no-argument function called render():

    that.render();

This function should "re-render" the component, reflecting any changes in the model.

Initializing the Undo decorator

A component must respond to a user-supplied option requesting Undo by initializing the Undo decorator. This is accomplished by using the initComponents() framework function:

that.decorators = fluid.initComponents();