Raible Designs

Should I ditch Tiles in AppFuse?

I've haven't been developing applications with AppFuse since May. Instead, I've been using Equinox. One of the main things in Equinox I've grown to love is SiteMesh. It's worked in all the webapps I've written, which utilize frameworks like Struts, Spring MVC, WebWork, Tapestry and JSF. Tiles will only work in 3 of those.

I think it's time to make an executive decision on AppFuse and ditch Tiles in place of SiteMesh. It's faster and easier to develop with, and it doesn't get in your way. In fact, I didn't have to change a single line of SiteMesh-related code to support any of the aforementioned frameworks. Furthermore, using SiteMesh would also greatly reduce the duplicate between frameworks. I've thought about keeping Tiles around, but it's a pain in the ass to maintain parallel sets of documentation.

Whaddya think - any reason you can think of to keep Tiles? I can't. In fact, I think I'd cringe if I had to start my next AppFuse-based project w/o SiteMesh.

My JSF Experience

Of all the MVC Frameworks I've developed with in the last few weeks (Struts, Spring MVC, WebWork and Tapestry) - JSF was by far the worst. And it's not the implementations that are the problem, it's the spec itself (as far as I can tell). Plain and simple, it does not simplify web development.

I spent 3 days developing a simple JSF app - most of it which I had done in the first day. The last 2 days have been spent migrating to MyFaces and trying to find clean ways to do things. My perspective on JSF after this experience? Run away. Run far, far away. All of the above mentioned frameworks are MUCH superior to this technology. Let's get on with the things I learned.

