Yea, we have a new version of the bgStretcher2 script. The version has been bumped from 2.0 to 2.1 and it is available for download right now. See the bgStretcher page.

What is bgStretcher?

Well, check out the official page, but simply, it is a way to have a javascript based photo gallery and slideshow that appears full screen in your browser.

So, what’s new?

• First, there was a general rewrite to clean up and remove duplicate code.
• The code was documented, so it should be easier to follow.
• Fixed the issues people were having when clicking on albums quickly. (The slideshow would appear to stop working)
• Moved some setup code from the html page to the bgStretcher2.js script.

You should be able to just drop the new bgStretcher2.js file in. I would advise cleaning up the html page that you are using to avoid conflicts. I have moved a lot of the setup code that was here into the main script file, which makes the html look much cleaner and simpler.

I have been using the ThickBox plugin for Wordpress on my site for a while now. When you click on a link, the images are shown in their own window with a darkened background. This worked great until I put together something on another of my photography sites here. At the top is a flash movie (yes, I know I don’t like having a flash movie, I will move on to HTML5 video when I can) and at the bottom are images. When you click on the images you get the same lightbox effect as the plugin. The only trouble was, it was pointed out to me that in IE, the video stayed on top. Oops.

A little searching the internet found the solution. Check out here for the fix, and here for some background on how it works and for other options you have. It is now working as expected. Thanks Steve for pointing that out to me.

I took this picture, from my iPod, of an iPad showing off my portfolio. It looks amazing. The images are actually sized perfectly for this device. But there was something weird. All the images in the night album, and the occasional other image won’t show. I get the blue image not found icon. Very weird. I wonder if they are exported with some weird settings. Not sure how that happened.

I was also able to confuse the javascript by pressing on the album and next/previous buttons. I will have to take a look at that. As noted yesterday, it doesn’t work well on the iPhone either. I also checked Kelby’s site again, and it looks great too, just not on the iPhone. I am wondering how that device reports it’s screen size. I might just need to look for that browser and then display presized smaller images.

If you want to get a rough idea of what your site would look like on the iPhone, check out iPad Peek. It doesn’t show the broken images like the iPad did, but it will give you a sense of size and how your content will fit. Just enter your site in the address bar at the top.

Are you a photographer with a flash site? Do you know that the iPad, just like the iPhone, will not display flash content? What’s a photographer to do? Scott Kelby looked at this earlier today.

When Kelby first put up his flash portfolio, I decided to create a javascript only portfolio site to do the same thing. See my portfolio here, and my post here.

I think my code is successful, to a certain extent. It works great on the desktop, but doesn’t work as well on the iPhone, and I don’t yet know on the iPad. Need to try that out. Anyone that wants to comment about that, please do.

I think that my issue on the iPhone is the size of the images. I think they need to be smaller to save on bandwidth, and prevent the phone’s browser from having to scale the images so much. That may be the issue on Kelby’s site too, because his new non flash site didn’t work well on the iPhone either. His new portfolio is also a jQuery javascript site done by RC. It was too slow to be useable on my phone. I wonder if image size is the issue there to. Now his site was optimized for the iPad, not the iPhone, but I want mine to work on both. I will need to do some more testing with smaller images to see.

So I now have a full screen slideshow in Javascript, without using flash, and I wanted to tell you how I did it, and how you can do it too. I will talk a bit about Javascript here, but you will be able to download the jQuery plugin I have without needing to know much, if all you want is to implement the gallery.

I got the idea for this plugin after looking at a flash version of Scott Kelby’s portfolio. I just wanted to give it a try in Javascript.

I have created a permanent page for bgStretcher2, so it is easier to find from the side bar, so look here.

Only it didn’t work. Wordpress 2.9 needs MySql 5.0 or higher. Crap. I had a 4.something MySql version. I went to the 1and1 control panel. No way to upgrade. No way migrate. S.O.L. When I had created my blog and the database for it, which didn’t seem like all that long ago, the default on 1and1 was to create a 4.x database. Now I was in trouble.

Hey, no problem I thought. I was told to do a backup before the upgrade, and I had done that. I used the phpMyAdmin tool to do the backup, I could do a restore to a new 5.x table the same way, right? Not exactly. I had a LOT of data in my database. 1and1 will only let you import 2meg. I had 4 times that. I needed to reduce some data.

I know, compression! First I tried to do the data dump with zip compression. Then I found out that the import tool didn’t support it. Sheesh. Then I tried the gzip compression. For me, this resulted in exactly the same file size. This wasn’t working at all. I just need to get rid of some data.

First I created a new 5.x MySql table using 1and1.

