ET Engineering Blog: Wicket Katas

Introduction

This week's class' work is modifying Katas. Katas or specifically Code Katas are programming exercises that aims to refine ones programming skill through practice and repitition (Wikipedia). Our class will be working on the previous exercises hoping to hone our skills in Wicket. There are 5 different Wicket Katas exercises that we need to work on and each exercise has about 1 to 3 needed modifications with the total of 11 modifications for the whole assignment. We needed to record the time that it took us to do each of these modification so let's go ahead and see how I did.

Example 01

TO DO: Kata 1A: Add a new line to the page that says, "In one week, the time will be <time>", where <time> is replaced by a timestamp one week later than the timestamp that now appears on the page.

RESULT: This took longer that I thought it would. There were some confusions on which method to use to get the timestamp for the next week.The original code uses Date() to retrieve the current date but the method getDate() is now deprecated so I had to do some reserching t able to do this Kata. I found the Calendar() and getCal() to do the job. This exercise took 20 mins.

TO DO: Kata 1B: Add a button to the page labelled "Refresh". After pushing the button, the times update themselves.

RESULT: This exercise is really easy. Just add a new button and set the onSubmit() to go the same page. This exercise took 15 mins.

TO DO: Kata 1C: Wicket, by default, runs in "Development" mode, but production systems should run in "Deployment" mode. Override the getConfigurationType() method so that Example01 now runs in Deployment mode. See this page for details.

RESULT: I was surprised with this one as I thought that this will be the hardest one. Luckily we were provided a link on the example of how to do this. This is accomplished by adding the getConfigurationType() method and setting the Application to Deployment mode. This exercise took 15 mins.

Example 02

TO DO: Kata 2A: Add an additional link on the home page that says, "Go to image page". Create this page, which should display an embedded image. This image should be G-rated. It should be in a .jpg file stored with the system, not retrieved from the web.

RESULT: All that is needed to do this is to copy the previous code and replace the label to create another link. Creating the page wasn't that bad either and for the image, It didn't took that long as I had to do this in the previous week's exercise. This exercise took 20 mins.

TO DO: Kata 2B: Add a button on the home page with the label, "Make font bold". After the user pushes it, all the text on the page should become bold, and the button label should change to "Make font italic". When the user pushes that button, all of the text should change to italic and the button label should change to "Make font normal". Pushing that button changes the text back to its original state and the button label should now say "Make font bold".

RESULT: This is the HARDEST of all the exercises. I worked on this for about 30 mins and decided to skip on this exercise. I had a couple of ideas on how to this. One of them is to create two additional pages. One page has all fonts in italic and another with all fonts in bold and links each buttons to the corresponding page. I'm not sure if this is even allowed or if this is a proper solution for this so I decided to do the very hard way. I created function that uses a switch statement to select the button's name. For the font type, I created if statements in the onSubmit() method. This will change the opening and closing font tag depending on what button was press. I had to ask for a lot of help on this one. The result is the initial button name is empty but when press, the button appropriate names will show up.This exercise took 4 hrs in span of three days.

Example 03

TO DO: Kata 3A: Add a new tab called "Image" that takes the user to a page containing an embedded image (your choice, G-rated). It should be in a .jpg file stored with the system, not retrieved from the web.

RESULT: This is pretty simillar to KATA 2A so this is one of the easiest. The only difference in here is that the page extends the BasePage, which has all the tabs. This exercise took 10 mins.

Example 04

Record how long it took you to accomplish each of these katas.
TO DO: Kata 4A: Add a new cheese called "Velveeta", which costs $0.25/lb.

RESULT: We chose this exercise to work on in class so I had help in finishing this. We base the code for this on the already existing entries. This exercise took 10 mins.

TO DO: Kata 4B: Add a "country" field to the billing address that appears when checking out. The country field should provide a drop-down menu with a selection of 5 countries.

RESULT: The same with the previous exercise, I had help to do this. The coding part was the easy part, but looking for the place on where to put it was the harder part. We had to configure 4 different files to accomplish this. This exercise took 15 mins.

Example 06

TO DO: Kata 6A: Get rid of the blue columns that appear when displaying the website. These are for development, not deployment purposes.

RESULT: This is probably the easiest exercise. I had to first figure out where the blue columns are being created then where it's being called and then remove it from there. This exercise took 5 mins.

TO DO: Kata 6B: Place the image underneath the form, not to the right.

RESULT: This is also an easy exercise. At first I tried to add a line break right after the form, but that didn't do anything. I played with some more and found out the span tag and replaced 16 to 20. This exercise took 5 mins.

TO DO: Kata 6C: It is often convenient for web applications to consult a properties file when starting up in order to get configuration values. An easy way to do this is with the standard Java Properties mechanism. For this Kata, modify your Example06 system to read in a file (if present) located in ~/.example06/configuration.properties. (Note that ~ means "the user's home directory", and that there is a System property in Java that provides this value.) This property file should contain a line like the following: deployment = true
In other words, it contains a property called "deployment" whose value is true if the Wicket application should run in deployment mode, otherwise the application should run in development mode (see Kata 1C).
Your application should read in the properties file and set the System property wicket.configuration before starting up Wicket. The Jetty class is a convenient place to do this processing.
Finally, your application should write out a message on startup indicating whether or not it found the file, and what the resulting configuration mode will be. If the file is not found, or the property is not present in the file, then the application should run in development mode.

RESULT: This is one of the hardest exercise in the whole assignment. This similar to Kata 1C, but this needed a lot more work to accomplish. This includes looking and reading from a file, catching exceptions and setting the Application properties. I was lost on how to accomplish this so I had to ask for some help. This exercise took 1 hr and lots of questions.

All in all, most of these exercises are pretty fun and easy to do and some are very frustrating that makes me wonder if it's worth a couple of hours to do. Luckily there are plenty of help so that made it ok. These exercises got me a little more comfortable on working on Wicket.

Downloads

Below are the finished distribution for all the exercises.