2. Run the JavaScript unit tests in your browser

The Image Reorderer component includes automated jqUnit tests

1. In a web browser, open the Image Reorderer test file and the tests will run automatically:

   /fluid-components/src/webapp/tests/fluid-tests/ImageReorderer-test.html
   

NOTE: These tests work in:

• Firefox 2 and 3 on Windows XP and Mac OS 10.5.
• Safari
• Internet Explorer on Windows

3. Preview the Image Reorderer template in your browser

 You can also view the Image Reorderer component in your browser by viewing it from your local file system.

1. Open the image-reorderer.html file in your browser. i.e. fluid-components/src/webapp/fluid-components/html/image-reorderer.html.
2. Tab until focus is on the image collection itself.
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.

4. Build and install the Image Reorderer component

Go to the fluid-components directory, created in Step 1 above, and install the Image Reorderer component using

mvn install

This will place a copy of the fluid-components war file in your local maven repository.

5. Check out the Image Reorderer-enabled Image Gallery tool

Check out the Fluid version of the Image Gallery Tool from https://source.sakaiproject.org/contrib/ucb/image-gallery/trunk/ into a folder called gallery in your Sakai source hierarchy. The rest of these instructions assume you used a folder called gallery.

svn co https://source.sakaiproject.org/contrib/ucb/image-gallery/trunk/gallery

6. Build and deploy the Image Gallery tool

If your instance of Sakai is currently running, shut it down.

Go to the gallery directory and deploy the Image Gallery Tool using

mvn -Dmaven.tomcat.home=$CATALINA_HOME install sakai:deploy

(assuming your $CATALINA_HOME environment variable is set; otherwise, replace it with the appropriate path). On Windows replace $CATALINA_HOME with %CATALINA_HOME%.

This step depends on the fluid-components .war file generated in step 4.

7. Restart Sakai, and marvel at how wicked the Image Reorderer is

These instructions assume you are familiar with the Image Gallery Tool, and have already uploaded images and created Gallery collection folders with images in them. If not, visit the Image Gallery page on the Sakai wiki to learn more.

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

Note: There is currently a bug in the Image Gallery/Resources interaction that requires users to initialize the two tools in a particular order:

Before uploading Gallery images using the Resources tool:

1. First, click on Resources and let it load.
2. Then, click on Gallery and let it load. 

 Once this is done, the two tools are sufficiently initialized that you can upload images using the Resources tool, and they will be available to the Image Gallery tool.