Wicket Katas

Overview
For this assignment we were given eleven different coding katas, for Wicket. A coding kata is a programming exercise, which through practice and repetition, will help you hone your skills. We were given eleven katas as Wicket programming exercises in hopes of helping us get a little more familiar with Wicket. Some of them were really easy while others were a bit more challenging, but doing these katas definitely helped me get more familiar with Wicket. I would definitely say that katas, in general, are good for helping someone get used to a new language, framework, or anything that they're new to. Repeating and practicing small exercises, at least from my experience, will help you get used to the new environment you're working in. I would say if you started with a few simple katas and then moved on to increasingly harder ones, you would probably have a firm understanding of whatever it was you were trying to learn. In the following section I will visit the eleven Wicket katas that we did in detail.

The Eleven Wicket Katas

• Exercise 01
  Kata 1A - Add a new line to the page that says, "In one week, the time will be ", where is replaced by a timestamp one week later than the timestamp that now appears on the page.
  • Finished: Yes
  • Time to complete: 10 minutes
  • Problems Encountered: The only problem I ran into for this kata was whether to use Date or Calendar for displaying the date. I couldn't figure out how to add time using Date, so I ended up using Calendar because it has an add method built in.
  Kata 1B - Add a button to the page labelled "Refresh". After pushing the button, the times update themselves.
  • Finished: Yes
  • Time to complete: 15 minutes
  • Problems Encountered: I had a problem with the buttons onSubmit method. I didn't realize that you have to override the onSubmit method.
  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.
  • Finished: Yes
  • Time to complete: 5 minutes
  • Problems Encountered: This kata was particularly easy; it just took a quick search to figure out how to change this setting.
• Exercise 02
  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.
  • Finished: Yes
  • Time to complete: 1 hour
  • Problems Encountered: I got the image and link working properly within 5 minutes, but it took me an hour to figure out why the image wasn't rendering properly. After some help from other students I was able to fix the issue and get the image to render properly.
  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".
  • Finished: Yes
  • Time to complete: 25 minutes
  • Problems Encountered: Most of the time I spent on this kata was spent thinking of how I was going to program it. When I started programming it was pretty straight-forward and everything seemed to work smoothly.
• Exercise 03
  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.
  • Finished: Yes
  • Time to complete: 5 minutes
  • Problems Encountered: This kata was essentially the same as kata 2A so it was very easy to complete.
• Exercise 04
  Kata 4A - Add a new cheese called "Velveeta", which costs $0.25/lb.
  • Finished: Yes
  • Time to complete: 5 minutes
  • Problems Encountered: None, this was just a matter of adding a new item to the list of cheeses.
  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.
  • Finished: Yes
  • Time to complete: 30 minutes
  • Problems Encountered: I didn't realize that I needed to modify the Address object at first, so I was only modifying the CheckoutPage java and html file. This caused errors to occur and it took me a while to figure out that I needed to modify the Address object and add in the country.
• Exercise 06
  Kata 6A - Get rid of the blue columns that appear when displaying the website. These are for development, not deployment purposes.
  • Finished: Yes
  • Time to complete: 2 minutes
  • Problems Encountered: No issues came up, I just had to change the style from "container showgrid" to "container".
  Kata 6B - Place the image underneath the form, not to the right.
  • Finished: Yes
  • Time to complete: 2 minutes
  • Problems Encountered: No issues, just had to make both the image and form divs used up the same amount of columns.
  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. (See Java in a Nutshell for details on properties file manipulation.) For this Kata, modify your Example06 system to read in a file (if present) located in ~/.example06/configuration.properties.
  • Finished: Yes
  • Time to complete: 40 minutes
  • Problems Encountered: I just had to do some research on how to use Properties in Wicket, besides that everything was pretty straight forward.

Deliverables

• akinsey-wicket-example01
• akinsey-wicket-example02
• akinsey-wicket-example03
• akinsey-wicket-example04
• akinsey-wicket-example06

Wicket Chart Web Application

Overview
For this venture, we were given the task of creating a website with an interactive graph using Wicket and Google Visualization. Wicket is a Java based web application framework which basically allows you to use Java to create advanced web applications, and Google Visualization allows people to create dynamics graphs with all types of data. For this task we combined Wicket and Google Visualization to produce a webpage that allows you to modify the data values, ranges, and title of the graph displayed on the page.

