Page Comparison

Wiki Markup
{div:class=floatRight} {panel:title= On This Page\| borderStyle=solid\| borderColor=#ccc\| bgColor=#fff} {toc:minLevel=2\|maxLevel=2} {panel} {div}

Wiki Markup
{div:class=floatRight} {panel:title= See Also\| borderStyle=solid\| borderColor=#ccc\| bgColor=#fff} [Understanding Infusion Components] [Understanding Component Options And Their Defaults] {panel} {div}

{div:class=component-api-page} {warning}This page is still being drafted.{warning} {anchor:top} 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. h2. Options Supported By All Components Grades The following options are supported by all component grades: {toc-zone:type=flat|location=top} h3. gradeNames {div2:class=api-table} ||Description|An array of string [grade names|Component Grades].| ||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| {code:javascript}

Wiki Markup

Div

class	floatRight

Panel

borderColor	#ccc
bgColor	#fff
title	On This Page
borderStyle	solid

Table of Contents

minLevel	2
maxLevel	2

Div

class	floatRight

Panel

borderColor	#ccc
bgColor	#fff
title	See Also
borderStyle	solid

Understanding Infusion Components
Understanding Component Options And Their Defaults

Div

class	component-api-page

Warning
This page is still being drafted.

Anchor

	top
	top

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:

Table of Content Zone

location	top
type	flat

gradeNames

Div

class	api-table

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

Code Block

	javascript
	javascript

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

... });{code}| ||Example Override| N/A| ||See also| [Component Grades]\\ {{[#initFunction]}} | {div2} h3. initFunction {div2:class=api-table} ||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| {code:javascript}

  ...
});

Example Override

N/A

See also

Component Grades
#initFunction

initFunction

Div

class	api-table

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

Code Block

	javascript
	javascript

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

... });{code}| ||Example Override| N/A| ||See also| {{[#gradeNames]}}\\ [Component Grades] | {div2} h3. nickName {div2:class=api-table} ||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| {code:javascript}

  ...
});

Example Override

N/A

See also

#gradeNames
Component Grades

nickName

Div

class	api-table

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

Code Block

	javascript
	javascript

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

{code}| ||Example Override| {code:javascript}

Example Override

Code Block

	javascript
	javascript

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

{code}| ||See also| [fluid.computeNickName] | {div2} h3. preInitFunction {div2:class=api-table} ||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| {code:javascript}

See also

fluid.computeNickName

preInitFunction

Div

class	api-table

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

Code Block

	javascript
	javascript

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

{code}| ||Example Override|

Example Override

N/A

| ||

See

also

| [

	Component

lifecycle

and

autoinit]\\ [Infusion13:Infusion Event System] | {div2} h3. postInitFunction {div2:class=api-table} ||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| {code:javascript}

autoinit
Infusion Event System

postInitFunction

Div

class	api-table

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

Code Block

	javascript
	javascript

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

{code}| ||Example Override|

Example Override

N/A

| ||

See

also

| [

	Component

lifecycle

and

autoinit]\\ [Infusion13:Infusion Event System] | {div2} h3. finalInitFunction {div2:class=api-table} ||Description|Specifies an event listener (or array of listeners) that will be triggered at the end component lifecycle.| ||Notes| | ||Example Definition| {code:javascript}

autoinit
Infusion Event System

finalInitFunction

Div

class	api-table

Description

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

Notes

Example Definition

Code Block

	javascript
	javascript

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

{code}| ||Example Override|

Example Override

N/A

| ||

See

also

| [

	Component

lifecycle

and

autoinit]\\ [Infusion13:Infusion Event System] | {div2} h3. components {div2:class=api-table} ||Description|An object containing named definitions of the component's subcomponents.| ||Notes| | ||Example Definition| {code:javascript}

autoinit
Infusion Event System

components

Div

class	api-table

Description

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

Notes

Example Definition

Code Block

	javascript
	javascript

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

{code}| ||Example Override| {code:javascript}

Example Override

Code Block

	javascript
	javascript

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

{code}| ||See also| [Subcomponents] | {div2} h3. mergePolicy {div2:class=api-table} ||Description|An object providing instructions for how particular options should be merged when integrator options are merged with default values.| ||Notes| | ||Example Definition| {code:javascript}

See also

Subcomponents

mergePolicy

Div

class	api-table

Description

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

Notes

Example Definition

Code Block

	javascript
	javascript

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

{code}| ||Example Override|

Example Override

N/A

| ||

See

also

| [

	Options

Merging] | {div2} h3. invokers {div2:class=api-table} ||Description|An object defining methods on the component whose arguments are resolved from the environment at invocation time. | ||Notes| | ||Example Definition| {code:javascript}

Merging

invokers

Div

class	api-table

Description

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

Notes

Example Definition

Code Block

	javascript
	javascript

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

{code}| ||Example Override|

Example Override

N/A

| ||

See

also

| [Invokers] | {div2} h3. returnedPath {div2:class=api-table} ||Description|...| ||Notes| | ||Example Definition| {code:javascript}

	Invokers

returnedPath

Div

class	api-table

Description

...

Notes

Example Definition

Code Block

	javascript
	javascript

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

{code}| ||Example Override| N/A| ||See also| | {div2} {toc-zone} h2. Little Components {span:class=

Example Override

N/A

See also

Little Components

Span

class	back-to-top

}[

back

to

top|#top]{span} 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] h2. Model Components {span:class=back-to-top}[back to top|#top]{span} 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: {toc-zone:type=flat|location=top} h3.model {include:_model option description} h3.applier {include:_applier option description} h3.changeApplierOptions {include:_changeApplierOptions option description} {toc-zone} h2. Evented Components {span:class=back-to-top}[back to top|#top]{span} 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: {toc-zone:type=flat|location=top} h3. events {include:_events option description} h3. listeners {include:_listeners option description} {toc-zone} h2. View Components {span:class=back-to-top}[back to top|#top]{span} 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: {toc-zone:type=flat|location=top} h3.model {include:_model option description} h3.applier {include:_applier option description} h3.changeApplierOptions {include:_changeApplierOptions option description} h3. events {include:_events option description} h3. listeners {include:_listeners option description} h3.selectors {include:_selectors option description} {toc-zone} h2. Renderer Components {span:class=back-to-top}[back to top|#top]{span} 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: {toc-zone:type=flat|location=top} h3.model {include:_model option description} h3.applier {include:_applier option description} h3.changeApplierOptions {include:_changeApplierOptions option description} h3. events {include:_events option description} h3. listeners {include:_listeners option description} h3. selectors {include:_selectors option description} h3.repeatingSelectors {div2:class=api-table} ||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| {code:javascript}

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

Span

class	back-to-top

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:

Table of Content Zone

location	top
type	flat

model

Include Page

	_model option description
	_model option description

applier

Include Page

	_applier option description
	_applier option description

changeApplierOptions

Include Page

	_changeApplierOptions option description
	_changeApplierOptions option description

Evented Components

Span

class	back-to-top

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:

Table of Content Zone

location	top
type	flat

events

Include Page

	_events option description
	_events option description

listeners

Include Page

	_listeners option description
	_listeners option description

View Components

Span

class	back-to-top

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:

Table of Content Zone

location	top
type	flat

model

Include Page

	_model option description
	_model option description

applier

Include Page

	_applier option description
	_applier option description

changeApplierOptions

Include Page

	_changeApplierOptions option description
	_changeApplierOptions option description

events

Include Page

	_events option description
	_events option description

listeners

Include Page

	_listeners option description
	_listeners option description

selectors

Include Page

	_selectors option description
	_selectors option description

Renderer Components

Span

class	back-to-top

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:

Table of Content Zone

location	top
type	flat

model

Include Page

	_model option description
	_model option description

applier

Include Page

	_applier option description
	_applier option description

changeApplierOptions

Include Page

	_changeApplierOptions option description
	_changeApplierOptions option description

events

Include Page

	_events option description
	_events option description

listeners

Include Page

	_listeners option description
	_listeners option description

selectors

Include Page

	_selectors option description
	_selectors option description

repeatingSelectors

Div

class	api-table

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

Code Block

	javascript
	javascript

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"],
    ...
});

