Page Comparison

...

Once you've run the builder, you can access the enhancer through the namespace you specified in your auxiliary schema

var enhancer = my.prefs.uie(".prefs-editor-containerbody");

The uie method will automatically instantiate both the settings store and the page enhancer, so you only need to make the one call.

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

...

Directly

...

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

...

Through a custom grade

...

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'

...

Directly

...

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

...

Through a custom grade

...

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

...

Directly

...

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

...

Through a custom grade

...

The settings store will automatically connect to the saved settings, and the enhancer will automatically use your enactors to adjust the page according to the settings.

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

...