Versions Compared

Version Old Version 48 New Version Current
Changes made by

Anastasia Cheetham

Anastasia Cheetham

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3
Section
Column
width60%

This page will walk you through an example of adding the Fluid Layout Reorderer component to your application.

This tutorial assumes that:

For more general information about the Layout Reorderer, see Layout Reorderer. For technical API documentation, see Layout Reorderer API.

Tutorial: How to Use the Layout Reorderer

Scenario

You're creating a portal system that will aggregate news content from a number of different tech gadgetsources. You'd like to allow site visitors to rearrange the portlets. This tutorial will show you how to use the Fluid Layout Reorderer to offer this functionality.

There are four basic steps to adding the Layout Reorderer to your application:

  • Setup: Download and install the Fluid Infusion library
  • Step 1: Prepare your markup
  • Step 2: Write the script
  • Step 3: Add the script to your HTML
  • Step 4: Styling
Column
Panel
borderColor#321137
bgColor#fff
titleBGColor#aab597
borderStylesolid
titleStatusborderStylesolid

This component is in Production status

solid
Panel
borderStyle
borderColor#566b30
bgColor#fff
titleBGColor#D3E3C4
borderStylesolid
titleOn This Page
Table of Contents
toc
maxLevel
5
minLevel2
maxLevel5
Panel
borderColor#321137
bgColor#fff
titleBGColor#c1b7c3
borderStylesolid
titleSee AlsoborderStylesolid
Panel
borderColor#321137
bgColor#fff
titleBGColor#cccccc
borderStylesolid
titleStill need help?
borderStylesolid

Join the infusion-users mailing list and ask your questions there.

...

Section
Column
Code Block
html
html
<div class="columnSetup2 fluid-vertical-order">
    <!-- Column #1 -->
    <div class="flc-reorderer-column fl-container-flex25 fl-force-left">
        <div class="flc-reorderer-module demo-layoutReorderer-module demo-last-login">
            <div class="demo-layoutReorderer-module-dragbar">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">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="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">Ut non turpis banana</div>
            <div class="demo-layoutReorderer-module-content">
                ... module content...
            </div>
        </div>
    </div>
</div>
Column
Panel
borderStyle
borderColor#566b30
bgColor#D3E3C4outset
title_"We already have class names on the modules, why are we adding another one?"_
borderStyleoutset

Infusion components make a distinction between selectors used for visual styling and selectors used for DOM manipulation. Many component change and adjust visual styling in response to user actions, so we don't want to use the same classes that are used for styling for DOM manipulation - this might result in a portlet becoming un-draggable while in the middle of being dragged!!

...