Documentation for a historical release of Infusion: 1.4
Please view the Infusion Documentation site for the latest documentation, or the Infusion 1.3. Documentation for the previous release.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

On This Page
See Also

Understanding Infusion Components
Understanding Component Options And Their Defaults

This page is still being drafted.


Infusion components are configured using options that are defined by the component developer and customized by the integrator. While component developers are free to define whatever options are appropriate for their component, the Infusion Framework supports a number of predefined options. This page briefly describes these predefined options and provides links more information about the related Framework functionality.

Some predefined options should not be overridden by integrators: They are strictly for the use of the component developer. This is noted in the descriptions below.

Options Supported By All Components Grades

The following options are supported by all component grades:

[ gradeNames ] [ initFunction ] [ nickName ] [ preInitFunction ] [ postInitFunction ] [ finalInitFunction ] [ components ] [ mergePolicy ] [ invokers ] [ returnedPath ]

gradeNames

Unknown macro: {div2}

Description

An array of string grade names.

Notes

In addition to the grade names, the array can include the special "autoInit" value, which instructs the Framework to create the component creator function automatically.

Example Definition

 
fluid.defaults("component.name", {
    gradeNames: ["fluid.modelComponent", "fluid.eventedComponent", "autoInit"],
    ...
});

Example Override

N/A

See also

Component Grades
initFunction

initFunction

Unknown macro: {div2}

Description

The string name of the component initialization function.

Notes

If specified, this option overrides the default initialization function associated with the desired component grade. Do not use this option unless you know what you're doing.

Example Definition

 
fluid.defaults("component.name", {
    initFunction: "component.componentInitFunc",
    ...
});

Example Override

N/A

See also

gradeNames
Component Grades

nickName

Unknown macro: {div2}

Description

Specifies a custom nickname for the component. The nickname is used by the Framework to reference the component type. By default, the nickname is derived from the component name.

Notes

 

Example Definition

 
fluid.defaults("component.name", {
    nickName: "myComponentName",
    ...
});

Example Override

 
var myComp = component.name(container, {
    nickName: "myCoolComponent",
    ...
});

See also

fluid.computeNickName

preInitFunction

Unknown macro: {div2}

Description

Specifies an event listener (or array of listeners) that will be triggered at the pre-initialization phase of the component lifecycle.

Notes

 

Example Definition

 
fluid.defaults("component.name", {
    preInitFunction: "component.name.preInit",
    ...
});

Example Override

N/A

See also

Component Lifecycle and autoInit
Infusion Event System

postInitFunction

Unknown macro: {div2}

Description

Specifies an event listener (or array of listeners) that will be triggered at the post-initialization phase of the component lifecycle.

Notes

 

Example Definition

 
fluid.defaults("component.name", {
    postInitFunction: "component.name.postInit",
    ...
});

Example Override

N/A

See also

Component Lifecycle and autoInit
Infusion Event System

finalInitFunction

Unknown macro: {div2}

Description

Specifies an event listener (or array of listeners) that will be triggered at the end component lifecycle.

Notes

 

Example Definition

 
fluid.defaults("component.name", {
    finalInitFunction: "component.name.finalInit",
    ...
});

Example Override

N/A

See also

Component Lifecycle and autoInit
Infusion Event System

components

Unknown macro: {div2}

Description

An object containing named definitions of the component's subcomponents.

Notes

 

Example Definition

 
fluid.defaults("component.name", {
    components: {
        subcomponent1: {
            type: "component.subcomp1",
            options: {...}
        },
        ...
    },
    ...
});

Example Override

 
var myComp = component.name(container, {
    components: {
        subcomponent1: {
            options: {...}
        }
    },
    ...
});

See also

Subcomponents

mergePolicy

Unknown macro: {div2}

Description

An object providing instructions for how particular options should be merged when integrator options are merged with default values.

Notes

 

Example Definition

 
fluid.defaults("component.name", {
    mergePolicy: {
        option1: "preserve",
        option2: "replace",
        ....
    },
    ...
});

Example Override

N/A

See also

Options Merging

invokers

Unknown macro: {div2}

Description

An object defining methods on the component whose arguments are resolved from the environment at invocation time.

Notes

 

Example Definition

 
fluid.defaults("component.name", {
    invokers: {
        inv1: {...},
        inv2: {...},
    },
    ...
});

