This article describes how to instantiate a preferences editor created using the Infusion Preferences Framework. This is part of the Tutorial - Creating a Preferences Editor Using the Preferences Framework.
The simplest way to instantiate the Preferences Editor defined by your schemas is using the convenience function
fluid.prefs.create(). This function uses the schemas you specify to build all the necessary components, including the Editor itself, the settings store and the enhancer and enactors. It instantiates and renders the Editor onto the page and returns the editor object.
The default layout for a Preferences Editor is a separated panel, typically rendered at the top of the page and hidden until a user interaction that slides it into view. The following examples show this use, using either the
auxiliarySchema property or an auxiliary schema grade:
The Preferences Framework also provides built-in configurations for two full-page modes: with or without a preview. To choose one of these configurations, add a second option, as shown in the example below:
In this example, the
preview.templateUrl options specifies the relative path and filename of an HTML template to use inside the preview iFrame.
You can also instantiate the Preferences Editor using a two-step process:
The single function call described in the previous section actually carries out these two steps for you, it just conveniently hides that fact from you. If you are going to be instantiating only the settings store and the page enhancer, then you must use this two-step process, so if you're planning to write a single script that can be shared on pages that do and don't have the preferences editor, you'll want to use this process.
Build the editor, settings store and enhancer with a call to the Preferences Framework Builder. As with the single function call described above, the Builder can be used with either the
auxiliarySchema property or with an auxiliary schema grade.
NOTE: If you're going to use the builder, your auxiliary schema MUST specify a namespace. You'll need this namespace to access the components created by the builder.
Once you've run the builder, you can access the preferences editor through the namespace you specified in your auxiliary schema: