Versions Compared

Old Version 44

changes.mady.by.user Anastasia Cheetham

Saved on

compared with

New Version Current

changes.mady.by.user Anastasia Cheetham

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3
Warning

This page is NOT documentation of the UI Options API. It is a working document. The UI Options API is currently undergoing revision, and there is no API documentation as yet.

 

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.

...

Section
Column

UIO Only

Code Block
javascript
javascript

fluid.uiOptions(container, {
    gradeNames: [<gradenames of desired panels>,
                 <gradenames of schema for settings>],
    pathToTemplates: "my/sites/lib/infusion/templates/"
});
Column

Page Enhancer Only

Code Block
javascript
javascript

fluid.pageEnhancer({
    gradeNames: [<grade names of desired enactors>,
                 <gradenames of schema for settings>],
    pathToTocTemplate: "my/sites/",
    siteThemeClassName: "foofer-doodle-theme"
});
Section
Column
width25%
 
Column

UIO + Page Enhancer

Code Block
javascript
javascript

fluid.uiOptionsPlusPageEnhancer(container, {
    gradeNames: [<gradenames of desired panels>,
                 <grade names of desired enactors>,
                 <gradenames of schema for settings>],
    pathToTemplates: "my/sites/lib/infusion/templates/",
    pathToTocTemplate: "my/sites/",
    siteThemeClassName: "foofer-doodle-theme"
});
Column
width25%
 

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.

...

Section
Column

UIO Only

Code Block
javascript
javascript

fluid.uiOptions(container, {
    gradeNames: ["fluid.uiOptions.starterSettingsPanels",
                 "fluid.uiOptions.starterSettingsSchema"starterSettings"],
    pathToTemplates: "my/sites/lib/infusion/templates/"
});

NOTE: The starterSettings grade combines the grades for the starter panels and the starter schema.

Column

Page Enhancer Only

Code Block
javascript
javascript

fluid.pageEnhancer({
    gradeNames: ["fluid.uiEnhancer.starterEnactors",
                 "fluid.uiOptions.starterSettingsSchema"starterSettings],
    pathToTocTemplate: "my/sites/",
    siteThemeClassName: "foofer-doodle-theme"
});

NOTE: The starterSettings grade combines the grades for the starter enactors and the starter schema.

Section
Column
width25%
 
Column

UIO + Page Enhancer

Code Block
javascript
javascript

fluid.uiOptionsPlusPageEnhancer(container, {
    gradeNames: ["fluid.uiOptions.starterSettingsPanels",
                 "fluid.uiEnhancer.starterEnactors",
                 "fluid.uiOptions.starterSettingsSchema"starterSettings"],
    pathToTemplates: "my/sites/lib/infusion/templates/",
    pathToTocTemplate: "my/sites/",
    siteThemeClassName: "foofer-doodle-theme"
});

NOTE: The starterSettings grade combines the grades for the starter enactors, panels and schema.

QUESTION: What should we name this/these combined grades?

Column
width25%
 

Use Case: 3rd Parties Adding Panels To The Starter Set

...

Note: All further examples will only use the "UIO + Page Enhancer" version: fluid.uiOptionsPlusPageEnhancer(). The pattern holds.

Section
Column
width20%
 
Column
Code Block
javascript
javascript

/**
 * Define a grade for the schema for your settings
 */
fluid.defaults("my.extra.settingsSchema", {
    schema: {...}
});
/**
 * 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
        }
    }
});
/**
 * Define a grade for extra enactors
 */
fluid.defaults("my.extra.enactors", {
    components: {
        foofer: {
            funcName: "my.integration.fooferEnactor",
            // any other configuration as necessary
        },
        doodle: {
            funcName: "my.integration.doodleEnactor",
            // any other configuration as necessary
        }
    }
});
/**
 * Add theA grade that combines my enactors, panels and schema.
 */
fluid.uiOptionsPlusPageEnhancer(containerdefaults("my.extra.settings", {
    gradeNames: ["fluidmy.uiEnhancerextra.starterEnactorsenactors",
                 "fluidmy.uiOptionsextra.starterSettingsPanelspanels",
                 "fluidmy.uiOptionsextra.starterSettingsSchemasettingsSchema",]
});
/**
 * Add the enactors, panels and schema
       "my.extra.enactors",
*/
fluid.uiOptionsPlusPageEnhancer(container, {
                "my.extra.panelsgradeNames: ["fluid.uiOptions.starterSettings",
                 "my.extra.settingsSchemasettings"],
    pathToTemplates: "my/sites/lib/infusion/templates/",
    pathToTocTemplate: "my/sites/",
    siteThemeClassName: "foofer-doodle-theme"
});
Column
width20%
 

Alternatively, the extra grades could be added using demands:

Section
Column
width20%
 
Column
Code Block
javascript
javascript

fluid.demands("fluid.uiOptions", ["my.integrations"], {
    gradeNames: ["my.extra.enactors", "my.extra.panels", "my.extra.settingsSchemasettings"],
});
fluid.uiOptionsPlusPageEnhancer(container, {
    gradeNames: ["fluid.uiEnhancer.starterEnactors",
                 "fluid.uiOptions.starterSettingsPanels",
                 "fluid.uiOptions.starterSettingsSchema"starterSettings"],
    pathToTemplates: "my/sites/lib/infusion/templates/",
    pathToTocTemplate: "my/sites/",
    siteThemeClassName: "foofer-doodle-theme"
});
Column
width20%
 

Use Case: 3rd Parties Wanting A Subset Of The Starter Set

...

The last two of these methods will be shown here, excluding the colour-and-contrast setting and the layout setting.

Section
Column
width50%
h3:

Empty Subcomponents

Code Block
javascript
javascript

fluid.uiOptionsPlusPageEnhancer(container, {
    gradeNames: ["fluid.uiOptions.starterSettingsPanelsstarterSettings"],

    components: {
        // Override the settings panels
        contrast: {
            type: "fluid.uiEnhancer.starterEnactors",emptySubcomponent"
        },
        layoutControls: {
            type: "fluid.uiOptions.starterSettingsSchema"]emptySubcomponent"
        },

        // add the 'emptySubcomponent' stuff hereOverride the enactors
        theme: {
            type: "fluid.emptySubcomponent"
        },
        tableOfContentsEnactor: {
            type: "fluid.emptySubcomponent"
        }
    }

    pathToTemplates: "my/sites/lib/infusion/templates/",
    pathToTocTemplate: "my/sites/",
    siteThemeClassName: "foofer-doodle-theme"
});
Column
width50%
h3:

Individual Grades

Code Block
javascript
javascript

fluid.uiOptionsPlusPageEnhancer(containerdefaults("my.panelSet", {
    gradeNames: [
        // Specify each of the four desired panels directly
        "fluid.uiOptions.textSizer",
        "fluid.uiOptions.lineSpacer",
        "fluid.uiOptions.textFont",
        "fluid.uiOptions.linksControls",
        
        // Specify each of the four desired enactors directly
        "fluid.uiEnhancer.textSizer",
        "fluid.uiEnhancer.lineSpacer",
        "fluid.uiEnhancer.textFont",
        "fluid.uiEnhancer.linksControls",
        
        // Use the full schema
        "fluid.uiOptions.starterSettingsSchema"
    ]
});
fluid.uiOptionsPlusPageEnhancer(container, {
    gradeNames: ["my.panelSet"],
    pathToTemplates: "my/sites/lib/infusion/templates/",
    pathToTocTemplate: "my/sites/",
    siteThemeClassName: "foofer-doodle-theme"
});

...