Next, I thought that I would eliminate some cache data that I didn’t really need. I use a flickr plugin that caches a lot of data. Also, I use a twitter plugin that stores all the tweets I make there. This adds up! So I decided to delete the data. The plugins didn’t have a delete function, so using phpMyAdmin, I went to the sql tab and entered the following command:

TRUNCATE TABLE tablename;

Replace tablename with the flickr or twitter, or what ever table you need to remove all rows from. Doing it this way instead of deleteing rows is much faster.

Still too much data. Hmmmm… how about all the revisions. I never need to go back to the revisions I had before, so lets delete them:

DELETE FROM wp_posts WHERE post_type = "revision";

That’s working pretty well. I am down to 3.5meg. Still not near the 2meg limit though.

There is now a time consuming way, and an easy way. The time consuming way is if you are afraid of the command line. You can download a backup file, open it in a text editor (not word), chop it into pieces, and upload these pieces, hoping you don’t make a mistake. Or, you can do a little command line magic. Just a couple of lines.

First, you need to use ssh to get into your 1and1 account. From a Mac or Linux box, this isn’t too difficult. It is built right in. From a windows machine, you will need to use a program called putty. I use a Mac, so I will show you the command line (Terminal) commands to use. First you need to find out the URL, userid, and password to use. If you go to the Administration panel, select “Web Space & Access”, and then “Secure Shell (SSH) Access”. Here you will find the URL, user and password to use.

ssh userid@sxxxxxxxx.onlinehome.us (or what ever your URL is)

Then enter your password at the prompt.

Now you are in your 1and1 shell account. Now, lets save a backup of our database without the phpMyAdmin tool.

mysqldump -h dbxx.perfora.net -u dboxxxxxxxx -p dbxxxxxxxx > backup.20100101.sql

Give your file a date so it is easy to remember what the backup is from.

The -h part is for host. The -u for user. The -p is prompt for password, then the last part is the database.

That command will take a few seconds depending on how big your database is. Isn’t is weird that 1and1 will let you have a 100meg database, but your can’t use any of their tools to import something that big?

Ok, now lets restore that data into a new 5.0 database that you created. Make sure you use the new database for this command.

mysql -h dbxxx.perfora.net -u dboxxxxxxxx -p dbxxxxxxxx < backup.20100101.sql

Again, this will take a couple of seconds, and then you are done. That’s it.

Ok, I have to confess. I did this the hard way the first time. I thought the text after the -p was my password, instead of the database name, and I couldn’t get the command to work. This way is much easier though. Trust me.

Now, remember why I was doing all this? I wanted to upgrade my Wordpress install. So next I went and edited my wp-config.php file to the updated database info. I have no idea what happened, but after I edited this file, my Wordpress site became all text, and just dumped out this file to the browser. Oops. So I then deleted the file, and started the install over again. (That’s what happens if the file is missing) I entered the database info and then got a message about an existing install. Yea, yea, I know, so I exited out, and just went to the site normally, and everything was fine. Phew. Not sure what to tell you, as that was a little bit more stressful than I thought I would be.

Next I logged in, went the the dashboard, gleefully passed the screen telling me to backup, and upgraded to 2.9 in a couple of seconds. Piece of cake.

First, to clarify, I don’t hate the two lovely girls in this picture, but they can be quite the pair. Second, my mother told me never to say hate, so maybe that was not a good title. How about “I detest pair programming.”

Don’t get me wrong, I don’t want to be stuck in a cave for a couple of months and then crawl out bleary eyed and pronounce that I have created the perfect piece of code. I love collaboration. I go to others for help, input, guidance,¬†or to reciprocate for someone else.

What I¬†don’t like, is sitting¬†in a cube with two people where one person types and the¬†other looks over their shoulder all day.¬†Maybe I haven’t had the right person to do this with. Maybe¬†that is why the pair of kids in the picture works. They have their issues, but they get along well, and have similar goals most of the time.

When I am paired with someone, and they have the keyboard, I just feel like one of two things occurs. I am sitting there bored wondering why they just don’t let me type, or they are whipping through some material I have never worked with, and I am lost when I don’t get to “drive”. When I have the keyboard, I just find it annoying to have someone asking if the code could be done differently every 5 minutes. I don’t mind getting feedback, and code reviews are great. I have no problem working on a task, checking for ideas, implementing my approach, then getting feedback, and maybe refactoring. I just don’t like it in real time.

I don’t see the benefit. Luckily it only looks like we are doing this while several of us are new. It won’t last forever. Have you ever had to work for an extended time period in a pair? Did it work?

I also noticed that the reflection of the Space Needle was coming in really clear, so I posed her to get the best reflection.

