Wicket Katas

Code katas from a programing perspective are exercises in programming that help you to refine your skills, and we were given a few to sharpen our Wicket programming skills.  Here are some of the examples that were modified in this exercise.  Below I have provided you the links to all of the original files and the corresponding exercise that go along with them.  You can download my files here.


Example 1: Hello, World!  (Original)
Kata 1A:  25 minutes  ✔
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.
Kata 1B: 10 minutes  ✔
Add a button to the page labelled "Refresh".  After pushing the button, the times update themselves.
Kata 1C: 20 minutes  ✔
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.


The katas ifor example one were not that bad.  I think the hardest part was trying to find the right methods to format the time to add a week.  Othere than that, everything seemed pretty straightforward.


Example 2: Links, Lists, Forms, Tables  (Original)

Kata 2A:  40 minutes  ✔

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.

Kata 2B:  2 hours 30 minutes  ✘

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".

General Idea: Find a dynamic way to insert corresponding bold and italic HTML tags at the front and end of the document.  

I particularly had some trouble with this task.  The first approach I tried was one that I would use in PHP, which involved having a conditional of some sort that would allow a certain Wicket tags to appear under certain conditions.  This isn't how Wicket works though.  Tags must be in place before the page is loaded or else it will throw some nasty syntax errors saying that either the tag has been created, but it cannot find a variable, or vice-versa.  So this idea was not going to work.

Another idea I had was to dynamically change the data that was being assigned to the label using StringResourceModels.  I have a feeling that this is the 'correct' way to do it, but implementing these objects was a little bit beyond my current Wicket knowledge.  My current understanding of these objects is that under certain conditions, the data that is displayed can change, whether it's being passed a certain type of object, or by using get methods on the object to return data corresponding to the current state of the object.

The third idea I thought was to create every label and button, and adjust their visibility via the Component.setVisible() method.  Unfortunately I had some trouble with my buttons setting these values to true or false for some reason.  It would seem that every time the page is reloaded it will reinitialize the boolean values to their default values, which didn't help much.

The last pitch effort for this task was to just create 3 static web pages and link them all together and have the corresponding tags and buttons on each page, but I felt that would not really accomplish the assignment from a developer standpoint, even though it would yield the correct output (except the pages would all be different).

Example 3: CSS Formatting  (Original)

Kata 3A:  8 minutes  ✔

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.


This exercise was very simple.  It involves one method call to fetch an image and display it to the screen.  Creating the link to the new page was also very easy since it is the same code as the other 4 pages.

Example 4: Cheesr  (Original)

Kata 4A:  10 minutes  ✔

Add a new cheese called "Velveeta", which costs $0.25/lb.


Kata 4B:  30 minutes  ✔

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. 


The first one was fairly simple.  You just have to add another item to the list, and you can easily follow the format of the other listed items.


Adding the select form was slightly difficult not because of the difficulty of the coding, but the amount of methods you had to create.  Many of them were get/set methods to ensure that the address objects were getting all the info needed to make a shipment.  I enjoyed this one, since it involved a bit of tracing.

Example 6: Blueprint, CSS, Sessions, Forms  (Download)

Kata 6A:  2 minutes  ✔

Get rid of the blue columns that appear when displaying the website. These are for development, not deployment purposes.
Kata 6B:  3 minutes  ✔

Place the image underneath the form, not to the right. 

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.


The first two were by far the easiest out of all the katas, requiring you to disable some CSS code, as well as move an image into another div.  But the same cannot be said of the last kata.  I wish I had more time to figure this one out.


Thoughts
I think it may help that I've been recently trying to teach myself PHP, but the flow between PHP and Wicket have some similarities.  I think I could get kata 2B down once I learn how to use more of Wicket's API, but it's always fun to have some dynamic coding for web apps where you have your higher languages spitting out HTML code that will be interpreted not just as characters.  I think these exercises helped to sharpen not only my Wicket skills, but also my general web development capabilities.  Working with services like Jetty help you realize how all the components of a web server come into play to take in user input, interpret it, and give back the expected results.  I will try to update this blog as I complete the last two of these exercises that eluded me.

Wicket Chart

For this week's assignment we were exposed to a Apache Wicket,  which which is a web application framework that allows you to do web programming in Java.

Initial Thoughts

This was the first time I had ever heard of Wicket.  As a novice web developer, it reminded me a lot of PHP.  Similar to PHP, Wicket uses a model-view-controller (MVC) architecture.   Wicket interacts with an application server (in my case I am using Jetty) which then uses Java code that is on the web server to handle the Wicket requests.  The server returns the output which is viewed by the user.

From a development standpoint, I feel it can be a very slow process waiting for Java code to compile, whereas working with a scripting language like PHP gives immediate results.  But being able to have the strength of a full programming language behind your web application allows for many options that are not available to scripting languages.

Wicket Chart (Download)

This was my first web application I've created using Wicket.  The idea is to allow the user to modify a Google visualization (in this case a GoogleOMeter) through the web application.

Setup

1. Open up the directory and run the command: %ant -f build.xml
2. Once the installation is complete run the command: %ant run
3. Open a web browser and go to the url: http://localhost:7070/Wicket-Chart

