Configuring Infusion Components

Overview

So, the general idea is this:


var myOptions = {
    option1: "foo",
    option2: function () {
        ...
    },
    option3: {
        optA: "bar",
        optB: "bat"
    }
};

var myComponent = fluid.component(container, myOptions);

Example

In the case of the Inline Edit, for example, you might see this:


var ieOptions = {
    tooltipText: "You can click on this to edit it!",
    tooltipDelay: 3000
};
var myInlineEdit = fluid.inlineEdit(myContainer, ieOptions);

In this example, the implementor is overriding the default tooltip text (which is normally "Click here to edit") and the default delay before the tooltip appears (which is normally 2000ms, or 2 seconds). The rest of the configuration of this implementor's Inline Edit will conform to the default implementation.

How Options are Merged with Defaults

The way in which options are combined with default values depends on the specific options, as well as on the component. In some cases, a user-supplied value should completely override the default (for example, the delay on the Inline Edit tooltip). In other cases, the implementor may wish that the value they supply be added to the defaults (for example, in the definition of the keys that can be used to operate a component).

One of the options that all components accept is called the mergePolicy. This object provides instructions to the component regarding how to process user-supplied values, and each component has its own default merge policy. For detailed information about this option, see Options Merging for Infusion Components.

General Options

All of the components will accept the following options:

Name	Description

Name	Description
`selectors`	a set of CSS-based selectors identifying various parts of the component. NOTE: These selectors must be relative to the container of the element.
`styles`	a set of CSS class names that will be applied to various parts of the component. These names should correspond to styles defined by the implementor.

The default values for these options differ based on the component.