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.

Kata Exercise 01

Kata Exercise 02

Kata Exercise 03

Kata Exercise 04

Kata Exercise 06

Wicket Chart (Google-O-meter)

Introduction

In addition to our group solar decathlon design mockups, this week, we also have to create a web page application individually. We are to implement a one page web application that provides two components: a form that accepts a variety of parameters along with a submit button that when pressed, generates a GoogleOMeter visualization.  Click here for an example of GoogleOMeter.

Web Application

The form should allow the user to set the start and end of the Y axis, the title, the width and height of the chart, and  the data value for the pointer. Our web application should use Wicket, Blueprint CSS for layout, the class' build system. We also need provide at least one useful test case and employ sessions so that multiple users can generate charts independently.

Wicket Experience

I was excited about learning Wicket. I just started  creating web pages and web application from my internship and I thought that Wicket will be very helpful in the future. I had to relearn HTML and then learn PHP, CSS and Javascript on my own to be able to do our previous project.  It turned out though that Wicket was harder than I thought. Setting the pages alone took me more than an hour. Since I never seen any Wicket code in action before,  I had to reuse the example Wicket project that were given to us by our professor and then work from there.
I have to say that creating web application/pages using Wicket is a very long and complicated process. The only thing I like about Wicket is we were able to work and enhanced our skill in Java. The only advantage that I can see about using Wicket is a high quality web application due to the fact that we are using build system to create it.
My over all experience in Wicket is not bad, because I get to learn a new framework and also enhance my skill in writing Java.

Wicket Chart Web Application

Below is the finished product for the implementation of the web application for creating Google O Meter chart. Beside from spending most of the time getting use to Wicket, I also spend most of my time making my page attractive by creating images for the header and the footer. I had fun creating this page and there are a lot more room for improvements.

 
Lesson Learned

Creating web application is very hard and  frustrating at first, especially when using a framework for the first time such as Wicket. It is very rewarding though once you see the result and it makes you want to learn some more.

Download

My Wicket chart can be downloaded here.

Solar Decathlon Group Design Mockup

     Our class' first group project is about creating a mockup web application design for the home management system for the Team Hawaii's entry for Solar Decathlon 2011. The project itself is really interesting because it forces members of this projects especially students to be as innovative and creative as they can. This is the second mockup that I did for the same system. The first one was individual which I thought was I bit harder than the group project. This mockup is a lot easier as three students are working together. I can give and get ideas, opinions and help to/from other members of the group. We used Balsamiq Mockups to create our design, Google chart wizard to represent data and myself personally used MS Visio and Photoshop to add some kick on some of the graphics. We are to design user interfaces to monitor and/or control lightning, HVAC, energy generation and consumption, aquaponics, security and entertainment. While we worked together on some of the pages, we also assigned to create designs individually for different pages. Below is my design for the security page.

This page utilizes the current floor plan to show which part of the house needed attention for security and intruders' position if there's any. It also have security cameras which are triggered by the already existing motion and infrared sensors.
     I also designed the homepage but I spend most of the time designing the Aquaponics page. It's the most interesting one for me, not only designing the page but the system itself. It utilizes the use and reuse cycle. I'm so interested on Aquaponics that I might create one at home. Anyway, my page monitors different levels for the whole system. PH level, Oxygen level and water temperature are all essential for the fishes' health, while the fish tank and plant bed's water levels are to ensure that the whole system is running properly. The idea is to monitor all this in real time so I decided to use gauges and a digital counter to represent data.  When something goes out of the normal levels then an alert and some recommended instructions to fix it will show up on the status field. Below is my design for the Aquaponics page.

Team Work and Project Management

Introduction

To work on the solar decathlon design mockups, the class was divided into groups of three to four students. I was paired up with Kylan Hughes and Chuan Hung. We started to talk about our design and we decided to use my previous mockup as a template for our group project. We used Google Project Hosting and SVN for our version control. 

Team Work

Since we needed to create about 8 to 12 page design mockups, we decided to divide pages that we are going to work on. We chose the pages that we really knew about. Like for example, my "Security" page design was pretty much the ideal design that we are aiming for, so I was the one who worked on it. We met multiple time just to talk about what we needed to finish, asked for others input and for help too and the rest are through email. We really didn't need to meet for a long period of time as we keep each other updated just like what I mentioned through email and through the job updates and commits on the project hosting site.


Google Project Hosting 

I have to say that Google project hosting was a huge help in finishing this project. We didn't really need to be at the same room to fully work on our project because we could just upload/commit our own page into the server and the whole group could check on it. I also have to say that we have to be careful in using this and the subversion control as it could mess up any changes made by other group member if I commit the whole project. We just have to remember to "Update" first before committing anything else. Below is our Google Project Hosting page.


http://code.google.com/p/solar-decathlon-teamhawaii-4/

All in all, the project when smoothly and we were able to really improve our designs  because we were able to focus more on small number of pages through divide and conquer.