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.

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

DRAFT, still incomplete

Overview

Composite panels allow you to combine several small panels – subpanels – into one larger panel. Subpanels are defined normally in an auxiliary schema; Composite panels define a list of subpanels that should be included in the composite panel.

Grades

Composite panels must be defined with the fluid.prefs.compositePanel grade, as shown on line 2 in the following code block:

fluid.defaults("my.panels.composite", {
    gradeNames: ["fluid.prefs.compositePanel", "autoInit"],
    ...
});

It is expected that composite panels will be quite simple in most cases, functioning strictly as a container for subpanels. It may contain some labels that All they need is any selectors and prototrees needed for a label, or heading, or anything general to the entire composite panel.

Subpanels are defined with the regular fluid.prefs.panel grade.

Composite Panel Definition

A composite panel is defined in the auxiliary schema, in a special block called groups, which has the following general format:

groups: {
    <composite panel name>: {
        "container": <selector of element in preferences editor where panel should be rendered>,
        "template": <path and filename of composite panel template>,
        "message": <path and filename of composite panel message file>,
        "type": <grade name of composite panel>,
        "panels": [<list of subpanels to include in this composite panel>]
    },
    <composite panel name>: {...},
    ...
}

In the code block above, the panels list on line 7 is an array of string subpanel names used as keys in the auxiliary schema to define the subpanels.

Templates

A composite panel and its subpanels each have their own HTML template. The composite panel template must contain elements that will serve as a container for the subpanels.

Auxiliary Schema Declarations

The subpanel declarations in the auxiliary schema will reference the selectors for these elements.

Message Bundles

A composite panel and its subpanels can each have their own JSON message file.

Examples

Composite panel HTML template:

<div class="my-composite-panel">
    <div class="subpanel-1-container"></div>
    <div class="subpanel-1-container"></div>
</div>

Auxiliary schema section defining panels:

preference1: {...},
preference2: {...},
groups: {
    composite1: {
        "container": ".my-composite-1",
        "template": "%prefix/composite1.html",
        "message": "%prefix/composite1.json",
        "type": "fluid.prefs.panel.composite1",
        "panels": ["preference1", "preference2"]
    }
}

 

 

  • No labels