Learning Wicket
As mentioned by the instructor of my Software Engineering class, Wicket has a very steep learning curve. Needless to say it wasn't easy to learn; even reading Wicket in Action, a book on Wicket, didn't fully prepare me for the actual programming aspect. At first glance, the code seemed quite overwhelming but after sitting down and actually studying the code I began to connect the pieces. In my opinion, frameworks like Wicket require hands on experience to actually learn how to use them.

To be completely honest, my general impression of Wicket is that it's excessively complicated to design what should be a really simple webpage. Take the page I designed for this assignment for example: it took me six java files and one html to create. If I were to create this same page in php, a web scripting language, it would take me a single php file and be immensely simpler. One thing I particularly liked about Wicket is the fact that you can use automated debugging tools such as checkstyle, findbugs, and pmd. Finally, like how I could used an automated building system like Ant to manage the entire project, as this greatly speeds up this development and distribution process.

The Web Application
As mentioned above the function of the web application is pretty straight forward: you can modify the form values on the left of the page and the changes will reflect on the chart displayed on the right. Below is a screen shot of the application to give everyone a better idea of what the application looks like:

Lessons Learned
Given the task, I learned that web application development is definitely not as easy as it seems. The process is definitely tedious, but life can be made easier by using tools such as ant, findbugs, checkstyle, and pmd. While doing this assignment, I was really just reassured about how necessary automated quality assurance tools are. I'm glad that I got some experience with Wicket in the process of doing this assignment, and I in the future it might be useful if I have to design a large web application.

Deliverables
My Wicket chart web application can be downloaded here:
http://www2.hawaii.edu/~akinsey/ics413/wicket-chart-akinsey-1.1.1117.zip

Solar Decathlon Project: Design

Overview
As mentioned in my last post, for this project we were given the task to design a mockup user interface for the home management system of Team Hawaii's Solar Decathlon house. Unlike the previous post, in this post I will go over the design aspect of the project. The overall approach we took was to design a system that anyone could simply pick up and use without much thought. As a result, we feel we have designed a pretty well rounded home management system that should cover most, if not all, bases.

Design
Like mentioned above, our goal was to design a system where the user doesn't have to put much thought into how it use it. We were trying to follow the Keep it simple, stupid! or KISS principle; this principle basically states that your design should be simple and straightforward. We tried to achieve this by designing a very basic and intuitive template and then used this template as a basis to design each of the pages for the home management system. The end result of our initial design, was a system that was pretty simple to understand and use:

After collaborating with my group members a few more times, we were able to come up with a final design that we felt was simple and very consistent throughout each of the pages. We went back and added a few finishing touches such as rounding corners, adjusting spacing, and aligning the pages with each other. Our last meeting was basically to polish our design and make sure all the pages were consistent with one another. The final design of the home management system can be found on our group's Google project hosting site. A few screenshots from our final design can be seen below:

As far as design, I actually learned some new things while designing the home management system. First, I learned that it's not such good practice to bombard the user with lots of data and charts. The second thing I learned was that it's important to put things in terms that the user will understand; don't use language that the average user won't understand. Finally, that it's better to put minimal information on a page than to make the user have to constantly scroll down.

Solar Decathlon Project: Working in Groups

Overview
For this project we were given the task to design a mockup user interface for the home management system of Team Hawaii's Solar Decathlon house. As a group, Noah Wooden, Kevin Leong, and I decided on which features we thought the home management system should implement and got to work on putting together a initial mockup to present to Team Hawaii. We collaborated using the issues system provided by Google project hosting.

Working in Groups
Working in groups for this project, was a fun and useful experience. Being assigned groups for this project gave us the chance to get to know each other a little better and I would also say that working in groups significantly sped up the design process. All we had to do was come to an agreement about who would work on each section.

Our group had four meetings:

• First Meeting: Introduce ourselves to each other, exchanged contact information, and outlined a very broad strategy on how we would approach the project.
• Second Meeting: Talked on the phone, examined each of our initial designs and picked what we liked from each, divvied up who would handle designing each page.
• Third Meeting: Met in class, briefly showed each other what we had been working on, made suggestions for changes on each other's pages.
• Fourth Meeting: Physically met with each other, hammered out each of the pages that we were suppose to design while getting feed back from each other. Meeting lasted about eight hours.

In my opinion the most useful meeting was probably the fourth, because we actually got to sit down with each other and give one to one feedback on each of the pages we were designing. That's not to say that the initial meetings were useless, as the second meeting was actually quite productive in the sense that we were able to decide on what features we liked and divided up the work between the three of us. The only thing I would change about our meeting process in the future, would be to split the fourth meeting into two meetings as it took quite some time.

