Archive for category tutorials

Problem: i have some data in a text file, which contains 2 java.lang.Strings: the first one contains my data value, and the second one is the data type, i.e. “java.lang.Long”, “java.lang.Double”, etc.

How do i construct an object of the appropriate type containing the value in my text file?

Crappy solution: a loooong chain of if-else-if scanning through every supported type for choosing the appropriate parse* (Integer.parseInt, Double.parseDouble, etc.) method.

Why is this so crappy? Simply, because adding a supported type requires extending the if-else-if chain which may easily become too long and unreadable.

Funky solution: use the mighty powers of Java reflection!

Class objClass = Class.forName(type);
Class[] prototype = {String.class};
Constructor ctor = objClass.getConstructor(prototype);
return ctor.newInstance(new Object[]{value});

So what do these 4 lines do?
We get an instance of the Class object representing the class identified by the “type” String (the second string in our data file) and then we get the constructor which takes a single String as parameter, aka the constructor whose prototype is the one identified by our “prototype” variable; finally, we execute the constructor passing the value string.

Why is this so funky?

First of all, because it does in 4 lines of code what was done in a whoooole lot of lines in the crappy solution, but the very funky aspect of this solution is that it works not only with primitive types such as Integer, Long or Double, but also with any type which can be constructed with a String!

Veeeeeeeery funky!

One of the funkiest features of jQuery is the enormous amount of plugins developed by the community: as every good developer knows, most problems have already been solved by someone else, so a good community of developers providing solutions to known problems is a key feature of any framework.

Today, we’ll see how to build a cool-looking paged image gallery using two jQuery plugins in combination: Galleria for image displaying and Pagination for (surprise!) pagination.

First of all, let’s build a single-page image gallery, we’ll add paging support later; Galleria is incredibly easy to use, you just have to put the images in an <ul> and then call  .galleria() on it:

<script type="text/javascript"></script>
<ul id="gallery">
	<li><img src="foo.jpg" alt="" /></li>
	<li><img src="bar.jpg" alt="" /></li>
</ul>

The result will look somehow like this (given some CSS tweaking):

Notice that the currently active image is displayed full-size and the rest of the images in the <ul> is displayed as a clickable thumbnail.

Of course Galleria provides some options to customize your image gallery rendering, and the most notable are:

• The possibility to use your own CSS style for every element of the image gallery
• The possibility to attach a callback to the event fired when a thumbnail is clicked and when a thumbnail is hovered
• The choice weather to enable or not browser history, allowing the user to use the ‘back’ button in his/her browser

Let’s try adding some fancy animation effects on the thumbnails: for example, we want to have the hovered thumbnail highlighted and the selected image appear fading in, as in the demo:

function imageCallback(image, caption, thumb) {
	image.css('display','none').fadeIn();
	if(image.width() > 500) {
		var ratio = image.width() / 500;
		image.css('width', '500px');
		image.css('height', image.height() / ratio);
	}	
 
	// fetch the thumbnail container
	var _li = thumb.parents('li');
		// fade out inactive thumbnail
	_li.siblings().children('img.selected').fadeTo(500,0.3);
		// fade in active thumbnail
	thumb.fadeTo('fast',1).addClass('selected');
}
 
function thumbCallback(thumb) {
	var _li = thumb.parents('li');
	var _fadeTo = _li.is('.active') ? '1' : '0.3';
	thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
	thumb.hover(
	function() { thumb.fadeTo('fast',1); },
	function() { _li.not('.active').children('img').fadeTo('fast',0.3); }
	)
}
 
$('ul.gallery').galleria({onImage: imageCallback, onThumb: thumbCallback});

And that’s it, fancy graphic effects on both images and thumbnails!

Now, on to pagination: let’s say you have a huge bunch of images in your gallery and having a single list with all the thumbnails is crappy…having just a dozen thumbnail tops for each page would be better…so how do we paginate our images?

With the pagination plugin

First of all, we need to store all our image paths and names in a javascript array:

    var images = [
        ['images/foo.jpg', 'foo'],
        ['images/bar.jpg', 'bar'],
        ['images/quux.jpg', 'quux']
    ];

The array will be handled by the pagination plugin which will internally deal with appropriate indices.

How do we do it? easy!

We add a div, with id=”Pagination”, that will contain page numbers, and then do

$("#Pagination").pagination(images.length, {callback: pageSelectCallback});

Is everything done, then?

No, but we just miss a small point: the pageSelectCallback.

function pageselectCallback(page_index, jq){
	var items_per_page = 2;
	var max_elem = Math.min((page_index+1) * items_per_page, images.length);
	var newcontent = '';
	for(var i=page_index*items_per_page;i
 
';
	}
	$('#imagelist').html(newcontent);
	$('#mainimage').html('');
	$('ul.gallery').galleria();
	return false;
}

Basically, we are calculating the array indices of the images in the current page, and then injecting the appropriate <li> items in the gallery <ul>, calling galleria() again to refresh the current page gallery.

You can see a very basic demo of this tutorial here…have fun!