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 8 Current »

This article describes how to use the Infusion Preferences Framework to create an Auxiliary Schema, a JSON document that defines how panels are combined in a preferences editor. This is part of the Tutorial - Creating a Preferences Editor Using the Preferences Framework.


 

On This Page

 

The auxiliary schema defines the panels and enactors to be used for the preferences defined in the primary schema.

An auxiliary schema includes two parts:

  1. Several top-level members, defining globally-used values, and
  2. One object per preference, defining the specific requirements for that preference.

For detailed information about what members are required and permitted in an auxilliary schema, see Auxiliary Schema for Preferences Framework.

Example: UI Options preferences

The following example shows the auxiliary schema that would be used for the preferences defined in the primary schema example above.

fluid.defaults("fluid.prefs.auxSchema.starter", {
    gradeNames: ["fluid.prefs.auxSchema", "autoInit"],
    auxiliarySchema: {
        // The global values:
        "namespace": "fluid.prefs.constructed",
        "templatePrefix": "../../../framework/preferences/html/", // The common path to settings panel templates
        "template": "%prefix/SeparatedPanelPrefsEditor.html",
        "messagePrefix": "../../../framework/preferences/messages/",
        "message": "%prefix/prefsEditor.json",

        // The preference-specific information:
        "lineSpace": {
            "type": "fluid.prefs.lineSpace",
            "enactor": {
                "type": "fluid.prefs.enactors.lineSpace",
                "fontSizeMap": {
                    "xx-small": "9px",
                    "x-small": "11px",
                    "small": "13px",
                    "medium": "15px",
                    "large": "18px",
                    "x-large": "23px",
                    "xx-large": "30px"
                }
            },
            "panel": {
                "type": "fluid.prefs.panels.lineSpace",
                "container": ".flc-prefsEditor-line-space",  // the css selector in the template where the panel is rendered
                "template": "%prefix/PrefsEditorTemplate-lineSpace.html",
                "message": "%prefix/lineSpace.json"
            }
        },
        "textFont": {
            "type": "fluid.prefs.textFont",
            "classes": {
                "": "",
                "Times New Roman": "fl-font-uio-times",
                "Comic Sans": "fl-font-uio-comic-sans",
                "Arial": "fl-font-uio-arial",
                "Verdana": "fl-font-uio-verdana"
            },
            "enactor": {
                "type": "fluid.prefs.enactors.textFont",
                "classes": "@textFont.classes"
            },
            "panel": {
                "type": "fluid.prefs.panels.textFont",
                "container": ".flc-prefsEditor-text-font",  // the css selector in the template where the panel is rendered
                "classnameMap": {"textFont": "@textFont.classes"},
                "template": "%prefix/PrefsEditorTemplate-textFont.html",
                "message": "%prefix/textFont.json"
            }
        },
        "tableOfContents": {
            "type": "fluid.prefs.tableOfContents",
            "enactor": {
                "type": "fluid.prefs.enactors.tableOfContents",
                "tocTemplate": "../../../components/tableOfContents/html/TableOfContents.html"
            },
            "panel": {
                "type": "fluid.prefs.panels.layoutControls",
                "container": ".flc-prefsEditor-layout-controls",  // the css selector in the template where the panel is rendered
                "template": "%prefix/PrefsEditorTemplate-layout.html",
                "message": "%prefix/tableOfContents.json"
            }
        }
    }
});

Example: Video Player captions and transcripts preferences

The following example shows the auxiliary schema that would be used by the Video Player to add extra panels to Preferences Editor for the preferences defined in the primary schema above.

fluid.videoPlayer.auxSchema = {
    "namespace": "fluid.prefs.vp",
    "template": "../html/SeparatedPanelPrefsEditor.html",
    "templatePrefix": "../lib/infusion/framework/preferences/html/",
    "messagePrefix": "../lib/infusion/framework/preferences/messages/",
    captions: {
        type: "fluid.videoPlayer.captions",
        panel: {
            type: "fluid.videoPlayer.panels.captionsSettings",
            container: ".flc-prefsEditor-captions-settings",
            template: "../html/MediaPanelTemplate.html",
            message: "../messages/captions.json"
        }
    },
    captionLanguage: {
        type: "fluid.videoPlayer.captionLanguage",
        panel: {
            type: "fluid.videoPlayer.panels.captionsSettings"
        }
    }
    transcripts: {
        type: "fluid.videoPlayer.transcripts",
        panel: {
            type: "fluid.videoPlayer.panels.transcriptsSettings",
            container: ".flc-prefsEditor-transcripts-settings",
            template: "../html/MediaPanelTemplate.html",
            message: "../messages/transcripts.json"
        }
    },
    transcriptLanguage: {
        type: "fluid.videoPlayer.transcriptLanguage",
        panel: {
            type: "fluid.videoPlayer.panels.transcriptsSettings"
        }
    }
};

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

 

  • No labels