Issue Driven Project Management
As mentioned above, we used Google project hosting's issues system to assign tasks to each of our group members. A screen shot of the issues system can be seen below:

I would say there were advantages and disadvantages to using the system. Using the issues system was definitely helpful for assigning specific tasks for each group member when we couldn't physically meet; this basically made each of us responsible for a task that we agreed to finish by a certain date. When we didn't physically meet this definitely helped speed up the design process, but when we did meet I would say that using the issues system slowed us down a bit. When we physically met we would vocally assign a page to each person as opposed to using the issues system. Even though we still assigned pages for each person to work on, I feel that we worked more as a group on each of our pages (e.g. giving each other feedback and tips). As a result, the issues system more of a hassle because we had to assign a task to each person when we were really working as a whole. When we met, I felt like we were just assigning issues because we had to and not because it was useful. In conclusion I would say that using the issues system was definitely advantageous when working separately, but when physically meeting it was more of a setback.

Decathlon User Stories

Overview

The Solar Decathlon is a competition in which 20 teams consisting of college level students build a home that is powered by only solar energy. The winning house's design should blend affordability, consumer appeal, and design while maintaing optimal energy production and maximum efficiency.

Hawaii's Solar Decathlon team, or Team Hawaii, consists of a wide range of students, from electrical engineers to architects, but the one thing the team is currently lacking is computer science students. The goal of this current project is to have students from our software engineering class hopefully help and maybe eventually join Team Hawaii in the Solar Decathlon competition by designing a mock up user interface for the home management system of the house. This system will control and monitor multiple features of the house such as lighting, H.V.A.C., power statistics, and entertainment.

Before we can get into the design of the home management system, we have to look at what requirements that users of the house would like. To do this we're assigned the task of creating ten user stories that will describe interactions with users and the system, and it will explain the goals and benefits of the interaction. In short, wikipedia says that a user story "...is one or more sentences in the everyday or business language of the user that captures what the user wants to achieve."

User Stories

Power
• As a user of the system, I would like to be able to monitor the distribution of the energy consumption. For example I would like to see how the energy is being dispersed to the different functions of the house, such as lighting, entertainment, H.V.A.C., or the AquaPonics system. When one system (e.g. The H.V.A.C. system) of the house is consuming too much energy the home owner should be notified via an alert. As a result of being able to view these statistics and monitor the behavior of the power usage the user would be able to see which areas that they need to cut back in, whether it be not running the lights as often or turning down the air conditioner.
• I would like to be able to see how much energy, on average, the house produces per day. This would allow me to predict the power production over next few days. Because I can predict the amount of energy that my house should produce on a certain day, I can set a target power usage goal for that day. This will allow inhabitants of the house to not go over their power budget.

Lighting
• I would like to be able to control the brightness of the lights in the home as well as the hue, through the home management system. Brightness level is a bit of a necessity, as sometimes you need to work in a bright surrounding, while other times you need to work in low light settings. Being able to control the color of the lights is also important; say I wake up in the middle of the night and don't want to be blinded by white light, instead we could use amber. By being able to simply control the lighting, the user has full control of their working environment, as a result this could increase productivity.
• I would like the ability to lock the lights over wherever I currently am in the house. This would allow the user to sit at a desk and lock the lights directly above the desk, turning off the lights everywhere else. One advantage of being able to localize the light, is that it would save energy. Instead of having all the lights on we can just have light where we need it.

H.V.A.C.
• I would like to be able to set the max and minimum temperature that the house is allowed to reach. This would prevent the house from ever being too cold or too hot. For example if it is hot, but we want to conserver energy, we could set the max temperature to something moderately high like eighty-five degrees. This would allow the house to not turn on the air conditioner until it reaches the max temperature set by the user, as a result we conserve energy.
• I would like to know how much power is allotted to the H.V.A.C. system. I would like the interface to show me how long I can run the air/heat for before having to turn it off and recharge the system. This will allow me to efficiently manage my use of the H.V.A.C. system. This too, will also help in conserving energy.

AquaPonics
• As an occupant, I would like the ability to monitor the AquaPonics system. Because this system is tied into the ecosystem of the home, being able to monitor it and make sure everything is running correctly is extremely important. I would like the home management system to allow me to monitor the pH levels of the water. If the pH level is off significantly, the system should alert the occupant and provide a number of a technician to call for assistance.

