Reorderer-Lightbox Separation of Concerns

Owned by Colin Clark
Last updated: Sept 25, 2008 by Jonathan HungVersion comment
2 min read

Reorderer/Lightbox Separation of Concerns

The Reorderer is a reusable library of JavaScript code intended to be used by developers when building new DHTML user interfaces. It provides a complete and configurable set of keyboard-accessible drag-and-drop services. The Reorderer is used by the Lightbox component. The following diagram illustrates the relationships and partitioning of the Reorderer, the Lightbox, and the Sakai Gallery Tool:

See Also

About the Image Gallery Tool

The Image Gallery is an RSF-based Sakai tool that can also be deployed as a JSR168-compliant portlet. The gallery tool has no direct awareness of the Reorderer, only the Lightbox. It uses a LightboxProducer to generate the necessary markup required to use the Reorderer and Lightbox.

The Sakai Image Gallery tool, as an example of an RSF application that uses the Lightbox and Reorderer, consists of:

  • A main.html template file, which provides the markup required to render a full gallery page.
  • MainProducer, the RSF ViewProducer required to dynamically generate the Gallery tool's UI. The MainProducer uses an instance of the LightboxProducer to generate the Lightbox-specific markup.

For convenience's sake, the Lightbox HTML template, Lightbox.html, may be embedded directly into the Gallery's main.html template, providing a single place for designers to make changes to the markup of both the Lightbox and the surrounding Gallery.