{code}| ||Example Override| {code:javascript}

Example Override

Code Block

	javascript
	javascript

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

{code}| ||See also| | {div2} h3.produceTree {div2:class=api-table} ||Description|A function that will return a [Renderer Component Tree|Renderer Component Trees] 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| {code:javascript}

See also

produceTree

Div

class	api-table

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

Code Block

	javascript
	javascript

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

{code}| ||Example Override| {code:javascript}

Example Override

Code Block

	javascript
	javascript

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

{code}| ||See also| {{[#protoTree]}}\\ [Renderer Component Trees] | {div2} h3.protoTree {div2:class=api-table} ||Description| A tree of Renderer [protocomponents|ProtoComponent Types].| ||Notes| NOTE that if both {{[#produceTree]}} and {{protoTree}} are specified, only the {{produceTree}} function will be used; the {{protoTree}} will be ignored. | ||Example Definition| {code:javascript}

See also

#protoTree
Renderer Component Trees

protoTree

Div

class	api-table

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

Code Block

	javascript
	javascript

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}}"
            }
        }
    },
    ...
});

{code}| ||Example Override| {code:javascript}

Example Override

Code Block

	javascript
	javascript

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}}"
            }

} }, ... });{code}| ||See also| {{[#produceTree]}}\\ [Renderer Component Trees]\\ [ProtoComponent Types] | {div2} h3. resources {div2:class=api-table} ||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| {code:javascript}

   }
    },
    ...
});