Once the program you have Jetty running, you're ready to view the web application.  It is a single web page that will have a form filled with preset values.  After modifying the field values, you can view the changes to the graph by clicking the 'Submit' button at the bottom of the form.  This will refresh the page and update the fields and image to reflect the changes.

Testing

There are a few simple checks that my program covers when the user inputs.  My program will check to make sure that the user has filled in the values.  If the fields are left empty, they should default to 0.  Another check I implemented was to check to make sure that the min value was indeed smaller than the max value.  In the case that this test fails the min and max value will be set to 0 and 100 respectively.  If the value does not fall between the min and max value it will be assigned to one of the ends.

The final feature that my program provides the user is an automatic scaling system.  Google restricts their images to:

• 1 px ≤ width/height ≤ 1000 px
• width * height ≤ 30000 px

If an image is too large, Google will usually throw an error that looks like this:

Usually the user would get an invalid image, but I tried to implement a simple check that will scale images down to an acceptable range, while keeping the dimensions proportional.

Decathlon Design

This week I was able to create a few mock up pages for the Solar Decathlon system that our software engineering class is currently working on.  Initially we worked on our designs individually before we were assigned to groups of three or four students.  As I mentioned in an earlier post my background is in print layout and design working for our school's newspaper.

Initial thoughts

Main Menu

The key to working together as a team is to always have some an line of communication with every member.  Working in a group is nothing new to me, and working with a couple friends made this group experience even more enjoyable.  Being comfortable enough with your team to present 'off-the-wall' ideas without fear of being judged harshly allows the group to come up with some ideas that you wouldn't normally come up with on your own.  I must admit that I was also relieved to be working in a group because that meant that the work load would be spread out, which would allow me to focus on what I like to do, layout design.

When our group first formed, we decided to take a look at the mockups we had come up with individually and tried to take all the ideas we liked and tried to merge them into one system.  We had decided to start with my layout as a base design, which has since gone through some redesign.  For the most part I was to deal with most of the graphical aspects of our program, as my team would put as much content and functionality as they could on each page.

Design choices

Energy menu

As a group we had a general idea of what we wanted to include in the system.  I think the most challenging part of this assignment was how it should be displayed to the user.  For me, the design had to be both intuitive and innovative.  Throughout the past week I would always be pitching lines like "How cool would it be if we did... " or "I have an idea!  It's a little out there, but I think it's pretty good."  Many of these ideas didn't make it too far, but a few of them were accepted by my team.

As a computer science major, when you think of visualizing data you'll probably think of something like a bar chart or line graph.  While these types of visualization do a good job at presenting the user with information, they're not very enjoyable to look at.  For this project I have tried to come up with ways to present the user with data visualizations that they could provide the user with information they needed, be visually appealing, and if at all possible, be interactive with the user.  One of these ideas was the visualization I came up with for our energy menu which can be seen above.

Another important design aspect is to be consistent.  You don't want to have your users to be navigating to your system and then suddenly the entire layout changes and they don't know where to find anything anymore.  On all of the pages a constant menu bar is there to tie all the pages together.  The menu bar contains a widget and 4 main menu buttons.  On the left side of the page you have a submenu bar that corresponds to the current main menu that you are located in.

Project management
While working in a group, we used a combination of Subversion and Google Project Hosting which can find at: http://code.google.com/p/solar-decathlon-teamhawaii-2.  This setup worked out quite well as literally takes seconds to share your files with the entire team.


This project was an Issue Driven Design Project, which meant as issues came up, we would create a task in the Issues section of our Google Project, from there team members would try to handle the issues, whether it was to update files or create new pages.  Even though there are only three of us working on this project, having the issues down somewhere can be good because you can just check to see if there's anything that needs work on instead of having to remember it.

Thoughts so far
I think we worked very well as a group this past week.  There are a few more designs that I would like to come with in the next week.  I am also looking forward to programing these systems and have been trying to create designs that implement many of jQuery UI's.


********************************************************************************


Updates

As a group we put on the finishing touches to our mock up.  We ended up adding only a couple new pages: the Scheduler and Settings menus.

The design concept behind the scheduler was to allow the user to create a new event a simply as possible.  We want to incorporate the same 'drag' utility that has been provided throughout the entire program to allow the user to automate tasks with just a few simple clicks.

Scheduler

The scheduler also would have a chart that corresponds to the time period currently being viewed.  It will allow the user to predict how much energy is going to be used during that time period, and should have a general idea of the stress it would put on the system.  It could turn into a game of balancing tasks to make sure the house never takes on more than it can handle.  We'd like the graph's color represent the house's current load, green being a safe condition, and red being a high load.  By clicking on the graph we hope to allow the use to modify tasks near that time frame.

Settings Menu

In addition to the current functions available in the settings menu, I think there should be a 'snapshot' that can save the variables of the house's current state.  Then at any time the user could revert to the saved states with a single click.  This could apply to many different situations including things like a power save mode to a nice dining mode.  It would really be up to the users to set the house up exactly how they'd like it to be every time they use the snapshot feature, but the possibilities are endless.