Example Override

N/A

See also

Invokers

returnedPath

Unknown macro: {div2}

Description

...

Notes

 

Example Definition

 
fluid.defaults("component.name", {
    < >,
    ...
});

Example Override

N/A

See also

 

Little Components

back to top

Components defined with a grade of littleComponent support all of the common options described above, and no others. Component developers are free to define their own additional options.

See also: Component Grades

Model Components

back to top

Components defined with a grade of modelComponent support all of the common options described above, as well as those defined below. Component developers are free to define their own additional options.

See also: Component Grades

The following options are supported by model components:

[ model ] [ applier ] [ changeApplierOptions ]

model

Description

An object containing the data model to be used by the component.

Notes

If a ChangeApplier is not provided using the #applier option, the Framework will create one for the provided model.

Example Definition

 
fluid.defaults("fluid.pager", {
    model: {
        pageIndex: undefined,
        pageSize: 10,
        totalRange: undefined
    },
    ...
});

Example Override

 
var myPager = fluid.pager(container, {
    model: {
        pageIndex: 1
    },
    ...
});

See also

Model Objects
ChangeApplier API
#applier
#changeApplierOptions

applier

Description

A ChangeApplier object for the model provided with the #model option.

Notes

It is not necessary to provide an applier: By default, an applier will be created with fluid.makeChangeApplier(), using any options specified with #changeApplierOptions.

This option is most commonly used to share a common ChangeApplier between components in a component tree: the applier option can be used to reference the ChangeApplier of another component in the tree.

Example Definition

 
fluid.defaults("component.name", {
    applier: "{parentComponent.applier}",
    ...
});

Example Override

N/A

See also

ChangeApplier API
#model
#changeApplierOptions
Demand Resolution

changeApplierOptions

Description

Options that will be passed on to fluid.makeChangeApplier() if a ChangeApplier is not provided using the #applier option.

Notes

If a ChangeApplier is provided using the #applier option, this option will be ignored.

Example Definition

 
fluid.defaults("component.name", {
    model: {...},
    changeApplierOptions: {
        cullUnchanged: true
    },
    ...
});

Example Override

 
var myComp = component.name(container, {
    model: {...},
    changeApplierOptions: {
        cullUnchanged: true
    },
    ...
});

See also

ChangeApplier API
#model
#applier

Evented Components

back to top

Components defined with a grade of eventedComponent support all of the common options described above, as well as those defined below. Component developers are free to define their own additional options.

See also: Component Grades

The following options are supported by evented components:

[ events ] [ listeners ]

events

Description

An object containing key/value pairs that define the events the component will fire: the keys are the event names, the values define the type of the event (see Infusion Event System for information on the different event types).

Notes

The Framework will create event firers for the listed events. It is the responsibility of the component to fire the events at the appropriate times.

Component integrators should NOT override event definitions.

Example Definition

 
fluid.defaults("component.name", {
    events: {
        onSave: "preventable",
        onReady: null
    },
    ...
});

Example Override

N/A

See also

Infusion Event System

listeners

Description

An object defining listener functions for the events supported by a component.

Notes

Both component developers and integrators can define listeners for events.

Example Definition

 
fluid.defaults("component.name", {
    events: {
        onSave: "preventable",
        onReady: null
    },
    listeners: {
        onSave: component.name.saveValidatorFn
    },
    ...
});

Example Override

 
var myComp = component.name(container, {
    listeners: {
        onReady: myReadyNotificationFn,
    },
    ...
});

See also

Infusion Event System

View Components

back to top

Components defined with a grade of viewComponent support all of the common options described above, as well as those defined below. Component developers are free to define their own additional options.

See also: Component Grades

The following options are supported by view components:

[ model ] [ applier ] [ changeApplierOptions ] [ events ] [ listeners ] [ selectors ]

model

Description

An object containing the data model to be used by the component.

Notes

If a ChangeApplier is not provided using the #applier option, the Framework will create one for the provided model.

Example Definition

 
fluid.defaults("fluid.pager", {
    model: {
        pageIndex: undefined,
        pageSize: 10,
        totalRange: undefined
    },
    ...
});

Example Override

 
var myPager = fluid.pager(container, {
    model: {
        pageIndex: 1
    },
    ...
});

See also

