Warning |
---|
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 GradesThe following options are supported by all component grades: Table of Content Zone |
---|
| gradeNames Div |
---|
| 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 |
---|
| 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}initFunction Div |
---|
| 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 |
---|
| 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}nickName Div |
---|
| 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 |
---|
| fluid.defaults("component.name", {
nickName: "myComponentName",
...
}); |
|
---|
|
| {code}|
||Example Override| {code:javascript} | Example Override | Code Block |
---|
| 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}preInitFunction Div |
---|
| 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 |
---|
| fluid.defaults("component.name", {
preInitFunction: "component.name.preInit",
...
}); |
|
---|
|
| {code}|
||Example Override| |
|| | [ 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}postInitFunction Div |
---|
| 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 |
---|
| fluid.defaults("component.name", {
postInitFunction: "component.name.postInit",
...
}); |
|
---|
|
| {code}|
||Example Override| |
|| | [ 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}finalInitFunction Div |
---|
| Description | Specifies an event listener (or array of listeners) that will be triggered at the end component lifecycle. |
---|
Notes | |
---|
Example Definition | Code Block |
---|
| fluid.defaults("component.name", {
finalInitFunction: "component.name.finalInit",
...
}); |
|
---|
|
| {code}|
||Example Override| |
|| | [ 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}components Div |
---|
| Description | An object containing named definitions of the component's subcomponents. |
---|
Notes | |
---|
Example Definition | Code Block |
---|
| fluid.defaults("component.name", {
components: {
subcomponent1: {
type: "component.subcomp1",
options: {...}
},
...
},
...
}); |
|
---|
|
| {code}|
||Example Override| {code:javascript} | Example Override | Code Block |
---|
| 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}mergePolicy Div |
---|
| 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 |
---|
| fluid.defaults("component.name", {
mergePolicy: {
option1: "preserve",
option2: "replace",
....
},
...
}); |
|
---|
|
| {code}|
||Example Override| |
|| | [ 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}invokers Div |
---|
| Description | An object defining methods on the component whose arguments are resolved from the environment at invocation time. |
---|
Notes | |
---|
Example Definition | Code Block |
---|
| fluid.defaults("component.name", {
invokers: {
inv1: {...},
inv2: {...},
},
...
}); |
|
---|
|
| {code}|
||Example Override| |
|| | [Invokers] |
{div2}
h3. returnedPath
{div2:class=api-table}
||Description|...|
||Notes| |
||Example Definition| {code:javascript}returnedPath Div |
---|
| Description | ... |
---|
Notes | |
---|
Example Definition | Code Block |
---|
| 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}[ 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}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 ComponentsComponents 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 |
---|
| 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 ComponentsComponents 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 |
---|
| events Include Page |
---|
| _events option description |
---|
| _events option description |
---|
|
listeners Include Page |
---|
| _listeners option description |
---|
| _listeners option description |
---|
|
|
View ComponentsComponents 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 |
---|
| 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 ComponentsComponents 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 |
---|
| 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 |
---|
| 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 |
---|
| 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 |
---|
| 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}produceTree Div |
---|
| 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 |
---|
| 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 |
---|
| 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}protoTree Div |
---|
| 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 |
---|
| 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 |
---|
| 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 |
---|
| 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 |
---|
| fluid.defaults("component.name", {
resources: {
headerTemplate: {
href: "../templates/Header.html"
},
footerTemplate: {
href: "../templates/Footer.html"
}
},
...
}); |
|
---|
|
| {code}|
||Example Override| {code:javascript} | Example Override | Code Block |
---|
| var myComp = component.name(container, {
resources: {
footerTemplate: {
href: "../templates/FrontPageFooter.html"
}
},
...
}); |
|
---|
|
| {code}|
||See also| [] |
{div2}
h3.strings
{div2:class=}
||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 |
---|
| 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 |
---|
| 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 |
---|
| Description | Options that will be passed directly to the renderer creation function, fluid.renderer.createRendererFunction |
---|
Notes | |
---|
Example Definition | Code Block |
---|
| fluid.defaults("fluid.tableOfContents.levels", {
rendererFnOptions: {
noexpand: true
},
...
}); |
|
---|
|
| {code}|
||Example Override| {code:javascript} | Example Override | Code Block |
---|
| var recEditor = cspace.recordEditor(container, {
rendererFnOptions: {
rendererTargetSelector: "dialog"
},
...
}); |
|
---|
|
| {code}|
||See also| [ Components]\\
{{[]}} |
{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 |
---|
| Description | Options that will be included in the #rendererFnOptions as rendererOptions |
---|
Notes | |
---|
Example Definition | Code Block |
---|
| fluid.defaults("cspace.searchBox", {
rendererOptions: {
autoBind: false
},
...
}); |
|
---|
|
| {code}|
||Example Override| {code:javascript} | Example Override | Code Block |
---|
| 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 |
---|
| 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 |
---|
| fluid.defaults("cspace.login", {
gradeNames: ["fluid.rendererComponent", "autoInit"],
renderOnInit: true,
...
}); |
|
---|
|
| {code}|
||Example Override| {code:javascript} | Example Override | Code Block |
---|
| var login = cspace.login(container, {
renderOnInit: false,
...
}); |
|
---|
|
| {code}|
||See also| |
{div2}
{toc-zone}
{div} |