I had actually been here earlier and was looking for reflection shots, but this was later in the day and the light was a bit better. It was a better angle for the reflection.

Then on our way back from Kerry park after dark, (pics to come later) I noticed that the Space Needle when all lit up reflected really well in the building.

I ended up taking this picture just as the train was coming through too. I planned it that way

I also was able to squeeze in a shot of the Space Needle and it’s reflection.

In a perfect world, I would have had a wider angle lens. I was scrunched down on the ground to take this, but I just don’t have quite wide enough view to get both the reflection and the needle all in the picture. If I had had the new Nikon 10-24 I bet it would have fit it all in. But then I would have used a smaller aperture, forcing a slower shutter, and I don’t think I could have hand held it. I did have my tripod with me, but we were rushing home trying to beat the rain and grab that train that just showed up on that previous pictures. We ran and caught it. Best four dollars ever. We had walked enough that day.

The Observer in the Physical World

The idea behind the observer is like a subscription. Do you have a newspaper or magazine subscription? Have you signed up for cell phone texts from your favorite band when they have new tour dates? The act of you signing up with the newspaper, the magazine, or the band, is you saying you want a subscription, or that you want to become an observer. When the subject (newspaper, magazine, band) has something new to share (on a schedule or not) they run down their subscriber list, and notify the observers by mail, or text.

The Observer in the Software World

On the software side, the idea is the same. Your subject needs to provide a way to take subscriptions, hold a list of observers, and when a particular state changes, notify them. There is usually a couple of methods on the subject that takes in an interface that is used for getting on or off the subscription list. On this interface is also the “call back” method. This is the method that the subject will execute when it wants to inform the observers of state changes.

Do you have a picture?

 

Here is a class diagram for our first example. We have two classes and an interface. The interface, NumberObserver is the piece that connects the subject and the observer together. The NumberHolder class has methods to add and remove our observer from an internal list. The NumberDisplayer sets this object and the notify method on NumberHolder. The way it was implemented here was that NumberDisplayer implemented the interface. This is not the only way to do it. NumberDisplayer could create an inner class, or there could be an external class that implements the NumberObserver interface. It doesn’t matter. All that does matter is that NumberDisplayer passes a NumberObserver object to NumberHolder that implements the notifyNewNumber method. When NumberHolder changes it’s number, it then notifies all the observers by looping over the list it has of observers and executing the notifyNewNumber method on each one.

The NumberObserver is very basic. Just one method is defined here. The value that will be sent by the subject is the new number.

public interface NumberObserver {
   public void notifyNewNumber(int pNewValue);
   }
}

The NumberHolder doesn’t have much going on either. Most of the code is just to take care of the observers. Note the add, remove, and update observer methods.

public class NumberHolder {
   private int number;
   private List observerList;

   public NumberHolder() {
      number = 10;
      observerList = new ArrayList();
   }

   public void setNumber(int pNumber) {
      System.out.println("Number set to " + pNumber);
      number = pNumber;
      updateObservers();
   }

   public void addObserver(NumberObserver pObserver) {
      System.out.println("Adding observer:" + pObserver);
      observerList.add(pObserver);
   }

   public void removeObserver(NumberObserver pObserver) {
      System.out.println("Removing observer:" + pObserver);
      observerList.remove(pObserver);
   }

   private void updateObservers() {
      for (NumberObserver aObserver : observerList) {
         aObserver.notifyNewNumber(number);
      }
   }
}

And finally, the NumberDisplayer class that implements the NumberObserver interface.

public class NumberDisplayer implements NumberObserver {
   private String name;

   public NumberDisplayer(String pName) {
      name = pName;
   }

   public void notifyNewNumber(int pNewValue) {
      System.out.println(name + " is now displaying " + pNewValue);
   }
}

NumberHolderTest puts these three classes together. It creates several NumberDisplayer classes and adds and removes objects from the NumberHolder as well as updating the value. Run this to see the observer at work.

public class NumberHolderTest {
   public static void main(String[] args) {
      NumberHolder aNumberHolder = new NumberHolder();

      // we can set the number at any time. Nothing happens because we don't
      // have any observers registered.
      aNumberHolder.setNumber(10);

      // Each NumberDisplayer will register with the NumberHolder
      NumberDisplayer aObserverAndDisplayerOne = new NumberDisplayer("One");
      aNumberHolder.addObserver(aObserverAndDisplayerOne);

      NumberDisplayer aObserverAndDisplayerTwo = new NumberDisplayer("Two");
      aNumberHolder.addObserver(aObserverAndDisplayerTwo);

      NumberDisplayer aObserverAndDisplayerThree = new NumberDisplayer("Three");
      aNumberHolder.addObserver(aObserverAndDisplayerThree);

      // Each NumberDisplayer should get notified of the change
      aNumberHolder.setNumber(20);

      // Remove two observers
      aNumberHolder.removeObserver(aObserverAndDisplayerOne);
      aNumberHolder.removeObserver(aObserverAndDisplayerTwo);

      // Now only one observer is left
      aNumberHolder.setNumber(30);
   }
}

