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).
View components are model-bearing components, and therefore must define a model using the
model component option. This is done on lines 3-5:
For the Five-Star widget, the model is simple, containing only a single member,
rank, which stores the user's selection.
On line #6, we find the
listeners option, where event listeners are declared for various events:
This is where a lot of a component's functionality is configured, so we'll examine this in more detail a bit later in the tutorial.
On line #37, we find the
Since view components are concerned with the DOM, it must have a list of CSS-style selectors that identify whatever parts of the DOM it cares about. These selectors are used by the DOM Binder to facilitate easy lookup and manipulation of the DOM elements. The DOM Binder automatically scopes any use of the selector to the container of the component, preventing conflicts when more than one instance of a component is present on the page.
The widget only defines one selector,
stars, which is used to find the actual images that users will interact with.
On line #40, we find a component-specific option called
So far, all the options we've seen are expected by the Framework and use reserved option names. The
starImages option is the first (and only) general option defined by the Five-Star widget. This option defines the path to the different
gif files used for different states of the stars.
On line #45, we find the
This option creates a property, or member, called
stars at the top level of the component, and sets its value to the DOM Binder value created based on the
stars (defined on line #38).
Finally, on line #48, we find the
invokers option, where methods are added to the component:
We'll examine how invokers are configured in more detail a bit later in the tutorial.
listeners component option defined functions to attach to component events as listeners. The
listeners option for the Five-Star widget is shown below:
The first thing to note is that this component attaches an array of listeners to a single event, the
onCreate event is one of the component lifecycle events defined automatically for every component. It fires after the component has been fully created. When it fires, each of the listener functions in the array will be called.
MORE TO COME...
STILL TO COME...