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 5.3
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
borderStylesolid
titleOn This Page
Table of Contents
maxLevel5
minLevel2
Panel
borderColor#321137
bgColor#fff
titleBGColor#cccccc
borderStylesolid
titleStill need help?

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

2. Run the JavaScript unit tests in your browser

The Lightbox Image Reorderer component includes automated JsUnit tests (JsUnit 2.2 itself is, in fact, included in the distribution).jqUnit tests

  1. In a web browser, open the JSUnit Image Reorderer test runner file and the tests will run automatically:
    Code Block
    /fluid-components/src/webapp/component-templates/test/jsunit/testRunner.html
    
    In the filename field near the top of the page, browse for the file:
    Code Block
    
    /fluid-components/src/webapp/component-templates/test/tests/AllTeststests/fluid-tests/ImageReorderer-test.html
    
  2. Click 'Run'

NOTE: These tests work in:

  • Firefox 2 and 3 on Windows XP and Mac OS 10.45.

These tests run but some do NOT pass in:

  • Safari
  • Internet Explorer on Windows

3. Preview the

...

Image Reorderer template in your browser

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

  1. Open the Lightboximage-reorderer.html file in your browser. i.e. fluid-components/src/webapp/componentfluid-templatescomponents/html/Lightboximage-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 Lightbox 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.

...

(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 assumes 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.

...