The main idea here is that we can keep the two objects loosely coupled, with the one interface joining them together. The way this is done can vary a bit. In this particular case we have chosen to pass the new number. You could pass a different interface that exposed methods on the subject. You could just have a method that doesn’t pass anything if just need to know that something happened.

Let’s look at another example, this time using our Animal classes.

Defining the problem

We have a zoo. A zoo contains many cages, each cage contains several animals. The zoo keepers would like to have an up-to-date tally of all the animals in the zoo. Every time animals are added or removed from the cages, they want to know the totals. Let’s look at this without the observer pattern first.

No Observer Pattern

public class Cage1 {

   // List to hold our animals
   private List animalList;

   public Cage1() {
      animalList = new ArrayList();
   }

   public void insertAnimal(T pAnimal) {
      animalList.add(pAnimal);
      System.out.println("\n" + pAnimal.getName() + " " + pAnimal.getType()	+ " is added to the cage.");
   }

   public void removeAnimal(T pAnimal) {
      animalList.remove(pAnimal);
      System.out.println("\n" + pAnimal.getName() + " " + pAnimal.getType()	+ " is removed from the cage.");
   }

   public void clearCage() {
      animalList.clear();
   }

   public List getAnimals() {
      return animalList;
   }
}

public class Zoo1 {
   private List> cages;

   public Zoo1() {
      cages = new ArrayList>();
   }

   public void addCage(Cage1 pCage) {
      cages.add(pCage);
   }

   public void removeCage(Cage1 pCage) {
      cages.remove(pCage);
   }

   public void doCageUpdated() {
      Map aAnimalCounts = getAnimalCounts();
      displayAnimalCounts(aAnimalCounts);
   }

   public Map getAnimalCounts() {
      Map aAnimalCounts = new HashMap();
      for (Cage1 aCage : cages) {
         List aAnimalList = aCage.getAnimals();
         int aCount = aAnimalList.size();
         if (aCount > 0) {
            String aType = aAnimalList.get(0).getType();
            Integer aTypeCount = aAnimalCounts.get(aType);
            if (aTypeCount == null) {
               aTypeCount = new Integer(aCount);
            } else {
               aTypeCount = new Integer(aTypeCount.intValue() + aCount);
            }
            aAnimalCounts.put(aType, aTypeCount);
         }
      }
      return aAnimalCounts;
}

   public void displayAnimalCounts(Map animalCounts) {

      Set aAnimalSet = animalCounts.keySet();
      if (aAnimalSet == null || aAnimalSet.isEmpty()) {
         System.out.println("\nZoo is currently empty.");
      } else {
         System.out.println("\nCurrent zoo animal counts:");
      }
      for (String aType : aAnimalSet) {
         Integer aTypeCount = animalCounts.get(aType);
         System.out.println("There are " + aTypeCount.intValue() + " of type " + aType);
      }
   }
}

See Cage1.java. Pretty simple. Just a simple list, and the methods to support getting data in and out of the list. Now look at Zoo1.java. This class contains the cages in a List. It also has the methods that can look at all the cages and create the totals for each animal type.

There is also a method doCageUpdated that must be called everytime an animal is added to a cage. The way we have this set up so far, there is no way for the zoo to know when an animal is added to a cage. A cage knows where an animal is added, but the cage doesn’t know about the zoo. It is contained within the zoo, but there is no coupling between the cage, and the zoo. We could insert a reverence for the zoo into the cage when the cages are added to the zoo, but we try to avoid this circular coupling.

