Child pages
  • Renderer-bearing Components

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3
Include Page
sneak peek warning
sneak peek warning

Overview

Excerpt

If you are creating a component that requires the use of the Renderer, use the new fluid.initRendererComponent function in your component creator function:

Code Block
javascript
javascript
my.component = function (container, options) {
    var that = fluid.initRendererComponent("my.component", container, options);
    ...
    return that;
}

This new function automates the work of applying the Renderer, fetching templates, configuring cutpoints based on the DOM binder, as well as localisation via the string bundle.

This function will:

  • create that.model, using options.model if available (creating an empty object if not)
  • fetch any resources (such as HTML templates, etc.) specified in options.resources
  • create a renderer function and attach it to your that object as that.render(tree);

Options for Renderer-bearing Components

While developers are free to define whatever options they like for their component, a component initialised with fluid.initRendererComponent will also understand certain options specific to the Renderer:

Include Page
initRendererComponent Options
initRendererComponent Options

Events for Renderer-bearing Components

prepareModelForRender

Div
classapi-table

Description

This event fires before the generation of protoTree. Whatever adjustment on the model, which is the protoTree is generated based on, is ideal to be performed at this event.

Parameters

model
The internal Model Component that is used by this renderer component.

applier
The internal Change Applier Component that is used by this renderer component.

that
The reference to the current renderer component.

Returns

None

Note

The first event to be fired before events "onRenderTree" and "afterRender".

Availability

Infusion 1.4 and later

onRenderTree

Div
classapi-table

Description

This event fires right before protoTree is rendered. This event is ideal for the final manipulation of the fully expanded protoTree.

Parameters

that
The reference to the current renderer component.

tree
Expanded renderer tree.

Returns

None

Note

The event fired after "prepareModelForRender" and before "afterRender".

Availability

Infusion 1.4 and later

afterRender

Div
classapi-table

Description

This event fires after protoTree is rendered.

Parameters

that
The reference to the current renderer component.

Returns

None

Note

The event fired after "onRenderTree" and "afterRender".

Availability

Infusion 1.4 and later

Note: The 3 events are fired in the order of prepareModelForRender, onRenderTree, afterRender. They are only intended for use by experts.

Functions on that

render(tree)

Code Block
javascript
javascript
that.render(tree);

Expands the provided tree, generates cutpoints, and renders the tree.

produceTree()

Code Block
javascript
javascript
that.produceTree();

This function is only present if a protoTree has been provided in the options. This function can be overridden by providing a produceTree in the options.

refreshView()

Code Block
javascript
javascript
that.refreshView();

This function simply calls that.render(that.produceTree()); This function is only present if a protoTree has been provided in the options.

Example to render a drop down list box

Code Block
javascript
javascript
(function ($, fluid) {
    fluid.examples.rederer = function (container, options) {
        var that = fluid.initRendererComponent("fluid.examples.rederer", container, options);
        that.renderer.refreshView();

        return that;   
    };

    fluid.defaults("fluid.examples.rederer", {
        gradeNames: ["fluid.rendererComponent"], 
        selectors: {
            textFont: ".flc-examples-text-font",
            notInProtoTree: ".flc-examples-not-in-protoTree"
        },
        // "selectorsToIgnore" is an array of all the selectors 
        // that are defined in "selectors" but not used in 
        // "protoTree". It tells renderer not to generate cutpoints 
        // for these selectors.
        selectorsToIgnore: ["notInProtoTree"],
        model: { 
            textFontNames: ["Serif", "Sans-Serif", "Arial"],
            textFontList: ["serif", "sansSerif", "arial"],
            textFontValue: ""
        },
        rendererOptions: {
            autoBind: true,
        },
        protoTree: {
            // "textFont" is an ID that is defined in "selectors" 
            // option
            textFont: { 
                // "textFontNames", "textFontList", "textFontValue" 
                // must be defined in "model"
                optionnames: "${textFontNames}",
                optionlist: "${textFontList}",
                selection: "${textFontValue}"
            }
        }
        resources: {
            template: {
                forceCache: true,
                url: "examples-rederer.html"
            }
        }
    });
})

The template "examples-rederer.html" looks like,

Code Block
javascript
javascript
<form id="options" action="">
    <label for="text-font" class="fl-label">Font style:</label>
    <select class="flc-examples-text-font" id="text-font">
    </select>
</form>

This example uses renderer component to generate a drop down list box. fluid.initRendererComponent(). The option "protoTree" is the key option that establishes the binding between the "selectors" and data presented in "model". See Component Tree Expanders for more usage of "protoTree".