Child pages
  • Expansion of Component Options

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Wiki Markup
{include:sneak peek

...

Expanders

Infusion component option defaults now go through a process called "expansion" during the component creation process. An expander is essentially a function that is called at component-creation time to create the value of the default. This can be useful when static definition of a default option is not possible.

Expanders are specified using the keyword "expander:" in the component defaults:

Code Block
javascriptjavascript
 warning}
{div:class=floatRight}
{panel:title= On This Page| borderStyle=solid| borderColor=#ccc| bgColor=#fff}
{toc:minLevel=2|maxLevel=5}
{panel}
{div}

h2. Expanders
Infusion component option defaults now go through a process called "expansion" during the component creation process. An expander is essentially a function that is called at component-creation time to create the value of the default. This can be useful when static definition of a default option is not possible.

Expanders are specified using the keyword "expander:" in the component defaults:
{code:javascript}
fluid.defaults("component.name", {
    optionName: {
        expander: {
            ...
        }
    }
});
{code}
The format of an expander object varies slightly depending on the particular expander type, but in general, the object will have some of the following properties:

...

Name

Description

type

this is the string name of the expander. Currently, several expanders are provided by the framework, and are described below.

func

Some expanders call user-provided function. In these cases, this property is the string name of the user-provided function.

args

This is an array of arguments to be passed to the user-provided function

href

 

options

 

resourceSpecCollector

 

fetchKey

 

Supported Expanders

Two expanders are currently provided by the framework, and component creators can specify these expanders in their default options:

fluid.deferredCall

The fluid.deferredCall expander will call the specified function, passing it the arguments provided. The return value will be assigned to the default option. For example:



||Name||Description||
|{{type}}|this is the string name of the expander. Currently, several expanders are provided by the framework, and are described below.|
|{{func}}| Some expanders call user-provided function. In these cases, this property is the string name of the user-provided function.|
|{{args}}| This is an array of arguments to be passed to the user-provided function|
|{{href}}| |
|{{options}}| |
|{{resourceSpecCollector}}| |
|{{fetchKey}}| |

h2. Supported Expanders
Two expanders are currently provided by the framework, and component creators can specify these expanders in their default options:

h3. fluid.deferredCall

The {{fluid.deferredCall}} expander will call the specified function, passing it the arguments provided. The return value will be assigned to the default option. For example:

{section}
{column}
{code:javascript}
fluid.defaults("cspace.search.searchView", {
    components: {
        resultsPager: {
            type: "fluid.pager",
            options: {
                modelFilter: {
                    expander: {
                        type: "fluid.deferredCall",
                        func: "cspace.search.makeModelFilter",
                        args: ["{searchView}"]
                    }
                }
            }
        }
   }
});
In this example, the resultsPager is specified as an instance of the Infusion Pager component. When this subcomponent is created, the deferredCall expander will call the function
{code}
{column}
{column}
In this example, the {{resultsPager}} is specified as an instance of the Infusion Pager component. When this subcomponent is created, the {{deferredCall}} expander will call the function {{cspace.search.makeModelFilter}}, passing it the parent {{searchView}} component as an argument. The return value will be used as the default {{modelFilter}} option to the Pager.

{column}
{section}

h3. fluid.deferredInvokeCall
Section
Column
Code Block
javascriptjavascript
Column

...


The {{fluid.deferredInvokeCall}} expander is essentially the same as {{fluid.deferredCall}}, but it will actually perform resolution of the client's demanded name. That is, it will look up the function name in the registered demands to determine what function will actually be called. For example:

...


{section}
{column}
{code:javascript}
fluid.defaults("cspace.specBuilderImpl", {
    urlRenderer: {
        expander: {
            type: "fluid.deferredInvokeCall",
            func: "cspace.urlExpander"
        }
    }  
});
cspace.urlExpander = function (options) {
    ...
    return function (url) {
        ...
    };
};
fluid.demands("cspace.urlExpander", "cspace.test", 
    {
    args: {
        vars: {
            webapp: "../../main/webapp"
        }
    }
});
In this example, the function name cspace.urlExpander will be resolved before being invoked. In a production setting, no arguments will be passed (since none are specified in the expander object. But in a test environment (i.e when "cspace.test" has been registered as an environment), the demands specification be resolved and the specified arguments will be passed to the function.
{code}
{column}
{column}
In this example, the function name {{cspace.urlExpander}} will be resolved before being invoked. In a production setting, no arguments will be passed (since none are specified in the {{expander}} object. But in a test environment (i.e when {{"cspace.test"}} has been registered as an environment), the demands specification be resolved and the specified arguments will be passed to the function.
{column}
{section}

Section
Column
Code Block
javascriptjavascript
Column