jQuery and Oracle WebCenter Content

In my first post, I described the very basics of jQuery and introduced some of its syntax. In this post I’ll highlight a few jQuery plugins we’ve used in one our products; MediaBank, a digital asset management tool built upon the Oracle WebCenter Content platform.

The homepage

The home page is where the latest assets (i.e. image, video, audio files) get displayed, and it allows users to search across the asset repository.

Slider
jQuery allows us to add a slider to the page, which essentially returns a number that corresponds the horizontal position of the ‘nubbin’ (I made that up, but it sounds right). We’ve used to enable users to dynamically control the size of the image thumbnails in the results.
To implement the slider control, you need to specify a number that represents the left most slider position, and the right most position, known as the min and max. You also need to specify the starting position of the nubbin on the slider, and also provide a call back function to call when the user moves the slider.

$("#slider").slider({
        min: -58,
        max: 150,
        value: '-58',
        slide: function(event, ui) { changeThumbSize(ui.value) }
});

The actual numbers for the min and max can be anything, but in this case they are used to calculate the amount of pixels to change thumbnails by.

clueTip
In case the thumbnails don’t grow big enough for users, we’ve also made use of the jQuery clueTip plugin to display larger versions of images when the mouse cursor is hovered over the thumbnail. This is a nice and simple plugin which looks for certain anchor tags, and relies on them having a ‘rel’ attribute containing the URL of the larger version of the image.

The JavaScript looks like this:

$('a.image_popup').cluetip({
        width: '470px',
        dropShadow: false,
        dropShadowSteps:3,
        hoverIntent: {
               sensitivity:  1,
               interval:  400,
               timeout: 200
        }
});

So this looks for all anchor tags with a class of ‘image_popup’ and applies the clueTip plugin to it, passing in some initialization variables, see the clueTip options page for more.

Tip: In MediaBank the URLs to images are in the form of service calls, and not direct references to images, e.g:

?IdcService=GET_FILE&dID=123&Rendition=PreviewLarge&RevisionSelectionMethod=Specific

This can cause issues with jQuery plugins (including clueTip) where they expect URLs to end with an image extension, and will otherwise fail to load. But you can overcome this by fooling the jQuery parser into thinking there is an extension by just modifying the URL slightly, e.g:

?IdcService=GET_FILE&dID=123&Rendition=PreviewLarge&RevisionSelectionMethod=Specific&extension=.jpg

Only do this if you’re sure the images are all jpg, which in our case they are!

Colorbox
Users can also click on the magnifying glass icon for each image to view a larger still version, and start a slideshow of all the other image results on the page. For this, we used the jQuery Colorbox plugin:

The colorBox plugin is a popular one, and I see it pop up all over the web. In our implementation, we have anchors on the page with the same ‘rel’ attribute, which colorbox looks for and works it’s magic on:

$("a[rel='slideShowItems']").colorbox({
        maxWidth:"90%",
        maxHeight:"90%",
        slideshow:true,
        slideshowSpeed:4000,
        slideshowAuto:true
});

Uploading
One way for users to upload images in MediaBank is to use a jQuery plugin called Plupload. It’s able to run on an impressive array of platforms, including HTML5, Gears and Flash, and provides an attractive way to upload multiple files.

Holy Crop!
One of the latest features in MediaBank is the addition of image cropping. This can now be done by users within their browser, using a jQuery plugin called jCrop.

The plugin superimposes cropping facilities over the image, allowing users to click and drag portions of the image to replace the existing image with, or create a brand new image from.

The jCrop plugin also allow the developer to make updates to the cropping region in the UI after the region has been initialized, and as such you assign the initialized region to a JavaScript variable which can then be manipulated.

For example, our code initializes the cropping region as such:

var api = $.Jcrop('#cropbox',{        
    onChange: showCoords,
    onSelect: showCoords,
    boxWidth: 690,
    aspectRatio: 0
});

And subsequent calls are made to the ‘api’ object depending on what the user chooses e.g.

api.setOptions({ aspectRatio: 1.78 });

Incidentally, the ‘showCoords’ function referenced above sets hidden fields with coordinates of the cropped image, when is then passed to a Java method which performs the crop.

Manage Media Projects
Part of the MediaBank application allows users to manage projects, or jobs of images, in a file-system type interface, with all the benefits of the Oracle WebCenter Content platform in the background. As well as all the regular features you’d expect of a file system such as creating folders, moving and renaming images, etc, users can download the whole project as a zip, and route the job through Oracle WebCenter Content approval workflows.

While a lot of this comes from custom Oracle WebCenter Content code, the front end interface is an implementation of the jsTree jQuery plugin.

To read more about MediaBank, see http://www.extended-content.com/ecs-website/ServicesSolutions/Solutions/MediaBank/index.htm