This article describes how to use the Infusion Preferences Framework to use the Builder, a tool that creates a preferences editor from schema documents. This is part of the Tutorial - Creating a Preferences Editor Using the Preferences Framework.

The Builder takes as its input the primary and auxiliary schemas and constructs all the components necessary to render the preferences editor, store preferences, and respond to changes in preferences.

The Builder is invoked using the fluid.prefs.builder() function, and accepts a JavaScript object as its argument. The JavaScript object contains the configuration information, using various keys:

The Builder will only include any panels defined by the auxiliary schema. The 'starter set' of panels provided by the Preferences Framework can be added by using the fluid.prefs.auxSchema.starter grade. The content of whatever auxiliary schema grade you provide can be overriden by specifics in the auxiliarySchema option.

Example: Using the builder with the 'starter set' of panels and enactors

var prefsBuilder = fluid.prefs.builder({
    gradeNames: ["fluid.prefs.auxSchema.starter"]
});

fluid.defaults("fluid.videoPlayer.myBuilder", {
    gradeNames: ["fluid.prefs.builder", "fluid.prefs.auxSchema.starter"]
});
var prefsBuilder = fluid.videoPlayer.myBuilder();

Example: Using the builder to add Video Player panels to the 'starter set'

var prefsBuilder = fluid.prefs.builder({
    gradeNames: ["fluid.prefs.auxSchema.starter"],
    auxiliarySchema: fluid.videoPlayer.auxSchema
});

fluid.defaults("fluid.videoPlayer.myBuilder", {
    gradeNames: ["fluid.prefs.builder", "fluid.prefs.auxSchema.starter", "autoInit"],
    schema: fluid.videoPlayer.primarySchema,
    auxiliarySchema: fluid.videoPlayer.auxSchema
});
var prefsBuilder = fluid.videoPlayer.myBuilder();

Example: Using the builder for a set of custom preferences and panels

var prefsBuilder = fluid.prefs.builder({
    auxiliarySchema: fluid.myApplication.auxSchema
});

fluid.defaults("fluid.myApplication.myBuilder", {
    gradeNames: ["fluid.prefs.builder", "autoInit"],
    schema: fluid.myApplication.primarySchema,
    auxiliarySchema: fluid.myApplication.auxSchema
});
var prefsBuilder = fluid.videoPlayer.myBuilder();

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