This tutorial is based on Infusion v1.1, and is, hence, a bit out of date. It will be deprecated soon. For more up-to-date information, try Creating a Component.

This tutorial will walk you through the creation of a Fluid Component called Flutter, a simple Twitter client. This tutorial is not intended to provide in depth information into what Flutter is or how it works, but to give an understanding of the process of creating a component in general. In order to complete this tutorial, it is assumed that you know and understand HTML, CSS, and JS.

These are the basic tutorial steps:

The rest of this tutorial will explain each of these steps in detail.

To summarize, the following code is a fluid:basic template for a fluid component.

 Insert license here

/*global jQuery*/
/*global fluid_1_1*/

fluid_1_1 = fluid_1_1 || {}; //use current released version number

(function($, fluid) {

    var privateFunc = function() {
        // some private function 

    //start of creator function

    nameSpace.componentName = function(container, options) {
        var that = fluid.initView("nameSpace.componentName ", container, options);
        that.publicFunc = function() {

            // some public function

        return that;

    //end of creator function
    //start of defaults

    fluid.defaults("componentName", {

	//default options can be selectors, styles, strings, or events 
	//also can create options based on subcomponents using subComponentName as the optionName
	//finally, custom options are also possible

        option1Name: {
            key: value
        option2Name: {
            key1: value1,
            key2: value2

    // end of defaults

})(jQuery, fluid_1_1);