My Java Experiences: August 2012

In my previous blog, I demonstrated how to integrate the Coin Slider library in a Liferay portlet without having to develop any portlet. Coin Slider is a jQuery based image slider with many effects for image transition. That demonstration was based on Liferay 6.0.5. With Liferay 6.1.1 now available, I decided to try my own example and see whether the steps still hold true for the latest version of Liferay. And guess what, it does! That's the power of Liferay! Congratulations to the Liferay Team!

So here I demonstrate the same example with updated screenshots for the benefit of the community.

Note: This solution is based on Liferay 6.1.1

Download and extract the latest version of the Coin Slider library from http://workshop.rs/projects/coin-slider/

Liferay now has a single Library for storing both documents, images, video and any other media files. Create a folder slideshow in the Document and Media library of the community where you want to use the slider. Add the files coin-slider-min.js, coin-slider-styles.css, jquery-1.8.0.min.js to the slideshow folder. Create a new file javascript.js file in filesystem. Add the following code to this file:

$(document).ready(function() {
$("#coin-slider").coinslider({ hoverPause: false });
});

Upload the javascript.js file to the slideshow library. The slideshow folder should now look like this:

Next, upload few images that you want to display in the slider in the Document and Media Library.

There are 8 images in the library above.

Now create a new web content structure. Name it coin-slideshow. Add xml schema definition to the structure as shown below:

Click Save when done.

Create a new web content template and name it coin-slideshow-template. Select coin-slideshow as the structure for the new template. Click the Launch Editor button. In the dialog that appears, paste the following code:



<link href="$css.getData()" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="$jquery.getData()"></script>

<script type="text/javascript" src="$coinjs.getData()"></script>

<script type="text/javascript" src="$slidestart.getData()"></script>



<div id="coin-slider">

#foreach ($item in $slide.getSiblings())

   #foreach ( $itemData in $item.getChildren() )

        #if ( "$itemData.getName()" == "href" )

          #set ( $href = $itemData.getData() )

        #elseif ( "$itemData.getName()" == "img_src" )

          #set ( $img_src = $itemData.getData() )

        #elseif ( "$itemData.getName()" == "description" )

          #set ( $description = $itemData.getData() )

        #end

    #end

    <a href="$href"><br />

        <img src="$img_src" />

        <span>$description</span>

    </a>

#end

</div>

Click Update button when done. Click Save again in the main dialog.

Now is the time to add the slider in our page. Add Web Content Display portlet to the page where you want the slider. Click the Add Web Content link in the portlet to create content for the portlet. In the new dialog box, give a name to the content, say Slideshow. Change the structure of the web content by clicking the Choose button under the Structure section on the right. Select the structure coin-slideshow that we created earlier. This will automatically choose the template that we associated with the structure. Instead of the HTML editor, a web form with fields are shown.

In the css field, choose the coin-slider-styles.css from the document library. Similarly, choose jquery-1.4.2.min.js for jquery field, coin-slider-min.js for coinjs field and javascript.js for coinstart field. For the first slide, name it slide1. Select a image from the Document and Media Library for the img_src field. Select target location when an image is clicked from the dropdown list for the href field. Type some text to be displayed for the image in the description field. Similarly, add more slides for each image that you want to be displayed.