Creating a Component

Introduction

A general overview of components can be found in the Developer Introduction to Infusion Framework so for this tutorial we'll explain things in the context of what we're aiming to create: a bar-graph component.

Set Up Directory Structure

For this tutorial we'll assume this component is being created for your own use, not as a contribution to Infusion. If you do want to contribute your component to Infusion, the directory set-up and requirements will be a little different and is explained in Contributing a Component. 

First, set up your file folders in the following structure.

Create:

• A top level directory called "webapp"
• Two directories within it called "bargraph" and "shared"
• A directory called "sample-data" within bargraph
• Two directories within shared called "css" and "js"
• A directory within css called "fss"
• A directory within js called "infusion"

Your directories should now appear like the following:

Add Infusion

A lot of the functionality of our component will be driven by Infusion code, so we'll need to add these dependencies to our component.

• Download the latest release of Fluid Infusion and unzip it.
• Copy the contents of the src/webapp/framework/fss/ into our shared/css/fss directory. 
• Copy the InfusionAll.js file into js/infusion

Start Coding

We'll create a few files in the webapp/bargraph/ directory:

BarGraph.js - This will hold all of our component javascript code.

bargraph.html - This is the file the bar graph will be displayed in.

bargraph.css - A stylesheet for the bar graph.

Let's get started with BarGraph.js. There are a few common pieces that start off every component.

Create the Component

So let's start by putting our bar graph code within a variable called "visualizer" and call our component "barGraph".

visualizer = visualizer || {};

(function ($, fluid) {

    //private functions will go here

    // this is the "creator function"
    visualizer.barGraph = function (container, options) {
        var that = fluid.initView("fluid.barGraph", container, options);

        //we'll add some public methods here

        return that;
    };

    // our default options will go here

})(jQuery, fluid_1_3);

A few things to note here:

Namespace
We've created a single global variable, visualizer, that becomes the container for your code. It helps keep code, well, contained, meaning there's less chance of bad interactions with other code. It's also easier to read.

Public and Private Functions
By wrapping all of the javascript for the component inside an anonymous function, we can separate private and public methods. The anonymous function is accomplished with the code below.

(function ($, fluid) {

// place javascript here

})(jQuery, fluid_1_3);

The definition of the bargraph creator function attaches it to the visualizer namespace so that it will be accessible outside of the anonymous function. Anything inside the function that is not attached to visualizer won't be accessible.

The parameters, $ and fluid, will be used as shorthand for the arguments that were passed in: jQuery and fluid_1_3 respectively. This allow us, for example, to upgrade to the next version of Infusion (fluid_1_4 simply by changing the one argument, instead of having to change every single use of the word fluid.

Creator function - The function that starts it all off - this is what will be called to create your component. Our creator function will be "visualizer.barGraph = some function." We'll also send the creator function two things: a container, and options. These variables are required for the Infusion function called inside the creator function that returns a component object we can start building on. This is also referred to as initializing a component. Once we have initialized our component, we can return it to complete a very basic bar graph component that doesn't do anything yet.

jQuery - Infusion is built using functionality in the jQuery framework, so we'll require it in our component as well.

initView -

container & options -

Display the Component

Taking a look at things visually will help us figure out what needs doing. Once we come up with some html for displaying a bargraph (our bargraph.html file), we can see how things are progressing so far by viewing our component in a browser.

<head> includes

html for displaying bar graph.

stylesheet

Add Methods

Private methods are internal functions that only the bar graph component will use, and will not be called by other components. Public methods are functions available for other components or code to use. The meat of our component will be here.

So let's plan out what we need our bar graph component to do:

Add Default Options

selectors
styles
events
strings
your own

Subcomponents