• MyFaces handles duplicate posts nicely. If you hit "reload" on your browser after saving a record, you get presented with an empty form rather than a duplicate record. I believe I got a duplicate record with Sun's RI.
• The ability to specify an "action" attribute on a button (or a link) and them map that action to a page (in faces-config.xml) is pretty cool.
• Every button or link clicked results in a form post. That's just wrong - why can't I have true links like the web is supposed to? So much for bookmarks.
• Saving state on the client results in enormously long URLs and/or hidden fields.
• JSF support is fairly non-existent. Unlike the other MVC frameworks, the MyFaces mailing list has hardly any traffic and the Sun forums aren't much better.
• The MyFaces website seems to be down whenever I want to look something up on it, like right now.
• I did find some CRUD examples, like this this one, but was disappointed to find that i18n is not considered for setting success messages. I ended up using the solution described in this post. 6 lines of code to set a success message - you've got to be kidding me! Most frameworks have a simple 1-2 liner.
• Waiting for JSPs to compile the first time has surprisingly become painful after using Tapestry, Velocity and FreeMarker for the last 2 weeks.
• Integration with Spring is fairly easy (code is in CVS), but MyFaces spits out an error when it shouldn't be.
• Validation messages are ugly. For instance, when a required field isn't filled in, I get: "lastName": Value is required. I was able to override the default messages, but I was never able to use the label of the field (vs. the field's id).
• The <h:messages> tag is practically worthless. Sure it's great for displaying messages (error and success), but that's about it. It has a "layout" attribute that doesn't even work in Sun's RI, and in MyFaces it just wraps a <span> with a <ul><li> or a <table>. Both of these layouts are useless b/c you can't set a css class on them. I ended up using "table" and having to set a generic CSS rule (width: 100%) in order to get the message/error bar to show across the top of my page. This tag also doesn't allow you to escape HTML.
• The <h:dataTable> component is nothing like the displaytag. MyFaces claims to have a pageable/sortable component, but it requires custom logic/methods in your managed-bean. Yuck. I ended up using <h:dataTable>, which has neither sorting or paging. This is only because I couldn't get an <h:commandLink> working inside a displaytag column.
• JSF-created apps are pretty much untestable. Managed-beans are testable, but the UI seems really difficult with jWebUnit and Canoo's WebTest. IMO, it should be possible to specify a URL to edit a record (i.e. editUser.html?id=2). With JSF and my master/detail app, the link to edit actually sets about 5 hidden form fields with JavaScript and then submits the form. I could probably figure the URL out, but it'd be ugly. Also, the MyFaces <h:dataTable> will not render an "id" attribute if you specify one. This is needed to verify tables and their data with jWebUnit.
• When using "ant reload" to reload my application (using Tomcat's Ant Tasks), I kept encountering a ThreadDeath error. This seems to be specific to MyFaces as I never saw it with other frameworks or Sun's RI.

Like Tapestry, I felt like I was banging my head against the wall a fair amount. However, with Tapestry (and all the other frameworks), I was able to get exactly the behavior I wanted w/o too much work. I could produce clean and user-friendly error messages - (Tapestry already had clean required messages built in). I was able to write a jUnitWebTest to test all CRUD activities. With JSF, I was able to test one thing - adding a new record. I couldn't edit it b/c the JavaScript support (which I tend to not use) puked every time it encountered a JSF-generated JavaScript function.

My opinion after all of this? If you know Struts, Spring MVC and WebWork are fairly easy to learn. WebWork is simpler and elegant, but Spring MVC supports more view options out-of-the-box. Tapestry is cool, but you'll have to invest a lot of time into learning it and you'll probably get caught up in its cult and forever be claiming "Tapestry Rocks!" which can get annoying to your fellow developers. Finally, I can confirm that SiteMesh rocks - it worked for all the frameworks I used and I never had to change a single line of code.

Whatever you do, don't use JSF. Not yet anyway.

Get your designs for free

From Niel:

While I'm confident in my web-based application development skills, I really suck at web design. Fortunately there is Open Source Web Design which provides hundreds of web designs to help people like me. Most of the recent entries are CSS-based designs that show-off the power of CSS.

I suck at web design too, so I dig sites like this. The CSS Zen Garden is another great resource. Their designes are free for non-commercial use. If you contact the designers, you might get permission to use them like I did.

Eclipse Plugins Updated for 3.0

I finally got around to updating my Eclipse Plugins package for Eclipse 3.0 → Download or read the Release Notes. Below is a list of plugins included in this download. I dropped Lomboz and JSEditor b/c they didn't work at all with 3.0 on Windows - which I expect is the largest user base. Additions include CSS Editor and Doclipse.

• XMLBuddy 2.0.10 - XML Editor
• Colorer 0.6.0 - General Syntax Highlighter (JSPs, HTML, CSS, etc.)
• Jalopy 1.0b11 - Source Code Formatter
• Easy Explorer 1.0.1 - Open Explorer/Finder
• Tomcat Launcher 3.0 beta - Run and debug Tomcat
• CSS Editor 0.0.4
• Doclipse 0.7.0 - a Javadoc tag plug-in

Colorer and Jalopy don't work on OS X, so I wouldn't even bother installing them. Colorer has issues on Linux too. For OS X, I'd recommend buying a subscription to My Eclipse. It's only $30 and if you can afford a Mac, what's another $30? For a source code formatter on OS X, I recommend buying IDEA - it's only $200 - same cost principle applies. I tend to use IDEA a lot more on the Mac simply b/c it's faster and you don't need to install all these plugins. However, I've been stuck a lot in Eclipse-land lately because of it's multiple-project-in-one-pane support - as well as it copies and pastes code nicely into Word.

In addition to these plugins, I recommend installing the Spring IDE Plugin if you're using Spring [HowTo] - and Spindle if you're using Tapestry. Hopefully, distributions like this will become unnecessary with the introduction of the Web Tools project.

[ANN] AppFuse Light 1.0 - a.k.a. Equinox

For those of you looking for an AppFuse Light, I have good news for you. I've actually been sitting on it for several months now, but now I'm prepared to release it. It's name is Equinox and it's much, much simpler than AppFuse. Equinox has only one build-time dependency (CATALINA_HOME being set for the servlet-api.jar). There's no code generation and no features - not even security. However, it supports building, testing and deploying from Ant, and even has support for managing Tomcat out-of-the-box.

To get started with Equinox, you can download the QuickStart Chapter from Spring Live. This chapter shows you how to develop a simple webapp using Struts, Spring and Hibernate - which talks to an HSQL database. Struts and Spring are integrated using the ContextLoaderPlugin and all tests are designed to be run out-of-container using JUnit and StrutsTestCase. Equinox ships with project files for both Eclipse and IDEA so you can develop and run the tests in either of these top-notch IDEs. There's also a demo available. Thanks to Boér Attila for the kick-ass CSS.

If you like what you see in the QuickStart Chapter, there's much more in the other ERP chapters of Spring Live - now available for download. Too see what's in the other chapters, checkout the Chapter Summaries.

This is a nice milestone - feels good to have made it this far. Have a good weekend!

Quick 'n Easy SiteMesh Tutorial

SiteMesh is a kick-ass tool. It's much easier to use and configure than Tiles, although I don't know if its as powerful. Tiles has Controllers that you can assign to a definition and it supports easy i18n. I've been using Tiles for over 3 years and I've only used SiteMesh for a few months. However, SiteMesh already seems to suite all my needs. I'm guessing that most people use Tiles over SiteMesh because they haven't given SiteMesh the 10 minute test.

Anyway, back to the point of this post. Rick Reumann has put together a nice tutorial titled Use SiteMesh instead of Tiles.

I think you will quickly see the benefits after going through this brief example. In summary, the main reason I like SiteMesh more than Tiles is that SiteMesh is much easier to configure and use (less typing and easier to understand).

Good stuff - thanks Rick! As part of the WebWork integration into AppFuse, I was planning on using SiteMesh. I'm already using it in Spring Live sample app and it's pretty slick. I haven't had to touch it since I integrate it. Compare this with Tiles where you have to add a new definition (or JSP) everytime you want a new page. If nothing else, I think Tiles needs to learn from SiteMesh and add a Filter that can be used to decorate pages.

How do you make your source tree Eclipse/JUnit friendly?

I've never had a problem getting builds and unit tests to work with Ant. However, unit tests run faster in an IDE, so I'm trying to refactor some code to allow for testing in the IDE. My current directory structure looks like this:

-- project
   - web
     - WEB-INF
       - classes

I need both "WEB-INF" and "WEB-INF/classes" in my classpath. There's XML files under WEB-INF for Spring and Commons Validator, and there's a log4j.xml under WEB-INF/classes for log4j. These files are all in their natural locations as far as all the projects I've seen. However, Eclipse won't allow me to nest classpaths - so it's virtually impossible (as far as I know) to add both directories to my classpath. Any ideas how to workaround this Eclipse "feature" are appreciated.

For those "IDEA is better" folks - I agree. IDEA allows me to add web, web/WEB-INF and web/WEB-INF/classes to my classpath with no issues.

[ANN] AppFuse 1.5 Released!

I finally found time to fix a few minor bugs in AppFuse 1.5 Beta and update all the tutorials. Now there's 3 new HowTos for developing a Master/Detail page using Spring's MVC Framework. After writing the tutorials, I found a new appreciation for Spring's MVC. I really like its lifecycle and (if given the opportunity) I think I'll use it for my next project. Without further ado, here's the relevant links:

• Download (~12.2 MB for src, ~5.6 MB for bin)
• Release Notes
• Mailing Lists
• Demo

Enjoy!

BTW, if you live in Colorado and you want to learn more about AppFuse, Spring and AppFuse Light - stop by the Denver JUG on June 9th or the Boulder JUG on June 10th. I'll be talking at both events. As a teaser, here's the bullet points from my slide on AppFuse Light:

• Designed for quick apps with few requirements (i.e. prototypes)
• Uses Sitemesh for skinning
• No build-time dependencies (i.e. XDoclet), no out-of-the-box security
• Web tests do not depend on container
• All code can be easily ported to AppFuse if you need AppFuse features (i.e. security, i18n, gzip compression)
• Simpler, lighter, faster (for building and testing)

[NFJS Denver] Howard Lewis Ship and Creating Tapestry Components

Tapestry - "we try to make the simplest approach the correct approach." I haven't been blogging much of this session b/c I'm just sitting back and soaking it up. It's a good session and Howard is a good speaker. I'm learning a lot about Tapestry and it's philosophy about web development. I especially like the line-precise error reporting - it's something that all frameworks need to do better.

Tapestry looks very cool. You basically write an abstract Java class that has abstract methods for properties you define in an XML file. Tapestry them implements this class and its abstract methods. The class that Howard wrote to handle a login form is very simple - it's only about 7 lines long - and 4 of those are abstract methods! The HTML form is cool too - not much of the HTML has changed since it was bare-bones HTML. He's merely added some a few "jcwid" and "listener" attributes to some of the elements.

Tapestry is a large system of subsystems, all implemented behind interfaces. It ships with its default behavior (i.e. page/template pooling), but you can (supposedly) easily change this behavior or implement custom classes. Internationalization is a first-class citizen in Tapestry - no surprise here since it is in most MVC frameworks. Tapestry 3.1 will embed Hivemind at its core and will provide much easier integration with tools like Hibernate and Spring.

Tapestry's "Validation Subsystem" looks very rich - providing both client side and server side validation. It uses Field decorations to highlight both labels and fields when validation fails. By default, it promotes using CSS to change colors, backgrounds, etc. There are a couple of Helper Beans for validation: the Validation Delegate and the Validator. It's pretty neat that you can bind a label to a field in XML. Since HTML already allows binding <label>'s to form elements - you'd think that Tapestry could harness this by parsing the template. I suppose it's just easier to require the XML binding - then you don't have to worry about the user writing invalid HTML.

Howard is trying something new in this presentation - real-time coding. I use this in my presentations and it works pretty good. He's having some serious issues b/c he can't mirror his laptop's monitor with the projector. This obviously makes it difficult to code since the slide show is his monitor. I try to use pre-canned code (i.e. IDEA Live Templates) so there's less chance of fat fingering things. I also use a Mac - on which mirroring works great.

The "Page" object is pretty cool in that it contains a bunch of lifecyle methods you can override. Most frameworks don't have lifecycle methods. I guess Spring's SimpleFormController does with onSubmit, onBind. Lifecycle methods are a Good Thing IMO. The formSubmit() method is always called, regardless of validation errors. Therefore, you have to get the IValidationDelegate and check if it has errors before continuing. I wonder what the logic behind this is? Most frameworks seem to support automagical validation - with no further work required by the programmer. I guess it's kinda cool b/c you can continue with validation errors if you want to. Choice is always a good thing.

Howard just showed us a client-side validation example. The wicked cool thing is that the client-side script is configured in a .page file rather than in the HTML template. Most frameworks I've seen (that support client-side validation) require you put something into your template. This was a good talk, I'm definitely interested in Tapestry and excited to start learning it in the next couple of months.

CSS Drop Shadows

A List Apart has a new article on how to make CSS Drop Shadows that work in IE. The first article shows how to do it for all the other browsers. I dig the technique, so I've decided to use it on this site. To add it, all I did was add the following to the <head> of this page:

<style type="text/css">
    div.alpha-shadow {
        clear: both;
        float: left;
        background: url(http://www.alistapart.com/d/cssdrop2/img/shadow.gif) no-repeat bottom right;
        margin: 5px 0 0 10px;
    }
    div.alpha-shadow div {
        background: url(http://www.alistapart.com/d/cssdrop2/img/shadow2.png) no-repeat left top !important;
        background: url(http://www.alistapart.com/d/cssdrop2/img/shadow2.gif) no-repeat left top;
        float: left;
        padding: 0px 6px 6px 0px;
    }
    div.alpha-shadow img {
        background-color: #fff;
        border: 1px solid #a9a9a9;
        padding: 4px;
        margin: 0;
    }
</style>
<!--[if gte ie 5.5000]>
<link rel="stylesheet" type="text/css" href="http://www.alistapart.com/articles/cssdrop2/ie.css" />
<![endif]-->

Then I wrapped the following image with:

<div class="alpha-shadow">
  <div><img src="..." alt=""/></div>
</div>

If I decide I like this, I'll make sure and download the images/stylesheets locally so not to hog bandwidth from alistapart.com. Too bad there's not a technique to make text drop-shadows work. To see what I mean, see my Struts Resume demo. All the <h1> tags (titles) should have a drop-shadow - and they do in Mozilla, Firefox and Safari (but no go in IE).

The real question is - how do I get it to NOT float:left, but still get the drop-shadows to work? I guess I'll have to ask that question on alistapart.com.

Hmmmmm, my version doesn't work in Safari, what's up with that?!