public class ZooTest1 {
   public static void main(String[] args) {

      Zoo1 aZoo = new Zoo1();

      Cage1 aBirdCage = new Cage1();
      aZoo.addCage(aBirdCage);

      aBirdCage.insertAnimal(new Bird());
      // tell zoo to check counts and update display
      aZoo.doCageUpdated();

      aBirdCage.insertAnimal(new Bird());
      // tell zoo to check counts and update display
      aZoo.doCageUpdated();

      Cage1 aMammalCage = new Cage1();
      aZoo.addCage(aMammalCage);
      // tell zoo to check counts and update display
      aZoo.doCageUpdated();

      Mammal aFred = new Mammal("Fred");
      aMammalCage.insertAnimal(aFred);
      // tell zoo to check counts and update display
      aZoo.doCageUpdated();

      Cage1 aDogCage = new Cage1();
      aZoo.addCage(aDogCage);

      aDogCage.insertAnimal(new Mammal("Rover"));
      // tell zoo to check counts and update display
      aZoo.doCageUpdated();

      aDogCage.insertAnimal(new Mammal("Spot"));
      // tell zoo to check counts and update display
      aZoo.doCageUpdated();

      aMammalCage.removeAnimal(aFred);
      // tell zoo to check counts and update display
      aZoo.doCageUpdated();

      aBirdCage.clearCage();
      // tell zoo to check counts and update display
      aZoo.doCageUpdated();

      aDogCage.clearCage();
      // tell zoo to check counts and update display
      aZoo.doCageUpdated();
   }
}

What we are forced to do, and must rely on, is that the developer writing the program will call the doCageUpdated() method on the zoo object every time an animal is added to a cage. See ZooTest1.java. This is not good programming practice.

Implementing the Observer Pattern

public class Cage2 {
   // List to hold our animals
   private List animalList;

   // List to hold our observers
   private List cageObservers;

   public Cage2() {
      animalList = new ArrayList();
      cageObservers = new ArrayList();
   }

   public void insertAnimal(T pAnimal) {
      animalList.add(pAnimal);
      System.out.println("\n" + pAnimal.getName() + " " + pAnimal.getType()	+ " is added to the cage.");
      notifyObservers();
   }

   public void removeAnimal(T pAnimal) {
      animalList.remove(pAnimal);
      System.out.println("\n" + pAnimal.getName() + " " + pAnimal.getType()	+ " is removed from the cage.");
      notifyObservers();
   }

   public void clearCage() {
      animalList.clear();
      notifyObservers();
   }

   public List getAnimals() {
      return animalList;
   }

   public void addCageObserver(CageObserver pCageObserver) {
      cageObservers.add(pCageObserver);
   }

   public void removeCageObserver(CageObserver pCageObserver) {
      cageObservers.remove(pCageObserver);
   }

   private void notifyObservers() {
      for (CageObserver aCageObserver : cageObservers) {
         aCageObserver.doCageUpdated();
      }
   }
}

public class Zoo2 implements CageObserver {
   private List> cages;

   public Zoo2() {
      cages = new ArrayList>();
   }

   public void addCage(Cage2 pCage) {
      pCage.addCageObserver(this);
      cages.add(pCage);
   }

   public void removeCage(Cage2 pCage) {
      pCage.removeCageObserver(this);
      cages.remove(pCage);
   }

   public void doCageUpdated() {
      Map aAnimalCounts = getAnimalCounts();
      displayAnimalCounts(aAnimalCounts);
   }

   public Map getAnimalCounts() {
      Map aAnimalCounts = new HashMap();
      for (Cage2 aCage : cages) {
         List aAnimalList = aCage.getAnimals();
         int aCount = aAnimalList.size();
         if (aCount > 0) {
            String aType = aAnimalList.get(0).getType();
            Integer aTypeCount = aAnimalCounts.get(aType);
            if (aTypeCount == null) {
               aTypeCount = new Integer(aCount);
            } else {
               aTypeCount = new Integer(aTypeCount.intValue() + aCount);
            }
            aAnimalCounts.put(aType, aTypeCount);
         }
      }
      return aAnimalCounts;
   }

   public void displayAnimalCounts(Map animalCounts) {

      Set aAnimalSet = animalCounts.keySet();
      if (aAnimalSet == null || aAnimalSet.isEmpty()) {
         System.out.println("\nZoo is currently empty.");
      } else {
         System.out.println("\nCurrent zoo animal counts:");
      }
      for (String aType : aAnimalSet) {
         Integer aTypeCount = animalCounts.get(aType);
         System.out.println("There are " + aTypeCount.intValue() + " of type " + aType);
      }
   }
}

A better way is to implement the observer pattern. Look at Cage2.java, Zoo2.java, and ZooTest2.java. Looking at Cage2.java you can see that the Cage2 class now has another list, the list of CageObserver’s. Now, when an animal is added to the cage, the cage informs anyone that is listening that the cage count has changed. In our case, we just send a message that the cage is updated, but in a different design you may have passed the Cage2 object its self, or an interface, or another object that indicated the type of event (add, remove, clear) and the number of animals that it evolved. That is all up to your design. They would all fit the observer pattern.

