Versions Compared

Key

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

The Reorderer

...

Panel
borderColor#42773F
bgColor#F4F7F2
borderStylesolid
width65%
Section
Column

Image Added

Column

Reorderer

Excerpt

Image Removed

The Reorderer

is a set of JavaScript objects that can be used by

allows developers to create rich, accessible user interfaces

that allow

which enables users to directly

move around and

re-arrange content on the page.

The Reorderer

supports mouse-based drag and drop as well as fully keyboard-accessible controls. It is designed to be flexible and will handle a variety of markup and layout types. Clear extension points are provided to customize its behaviour for new layouts, connection strategies, and markup binding strategies.
Column
width35%
Panel
borderColor#566b30
bgColor#fff
titleBGColor#D3E3C4
titleOn this Page
borderStylesolid
Table of Contents
minlevel2
Section

Screenshots

{{ Up to 2 images. Anything more would push content beyond the fold. }}
Image Removed Image Removed

see http://wiki.fluidproject.org/display/fluid/Layout+CustomizerImage Removed for example
Column
width50%
Panel
Column
width50%
Info
title"Demo of the component"

If a usable demo of the component is available on the Wiki, it should be included here.

If a demo is not available, delete this Demo column and let the screenshot column be 100% width.

Include Page
Infusion13:Name of page containing live Wiki demoInfusion13:Name of page containing live Wiki demo

is the "engine" that powers the interaction, and is the place to go to listen for interesting events and actions within the component's lifecycle.

Features

  • Change the arrangement of elements using mouse or keyboard.
  • Convenient options for rearranging elements contained in a list, grid, a layout, and image gallery.
  • Configurable drag and drop appearance and behaviour.
Section
Column
width50%65%
Panel
borderColor#848484
bgColorwhite#FFF
titleBGColor#c1b7c3#E8E8E8
titleInteraction Design
borderStylesolid

Wireframes

  • links to current and archived wireframes. Aka "Design iteration"

Context storyboards

  • links to Context of Use Scenarios
  • links to storyboards illustrating use contexts

Design pattern

  • a pattern describing this component
  • link to OSDPL if pattern available

Functional requirements

  • Interaction design
  • Mock-ups

User testing

  • links to user testing protocol, questions, and results

Story cards

  • links to use cases: simple, functional statement, details of interaction, wireframes or mockups, testable

User Modeling

  • links to relevant Personas used

Accessibility

Column
width50%
Panel
bgColorwhite
titleBGColor#c1b7c3
titleTechnical Information
borderStylesolid

API

  • links to API documentation. Use excerpts if possible.

Integration

  • links to integration content. Use excerpts if possible.

Demos

  • links to usable demos and implementations.

Testing

Overview

What problem are we solving?

How are we meeting the needs?

Roadmap, Known issues, and Task List

Working Pages

Technical Working Pages

Design Working Pages

What is the Reorderer?

...

width60%
Column
Panel
borderColor#321137
bgColor#fff
titleBGColor#c1b7c3
titleSee Also
borderStylesolid

The Reorderer is designed to work across presentation technologies. We've used it in Java RSF and PHP-based applications, but it will work in any technology that can generate known element IDs and can respond to simple POST requests. The contract of the Reorderer is published and easy to implement.

What can I Reorder?

Well, in theory, anything. The Reorderer will work with all kinds of markup you throw at it. Reorder schedules, tasks, lists, whatever you like. There are a few limitations in the current version of the Reorderer that we'll address in future releases. These include:

  • The Reorderer doesn't work well when manipulating non-adjacent elements. This means that reordering table cells and other deeply nested markup doesn't work as expected.

Using the Reorderer

For detailed technical information on how to use the Reorderer in your application, see Integrating the Reorderer.

Technical Information

Reorderer Road Map

The upcoming road map for the Reorderer is as follows:

  • Create a public, easy-to-use API for extending layout handling behaviour
  • Handle reordering non-adjacent markup such as table cells
  • Better support non-orderable elements by implementing a shifting algorithm
  • Make the drag and drop behaviour more customizable
  • Improve Safari 3 support
  • Integrate the Reorderer into uPortal. (In progress, see Reorderer in uPortal)

...

titleReorderer Family

List Reorderer

Image Added
Reorder elements in a list using drag and drop, numbering and/or keyboard interactions

Grid Reorderer

Image Added
Reorder items in a linear, flowed set using drag and drop, numbering and/or keyboard interactions

Image Reorderer

Image Added
Allow user to reorder images or thumbnails of images

Layout Reorderer

Image Added
Reorder portlets in the portal page using drag and drop and/or keyboard interactions without leaving the page

Column
width35%
Panel
borderColor#321137
bgColor#fff
titleBGColor#aab597
borderStylesolid
titleStatus

This component is in Production status

Panel
borderColor#848484
bgColor#EFEFEF
titleBGColor#CCCCCC
borderStylesolid

Design

Development

Integration

Demo

Last stable release (v0.8)

Nightly build