| Column |
|---|
| Code Block |
|---|
| fluid.demands("fluid.uiOptions", ["my.integrations"], {
gradeNames: ["my.extra.settings"],
});
fluid.uiOptionsPlusPageEnhancer(container, {
|
|
}gradeNames: ["fluid.uiOptions.starterSettings"],
pathToTemplates: "my/sites/lib/infusion/templates/",
|
|
doodle:{ pathToTocTemplate: "my/sites/",
|
|
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"
});
{code}
Alternatively, the extra grade could be added using demands:
{code:javascript}
fluid.demands("fluid.pageEnhancer", ["my.integrations"], {
gradeNames: ["my.extra.settings"],
});
fluid.pageEnhancer({
gradeNames: ["fluid.uiOptions.defaultSettings"],
pathToTocTemplate: "my/sites/",
siteThemeClassName: "foofer-doodle-theme"
});
{code}
{column}
{section}
h3. Adding panels to the set of included panels (with schema)
{section}
{column:width=50%}
h4. UIO
{code:javascript}
// 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"
});
{code}
{column}
{column}
h4. Page Enhancer
{code:javascript}
// 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"
});
{code}
{column}
{section}
h3. Using a subset of the included panels
{section}
{column:width=50%}
h4. UIO
{code:javascript}
/**
* 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"
});
{code}
{column}
{column}
h4. Page Enhancer
{code:javascript}
/**
* Define a grade including only desired enactors
*/
fluid.defaults("my.extra.settings", {
defaultSiteSettings: {
foofer: 7,
doodle: true
},
components: {
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"
});
{code}
{column}
{section}
{html}
<!--
{html}
----
h3. Proposed API
Until [schema|Schema for UIO preferences] support is implemented, integrators need a way to say "just give me the settings I saw in the demo."
h4. To create UIO and a page enhancer:
{code:javascript}
fluid.uiOptions(container, {
gradeNames: [<gradenames of desired panels>],
pathToTemplates: "my/sites/lib/infusion/templates/",
pathToTocTemplate: "my/sites/", // filename would be in a separate option
siteThemeClassName: "foofer-doodle-theme"
});
{code}
{section}
{column:width=50%}
Access to the default panels would be made easy through a "flavour" of uiOptions (similar to flavours of Reorderer):
{code:javascript}
fluid.uiOptionsWithDefaultPanels(container, {
pathToTemplates: "my/sites/lib/infusion/templates/",
pathToTocTemplate: "my/sites/",
siteThemeClassName: "foofer-doodle-theme"
});
{code}
{column}
{column}
which would be equivalent to
{code:javascript}
fluid.uiOptions(container, {
gradeNames: ["fluid.uiOptions.defaultPanels"],
pathToTemplates: "my/sites/lib/infusion/templates/",
pathToTocTemplate: "my/sites/",
siteThemeClassName: "foofer-doodle-theme"
});
{code}
{column}
{section}
h4. To create only a page enhancer:
{code:javascript}
fluid.pageEnhancer({
gradeNames: [<grade names for desired settings>],
pathToTocTemplate: "my/sites/", // filename would be in a separate option
siteThemeClassName: "foofer-doodle-theme"
});
{code}
{section}
{column:width=50%}
Access to the default setting would be made easy through a "flavour" of enhancer (similar to flavours of Reorderer):
{code:javascript}
fluid.pageEnhancerWithDefaultSetting({
pathToTocTemplate: "my/sites/", // filename would be in a separate option
siteThemeClassName: "foofer-doodle-theme"
});
{code}
{column}
{column}
which would be equivalent to
{code:javascript}
fluid.pageEnhancer({
gradeNames: ["fluid.uiEnhancer.defaultSettings"],
pathToTocTemplate: "my/sites/", // filename would be in a separate option
siteThemeClassName: "foofer-doodle-theme"
});
{code}
{column}
{section}
h4. Once [schemas|Schema for UIO preferences] are being used
To create UIO and a page enhancer using out-of-the-box schema for default panels:
{code:javascript}
fluid.uiOptions(container, {
pathToSchema: "my/sites/lib/infusion/defaultSchema.json",
pathToTemplates: "my/sites/lib/infusion/templates/",
pathToTocTemplate: "my/sites/", // filename would be in a separate option
siteThemeClassName: "foofer-doodle-theme"
});
{code}
To create only a page enhancer using out-of-the-box schema for default settings:
{code:javascript}
fluid.pageEnhancer({
pathToSchema: "my/sites/lib/infusion/defaultSchema.json",
pathToTocTemplate: "my/sites/", // filename should be in a separate option
siteThemeClassName: "foofer-doodle-theme"
});
{code}
h2. Use Case: Add/remove settings, configure a fresh UIO (3rd parties)
h3. Guiding Principles
Adding panels requires creating components, etc. and therefore requires knowledge of the Framework. For this use case, we expect that integrators understand components, options structures, demands, etc.
* Adding panels should be done through grades, either at invocation time or by adding a grade through a demands block.
* Templates for new panels should be able to be located anywhere i.e. not required to be added to wherever the default templates are.
Consider the use case of the WordPress FSS Theme (which adds UIO to a site) and the VideoPlayer WordPress plugin (which wants to add the media panel to UIO). We want independent modules, plugins, portlets, etc. to be able to add panels to UIO without UIO knowing about it, without other modules, plugins, portlets, etc. knowing about it, without multiple plugins conflicting.
h3. Proposed API
h4. Add panels to UIO
{code:javascript}
// Define a grade with the extra panels and their default settings
fluid.defaults("my.extra.panels", {
defaultSiteSettings: {
foofer: 7,
doodle: true
},
components: {
foofer: {
funcName: "my.integration.fooferPanel",
options: {
template: "myFooferPanel.html" // why can't panels load their own templates?
// if necessary
}
},
doodle: {
funcName: "my.integration.doodlePanel",
options: {
template: "myDoodlePanel.html"
// if necessary
}
}
}
});
{code}
To add the grade to UIO, use one of the following:
{section}
{column:width=50%}
{code:javascript}
// Add the grade to UIOptions as part of creation
fluid.uiOptions(container, {
gradeNames: ["fluid.uiOptions.defaultPanels", "my.extra.panels"],
pathToTemplates: "my/sites/lib/infusion/templates/",
pathToTocTemplate: "my/sites/", // filename would be in a separate option
siteThemeClassName: "foofer-doodle-theme"
});
{code}
{column}
{column}
{code:javascript}
// Add the grade to UIOptions through demands
fluid.demands("fluid.uiOptions", "my.integration", {
gradeNames: ["my.extra.panels"]
});
// create UIO
fluid.uiOptions(container, {
gradeNames: ["fluid.uiOptions.defaultPanels"],
pathToTemplates: "my/sites/lib/infusion/templates/",
pathToTocTemplate: "my/sites/", // filename would be in a separate option
siteThemeClassName: "foofer-doodle-theme"
});
{code}
{column}
{section}
h4. Add settings to UIE
{code:javascript}
// Define a grade for the extra enactors and their default settings
fluid.defaults("my.extra.settings", {
defaultSiteSettings: {
foofer: 7,
doodle: true
},
components: {
foofer: {
funcName: "my.integration.fooferEnactor",
options: {
siteThemeClassName: "foofer-doodle-theme"
});
|
|
|