Child pages
  • Copy of Tutorial - Layout Reorderer

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 4.0

...

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 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
titleStatus
borderStylesolid

This component is in Production status

Panel
borderColor#566b30
bgColor#fff
titleBGColor#D3E3C4
titleOn This Page
borderStylesolid
Table of Contents
minLevel2
maxLevel5
Panel
borderColor#321137
bgColor#fff
titleBGColor#c1b7c3
titleSee Also
borderStylesolid
Panel
borderColor#321137
bgColor#fff
titleBGColor#cccccc
titleStill need help?
borderStylesolid

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

...

Include Page
Infusion13:_tutorial setupInfusion13:
_tutorial setup

...

Step 1: Prepare your markup

...

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:

Include Page
Infusion13:Layout Reorderer DependenciesInfusion13:
Layout Reorderer Dependencies

...