Lightbox Technical Overview
Since the Gallery tool is written using the RSF presentation framework, our approach to start is to implement the markup-generation aspect of the Lightbox as an RSF producer. However, we expect that the Lightbox will be able to be integrated into other presentation technologies as necessary, assuming the server-side framework is able to implement a simple markup-based contract with the Lightbox.
Parts of the Lightbox
The Lightbox consists of:
- A Lightbox HTML page, which provides an example of the HTML required to display an image thumbnail. This page can be used by developers in a server-side presentation framework of choice to generate the required markup as appropiate.
Lightbox.html also serves double-duty as a working RSF template for the Lightbox.
- The LightboxProducer, an RSF-based Java class responsible for producing the necessary markup to serve up a working Lightbox to the client. The LightboxProducer contains a and ThumbProducer, to which it delegates responsibility for actually doing the work of dynamic markup generation.
- The ThumbProducer, which generates the appropriate thumbnail markup in RSF-based applications.
The Lightbox uses the Reorderer object for all its drag-and-drop and keyboard handlers. As a result, the Lightbox is just a thin layer of markup and configuration on top of the Reorderer.
Adding Keyboard Support for Rearranging Images
- Moving focus between images using the arrow keys
- Actually changing the order of images using the arrow keys with the Ctrl modifier
- Handling the up and down arrow keys for navigation vertically within the image grid is more complex, requiring an algorithm (stubbed out in the GridLayoutHandler) to determine location of images onscreen.
Refactoring the Image Gallery tool
- We've made small modifications to hook the Lightbox up to the existing Gallery template
- Created an evolver (LightboxProducer) and separate ViewProducer (ThumbProducer) that generates the markup for the image thumbnails
- Added support in the Gallery for persisting the order of images in the database.
- Provided a way to POST the image from the Lightbox component to the Gallery tool on the server.
Draft Diagram of Lightbox Structure for RSF
This diagram is a work in progress and may be completely incomprehensible as a result.
Proposed Functionality of the Lightbox
Lightbox Component Development Tasks
Building the Lightbox
Walkthrough - Building and using the Image Reorderer in Sakai
Where to Find the Code
The Lightbox is available in Fluid's source code repository .