Archive for August, 2009

JUnit 4.7 – ExternalResource Core Rule

Wednesday, August 19th, 2009

As I continue my look at the new Core Rules implemented in JUnit 4.7 the next on my list was the ExternalResource Core Rule.

This rule is intended to be implemented for Servers, Sockets, Database connections etc. It serves as base class for rules like the TemporaryFolder rule I have previously blogged about. It serves as a pattern for such rules with the before and after methods that should be overriden to provide the necessary functionality.

My experimental test sets up the ExternalResource instance for a HttpServer in the before() method and removes it in the after() method. The test check that the server is initialized and set up as expected, whilst the @After test which runs after each test confirms that the server is removed once a test has completed.

import static org.junit.Assert.assertEquals;
import static org.junit.Assert.assertNotNull;
import static org.junit.Assert.assertNull;

import java.io.IOException;
import java.net.InetSocketAddress;

import org.junit.After;
import org.junit.Rule;
import org.junit.Test;
import org.junit.rules.ExternalResource;

import com.sun.net.httpserver.HttpServer;

public class JUnitCoreExternalResourceRuleTest {

  private static HttpServer testServer;

  // ExternalResource core rule allows the set up of an external resource
  // before a test (a file, socket, server, database connection, etc.),
  // and guarantee to tear it down afterward:
  @Rule
  public ExternalResource resource = new ExternalResource() {
    @Override
    protected void before() throws Throwable {
      testServer = HttpServer.create(new InetSocketAddress("localhost", 9999),
          0);
      testServer.start();
    }

    @Override
    protected void after() {
      testServer.stop(0);
      testServer = null;
    }
  };

  @Test
  public void testExternalResource() throws IOException {
    assertNotNull(testServer);
    assertNotNull(testServer.getAddress());
    assertEquals(9999, testServer.getAddress().getPort());
  }

  @After
  public void testServerNoLongerExists() {
    assertNull(testServer);
  }
}

The difference between using the ExternalResource Core Rule and putting the code in the @Before and @After method is that this interceptor occurs after the @Before and before @Test (before() method) and after the @Test and before @After (after() method). Additional information could be put in the @Before and @After methods as a result.

Picasa Photo Stream Slivers using JQuery – Part 2

Sunday, August 16th, 2009

This post continues on from Part 1. So if you have not read that, you may want to do so before continuing.

After completing the steps in the previous blog we now have a set of photo album thumbnail images. We shall now add the links that will then open up the Picasa Web Album

Appending the following to the displayed images code does the job for Picasa Web Albums:

.wrap("<div class='imgholder'><a href=" + item.link[1].href + "></a></div>");

So the complete code for the displaying of the album thumbnail images and links to them becomes this:

$jq("<img/>").attr("src",item.media$group.media$thumbnail[0].url)
  .appendTo("#images")
  .wrap("<div class='imgholder'><a href=" + item.link[1].href + "></a></div>");

Next we will add some styles to the images and the holder. Add the following code:

#images {
  overflow:hidden;
  height: 160px;
}
.imgholder {
  overflow:hidden;
  width: auto;
  float: left;
  border-right: 1px solid white;
  background: black;
  height: 160px;
}
.imgholder a,
.imghover a:hover,
.imghover a:hover img,
.imgholder a img {
  margin: 0;
  padding: 0;
  border: 0;
}

This code adds a fixed height to the images panel, floats the image container divs to the left inside the images panel and prevent margin/padding inheritence. When adding this widget to any other page you may need to clear:left at the bottom of the images panel. If you need to do this add an empty div with the id of imgholderend and add this code at the end of the styles:

.imgholderend {
  clear:left;
}

Now it is time to animate the images. First up we set the images that are not the first one to slivers of 10px wide and then add the JQuery code that animates the slivers. This code comes after the image loop code.

  // Set up the image container divs to collapse
  $jq(".imgholder").not(":first").css("width","10px");

  // Add the container mouseover event function
  $jq(".imgholder").mouseover(function() {

    // Make every image other than the one being mousedover small
    $jq(".imgholder").stop().not(this).animate({width:"10px"});

    // Make the currently active image big (set width to image width)
    $jq(this).animate({width:$jq(this).find("img").width()+"px"});

  });

Loading this code into the browser now should show you the Picasa Photo Stream slivers. Mouse over the images and they should animate to expand the currently moused over sliver.

Now that this code is working we can add it to a WordPress sidebar widget.

The first thing to check is that JQuery is enabled for your theme. For the default theme this means updating the call PHP in the header.php where wp_head() is called to the following:

