Infusion Documentation

Infusion Documentation

Child pages
  • Tutorial - A Simple IoC Component

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 7 Next »

DRAFT

On This Page

See Also

Still need help?

Join the infusion-users mailing list and ask your questions there,
or hang out in our  IRC Channel.

This tutorial is based on the "Five-Star widget" code that is used as part of our Keyboard Accessibility Demo. It assumes that:

  • you are already familiar with HTML, Javascript and CSS,
  • you're familiar with Inversion of Control (IoC) in general,
  • you want to see how the Infusion Framework uses IoC in a component.

While the "Five-Star widget" is used in a demo of our Keyboard Accessibility jQuery plugin, it is, by itself, a fine example of an IoC component, and it's not necessary to know about the plugin to follow this tutorial.

Overview

The Five-Star Widget is a simple component that allows users to "rank" something. The widget displays 5 stars and responds to user selection, internally storing the selection. In our Keyboard Accessibility Plugin demo, it's used to rank images in an image viewer, but it could be incorporated into a movie database, restaurant review site, etc.

The code for the Five-Star Widget embodies one of the main goals of the Infusion Framework's Inversion of Control system: To reduce component creation to (ideally) configuration information only.

Component Defaults

The core of the component is the declaration of the component defaults. This is the main configuration of the component, where the bulk of the component definition exists. This is carried out by a call to fluid.defaults(). The definition is show in its entirety below. We'll walk through each part in turn.

fluid.defaults("demo.fiveStar", {
    gradeNames: ["fluid.viewComponent", "autoInit"],
    model: {
        rank: 1
    },
    listeners: {
        onCreate: [{
            "this": "{that}.stars",
            method: "mouseover",
            args: {
                expander: {
                    funcName: "demo.fiveStar.makeStarHandler",
                    args: ["{that}", "{that}.hoverStars"]
                }
            }  
        }, {
            "this": "{that}.container",
            method: "mouseout",
            args: "{that}.refreshView"
        }, {
            "this": "{that}.stars",
            method: "click",
            args: {
                expander: {
                    funcName: "demo.fiveStar.makeStarHandler",
                    args: ["{that}", "{that}.setRank"]
                }
            }  
        }, {
            funcName: "demo.fiveStar.setARIA",
            args: "{that}"
        }, {
            funcName: "demo.fiveStar.bindChangeListener",
            args: "{that}"
        }]
    },
    selectors: {
        stars: "[class^='star-']"
    },
    starImages: {
        blank: "../images/star-blank.gif",
        hover: "../images/star-orange.gif",
        select: "../images/star-green.gif"
    },
    members: {
        stars: "{that}.dom.stars"  
    },
    invokers: {
        setRank: {
            func: "{that}.applier.requestChange",
            args: ["rank", "{arguments}.0"]
        },
        renderStarState: {
            funcName: "demo.fiveStar.renderStarState",
            args: ["{that}.stars", "{arguments}.0", "{that}.model.rank", "{that}.options.starImages"]  
        },
        hoverStars: {
            func: "{that}.renderStarState"
        },
        refreshView: {
            func: "{that}.renderStarState",
            args: 0
        }
    }
});
  • No labels