public class ZooTest2 {
   public static void main(String[] args) {

      Zoo2 aZoo = new Zoo2();

      Cage2 aBirdCage = new Cage2();
      aZoo.addCage(aBirdCage);

      aBirdCage.insertAnimal(new Bird());
      aBirdCage.insertAnimal(new Bird());

      Cage2 aMammalCage = new Cage2();
      aZoo.addCage(aMammalCage);

      Mammal aFred = new Mammal("Fred");
      aMammalCage.insertAnimal(aFred);

      Cage2 aDogCage = new Cage2();
      aZoo.addCage(aDogCage);

      aDogCage.insertAnimal(new Mammal("Rover"));
      aDogCage.insertAnimal(new Mammal("Spot"));

      aMammalCage.removeAnimal(aFred);

      aBirdCage.clearCage();
      aDogCage.clearCage();
   }
}

Now look at the ZooTest2 class. Much better. No longer do we have to tell the zoo to display the data, it is done automatically. This may not seem that worthwhile here, but the process for adding cages to the zoo may not be connected with the process of adding animals to anyone cage. Keeping these things separate allows for more flexibility.

Swinging the Observer Pattern

We have already used the observer pattern in a previous lesson. Way back when we covered classes we looked at creating a Gui and implemented a WindowListener. We didn’t discuss it back then, but we were implementing the Observer Pattern. That’s right, every time we register an action listener of some sort in AWT, or Swing, we are registering an Observer with a Subject. Go back and look at Gui1 to Gui4. These are 4 different ways of creating the Observing class. As an example, here is Gui3.java.

public class Gui3 extends JFrame {
   public Gui3() {
      setTitle("Gui3");
      setSize(300, 300);
      addWindowListener(new WindowAdapter() {
         public void windowClosing(WindowEvent e) {
            System.out.println("Closeing Gui3");
            System.exit(0);
         }
      });
   }

   public static void main(String[] args) {
      JFrame aFrame = new Gui3();
      aFrame.setVisible(true);
   }
}

So keep this in mind. If you have written a GUI program, it is almost certain that you have implemented the Observer pattern. Swing depends heavily on it. That is how your visual components can react when users press buttons, move focus, and close windows. This way, you don’t have to create a loop of code that checks for a mouse click, and then determine which button the mouse was over, and then directs the program flow to specific code handling sections. You simple register with each button to be informed when it is clicked. And remember, several objects can register to listen at the same time. Because of this, Java even has a solution you can implement, called the EventListenerList. You can use this list in your classes to implement event listeners. Why reinvent it your self if it is already provided. This class supplies the underlying list, and methods to add and remove EventListeners to and from the List. It doesn’t supply a method to notify listeners in the list, but it does provide a method (getListeners()) that can take in a class type parameter so that you can ask the list to return just the listeners of a particular type. If you find you need to implement an observer event list, check this class out.

The Decorator in the Physical World

The idea behind decorating things in the real world is pretty much how it sounds. We wrap an object with new functionality, while keeping the old functionality. How about a camera in a waterproof housing? When closed up, we have added the functionality of waterproofing, but we still provide a way to press the buttons and turn the dials so that the camera can be operated.

The Decorator in the Software World

On the software side, the idea is the same. It is usually used when we have one object that we like how it functions, but we want to augment the behavior for a different situation. Done correctly, we can keep inserting one object inside another adding functionality at every step.

What do we need to create a Decorator?

We need to create a class (our Decorator) that contains the class we want to decorate. We usually get this class into the Decorator using a constructor. Our Decorator needs to extend or implement the class or interface that contains the functionality we want to Decorate. Then when one of the methods of the decorated class is called, we call it before or after adding our own functionality.

Ummm, Example?

Lets use our Animals again. We are going to get a little bit emotional, or at least our animals are. Have you ever met people, who no matter what you ask them, has to tell you their emotional state? We will create an animal decorator that does just that. Every time we ask them to move() or speak() they will still move and speak, but they will also tell us their emotional state.

So, how do we accomplish this? Just as we could have done when we started looking at the Adapter, we could just go into the code for Animal or BaseAnimal and add new code to store a feeling, and put some getters and setters on it. But, our Animal code works, and not every animal likes to tell everyone they meet what they are feeling.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

public abstract class EmotionDecorator extends BaseAnimal {
 
   private Animal decoratedAnimal;
 
   public EmotionDecorator(Animal pDecoratedAnimal) {
      decoratedAnimal = pDecoratedAnimal;
   }
 
   public String getType() {
      return decoratedAnimal.getType();
   }
 
   public void move() {
      decoratedAnimal.move();
      showEmotion();
   }
 
   public void speak() {
      decoratedAnimal.speak();
      showEmotion();
   }
 