Entertainment
• I would like the ability to voice activate and control the television using the home management system. Alternatively the user should be able to control the television when using the home management system application on their smartphone. This would allow the user to control all aspects of the television entertainment system, such as controlling the volume of the sound system associated with the television. This allows ease of use, and it is very convenient for the user.
• The ability to control music using voice activation would also be important. While not a necessity, it would appeal to the average user of the home. Voice control would allow the user to select music by just saying the name of the song. Likewise, with the television, the music should be controllable via smartphone too.

General
• The main interface of the Home Management System should be integrated into a touch screen slate like device, such as the iPad, located within the home. It should allow the user to control all of the previously mentioned aspects. As well as being integrated into the slate device, the Home Management System should be portable to the web and smartphone devices. This will allow the user ease of control of the home wherever they may be.

Website Usability

Overview

Usability, in terms of web design, is the ease of use of the website for a user. If a website has poor usability, people will leave your website. In order to have a successful website with good usability you must follow a few simple rules.

• Appease the user: A user shouldn't have to think to use the website. Everything about the site should be straight forward, from the content to the user interface.
• Keep it simple: Don't over-complicate the user interface or design of your website. If the user interface isn't simple the users will be confused and leave. If the design of your website is messy/cluttered people will leave.
• Be straight forward: Don't beat around the bush when trying to convey a message on your site. Be straight forward and say what you trying to say as simply as possible.
• Follow conventions: It is important to follow conventions when designing your website (e.g. putting the "sign in" link on the upper right side of a webpage) as it will greatly decrease the learning curve for your website. If you do everything against the normal conventions of making a webpage, users will have a hard time learning how to navigating/use your website.
• Test your website: It is important that you make your website adjust to the user and not the user adjust to your website. A user shouldn't have to download a specific browser to view your website, you website should work with multiple browsers. It is also important that before you release your site, you test the usability of it by observing a few people actually using your website.

Examples of Good Usability

1. Imgur: A simple image sharer


This is an example of good usability because it gets right to the point. Everything a user needs the site for is on the front page. The purpose of the site is to host images, so the site gives the option to simply upload an image from your computer or from another site all on the front page. This is a user interface in the simplest form, if one requires more options they can optionally create an account to gain access to those features.

2. Dropbox: Online file storage


Dropbox is a also another example of a site with a really simplistic user interface on the main page. When you first come to the site you are presented with a video that explains what Dropbox is, then right below is a link to download it. Those two things are what users come to the site looking for: what the tool does and where to get it. As a result of the video and download link being very large and hard to miss, the users don't have to think twice about how to use the site. It also uses standard conventions of putting the login information in the top right corner of the website.

Examples of Bad Usability

1. Havenworks: A political news site


This website obviously has bad usability in the sense that it is completely cluttered. The navigations isn't straight forward or standard at all; there are many sub-links in content of site, for example. Also there are walls of text with no bold keywords which makes it very difficult to skim over the content. If the design doesn't turn users away, the usability definitely will.

2. Jones Chijoff: Designer


This is a fine example of a site that has an appealing design but a poor user interface. The user interface that this person uses is completely nonstandard and will most likely be confusing to the average visitor; the user will have to learn how to use it. The way that the website presents itself leaves visitors wondering what services this person offers, or even what the point of the website is.

RoboHosting

Overview

For this assignment we were asked to create a google project hosting page for our existing robocode project, in my case robocode-ajk-wallspin. We were assigned to set up the google hosting page to allow use of subversion for content management updates and also to create wiki guides for developers and users of the project. Along with a google project hosting page, we had to set up a google groups page for the discussion of our project. Overall I would say this was a great learning experience and will help me in the future if I am ever part of a large (or small) development group. I was able to complete all of these task successfully, with little difficulty, after a little trial and error. The most difficult part of this task was setting up the wiki pages for the project and learning about the wiki syntax; other than that it was a pretty straight forward task.

Lessons Learned

Like mentioned above, I mostly learned about using subversion and google project hosting to allow content management for developing projects. I definitely think this will be a useful tool for future projects, and in fact I have already set up a google project hosting page for a project I have in my ICS 451 (Data Networks) class. I will be working on a peer to peer program for this class; I will be working with two other students so using subversion and google project hosting will greatly improve our workflow since we will be working on multiple copies of the same code. I'm hoping to learn a lot more during the course of this project, as we will most likely be using it more in depth.

Useful Links

• Creating a new Google Code project
• A short guide on setting up svn
• WikiSyntax Reference Guide

Deliverables

• Robocode-ajk-WallSpin Project Page
• Robocode-ajk-WallSpin Project Discussion Page