Model Objects
ChangeApplier API
#applier
#changeApplierOptions

applier

Description

A ChangeApplier object for the model provided with the #model option.

Notes

It is not necessary to provide an applier: By default, an applier will be created with fluid.makeChangeApplier(), using any options specified with #changeApplierOptions.

This option is most commonly used to share a common ChangeApplier between components in a component tree: the applier option can be used to reference the ChangeApplier of another component in the tree.

Example Definition

 
fluid.defaults("component.name", {
    applier: "{parentComponent.applier}",
    ...
});

Example Override

N/A

See also

ChangeApplier API
#model
#changeApplierOptions
Demand Resolution

changeApplierOptions

Description

Options that will be passed on to fluid.makeChangeApplier() if a ChangeApplier is not provided using the #applier option.

Notes

If a ChangeApplier is provided using the #applier option, this option will be ignored.

Example Definition

 
fluid.defaults("component.name", {
    model: {...},
    changeApplierOptions: {
        cullUnchanged: true
    },
    ...
});

Example Override

 
var myComp = component.name(container, {
    model: {...},
    changeApplierOptions: {
        cullUnchanged: true
    },
    ...
});

See also

ChangeApplier API
#model
#applier

events

Description

An object containing key/value pairs that define the events the component will fire: the keys are the event names, the values define the type of the event (see Infusion Event System for information on the different event types).

Notes

The Framework will create event firers for the listed events. It is the responsibility of the component to fire the events at the appropriate times.

Component integrators should NOT override event definitions.

Example Definition

 
fluid.defaults("component.name", {
    events: {
        onSave: "preventable",
        onReady: null
    },
    ...
});

Example Override

N/A

See also

Infusion Event System

listeners

Description

An object defining listener functions for the events supported by a component.

Notes

Both component developers and integrators can define listeners for events.

Example Definition

 
fluid.defaults("component.name", {
    events: {
        onSave: "preventable",
        onReady: null
    },
    listeners: {
        onSave: component.name.saveValidatorFn
    },
    ...
});

Example Override

 
var myComp = component.name(container, {
    listeners: {
        onReady: myReadyNotificationFn,
    },
    ...
});

See also

Infusion Event System

selectors

Description

An object containing names CSS-based selectors identifying where in the DOM different elements can be found.

Notes

The Framework will create a DOM Binder that should be used to access the elements identified by selectors. The DOM Binder attaches a function to the component object called locate() which retrieves the element given the selector name.

Example Definition

 
fluid.defaults("fluid.progress", {
    selectors: {
        displayElement: ".flc-progress",
        progressBar: ".flc-progress-bar",
        indicator: ".flc-progress-indicator",
        label: ".flc-progress-label",
        ariaElement: ".flc-progress-bar"
    },
    ...
});

Example Override

 
var myEdit = fluid.progress(container, {
    selectors: {
        indicator: "div.progress-indicator",
        label: "span.progress-label"
    },
    ...
});

See also

DOM Binder

Renderer Components

back to top

Components defined with a grade of rendererComponent support all of the common options described above, as well as those defined below. Component developers are free to define their own additional options.

See also: Component Grades

The following options are supported by renderer components:

[ model ] [ applier ] [ changeApplierOptions ] [ events ] [ listeners ] [ selectors ] [ repeatingSelectors ] [ produceTree ] [ protoTree ] [ resources ] [ strings ] [ rendererFnOptions ] [ rendererOptions ] [ renderOnInit ]

model

Description

An object containing the data model to be used by the component.

Notes

If a ChangeApplier is not provided using the #applier option, the Framework will create one for the provided model.

Example Definition

 
fluid.defaults("fluid.pager", {
    model: {
        pageIndex: undefined,
        pageSize: 10,
        totalRange: undefined
    },
    ...
});

Example Override

 
var myPager = fluid.pager(container, {
    model: {
        pageIndex: 1
    },
    ...
});

See also

Model Objects
ChangeApplier API
#applier
#changeApplierOptions

applier

Description

A ChangeApplier object for the model provided with the #model option.

Notes

It is not necessary to provide an applier: By default, an applier will be created with fluid.makeChangeApplier(), using any options specified with #changeApplierOptions.

This option is most commonly used to share a common ChangeApplier between components in a component tree: the applier option can be used to reference the ChangeApplier of another component in the tree.