   private void showEmotion() {
      System.out.println("(Who by the way, is very " + getEmotion() + ".)");
   }
 
   public abstract String getEmotion();
}

So, we start by extending BaseAnimal. This means that we get all the functionality that is in BaseAnimal, and means that other objects can just treat us like an Animal. (BaseAnimal implements the Animal interface). We have a constructor that takes in an Animal to be decorated. Not every method is implemented by BaseAnimal however, so we provide the pass thru method for getType() and decorate move() and speak().

The getType() method does not add anything, but we still need to provide this pass thru method, because we want the decorated Animal’s type to be returned if someone asks us.

The move() and speak() methods get decorated. We first call the method on our decorated Animal, then we call showEmotion(). This does the same thing for both, it prints out how the animal is feeling. It gets its emotion from an abstract method. This allows us to push down the hierarchy to some small concrete classes just the specific behavior for each emotion. This does mean a different emotion class for each emotion, but it can be used for all animals. As an exercise, when this is over, try to create a EmotionDecorator that takes in a parameter for the emotion type instead.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

public class HappyDecorator extends EmotionDecorator {
 
   public HappyDecorator(Animal pDecoratedAnimal) {
      super(pDecoratedAnimal);
   }
 
   public String getEmotion() {
      return "happy";
   }
}
 
Nothing to it. It just creates the constructor so our decorated animal is set up, and provides the correct emotion.
 
Lets see an example of how we construct this decorator now.
<pre lang="Java">public static void main(String[] args) {
 
   Animal aBird = new Bird();
   Animal aHappyBird = new HappyDecorator(aBird);
 
   aBird.move();
   aHappyBird.move();
}

Here we create a Bird and we create a HappyDecorator that we put the bird into. If we call move() on aBird, we just get the move() method on bird. If we call the move() method on aHappyBird, we get the Bird.move() method called and the decoration.

We don’t have to create and hold an instance of Bird. We could just add them by doing a new inside the constructor of our decorator. We can even chain our emotions together to get one confused bird.

1
2
3
4
5
6
7
8
9
10

public static void main(String[] args) {
 
   Animal aAngryBird = new AngryDecorator(new Bird());
   Animal aHappyBird = new HappyDecorator(new Bird());
   Animal aConfusedBird = new AngryDecorator(new HappyDecorator(new Bird()));
 
   aAngryBird.move();
   aHappyBird.move();
   aConfusedBird.move();
}

And just so you can see that we can decorate any of our Animals:

1
2
3
4
5
6
7
8
9
10

public static void main(String[] args) {
 
   Animal aAngryBird = new AngryDecorator(new Bird());
   Animal aHappyFish = new HappyDecorator(new Fish());
   Animal aConfusedMammal = new AngryDecorator(new HappyDecorator(new Mammal()));
 
   aAngryBird.move();
   aHappyFish.move();
   aConfusedMammal.move();
}

The chaining thing doesn’t look all that useful in this context, but it can be a great tool. Lets take a quick look at another example, the MovingDecorator. This is almost the same implementation as the EmotionDecorator, but we are only going to decorate the move() method. Lets throw a new twist in there too. Often with a Decorator, there is some sort of setup or initialization to do, so lets allow a way to init this decorator with a value, and have an abstract method to provide the values expected type.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

public abstract class MovingDecorator extends BaseAnimal {
 
   private Animal decoratedAnimal;
   private int movementAmount;
 
   public MovingDecorator(Animal pDecoratedAnimal) {
      decoratedAnimal = pDecoratedAnimal;
   }
 
   public void init(int pMovementAmount) {
      movementAmount = pMovementAmount;
   }
 
   public String getType() {
      return decoratedAnimal.getType();
   }
 
   public void move() {
      decoratedAnimal.move();
      StringWriter aWriter = new StringWriter();
      aWriter.append("Move " + getMovement());
      if (movementAmount != 0) {
         aWriter.append(" " + movementAmount);
         aWriter.append(" " + getMovementUnits());
      }
      aWriter.append(".");
      System.out.println(aWriter.toString());
   }
 
   public void speak() {
      decoratedAnimal.speak();
   }
 
   public abstract String getMovement();
 
   public abstract String getMovementUnits();
}

We now have a more complicated move method, but the idea is much the same. Decorate the object, then add functionality.

Once again we need to create concrete methods for the movement types. We have MoveForward, MoveLeft, and MoveRight.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

public class MoveRightDecorator extends MovingDecorator {
 
   public MoveRightDecorator(Animal pDecoratedAnimal) {
      super(pDecoratedAnimal);
   }
 
   public String getMovement() {
      return "right";
   }
 
