This tutorial has not yet been updated to reflect post-1.4 Framework changes.
Regardless of which grade of component you use, the basic structure will be the same. We'll use the simplest grade, a little component, to illustrate what this structure is. In future pages explaining other grades, you'll see the same principles.
The definition of a component involves two things:
A component's grade and any default options are registered with the framework using a call to
fluid.defaults, which has two parameters: the component name and an object containing the defaults. The grade name is specified in an array in the defaults called
gradeNames. For a little component, specify the grade as
The options you define for your component will be completely dependent on what your component does. Integrators can override your defaults when they instantiate the component, to customize its appearance or behaviour. The Framework will take care of merging the integrator's values with your defaults.
We'll go through some examples of options, to give you an idea of what they're all about.
Suppose you're creating a currency converter. You might wish to specify a default conversion rate:
The Infusion Inline Edit component uses a tooltip and defines (among other things) defaults for the delay before the tooltip appears, the text to display - even whether or not to enable it at all:
The Infusion Progress component uses jQuery animations to show and hide a progress bar. The defaults include objects that are passed to jQuery to configure the animations:
All components have a creator function: a public function that is invoked to instantiate the component. Infusion components have a standardized function signature:
(We'll get into what these arguments are soon.)
Creator functions can be defined in one of two ways
NOTE: The IoC system in Infusion is being introduced in version 1.4, and has Sneak Peek status. If you're working with production code, you might wish to use the "old-fashioned" method and write your own creator function, but otherwise, we do recommend that you use IoC.
Creator functions follow a few basic steps:
thatby calling the appropriate Framework component initialization function
Here's what that would look like for a little component:
What would this look like for our currency converter example?
The IoC - Inversion of Control system can automatically generate a component creator function for you. This is accomplished by added a special grade to the
gradeNames property: "autoInit":
With this special grade, you do not need to write a creator function at all.
But wait: What about public methods that we want to be part of the component's API? The Infusion Framework offers a number of hooks into the component creation lifecycle, and you can use one of these hooks to add your public methods. These hooks can be accessed by providing functions that will be executed at these moments in the lifecycle. These functions are speficied in the defaults for the component.
Adding public methods is typically done during the final initialization of a component. The hook for this – the default where you need to specify your function – is called
The things to note about this:
finalInitFunctiondefault takes the string name of the function
thatobject as an argument - your function simply adds methods to it
So what would our currency converter example look like, create using IoC: