Copy of Tutorial - Layout Reorderer

This tutorial has no yet been updated to reflect the latest APIs.

Step 1: Prepare your markup

To prepare your markup for the Layout Reorderer, you need to identify three basic things that the Layout Reorderer needs to know about:

the container of everything,
the columns,
the reorderable modules.

(For more detailed information about this, see also Tutorial - Layout Reorderer Selectors.)

In this example, the <div> element that contains the two columns would be the container. We can identify it by adding, for example, a unique id such as "demo-layoutReorderer":

To identify the columns and reorderable modules, we could use the default selectors defined by the Layout Reorderer: .flc-reorderer-column and .flc-reorderer-module. If we simply add these classes to our columns and modules, the Layout Reorderer will automatically find them:

Locked Modules

Many portlet systems wish to designate some portlets as more important than others - they want to ensure that their visitors see the portlets. The Layout Reorderer supports the ability to lock modules in place, that is to prevent modules from being moved.

In our example, we'll use a custom selector, demoSelector-layoutReorderer-module-locked, to identify the "Login Status" portlet as locked, so that it always remains in the upper left corner. When we instantiate the Layout Reoderer, we'll let it know about this custom selector.


<div class="columnSetup2 fluid-vertical-order">
    <!-- Column #1 -->
    <div class="flc-reorderer-column fl-container-flex25 fl-force-left">
        <div class="flc-reorderer-module demoSelector-layoutReorderer-module-locked demo-layoutReorderer-module demo-last-login">
            ...

Grab Handles

When visitors use the mouse to drag and drop portlets, we'd like to ensure that they can only grab the title-bar of the portlets, and not anywhere within the portlet. The Layout Reorderer supports the concept of "grab bars." In our example, we'll use a custom selector, demoSelector-layoutReorderer, to identify the title bars as the grab bars. When we instantiate the Layout Reoderer, we'll let it know about this custom selector.


<div class="columnSetup2 fluid-vertical-order">
    <!-- Column #1 -->
    <div class="flc-reorderer-column fl-container-flex25 fl-force-left">
        <div class="flc-reorderer-module demoSelector-layoutReorderer-module-locked demo-layoutReorderer-module demo-last-login">
            <div class="demo-layoutReorderer-module-dragbar demoSelector-layoutReorderer">Login Status:</div>
            <div class="demo-layoutReorderer-module-content">
                ... module content...
            </div>
        </div>
        <div class="flc-reorderer-module demo-layoutReorderer-locked">
            <div class="demo-layoutReorderer-module-dragbar demoSelector-layoutReorderer">Buy ecoSkinns Today!</div>
            <div class="demo-layoutReorderer-module-content">\
                ... module content...
            </div>
        </div>
    </div>
    
    <!-- Column #2 -->
    <div class="flc-reorderer-column flc-reorderer-column fl-container-flex50 fl-force-left">
        <div class="flc-reorderer-module demoSelector-layoutReorderer-locked demo-layoutReorderer-locked">
            <div class="demoSelector-layoutReorderer demo-layoutReorderer-module-dragbar">The Making of a Need</div>
            <div class="demo-layoutReorderer-module-content">
                ... module content...
            </div>
        </div>
        
        <div class="flc-reorderer-module demo-layoutReorderer-module">
            <div class="demo-layoutReorderer-module-dragbar demoSelector-layoutReorderer">Ut non turpis banana</div>
            <div class="demo-layoutReorderer-module-content">
                ... module content...
            </div>
        </div>
    </div>
</div>

That's all - these are the changes you need to make to your HTML.

Step 2: Write the script

To instantiate the Layout Reorderer, you can add a script block to your file that calls fluid.reorderLayout(). This script will tell the Layout Reorderer about:

the ID we added to the container
the custom selectors we added for the locked module and the grab handles
the names of our styles

For detailed information about the various options that can be used to configure the Layout Reorderer, see the Layout Reorderer API page.

Step 3: Add the script to your HTML

You'll need to add the Fluid library to you HTML file. In the header of the file, link to the Javascript files with <script> tags:


<script type="text/javascript" src="infusion-1.5/MyInfusion.js"></script>

Keep in mind that the MyInfusion.js file is a concatenated collection of all required source files, so it can be difficult to debug with. You may want to include each of the required files individually. This would look like this:

But all of these individual files are not necessary to make it work - the MyInfusion.js file has everything you need.

That's it! That's all you need to do to make your news portlets reorderable.

Styling

The Layout Reorderer defines class names that are used to update the visual appearance of the modules at various times during the life of the component. By defining styles for these classes - or by overriding them using the styles option, you can customize the appearance of your applications.