<?php
  wp_enqueue_script('jquery');
  wp_head();
?>

The next thing is to add a text widget and add the Javascript code and the image holding divs we have developed over the 2 blogs:

<script type="text/javascript">
var picasaFeed = "http://picasaweb.google.com/data/feed/base/user/psellars?alt=json&kind=album&hl=en_US&callback=?";
var $jq = jQuery.noConflict();

$jq.getJSON(picasaFeed,function(data) {

  $jq.each(data.feed.entry, function(i,item) {
    $jq("<img/>").attr("src",item.media$group.media$thumbnail[0].url)
      .appendTo("#images")
      .wrap("<div class='imgholder'><a href='"+item.link[1].href+"'</a></div>");
  });

  // Set up the image container divs to collapse
  $jq(".imgholder").not(":first").css("width","10px");

  // Add the container mouseover event function
  $jq(".imgholder").mouseover(function() {

    // Make every image other than the one being mousedover small
    $jq(".imgholder").stop().not(this).animate({width:"10px"});

    // Make the currently active image big (set width to image width)
    $jq(this).animate({width:$jq(this).find("img").width()+"px"});

  });

});
</script>
<div id="images"></div>
<div id="imgholderend"></div>

..then add the CSS to your theme CSS. On WordPress this can be found in Appearance then Editor from the menu. The CSS to add is thus:

/* Picasa Web Albums Extra */
#images {
  overflow:hidden;
  height: 160px;
}
.imgholder {
  overflow:hidden;
  width: auto;
  float: left;
  border-right: 1px solid white;
  background: black;
  height: 160px;
}
.imgholder a,
.imghover a:hover,
.imghover a:hover img,
.imgholder a img {
  margin: 0;
  padding: 0;
  border: 0;
}
.imgholderend {
  clear:left;
}

That is it, you should now have a Picasa Web Album widget like that in the sidebar of this blog’s main page.

Hopefully you found this a useful blog – having written it I am considering writing such blogs more as articles on my website rather than blogs going forward. Makes more sense to me to blog about issues/little bits and pieces I have experimented with rather than these article type blogs.

Picasa Photo Stream Slivers using JQuery – Part 1

Sunday, August 16th, 2009

[ The Picasa Photo Stream Slivers can be seen on the main page of this blog]

Inspired by an article I read in issue 155 of Web Designer and the fact I have recently been taking lots more digital photos I recently undertook to implement a photo stream sliver display using JQuery from my Picasa web albums.

So after creating a base html test page my first task was to get the JSON feed from Picasa. This turned out to be:


http://picasaweb.google.com/data/feed/base/user/psellars?alt=json&amp;kind=album&amp;hl=en_US

Obtaining this JSON field was quite  simple, being almost the same as with the Flickr feed the magazine article used. For Flickr it is a simple case of grabbing the RSS feed for the album you want to use and replacing format=rss_200 with format=JSON. Obtaining the Picasa feed just as simple, replacing alt=rss with alt=json.

First things first is to include the JQuery script into the page. When I was creating this example I was using JQuery 1.3.2 so using the compressed version this is a simple matter of including this library in a script tag.

<script type="text/javascript"
  src="js/jquery-1.3.2.min.js"></script>

The slivers work by loading data dynamically into the page. I chose to do as per the article and include the images into a div element. This element was provided with id ‘images’ and added to the body of the page.

<div id="images"></div>

Now to the JQuery code in earnest. The first thing to do is grab the raw data from the feed.  JQuery has a built-in function to grab a JSON feed dynamically which loads the information from the feed and creates instances of the objects contained inside. The getJSON JQuery method call required looks like the code below, another thing to keep in mind is that this code is intended for a blog post – so we will not be using the ‘$’ for JQuery.  (Click here for more information on using JSON with Google Data API’s)

var $jq = jQuery.noConflict();
$jq.getJSON("INSERT_YOUR_FEED_URL_HERE&callback=?",
  function(data) {
    $jq.each(data.feed.entry, function(i,item) {
      // do something with each item!
    };
});

As can be seen from the code extract above the feed.entry element of the Google JSON feed contains the items we want to do things with. In this case each entry represents a Picasa web album.

In order to display the actual web album cover photos we use the following line in the script executed for each entry in the feed.

$jq("<img/>")
  .attr("src",item.media$group.media$thumbnail[0].url)
  .appendTo("#images");

This code creates an image and assigns the value of the group.media thumbnail url to the src of this image. This adds the album cover as the source of the image.

Loading this page into your web browser should display you the album covers related to your feed.

In Part 2 of this blog links to the albums will be added, some styling applied  and  a website widget created.