...
...
This
...
This page presents a proposal for a new API for User Interface Options. It lays out what we would like to expect of an integrator.
Use Case: Out-of-the-box, default settings, no customization (2nd parties)
Guiding Principles
Setting UIO up out-of-the-box – using default panels, with no customizations – should be simple:
...
Guiding Principles
- Any options that might be set should be top-level.
- Option names should make sense.
- Integrators should not have to create both a page enhancer and the fat panel individually; If they want the fat panel, the page enhancer would be assumed and should be instantiated on the page automatically.
- Integrators may want should be able to create a page enhancer without UIO (in the case of a full-page UIO available elsewhere, through a link).
The options shown here represent the minimal options that an integrator would have to provide. Other options will also be available.
Basic API without schema support
| Section |
|---|
| Column |
|---|
UIO + Page Enhancer| Code Block |
|---|
|
fluid.uiOptions(container, {
gradeNames: [<gradenames of desired panels>],
pathToTemplates: "my/sites/lib/infusion/templates/",
pathToTocTemplate: "my/sites/",
siteThemeClassName: "foofer-doodle-theme"
});
|
|
| Column |
|---|
Page Enhancer Only| Code Block |
|---|
|
fluid.pageEnhancer({
gradeNames: [<grade names for desired settings>],
pathToTocTemplate: "my/sites/",
siteThemeClassName: "foofer-doodle-theme"
});
|
|
|
If no grade names are specified, the default state of the components would be no panels, no settings. It's unlikely anyone would ever use it without grade names.
Basic API with schema support
| Section |
|---|
| Column |
|---|
UIO + Page Enhancer| Code Block |
|---|
|
fluid.uiOptions(container, {
schema: <path to schema, including filename>,
pathToTemplates: "my/sites/lib/infusion/templates/",
pathToTocTemplate: "my/sites/",
siteThemeClassName: "foofer-doodle-theme"
});
|
|
| Column |
|---|
Page Enhancer Only| Code Block |
|---|
|
{code:javascript}
fluid.pageEnhancer({
schema: <path to schema, including filename>,
pathToTocTemplate: "my/sites/",
siteThemeClassName: "foofer-doodle-theme"
});
|
|
|
Use Case: 2nd Parties (Infusion-provided panels and settings)
Add the provided panels and settings using the default grades.
| Section |
|---|
| Column |
|---|
UIO + Page Enhancer (no schema)| Code Block |
|---|
|
fluid.uiOptions(container, {
gradeNames: ["fluid.uiOptions.defaultPanels"],
pathToTemplates: "my/sites/lib/infusion/templates/",
pathToTocTemplate: "my/sites/",
// TocTemplate filename would be in a separate option
siteThemeClassName: "foofer-doodle-theme"
});
|
|
| Column |
|---|
Page Enhancer Only (no schema)| Code Block |
|---|
|
fluid.pageEnhancer({
gradeNames: ["fluid.uiOptions.defaultSettings"],
pathToTocTemplate: "my/sites/",
// TocTemplate filename would be in a separate option
siteThemeClassName: "foofer-doodle-theme"
});
|
|
|
| Section |
|---|
| Column |
|---|
UIO + Page Enhancer (with schema)| Code Block |
|---|
|
fluid.uiOptions(container, {
schema: "my/sites/lib/infusion/defaultSchema.json",
pathToTemplates: "my/sites/lib/infusion/templates/",
pathToTocTemplate: "my/sites/",
// TocTemplate filename would be in a separate option
siteThemeClassName: "foofer-doodle-theme"
});
|
|
| Column |
|---|
Page Enhancer Only (with schema)| Code Block |
|---|
|
fluid.pageEnhancer({
schema: "my/sites/lib/infusion/defaultSchema.json",
pathToTocTemplate: "my/sites/",
// TocTemplate filename would be in a separate option
siteThemeClassName: "foofer-doodle-theme"
});
|
|
|
Use Case: 3rd Parties (adding or removing panels)
3rd parties will have to define their own grades.
Adding panels to the set of included panels
| Section |
|---|
| Column |
|---|
| UIO| Code Block |
|---|
|
/**
* Define a grade for extra panels
* and their default settings
*/
fluid.defaults("my.extra.panels", {
defaultSiteSettings: {
foofer: 7,
doodle: true
},
components: {
foofer: {
funcName: "my.integration.fooferPanel",
options: {
// if necessary:
template: "myFooferPanel.html"
// why can't panels load their own templates?
}
},
doodle: {
funcName: "my.integration.doodlePanel",
options: {
template: "myDoodlePanel.html"
// if necessary
}
}
}
});
fluid.uiOptions(container, {
gradeNames: ["fluid.uiOptions.defaultPanels", "my.extra.panels"],
pathToTemplates: "my/sites/lib/infusion/templates/",
pathToTocTemplate: "my/sites/",
// TocTemplate filename would be in a separate option
siteThemeClassName: "foofer-doodle-theme"
});
|
Alternatively, the extra grade could be added using demands: | Code Block |
|---|
|
fluid.demands("fluid.uiOptions", ["my.integrations"], {
gradeNames: ["my.extra.panels"],
});
fluid.uiOptions(container, {
gradeNames: ["fluid.uiOptions.defaultPanels"],
pathToTemplates: "my/sites/lib/infusion/templates/",
pathToTocTemplate: "my/sites/",
// TocTemplate filename would be in a separate option
siteThemeClassName: "foofer-doodle-theme"
});
|
|
| Column |
|---|
Page Enhancer| Code Block |
|---|
|
/**
* Define a grade for extra enactors
* and their default settings
*/
// Define a grade for the extra
fluid.defaults("my.extra.settings", {
defaultSiteSettings: {
foofer: 7,
doodle: true
},
components: {
foofer: {
funcName: "my.integration.fooferEnactor",
options: {
// if necessary
}
},
doodle: {
funcName: "my.integration.doodleEnactor",
options: {
// if necessary
}
}
}
});
fluid.pageEnhancer({
gradeNames: ["fluid.uiOptions.defaultSettings", "my.extra.settings"],
pathToTocTemplate: "my/sites/",
// TocTemplate filename would be in a separate option
siteThemeClassName: "foofer-doodle-theme"
});
|
Alternatively, the extra grade could be added using demands: | Code Block |
|---|
|
fluid.demands("fluid.pageEnhancer", ["my.integrations"], {
gradeNames: ["my.extra.settings"],
});
fluid.pageEnhancer({
gradeNames: ["fluid.uiOptions.defaultSettings"],
pathToTocTemplate: "my/sites/",
// TocTemplate filename would be in a separate option
siteThemeClassName: "foofer-doodle-theme"
});
|
|
|
Using a subset of defaults
Proposed API
Until schema support is implemented, integrators need a way to say "just give me the settings I saw in the demo."
...