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.
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 Plugin 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, the Widget 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 Infusion 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 definition is the declaration of the component defaults. 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, providing links to more documentation about the various concepts and functionality as we go.
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
}
}
});
Examining the Component Defaults in Detail
Infusion components are created by passing the component name and component configuration options to fluid.defaults(), as seen on line #1:
fluid.defaults("demo.fiveStar", {...});
All components must define one or more grades using the gradeNames option, as see on line #2:
gradeNames: ["fluid.viewComponent", "autoInit"],
The demo.fiveStar component is defined to be a view component, one of the grades provided by the Infusion Framework. It also uses the "autoInit" keyword, which instructs the Framework to automatically define the creator function for the component (the creator function is how the component will be instantiated).
Overview
Content Tools