Example Definition

 
fluid.defaults("component.name", {
    applier: "{parentComponent.applier}",
    ...
});

Example Override

N/A

See also

ChangeApplier API
#model
#changeApplierOptions
Demand Resolution

changeApplierOptions

Description

Options that will be passed on to fluid.makeChangeApplier() if a ChangeApplier is not provided using the #applier option.

Notes

If a ChangeApplier is provided using the #applier option, this option will be ignored.

Example Definition

 
fluid.defaults("component.name", {
    model: {...},
    changeApplierOptions: {
        cullUnchanged: true
    },
    ...
});

Example Override

 
var myComp = component.name(container, {
    model: {...},
    changeApplierOptions: {
        cullUnchanged: true
    },
    ...
});

See also

ChangeApplier API
#model
#applier

events

Description

An object containing key/value pairs that define the events the component will fire: the keys are the event names, the values define the type of the event (see Infusion Event System for information on the different event types).

Notes

The Framework will create event firers for the listed events. It is the responsibility of the component to fire the events at the appropriate times.

Component integrators should NOT override event definitions.

Example Definition

 
fluid.defaults("component.name", {
    events: {
        onSave: "preventable",
        onReady: null
    },
    ...
});

Example Override

N/A

See also

Infusion Event System

listeners

Description

An object defining listener functions for the events supported by a component.

Notes

Both component developers and integrators can define listeners for events.

Example Definition

 
fluid.defaults("component.name", {
    events: {
        onSave: "preventable",
        onReady: null
    },
    listeners: {
        onSave: component.name.saveValidatorFn
    },
    ...
});

Example Override

 
var myComp = component.name(container, {
    listeners: {
        onReady: myReadyNotificationFn,
    },
    ...
});

See also

Infusion Event System

selectors

Description

An object containing names CSS-based selectors identifying where in the DOM different elements can be found.

Notes

The Framework will create a DOM Binder that should be used to access the elements identified by selectors. The DOM Binder attaches a function to the component object called locate() which retrieves the element given the selector name.

Example Definition

 
fluid.defaults("fluid.progress", {
    selectors: {
        displayElement: ".flc-progress",
        progressBar: ".flc-progress-bar",
        indicator: ".flc-progress-indicator",
        label: ".flc-progress-label",
        ariaElement: ".flc-progress-bar"
    },
    ...
});

Example Override

 
var myEdit = fluid.progress(container, {
    selectors: {
        indicator: "div.progress-indicator",
        label: "span.progress-label"
    },
    ...
});

See also

DOM Binder

repeatingSelectors

Unknown macro: {div2}

Description

An array of selector names identifying elements that will be repeated by the Renderer based on the data being rendered. For example, the selector for a table row that will be replicated many times should appear in the list of repeating selectors.

Notes

 

Example Definition

 
fluid.defaults("cspace.header", {
    selectors: {
        menuItem: ".csc-header-menu-item",
        label: ".csc-header-link",
        searchBox: ".csc-header-searchBox",
        logout: ".csc-header-logout",
        user: ".csc-header-user",
        userName: ".csc-header-userName"
    },
    repeatingSelectors: ["menuItem"],
    ...
});

Example Override

 
var myComp = cspace.header(container, {
    selectors: {
        menuItem: "li.menu-item",
    },
    repeatingSelectors: ["menuItem"],
    ...
});

See also

 

produceTree

Unknown macro: {div2}

Description

A function that will return a Renderer Component Tree for the component.

Notes

The referenced function must accept the component object as its only parameter and return a Renderer component tree. It can use any method to create tree.

NOTE that if both produceTree and protoTree are specified, only the produceTree function will be used; the protoTree will be ignored.

Example Definition

 
cspace.confirmationDialog.produceTree = function (that) {
    var tree = {
        ...
    };
    return tree;
};
fluid.defaults("cspace.confirmationDialog", {
    produceTree: cspace.confirmationDialog.produceTree,
    ...
});

Example Override

 
var myDialog = cspace.confirmationDialog(container, {
    produceTree: mySite.produceCustomConfirmationDialogTree,
    ...
});

See also

protoTree
Renderer Component Trees

protoTree

Unknown macro: {div2}

Description

A tree of Renderer protocomponents.

Notes

