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.
Connecting the Parts of a Preferences Editor
This page describes how to work with the infusion Preferences Framework using schemas and the builder. It does NOT describe using the alternative technique, grades.
- Tutorial - Creating a Preferences Editor Using the Preferences Framework
- Tutorial - Creating a New Adjuster UI
- Primary Schema for Preferences Framework
- Auxiliary Schema for Preferences Framework
- Understanding Infusion Components
- Component Grades
- IoC - Inversion of Control
- Renderer
- Infusion Framework Best Practices
Creating a Preferences Editor using the Infusion Preferences Framework involves various pieces: schemas, Infusion components, templates, etc. This page describes what you need to do to connect all the parts together.
Primary Schema
The Primary Schema defines a "name" for each preference. This is the name that will be used to store the preference in the settingsStore, so we recommend that your preference names be namespaced to your application, to avoid possible conflicts. The name is also used to tie together all the various bits:
- the auxiliary store specifies this name as the
type
for a preference block, associating the panel and the enactor with the preference; - the panel and enactor each use the name in the
preferenceMap
, which tells the builder how to map the panel or enactor's the values in the primary schema into the panel or enactor.
Example:
{ "type": "object", "properties": { "fluid.prefs.textSize": { <<<=== This is the name of the preference "type": "number", "default": 1, "min": 1, "max": 2, "divisibleBy": 0.1 } } }
Auxiliary Schema
The Auxiliary Schema defines all the information needed to build the preferences editor interface, including
- what component to use to render the preference panels,
- where to find HTML templates and string bundles,
- what component to use to act on preference settings.
The Auxiliary Schema links to the preferences specified in the Primary Schema using the preference name, which is used as the type
in a preferences block:
{ .... "textSize": { "type": "fluid.prefs.textSize", <<<=== This type must match the name specified in the primary schema "panel": {...}, "enactor": {...} } }
The Auxiliary Schema also specifies which components should be used for the panel and enactor for a given preference, through the type
properties:
{ .... "textSize": { "type": "fluid.prefs.textSize", "panel": { "type": "fluid.prefs.panel.textSize", <<<=== This type is the name of the panel component ... }, "enactor": { "type": "fluid.prefs.enactors.textSize", <<<=== This type is the name of the enactor component ... } } }
Panel Component
Each panel component must include a preference map option in its defaults, called preferenceMap
. The Preferences Framework uses the preference map to populate some of the panel's defaults using information in the Primary Schema.
Example:
fluid.defaults("fluid.prefs.panel.textSize", { gradeNames: ["fluid.prefs.panel", "autoInit"], preferenceMap: { "fluid.prefs.textSize": { <<<=== This property name must match the name specified in the primary schema "model.value": "default", "range.min": "minimum", "range.max": "maximum" } }, ...
Enactor Component
Each enactor component must include a preference map option in its defaults, called preferenceMap
. As with the panels, the Preferences Framework uses the preference map to populate some of the enactor's defaults using information in the Primary Schema. The structure of the enactor's preference map is the same as that for the panel.
Example:
fluid.defaults("fluid.prefs.enactors.textSize", { gradeNames: ["fluid.viewComponent", "fluid.prefs.enactors", "autoInit"], preferenceMap: { "fluid.prefs.textSize": { <<<=== This property name must match the name specified in the primary schema "model.value": "default" } }, ...