Fluid Development

Framework Architecture

Coming soon. In the meantime, have a look at the abstract architecture definition on the Fluid web site.

Component Development

• Lightbox Component Development Tasks

Download Instructions

These instructions assume that you are familiar with Sakai tool development.

1. Check out the Fluid branch of the Image Gallery Tool from https://source.sakaiproject.org/contrib/utoronto/fluid/gallery/branch into a folder called 'gallery'
2. Check out the Fluid Lightbox component from https://source.sakaiproject.org/contrib/utoronto/fluid/components/ into a folder called 'fluid'
3. Download the Dojo 0.9 toolkit from http://dojotoolkit.org.
   • You can use the nightly 0.9 build (http://archive.dojotoolkit.org/nightly/)
   • If you want to use SVN, check-out Dojo (http://svn.dojotoolkit.org/dojo/dojo/trunk) and Dijit (http://svn.dojotoolkit.org/dojo/dijit/trunk)
4. Copy the 'fluid', dojo, and dijit folders into Tomcat's webapps folder.
5. Build and deploy the Image Gallery Tool.

Testing the Lightbox

These tests work in:

• Firefox on Windows XP and Mac OS 10.4.

These tests do NOT work in:

• Internet Explorer 7 on Windows XP
• Safari 

Automated Tests 

The Lightbox widget includes automated JsUnit tests (JsUnit itself is, in fact, included in the distribution). To run the tests, ensure that the fluid, dojo and dijit folders are deployed (as described above, in the Download Instructions) and that Tomcat is running. Then:

1. Start Tomcat
2. In a web browser, go to http://localhost:8080/fluid/test/jsunit/testRunner.html
3. In the filename field near the top of the page, enter

   localhost:8080/fluid/test/tests/AllTests.html
   

4. Click 'Run' 

Manual Testing

Test File

1. Open Firefox to http://localhost:8080/fluid/test/tests/LightboxTests.html
2. Tab once to move focus to the images.
3. To select the image to be moved:
   • Use the left and right arrow keys to move focus to the image you wish to move.
4. To move the selected image:
   • Hold down the Control key and use the left and right arrow keys to move the selected image.
5. When the image is in the desired location, release the Control key.
   

Gallery Tool 

These instructions assume that you are familiar with the Image Gallery Tool, and have already uploaded images and created Gallery collection folders with images in them.

1. Navigate to your collection folder in the Gallery tool.
2. Tab until focus is on the image collection itself. This will happen after the tool iframe has focus.
3. To select the image to be moved:
   • Use the left and right arrow keys to move focus to the image you wish to move.
4. To move the selected image:
   • Hold down the Control key and use the left and right arrow keys to move the selected image.
5. When the image is in the desired location, release the Control key.