...
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 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/",
siteThemeClassName: "foofer-doodle-theme"
});
|
|
| Column |
|---|
Page Enhancer Only (no schema)| Code Block |
|---|
|
fluid.pageEnhancer({
gradeNames: ["fluid.uiOptions.defaultSettings"],
pathToTocTemplate: "my/sites/",
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/",
siteThemeClassName: "foofer-doodle-theme"
});
|
|
| Column |
|---|
Page Enhancer Only (with schema)| Code Block |
|---|
|
fluid.pageEnhancer({
schema: "my/sites/lib/infusion/defaultSchema.json",
pathToTocTemplate: "my/sites/",
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 (no schema)
| 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?
}
// any other configuration as necessary
},
doodle: {
funcName: "my.integration.doodlePanel",
options: {
template: "myDoodlePanel.html"
// if necessary
}
// any other configuration as necessary
}
}
});
fluid.uiOptions(container, {
gradeNames: ["fluid.uiOptions.defaultPanels", "my.extra.panels"],
pathToTemplates: "my/sites/lib/infusion/templates/",
pathToTocTemplate: "my/sites/",
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/",
siteThemeClassName: "foofer-doodle-theme"
});
|
|
| Column |
|---|
Page Enhancer| Code Block |
|---|
|
/**
* Define a grade for extra enactors
* and their default settings
*/
fluid.defaults("my.extra.settings", {
defaultSiteSettings: {
foofer: 7,
doodle: true
},
components: {
foofer: {
funcName: "my.integration.fooferEnactor",
// any other configuration as necessary
},
doodle: {
funcName: "my.integration.doodleEnactor",
// any other configuration as necessary
}
}
});
fluid.pageEnhancer({
gradeNames: ["fluid.uiOptions.defaultSettings", "my.extra.settings"],
pathToTocTemplate: "my/sites/",
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/",
siteThemeClassName: "foofer-doodle-theme"
});
|
|
|
Adding panels to the set of included panels (with schema)
| Section |
|---|
| Column |
|---|
| UIO| Code Block |
|---|
|
// The grade definition would be the same as above
fluid.uiOptions(container, {
// XXX: Would custom schema include 'default' panels?
schema: "my/sites/mySchema.json"
pathToTemplates: "my/sites/lib/infusion/templates/",
pathToTocTemplate: "my/sites/",
siteThemeClassName: "foofer-doodle-theme"
});
|
|
| Column |
|---|
Page Enhancer| Code Block |
|---|
|
// The grade definition would be the same as above
fluid.pageEnhancer({
// XXX: Would custom schema include 'default' panels?
schema: "my/sites/mySchema.json"
pathToTocTemplate: "my/sites/",
siteThemeClassName: "foofer-doodle-theme"
});
|
|
|
Using a subset of the included panels (no schema)
| Section |
|---|
| Column |
|---|
| UIO| Code Block |
|---|
|
/**
* Define a grade including only desired panels
*/
fluid.defaults("my.panels", {
components: {
textSizer: {
type: "fluid.uiOptions.textSizer",
// any other configuration as necessary
},
lineSpacer: {
type: "fluid.uiOptions.lineSpacer",
// any other configuration as necessary
}
}
});
fluid.uiOptions(container, {
gradeNames: ["my.panels"],
pathToTemplates: "my/sites/lib/infusion/templates/",
pathToTocTemplate: "my/sites/",
siteThemeClassName: "foofer-doodle-theme"
});
|
|
| Column |
|---|
Page Enhancer| Code Block |
|---|
|
/**
* Define a grade including only desired enactors
*/
fluid.defaults("my.settings", {
textSize: {
type: "fluid.uiOptions.enactor.textSizer",
// any other configuration as necessary
},
textFont: {
type: "fluid.uiOptions.enactor.classSwapper",
// any other configuration as necessary
}
}
});
fluid.pageEnhancer({
gradeNames: ["my.settings"],
pathToTocTemplate: "my/sites/",
siteThemeClassName: "foofer-doodle-theme"
});
|
|
|
Using a subset of the included panels (with schema)
| Section |
|---|
| Column |
|---|
| UIO| Code Block |
|---|
|
// The grade definition would be the same as above
fluid.uiOptions(container, {
schema: "my/sites/mySchema.json"
pathToTemplates: "my/sites/lib/infusion/templates/",
pathToTocTemplate: "my/sites/",
siteThemeClassName: "foofer-doodle-theme"
});
|
|
| Column |
|---|
Page Enhancer| Code Block |
|---|
|
// The grade definition would be the same as above
fluid.pageEnhancer({
schema: "my/sites/mySchema.json"
pathToTocTemplate: "my/sites/",
siteThemeClassName: "foofer-doodle-theme"
});
|
|
|
Use Case: 4th Parties (users of customized UIOs)