Infusion Documentation

Infusion Documentation

Child pages
  • Creating Panels

This documentation is currently being moved to our new documentation site.

Please view or edit the documentation there, instead.

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

  

 

This article describes how to use the Infusion Preferences Framework to create Panels, user interfaces that display adjusters, or controls, allowing users to modify their settings for various preferences. This is part of the Tutorial - Creating a Preferences Editor Using the Preferences Framework.

Panels are renderer components that present controls to the user to allow them to adjust the preference settings. Panels are defined the same was as any Infusion component, using the fluid.defaults function. See also: Framework Best Practices.

The configuration information used to define a UI Options preferences panel must include certain required information:

  • the fluid.uiOptions.panels and autoInit grades (provided by the Framework)
  • a Preference Map (see below)
  • a renderer proto-tree or produceTree function
  • selectors for rendering the controls, labels, etc
  • any other information required by the panel

PreferenceMap

Each panel and enactor defines a "preference map," which binds the state of the component (i.e. the panel's controls) to the (primary) schema.

Format

    preferenceMap: {
        <key from primary schema>: {
            <path in panel's model where value held>: <key in primary schema where value held>,
            <path in panel's model or options where value held>: <key in primary schema where value held>,
		... any number of the above, as required ...
        }
    }

Examples

fluid.defaults("fluid.uiOptions.panels.textSize", {
    gradeNames: ["fluid.uiOptions.panels", "autoInit"],    preferenceMap: {
        "fluid.uiOptions.textSize": {
            "model.value": "default",
            "range.min": "minimum",
            "range.max": "maximum"
        }
    },
    ....

fluid.defaults("fluid.uiOptions.panels.textFont", {
    gradeNames: ["fluid.uiOptions.panels", "autoInit"],
    preferenceMap: {
        "fluid.uiOptions.textFont": {
            "model.value": "default",
            "controlValues.textFont": "enum"
        }
    },
    ....

fluid.defaults("fluid.videoPlayer.panels.captionsSettings", {
    gradeNames: ["fluid.videoPlayer.panels.mediaSettings", "autoInit"],
    preferenceMap: {
        "fluid.videoPlayer.captions": {
            "model.show": "default"
        },
        "fluid.videoPlayer.captionLanguage": {
            "model.language": "default"
        }
    },
    ....

Example: UI Options 'line spacing' preference panel

fluid.defaults("fluid.uiOptions.panels.lineSpace", {
    gradeNames: ["fluid.uiOptions.panels", "autoInit"],
    preferenceMap: {
        "fluid.uiOptions.lineSpace": {
            "model.value": "default",
            "range.min": "minimum",
            "range.max": "maximum"
        }
    },
    range: {
        min: 1,
        max: 2
    },
    selectors: {
        lineSpace: ".flc-uiOptions-line-space",
        label: ".flc-uiOptions-line-space-label",
        narrowIcon: ".flc-uiOptions-line-space-narrowIcon",
        wideIcon: ".flc-uiOptions-line-space-wideIcon",
        multiplier: ".flc-uiOptions-multiplier"
    },
    protoTree: {
        label: {messagekey: "lineSpaceLabel"},
        narrowIcon: {messagekey: "lineSpaceNarrowIcon"},
        wideIcon: {messagekey: "lineSpaceWideIcon"},
        multiplier: {messagekey: "multiplier"},
        lineSpace: {
            decorators: {
                type: "fluid",
                func: "fluid.uiOptions.textfieldSlider"
            }
        }
    },
    sliderOptions: {
        orientation: "horizontal",
        step: 0.1,
        range: "min"
    }
});

Example: Video Player caption preferences panel

fluid.defaults("fluid.videoPlayer.panels.captionSettings", {
    gradeNames: ["fluid.uiOptions.panels", "autoInit"],
    preferenceMap: {
        "fluid.videoPlayer.captions": {
            // the key is the internal model path, the value is the path into the schema
            "model.show": "default"
        },
        "fluid.videoPlayer.captionLanguage": {
            "model.language": "default"
        }
    },
    model: {
        show: false,
        language: "en"
    },
    listeners: {
        onCreate: "fluid.videoPlayer.panels.captionSettings.toggleLanguageOnShow"
    },
    strings: {
        language: ["English", "French"]
    },
    controlValues: {
        language: ["en", "fr"]
    },
    styles: {
        icon: "fl-icon"
    },
    selectors: {
        label: ".flc-videoPlayer-media-label",
        show: ".flc-videoPlayer-media",
        choiceLabel: ".flc-videoPlayer-media-choice-label",
        language: ".flc-videoPlayer-media-language"
    },
    produceTree: "fluid.videoPlayer.panels.captionSettings.produceTree"
});

Back to Tutorial - Creating a Preferences Editor Using the Preferences Framework

 

  • No labels