Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migration of unmigrated content due to installation of a new plugin
{div:class=} {
Wiki Markup
Div
classtutorial-linear-nav

Span

:

class

=

tutorial-nav-left

}*

Previous:

* [

Renderer

Components

]{span} {span:class=

Span
classtutorial-nav-centre

}[

Up

to

overview|Tutorial - Getting started with Infusion]{span} {span:class=

overview
Span
classtutorial-nav-right

}*

Next:

* [

Contexts

and

Demands]{span} {div}
Wiki Markup
{div:class=floatRight}
{panel:title= On This Page| borderStyle=solid| borderColor=#ccc| bgColor=#fff}
{toc:minLevel=3|maxLevel=5}
{panel}
{div}
Wiki Markup
{div:class=floatRight} {panel:title= See Also| borderStyle=solid| borderColor=#ccc| bgColor=#fff} [Inversion of Control (IoC)] [Subcomponent Declaration] [Controlling The Timing of Subcomponent Creation] {panel} {div}

Demands

Div
classfloatRight
Panel
borderColor#ccc
bgColor#fff
titleOn This Page
borderStylesolid
Table of Contents
minLevel3
maxLevel5
Div
classfloatRight
Panel
borderColor#ccc
bgColor#fff
titleSee Also
borderStylesolid

Inversion of Control (IoC)
Subcomponent Declaration
Controlling The Timing of Subcomponent Creation

If you've done any object-oriented programming, you're probably familiar with the idea of packaging up functionality into small, reusable, modular bundles. The Infusion Framework provides many supports for designing your application as a collection of components that work together. Components can be combined with parent-child relationships, creating a component tree.

...

Code Block
javascript
javascript
fluid.defaults("fluid.fatPanelUIOptions", {
    gradeNames: ["fluid.viewComponent", "autoInit"],            
    components: {
        uiOptions: {
            type: "fluid.uiOptions",
            container: ".flc-slidingPanel-panel"
        },        
        slidingPanel: {
            type: "fluid.slidingPanel",
            priority: "last",
            container: "{fatPanelUIOptions}.container"
        },
        preview: {
            type: "fluid.uiOptions.livePreview"
        }
    }
});       

fluid.defaults("fluid.fullNoPreviewUIOptions", {
    gradeNames: ["fluid.viewComponent", "autoInit"],            
    components: {
        uiOptions: {
            type: "fluid.uiOptions",
            container: "{fullNoPreviewUIOptions}.container"
        }                     
    }
});       

fluid.defaults("fluid.fullPreviewUIOptions", {
    gradeNames: ["fluid.viewComponent", "autoInit"],            
    components: {
        uiOptions: {
            type: "fluid.uiOptions",
            container: "{fullPreviewUIOptions}.container"
        },
        preview: {
            type: "fluid.uiOptions.preview",
            createOnEvent: "onReady"
        }
    }
});       

fluid.defaults("fluid.uiOptions", {
    gradeNames: ["fluid.viewComponent", "autoInit"],
    components: {
        textControls: {
            type: "fluid.uiOptions.textControls",
            container: "{uiOptions}.dom.textControls",
            createOnEvent: "onUIOptionsTemplateReady",
            options: {
                textSize: "{uiOptions}.options.textSize",
                lineSpacing: "{uiOptions}.options.lineSpacing",
                model: "{uiOptions}.model",
                applier: "{uiOptions}.applier"
            }
        },
        layoutControls: {
            type: "fluid.uiOptions.layoutControls",
            container: "{uiOptions}.dom.layoutControls",
            createOnEvent: "onUIOptionsTemplateReady",
            options: {
                model: "{uiOptions}.model",
                applier: "{uiOptions}.applier"
            }
        },
        linksControls: {
            type: "fluid.uiOptions.linksControls",
            container: "{uiOptions}.dom.linksControls",
            createOnEvent: "onUIOptionsTemplateReady",
            options: {
                model: "{uiOptions}.model",
                applier: "{uiOptions}.applier"
            }
        }
    }
});
{div:class=} {
Wiki Markup
Div
classtutorial-linear-nav

Span

:

class

=

tutorial-nav-left

}*

Previous:

* [

Renderer

Components

]{span} {span:class=

Span
classtutorial-nav-centre

}[

Up

to

overview|Tutorial - Getting started with Infusion]{span} {span:class=

overview
Span
classtutorial-nav-right

}*

Next:

* [

Contexts

and

Demands

]{span} {div}