resources

Div

class	api-table

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

Code Block

	javascript
	javascript

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

{code}| ||Example Override| {code:javascript}

Example Override

Code Block

	javascript
	javascript

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

{code}| ||See also| [

See also

fluid.fetchResources

] | {div2} h3.strings {div2:class=

strings

Div

class	api-table

} ||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| {code:javascript}

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

Code Block

	javascript
	javascript

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"
    },
    ...
});

{code}| ||Example Override| {code:javascript}

Example Override

Code Block

	javascript
	javascript

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"
    },
    ...
});

{code}| ||See also| [Message Resolver]\\ {{[fluid.messageResolver]}} | {div2} h3.rendererFnOptions {div2:class=api-table} ||Description|Options that will be passed directly to the renderer creation function, {{[fluid.renderer.createRendererFunction]}}| ||Notes| | ||Example Definition| {code:javascript}

rendererFnOptions

Div

class	api-table

Description

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

Notes

Example Definition

Code Block

	javascript
	javascript

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

{code}| ||Example Override| {code:javascript}

Example Override

Code Block

	javascript
	javascript

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

{code}| ||See also| [

See also

Renderer-bearing

Components]\\ {{[

Components
fluid.renderer.createRendererFunction

]}} | {div2} h3.rendererOptions {div2:class=api-table} ||Description|Options that will be included in the {{[#rendererFnOptions]}} as {{rendererOptions}}| ||Notes| | ||Example Definition| {code:javascript}

rendererOptions

Div

class	api-table

Description

Options that will be included in the #rendererFnOptions as rendererOptions

Notes

Example Definition

Code Block

	javascript
	javascript

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

{code}| ||Example Override| {code:javascript}

Example Override

Code Block

	javascript
	javascript

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

{code}| ||See also| [Renderer-bearing Components]\\ {{[#rendererFnOptions]}} | {div2} h3.renderOnInit {div2:class=api-table} ||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| {code:javascript}

renderOnInit

Div

class	api-table

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

Code Block

	javascript
	javascript

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

{code}| ||Example Override| {code:javascript}

Example Override

Code Block

	javascript
	javascript

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

{code}| ||See also| | {div2} {toc-zone} {div}

See also

Page Comparison

Versions Compared

Old Version 3

New Version 4

Key

Options Supported By All Components Grades

gradeNames

initFunction

nickName

preInitFunction

postInitFunction

finalInitFunction

components

mergePolicy

invokers

returnedPath

Little Components

Model Components

model

applier

changeApplierOptions

Evented Components

events

listeners

View Components

model

applier

changeApplierOptions

events

listeners

selectors

Renderer Components

model

applier

changeApplierOptions

events

listeners

selectors

repeatingSelectors

produceTree

protoTree

resources

strings

rendererFnOptions

rendererOptions

renderOnInit