NOTE that if both produceTree and protoTree are specified, only the produceTree function will be used; the protoTree will be ignored.

Example Definition

 
fluid.defaults("cspace.searchTips", {
    protoTree: {
        searchTips: {decorators: {"addClass": "{styles}.searchTips"}},
        title: {
            decorators: {"addClass": "{styles}.title"}, 
            messagekey: "searchTips-title"
        },
        expander: {
            repeatID: "instructions",
            type: "fluid.renderer.repeat",
            pathAs: "row",
            controlledBy: "messagekeys",
            tree: {
                messagekey: "${{row}}"
            }
        }
    },
    ...
});

Example Override

 
var searchTips = cspace.searchTips(container, {
    protoTree: {
        searchTips: {decorators: {"addClass": "{styles}.searchTips"}},
        title: {
            decorators: {"addClass": "{styles}.title"}, 
            messagekey: "searchTips-title"
        },
        expander: {
            repeatID: "instructions",
            type: "fluid.renderer.repeat",
            pathAs: "row",
            controlledBy: "messagekeys",
            tree: {
                messagekey: "${{row}}"
            }
        }
    },
    ...
});

See also

produceTree
Renderer Component Trees
ProtoComponent Types

resources

Unknown macro: {div2}

Description

An object that lists resources (such as HTML files, CSS files, data files) required by the component.

Notes

The specified resources will be loaded automatically and the file content will be stored within the resources object itself.

Example Definition

 
fluid.defaults("component.name", {
    resources: {
        headerTemplate: {
            href: "../templates/Header.html"
        },
        footerTemplate: {
            href: "../templates/Footer.html"
        }
    },
    ...
});

Example Override

 
var myComp = component.name(container, {
    resources: {
        footerTemplate: {
            href: "../templates/FrontPageFooter.html"
        }
    },
    ...
});

See also

fluid.fetchResources

strings

Unknown macro: {div2}

Description

An object containing named strings or string templates. The strings will be used by the Renderer.

Notes

The Framework will create a [Message Resolver] and add it to the component object if the strings option is present.

Example Definition

 
fluid.defaults("cspace.searchToRelateDialog", {
    gradeNames: "fluid.rendererComponent",
    strings: {
        createNewButton: "Create",
        title: "Add Related %recordType Record",
        closeAlt: "close button",
        relationshipType: "Select relationship type:",
        createNew: "Create new record:",
        addButton: "Add to current record"
    },
    ...
});

Example Override

 
var myDialog = cspace.searchToRelateDialog(container, {
    strings: {
        relationshipType: "Select a relationship type from the list below:",
        createNew: "Create a new record:",
        addButton: "Add this record to the current record"
    },
    ...
});

See also

[Message Resolver]
fluid.messageResolver

rendererFnOptions

Unknown macro: {div2}

Description

Options that will be passed directly to the renderer creation function, fluid.renderer.createRendererFunction

Notes

 

Example Definition

 
fluid.defaults("fluid.tableOfContents.levels", {
    rendererFnOptions: {
        noexpand: true
    },
    ...
});

Example Override

 
var recEditor = cspace.recordEditor(container, {
    rendererFnOptions: {
        rendererTargetSelector: "dialog"
    },
    ...
});

See also

Renderer-bearing Components
fluid.renderer.createRendererFunction

rendererOptions

Unknown macro: {div2}

Description

Options that will be included in the rendererFnOptions as rendererOptions

Notes

 

Example Definition

 
fluid.defaults("cspace.searchBox", {
    rendererOptions: {
        autoBind: false
    },
    ...
});

Example Override

 
var search = cspace.searchBox(container, {
    rendererOptions: {
        autoBind: true
    },
    ...
});

See also

Renderer-bearing Components
rendererFnOptions

renderOnInit

Unknown macro: {div2}

Description

A boolean flag indicating whether or not the component should render itself automatically once initialization has completed. By default, renderer components do not render themselves automatically.

Notes

This option is valid both for "autoInit" components and for components that are initialized manually, through fluid.initRendererComponent.

Example Definition

 
fluid.defaults("cspace.login", {
    gradeNames: ["fluid.rendererComponent", "autoInit"],
    renderOnInit: true,
    ...
});

Example Override

 
var login = cspace.login(container, {
    renderOnInit: false,
    ...
});

See also

 
  • No labels