Child pages
  • Walkthrough - Building and using the Image Reorderer in Sakai

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 4.0
Section
Column
width50%

Walkthrough

This page will walk you through the process of adding the Image Reorderer-enabled version of the Image Gallery tool to your instance of Sakai. These instructions assume that you are familiar with Sakai tool development in general, and that you have a working Sakai installation into which you can deploy the Image Gallery Tool. (For more general information about the Image Reorderer API, see Image Reorderer API.)

1. Check out the Image Reorderer component

Check out the Fluid Image Reorderer component from https://source.fluidproject.org/svn/fluid/components/trunk into a local folder. The rest of these instructions assume you used a folder named fluid-components.

Column
Panel
borderColor#566b30
bgColor#fff
titleBGColor#D3E3C4
titleOn This Page
borderStylesolid
Table of Contents
minLevel2
maxLevel5
Panel
borderColor#321137
bgColor#fff
titleBGColor#cccccc
titleStill need help?
borderStylesolid

Join the infusion-users mailing list and ask your questions there.

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:
    Code Block
    /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

Code Block
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.

Code Block
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

Code Block
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.