This topic has moved
The content of this page has been moved to the new docs space and expanded. Please see Tutorial - Getting Started With Infusion. This page will be removed soon.
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.
- 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:
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
We'll create a few files in the webapp/bargraph/ directory:
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".
A few things to note here:
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
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.
fluid, will be used as shorthand for the arguments that were passed in:
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
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.
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.
html for displaying bar graph.
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