30. WicketChart

Download Wicket Project - Click Here (verify build successful)

In our software engineering class we finally got back to programming. I've been pretty busy over the course of the past week, so I didn't have a chance to turn in the assignment on time. I did, however, feel that this assignment was important enough for me to complete regardless of whether I get credit for it or not.

Our assignment:

Using Wicket, 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. To see what a GoogleOMeter is, go to http://imagecharteditor.appspot.com/, then click "Show full gallery", then scroll to the bottom. The last three visualizations are GoogleOMeters.

Your form should allow the user to:

• Set the start and end of the Y axis;
• Set the title
• Set the width
• Set the height
• Provide a data value for the pointer

Prior to doing this, we were tasked with reading the Wicket in Action book:

I managed to read about 100 pages of it. I actually started reading the first 59 pages, put down the book and proceeded to look through some examples first, and then went back, re-read the first 59 pages all over again, and then went on to around page 100 or so.

My Wicket App

I was able to then complete the following web application:

I decided to make the height and width adjustable from both the image attribute as well as the chart's URL (the dimensions of the chart itself are rendered according to dimensions embedded in the URL).

As required, I allowed the user to modify the Y-axis. I also made any change to the Y-axis correspond to a change in the scale of the chart. For some reason, modifying the Y-axis does not affect the chart unless you make the scale identical.

The rest of the user changes were pretty easy to implement once I got things rolling.

As far as testing goes, I first tested to ensure that the page was still rendered after the user entered a value (in this case, changing the chart's width).

The second test involved grabbing a rendered tag value to check whether the user entered width updated the width of the chart. Since the chart's width is stored in the URL of the image, I did a search through the value of the src tag for the width's new value. Both tests were successful.

Software Engineering

I started out with the example provided to us and made minimal changes to it. Each change was tested before moving on. I also commented as I went. As a general rule, I tend to over-comment, although not to the point of being El Capitan Obvious, but enough so that if I were reading it again, the thought process would be clear.

I think as far as software engineering goes, Wicket does allow for a lot more modularity in breaking things up between coders and designers. I've often viewed the source for a page only to be bombarded by code intermixed with html markup. Wicket seems to allow for some common-sense separation between the two - so that coders can do their jobs while designers can do theirs - concurrently.

Summary

Overall, I thought that the way this was presented to us was a good way to learn a new language/framework. It's good to start off with some tutorials or a cursory look through a book and then dive into code after that. Then, diving back into the book allowed me to have an even better understanding of things. I think this will serve as a good model for me as far as learning software languages goes.