   public String getMovementUnits() {
      return "degrees";
   }
}

These look almost the same as our Emotion ones, but we also have to implement a movement units method.

For our purposes we didn’t have to execute the init method, but we could. First is a simple class showing the using of this Decorator.

1
2
3
4

public static void main(String[] args) {
   Animal aMammal = new MoveForwardDecorator(new Mammal());
   aMammal.move();
}

Here shows chaining the move methods:

1
2
3
4
5

public static void main(String[] args) {
   Animal aBird = new MoveForwardDecorator(new MoveLeftDecorator(
   new MoveForwardDecorator(new MoveRightDecorator(new Fish()))));
   aBird.move();
}

And finally, here we use the init method:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

public static void main(String[] args) {
   Animal aBird = new Bird();
   MovingDecorator aDecoBird = new MoveForwardDecorator(aBird);
   aDecoBird.init(10);
   aDecoBird = new MoveRightDecorator(aDecoBird);
   aDecoBird = new MoveForwardDecorator(aDecoBird);
   aDecoBird = new MoveLeftDecorator(aDecoBird);
   aDecoBird.init(90);
   aDecoBird = new MoveForwardDecorator(aDecoBird);
 
   //What happens when this is uncommented?
   //aDecoBird = new HappyDecorator(aBird);
 
   aDecoBird.move();
   aDecoBird.speak();
}

If you noticed, I actually created a MovingDecorator instead of an Animal here, and that was simply so that I didn’t have to keep casting to call the init method.

How about in the Java SDK?

One of the best examples is the FileIO section. This is the code that allows you to read and write to the file system. You start with a basic byte or character reader, then wrap with decorators that can read by lines, or buffer for more performance.

You can learn about file IO in this sun trail.

If you remember from the Reflection Session, we read data from a properties file. We will access a file the same way here. This is shown so you can see what it looks like with no decoration.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

public class IODecoratorTest1 {
   public static void main(String[] args) throws Exception {
 
      int c;
 
      InputStream aStream = IODecoratorTest1.class.getResourceAsStream("ioTest.txt");
 
      while (( c = aStream.read() ) >= 0 ) {
         System.out.println((char)c);
      }
 
      aStream.close();
   }
}

IODecoratorTest2 shows how we decorate the input stream. First with InputStreamReader, then with BufferedReader, then finally adding a LineNumberReader.

1
2
3
4
5
6
7
8
9

Reader aReader = new InputStreamReader(IODecoratorTest1.class
.getResourceAsStream("ioTest.txt"));
 
Reader aReader = new BufferedReader(new InputStreamReader(
IODecoratorTest1.class.getResourceAsStream("ioTest.txt")));
 
Reader aReader = new LineNumberReader(new BufferedReader(
new InputStreamReader(IODecoratorTest2.class
.getResourceAsStream("ioTest.txt"))));

So, as you can see, we are layering, or stacking the classes. We are decorating the read() methods in each of these classes to add behavior. We can do the same thing. Lets write a Reader decorator ourselves that can count the number of times ‚ÄòI’ is in the file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

public class ICountReader extends FilterReader {
 
   private Reader inReader;
   private int count;
 
   public ICountReader(Reader pInReader) {
      super(pInReader);
      inReader = pInReader;
      count = 0;
   }
 
   public int read() throws IOException {
      int aByte = inReader.read();
      if (aByte == 'I') {
         count++;
      }
      return aByte;
   }
 
   public int read(char[] cbuf, int off, int len) throws IOException {
      int n = inReader.read(cbuf, off, len);
 
      for (int i = off; i < off + n; i++) {
         int c = cbuf[i];
         if (c == 'I') {
            count++;
         }
      }
   return n;
   }
 
   public int getICount() {
      return count;
   }
}

We are extending FilterReader instead of implementing the Reader interface so we don’t have quite so many methods to implement. This is just the same as the other decorators we have been looking at. We can insert it into a decorator chain just the same way.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

public class IODecoratorTest3 {
   public static void main(String[] args) throws Exception {
      int c;
      ICountReader aICountReader = new ICountReader(new BufferedReader(new InputStreamReader(IODecoratorTest1.class.getResourceAsStream("ioTest.txt"))));
      LineNumberReader aLineReader = new LineNumberReader(aICountReader);
 
      while ((c = aLineReader.read()) >= 0) {
          System.out.println((char) c);
      }
 
      aLineReader.close();
 
      // We cast because we need a ICountRe to ask for the line
      // number, and it is zero based so we add one
      System.out.println("# of I's:" + aICountReader.getICount());
      System.out.println("# of lines:" + (aLineReader.getLineNumber() + 1));
   }
}