Just a Thought...

I chose Wicket for this project, partly because I met some people who were very enthusiastic about the framework, and partly because I wanted something that was easily tested. My client requires a Java solution, so Ruby on Rails was out. I did a quick little shoot out between three Java framework options, and Wicket passed the first impression stage.

Now I’ve got a couple of iterations of software development with it under my belt and I’m starting to feel a bit more comfortable with the framework. As far as Java web frameworks go, its pretty good, but… I would do things a bit differently. The application is written in a style that would actually better fit Ruby, SmallTalk, Lisp, or some language that supported passing in procedures or lambdas (as the language gurus call them) natively. Take for instance the Link class. In order to do anything useful, you need to subclass and implement the onClick callback method—even if all you want is to go to another page. Here is an example:

add(new Link("wicketId") {
    @Override
    public void onClick() {
        // do fancy logic
        setResponsePage(new IncidentPage(incident));
    }
});

If this were Ruby the code would look like something like this:

self << Link.new("wicketId") do 
    // do fancy logic
    respond_with(IncidentPage.new(incident)
end

So am I complaining about semantics? Possibly. However, there are more “Java” ways of accomplishing the same class—particularly if you want to manage all business logic in a few classes. The more “Java” way would be something like using the java.lang.Runnable interface. That would allow you to set up an enum to include all your business logic like this:

enum IncidentLogic implements Runnable {
    EDIT {
        @Override
        public Page run() {
            // do fancy logic
            return new IncidentPage(incident);
        }
    }
}

and it would be used in your page like this:

add(new Link("wicketId", IncidentLogic.EDIT));

I’ve also experimented with using a dynamic proxy to bind any method to an interface. That would let you set up a logic utility class and reference it like this:

add(new Link("wicketId", Linker.link(IncidentUtility.class, "edit"));

It’s not as pretty but it works. Now here’s the nice thing about Wicket. If I feel strongly enough about it, I can create my own subclass of the Link object to implement that approach myself. My DynamicLink would look something like this:

public class DynamicLink extends Link {
    public static interface Executable {
        Page do();
    }

    private final DynamicLink.Executable click;

    public DynamicLink(String wicketId, DynamicLink.Executable action) {
        super(wicketId);
        this.click = action;
    }

    @Override
    public void onClick() {
        setResponsePage(click.do());
    }
}

In fact, I think I may just do that. It’s better than having bits and pieces of behavior spread throughout the Pages and panels defined in the application. I think I find it a bit frustrating when i need to do things like that just to format dates the way I want. Why can’t the provided DateFormatter let you set the pattern you wanted to use? Why do I have to subclass the one in Wicket just to get that feature?

At the end of the day, my complaints are minor and the Wicket community is helpful. I’m fine with that. The Wicket framework is probably one of the leaders in providing a test harness that can be used easily in your JUnit tests. That is a much bigger selling point to me.

I have to deliver a product using Java. Due to politics and approved baselines, etc. I can’t use Ruby on Rails. I’ve done my own thing in the past, and so this time I decided to save some time by incorporating Wicket, Spring, and Hibernate using auto-wiring, and attributes. Getting it all to talk together took the better part of a day, but I got it to deploy and run fine.

I’m an avid unit tester, so I was happy to learn that Wicket has some facilities to make testing a bit easier without forcing you to create your own Servlet mock objects. I was really happy about that, so I decided to try it out. Unfortunately, I ran into a rather nasty roadblock. Spring was complaining about the ContextLoaderListener not being loaded. It’s defined in my web.xml file, but the autowiring requires the spring context to be loaded in a particular location. Finding out how to fix that problem took me the better part of half a day.

The problem is that Wicket hides the ServletContext object away from you. You can’t add values, because the test framework is initialized on construction. Attempts to obtain the ServletContext and manually add the Spring web application context just weren’t working. That’s because it is configured when the WicketTester object is constructed and ignored after that. I needed to be able to inject my own ServletContext with the Spring integration taken care of. I finally figured it out here, because the forums just working for me. Please note that this is tested with Wicket 1.4 and not any of the earlier versions:

final MyApplication app = new MyApplication();
tester = new WicketTester(app) {
    @Override
    public ServletContext newServletContext(final String path) {
        // web context
        ServletContext context = new MockServletContext(app, path);
        // spring context
        XmlWebApplicationContext spring = new XmlWebApplicationContext();
        spring.setServletContext(context);
        // configure spring
        spring.setConfigLocation("classpath:application.xml");

        // put spring where Wicket can find it
        context.setAttribute(WebApplicationContext.ROOT_WEB_APPLICATION_CONTEXT_ATTRIBUTE, spring);
        return context;
    }
};

So let me explain what I did. I created an anonymous subclass of the WicketTester class so I could override the factory method “newServletContext” to inject my spring configuration. Done properly, the wicket folks can take care of this by providing a SpringWicketTester subclass in their spring integration library. The SpringWicketTester would let you specify the location of your Spring configuration file, and it would override that method for you. For now, you’ll have to do it yourself.

I put the WicketTester initialization in a subclass of the JUnit TestCase class. That way I don’t have to repeat myself for setting up my Wicket testing.

I’ve been spending a lot of time looking into accessibility for web sites to finally get a grip on what needs to be done. Sadly, it is overlooked by the big guys when it doesn’t really have to be so hard. There are several types of disabilities including:

• Visual (full, partial, or color blindness; Photo-Epileptic Seizure [PES] susceptibility)
• Motor control (full or partial disabilities preventing the use of a mouse)
• Cognitive disorders (dyslexia and the like)
• Auditory (full or partial deafness)

The main issue with accessibility is the lack of knowledge and reasonable resources available to help. In particular, the tools that are needed to support people who have the disabilities are expensive and complicated. There are tools available that everyone can have at their fingertips that will help. Most are Firefox plugins, some require you to use an external site. Below are a few of the resources I’ve found:

• Fangs screen reader emulator
• Color contrast analyzer
• Total validator
• Colorblind Webpage Filter

The folks at WebAIM have several good recommendations. For example, you know those “edit in place” controls on Flickr? You can make them keyboard accessible by applying the attribute “taborder=’0’”. The control will be in the page’s natural tab order. I did a little experimentation and the control supplied by Script.aculo.us can take care of all these things for you. The only issue is that IE 6 won’t put the control in the tab order unless it is in the original markup. Dynamically changing the DOM to put it in won’t put the control in the tab order with that browser.

This is a departure from the film and darkroom printing posts, so apologies and I’ll be back on that later.

I’d like to think I’m a pretty good application designer, although some of the things that I’ve seen on other sites have left me a bit jealous. Face it, I didn’t have a background in web design. I know what I should be able to do, and what it ends up looking like. The problem is familiar to anyone who has designed for the web: IE and non-standard implementations of HTML, JavaScript, CSS, etc. The way it’s supposed to work is you whip open the standards, see what CSS can do for your style, and do it. When you see impressive use of CSS from the CSS Zen Garden you start thinking, why can’t I do that?

I come from an application development background, where we can design our desktop apps with nice grid based layouts and do all kinds of fancy things. From there I went on to web development, and have always been frustrated with my inability to escape using tables for layout. Tables are great for lining things up, but they can cause their own issues when you start incorporating AJAX and other goodies. Then you have to worry about what your client’s browsers can do and what they can’t do. At least I don’t have to worry about Netscape 4 and it’s 30 second lag time to sort out nested tables anymore.

So, I think I’ve solved the worst of my problems. I solved the nonstandard JavaScript implementation problem by using Prototype.js which really made it easy to take care of AJAX support for tags and made some of my complex form handling easier. I was still doing my own JavaScript implementations of type-ahead controls and the like. Then I discovered Scriptaculous which took the pain out of 90% of the more advanced control issues I had.

But what could be done between the presentation hell that Internet Explorer puts me through compared to other browsers on the market? IE positioned things just a bit off, and handled the positioning of divs a little crazy as well. If I was going to both have a nice visual grid layout and use markup the way it was intended, I needed a solution like prototype and scriptaculous to help me out. Enter Blueprint CSS to take away the pain and suffering of using divs to align your content. Now blueprint provides some nice little “plugins” that use CSS to do pretty buttons or decorate links with graphic icons all with pure CSS. The graphic icons degrade gracefully as IE 6 does not support the type of selectors it uses. However, the library included a couple PNGs with transparencies. So what does one do about the fact that IE 6 does not render that nicely? Fix it up with Unit PNG Fix of course.

Now my header looks like this:

    <head>
        <title>My Site</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection">
        <link rel="stylesheet" href="css/print.css" type="text/css" media="print">
        <!-- Fix nonstandard IE spacing -->
        <!--[if lt IE 8]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection"><![endif]-->

        <!-- Site CSS -->
        <link type="text/css" href="css/mysite.css" rel="stylesheet"/>

        <!-- Fix IE6 PNG transparency issues -->
        <!--[if lte IE 6]><script type="text/javascript" src="lib/unitpngfix.js"></script><![endif]-->

        <!-- Prototype.js/Script.aculo.us  -->
        <script type="text/javascript" src="lib/prototype/prototype.js"></script>
        <script type="text/javascript" src="lib/scriptaculous/scriptaculous.js"></script>
    </head>

It seems like a lot, but it makes my life so much easier. I highly recommend Head First Web Design as it covers all these wonderful concepts and more.

In a couple words? Advanced color management. What does this have to say for the way the web has evolved? It’s something we all knew inately, something so simple yet so profound. Looks are important. Magazines, catalogs, and product placement people have spent thousands on making sure their pictures are beautiful and accurately show the product they are selling. Then along came the web. Sure it’s convenient, but this picture they spent thousands on getting just right for press now suddenly looks dull and lifeless on the web. It sure makes advertising less slick, and it presents harsh realities for web designers. Have you ever designed a graphic to blend in with a color only to have the browser change it on you? You can tell the difference between the graphic and the web elements pretty easily.

It only goes to show how powerful the pull is for visually appealing graphics. I haven’t spent a whole lot of time with the new Safari, so I don’t know if it addressed any of my gripes. As a photographer, I am quite happy with this turn of events. Black and white is not always just black and white. There are toners out there to provide some color and make the picture even more interesting. These subtle changes are lost without good color management.

It’s not surprising that something like this would come from Apple. Apple has always catered to the creative professional. It’s the one market that has supported them through the years. However, it is somewhat surprising coming from Firefox. What would geeks have to know about color management and what it can do for you? I’m sure it has to with the fact that they are supporting several different platforms and the web pages look different on each one. It’s not just the default gamma level (for Macs it is 1.8 and for PCs it is 2.2, and Linux depends). It’s the whole color management thing.

Assuming IE 8 follows suit (it’ll be IE 9 if it isn’t 8), this will help make the web a more appreciated place. It’s easier to look professional when you can expect a standard way of showing off your work to everyone around the globe. The web isn’t just about text. It’s also about looking good.

First, I will be the first to say that RSS feeds are great (and if you like Atom or other feed flavors, they’re included). I mean how else would it be easy for me to see what’s new on someone else’s site? And if you are anything like me, you prefer feeds that give you the whole article, and not this “summary” crap. The feeds are terribly useful, and if I’m in a rush I’ll just read the feed from whatever reader I use. Sometimes the only way to print an article is to do it from the reader. The theme for a blog can get in the way of a clean print, cutting off important text.

So why then do I ask the question of whether RSS feeds hurt the web? I mean if they are so useful and all, what harm can it do? Now that I have to tools to analyze my traffic a bit better, I’ve noticed that a good portion of my traffic is either from personal readers or private online readers. There is very little in the way of link traffic. Sure this incarnation of the blog is relatively new, and most of my readers have followed me here. But the spirit of the World Wide Web is to have links among pages so that you can find information and spend all kinds of time following these links to good information. Unless you have your blog also syndicated at an aggregation site like Planet Apache you are reliant on your friends posting links to your blog on their site. That’s happening less and less.

Exacerbating the Issue

Most of my Apache folks whom I used to work with closely (and now less so) used to have a “blog roll” which listed other blogs that were of interest to them. We had mutual links on our sites. Now the blog roll is passé and almost no one has one of these any more. I’m not speaking from the angle of a popularity whore, I’m speaking from the angle of trying to find out what’s going on in the industry. Any one person is only going to know a fraction of what’s out there, but every once in a while you’ll run across a link to someone who is multi-disciplined and learn a whole lot more. The blog roll was a convenient way of stumbling across someone like that.

We have search, right? After all, if Google exists we will be able to find it…. Remember that Google uses links to rank the search results. The more links to a resource the higher it’s rank in the results. You may have a good article, but it’s buried under 30 pages of crap. Someone else may have a better article, but its buried under 50 pages of crap. Without the links to say, “Wow, I found this article and it was great!” or building on someone else’s article and adding your own take on things the search results will continue to stink. Even the more esteemed folk like Bruce Eckel and Paul Graham get fewer links.

So what do we do?

I like the power that syndicated feeds give the user, and they can be a useful tool to stay abreast of important information. They are particularly useful when you already know who you want to pay attention to. However, for our own blogs, we need to make sure we provide links to sources of information. It should be a common courtesy, but I’m just as guilty as the next guy. You don’t have a lot of time, you remember the content of something you read, but you can’t remember where it came from, etc. I’m trying to get better about this myself, but it does take some work.

Of course, people won’t link if there is no reason for them to do it. If all you do is spit out garbage, folks might get a few laughs out of it, but no desire to spread the news. In short, give folks a reason to link. If you’ve found a way around a big issue that caused you some heartburn, share the news and how you got out of it. At the very least, you may need it again—but more than likely you are not alone.

The last option is to make your site much more than just a blog. This takes a lot more effort, but if people have a reason to keep coming back besides listening to your words it really helps.

One of the things I can‘t stand about a number of web site designs is the concept that just because there is a defined region for something does not mean it has to remain in a box with borders. I‘ve seen so many web sites where you have boxes inside of boxes and borders all over the place. It‘s a visual mess, and only contributes to the feeling of clutter.

In the current project, since I currently am that project, decided to do things the way I thought they should be done. So far everyone is liking it. Sure we hired a UI designer to get us going in the right direction, but I took his design and extended it even further. Here are a few guidelines that I used for designing the layout:

• Use white space to divide your page. You‘d be surprised how little white space is needed to provide a good separation.
• Only use a border when you want to call something out. The only time I have a border around an area on the screen is when I‘m displaying a message to the user.
• Alternating white/gray for long lists is helpful. It helps provide the visual impression of the box without having a border, and helps tie together multi-line items in a list.
• Even better for lists is to have a bigger area with free formatting for each item. For a list of messages, I have the reference ID, subject, excerpt from the body, and the date of the message in a repeating structure. It has a bit more white space, is more readable, and looks more professional.
• An underline under one header (not all of them) provides a nice visual separation for vertical sections without enclosing the whole thing in a box.

Designing a web page for visually dense information is a difficult task, and it can make life hell for the user if you are not careful. Another side effect of using too many borders and boxes on your screen is that it makes the site look cheap. It looks amateurish and unsophisticated. The key to visual sophistication is visual simplicity. Remove the clutter so that the user doesn‘t see unnecessary things.

During my current project, I noticed a certain pattern emerging. Like many dynamic web sites, the content is divided into specific regions to show a type of information. For example, the far right column is for displaying associated tags, the far left column is for displaying controls such as changing what we are looking at or going to the administration console. Even the center has reusable pieces.

Because I also had a master layout template, I wanted to embed the associated content in the same way every time it applied. I needed a way to reference the information in the template, but only have it displayed if a request attribute was set. The JSP Expression Language is perfect for this job in that it will let you call a get method on the object and embed it if the object is present.

Instead of embedding the display directly in the template and repeating it everywhere it was needed, I embedded the display into the object that controls that part of the site. The most prevalent logic is my Scope object. The scope object manages all the filters applied to the results, how many records are in the set, how big page sizes are, as well as what page we are currently looking at. Information from this object is needed in a few places. After all we need it to generate bread crumbs, provide the “Page X of Y“ indicator, show the paging controls, and show the browsing tool. Instead of embedding all this display logic in several pages, I ended up providing convenience getter methods to display the information any time I needed it.

When it works it is a wonderful thing. I only have to change one object to fix every page where there is pagination. The trick is to keep the HTML simple and style it with CSS. However, the methods are pretty ugly. It‘s an area where languages like Ruby have a leg up on Java. Text processing is so much easier and elegant.

One thing I wish I could do is manage a “JSP decorator” for these objects so that the JSP was easily used and embedded on the fly. Will I be creating such a beast for this project? Not likely, and the verdict is still out on whether it will be a net positive after all that work to put it together.

The fact that I am using plain old Java objects to control portions of my site is pretty cool. It feels right — at least for this type of application. The effort to put it together is fairly minimal, but I do lose the ability to adjust things with the server running. Every time I want to see the effects of my changes, I have to stop the server, recompile, publish, and restart the server. Thankfully, Eclipse makes that as easy as pressing two buttons. It is a pain point, however small.

My Java ActionPack package is coming along rather nicely. For those who don’t know, it was designed on the founding principles of Ruby on Rails (or at least its ActionPack portion), but evolved in a Java way. I shouldn’t need to state the obvious, but Ruby and Java are different languages. Frameworks developed on them will be different because they have different affordances ¹ so they will take different evolutionary paths even if they are founded on the same principles.

I added a feature to make controller inheritance work better. It‘s natural to assume that all the filters and actions from a parent class are present in the child class. You get that for free (to a certain extent) with the language itself. But what about the views associated with a controller? In my real world example, I have a base “Message“ type and a base Message Controller that provides the core functionality to the user. I also have several (at least potentially) subtypes of messages, and I need to allow specialization for those message types. Really I want everything to be the same, but only override the message display (for the header information). I wanted to be able to create the “Cable“ controller and then only provide an override for the “header“ action and leave everything else the same. Since views are separate animals from the controller, and the view selection is based on the controller name, there was a problem.

If I set my browser to “cable/list“ I wouldn‘t get the list of cables as expected. I got a 404 error. I decided that the best way to provide expected behavior when we link controllers and views like this was to key the view name off of the controller that implemented a method. Since the list action and associated view was created on the message controller, the framework now detects that and shows the message/list view. When I override the “cable/header“ method and create the “cable/header” view, I have the specialized view.

It‘s a long way around to say that the view controller mapping is inherited so that the whole web application becomes object oriented, so to speak. It builds on the same knowlege that we take for granted in OOP, and maintains those same expectations. It‘s actually a fairly simple solution to a simple problem — assuming you are thinking in OOP terms.

¹ http://en.wikipedia.org/wiki/Affordance

This is what not to do. In this day and age of tagged files and browsing, we have a potential danger—particularly if you allow your users to narrow the results of their browsing by combining tags. Because the tags can be combined in any number of ad hock combinations site crawlers feel compelled to follow every link and make these combinations. If you are not careful, you will have a near infinite number of ways to get to the same file.

In our particular case, we have communications from embassies being displayed. These communications are tagged with a lovely folksonomy that is user defined. As a convenience to the user, we provide other tags that the communication is marked with. The problem is that those links further narrow the browsing of the communications. For example, let’s say the user started browsing a hot topic which is a term that the embassy has chosen to highlight. That term is “trade”, and after browsing a bit they find a communication that looks interesting. At the bottom of the communication are other tags that are associated. Let’s say the user clicks on the tag “sanctions”. They now get a list of communications with both the tags “trade” and “sanctions”.

It gets worse as each page in the list also has a set of up to 50 tags that are associated with other communications within this space. The user can click on any of them to narrow the list of communications they are whatching. Because there is no heirarchy, and because they can be combined in any order, a web crawler feels compelled to try every combination. Because these combinations also are reflected in the URL (part of that contract to get back exactly where you were by sending the URL to someone), they appear to be unique pages to your crawler.

The net result is that if the crawler is not throttled, it will throttle your server. Which is what happened in our case. We are going to have to rethink some of the navigational mechanisms, but in the short term we will have to mark certain URLs as rel=”nofollow”.