This tutorial is based on the Five-Star Widget code that is used as part of our Keyboard Accessibility Plugin demo. It assumes that:
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.
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.
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.
Infusion components are created by passing the component name and component configuration options to fluid.defaults(), as seen on line #1:
All components must define one or more grades using the
gradeNames option, as see on line #2:
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).