Page Comparison

...

In cases where you are adding a full-page editor to your site, you likely want the user's settings to be applied to every other page on your site as well. On these pages, you don't want to instantiate the preferences editor, but you do need to instantiate the page enhancer and the settings store; without these, the preferences will have no effect.

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.Adding the settings store and enhancer requires a two-step process:

1. Use the Builder to build the tools, then
2. Instantiate the tools built by the builder.

Build the Settings Store and Enhancer

Build the settings store and enhancer with a call to the Preferences Framework Builder (this call also builds a preferences editor, but you aren't required to instantiate it). The Builder can be used with either the auxiliarySchema property or with an auxiliary schema grade.

NOTE: Your auxiliary schema MUST specify a namespace. You'll need this namespace to access the components created by the builder.

...

vary myAuxiliarySchema = {
    gradeNamesnamespace: ["fluidmy.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({
    gradeNamesprimarySchema: ["fluid.prefs.auxSchema.starter"]myPrimarySchema,
    auxiliarySchemaauxiliaryScham: fluid.videoPlayer.auxSchemamyAuxiliarySchema
});

fluid.defaults("fluidmy.videoPlayer.myBuilderauxSchemaGrade", {
    gradeNames: ["fluid.prefs.builder", "fluid.prefs.auxSchema.starter", "autoInit"],
    schemaauxiliarySchema: fluid.videoPlayer.primarySchema,{
        auxiliarySchemanamespace: 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({"my.prefs",
        ....
    auxiliarySchema: fluid.myApplication.auxSchema}
});

fluid.defaults("fluid.myApplication.myBuilder", fluid.prefs.builder({
    gradeNames: ["fluid.prefs.builder", "autoInitmy.auxSchemaGrade"],

   schema: fluid.myApplication.primarySchema,
    auxiliarySchema: fluid.myApplication.auxSchemamyPrimarySchema
});
var prefsBuilder

Instantiate the Enhancer

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(

"body");

The uie method will automatically instantiate both the settings store and the page enhancer, so you only need to make the one call. 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

...