Raible Designs

Added Google search to this theme

The idea hit me like a cold beer pouring down my throat on a hot summer day. Crisp, clean and exciting. I've been wanting to add a search form to this theme, but I didn't want to add another tab, and putting it anywhere in the header would conflict with the background image. And then I spotted the perfect spot. Right under the categories, in the banner of the first entry on this page. With a little love from the DOM, you can now search this site using this theme and Google. Here's the relevant code that I added to the bottom of this theme.

<div id="search" style="display:none; margin-top: -17px; text-align: right">
    <form id="searchForm" method="get" action="http://www.google.com/search"
        onsubmit="return search()" style="margin: 0; padding: 0">  
        <input type="text" id="q" name="q" size="20" maxlength="255"
            value="search this site" onclick="this.value=''" /> 
</div>
<script type="text/javascript">
    // get the first entry shown in the page and append the
    // hidden 'search' div from above
    document.getElementById("entries")
            .getElementsByTagName("div")[0]
            .appendChild(document.getElementById("search"));
    toggle("search");
    function search() {
        form = document.getElementById("searchForm");
        if (form.q.value == "search this site" || form.q.value == "") {
            alert("Please enter a search term to continue.");
            form.q.focus();
            return false;
        } else {
            form.q.value = form.q.value + " site:www.raibledesigns.com";
            form.submit();
        }
    }
</script>

Boy oh boy does the DOM make it easy to do web sites! Seems to work in all the browsers I use regularly (IE/Moz on Win, Camino/Safari on Mac). It doesn't work in Opera 6, but does in Opera 7. Now back to that cold beer - I'm gettin' thirsty...

Getting back on the road to XHMTL compliance

This site has failed to validate for many moons now. I think ever since I added the twisty comments. So did some work today to make the twisty comments XHTML-compliant. I almost got there. The only problem I experienced was with the <iframe> that's used to submit the comment. Basically, if I want to be XHTML 1.0 Strict, I need to create the iframe on the fly (with JavaScript), as well as set the form's target to this frame. It all works fine and dandy in Mozilla, but I can't get IE to let me set an "onload" property for the iframe. It just doesn't work. So I've reverted to XHTML 1.0 Transitional and I've stuck the iframe in the page, allowing me to set the onload property manually. Other changes I made to facilitate better compliance (this is mainly so I can fix it in Roller later).

• Replaced "insertionid" attributes in weblog.vm with "id" attributes and adjusted JavaScript in comments.js accordingly.
• Various small fixes to themes/x2/styles/comments.css.
• Edited my "_day" template to end the </p> before the #showCommentsDiv.
• Moved <a> tags inside of the <h1> tags.

So my remaining problems are the onload on the iframe and the fact that the left arrow doesn't show up in IE next to the comments div. Oh well, I can live with one measly validation error.

No Fluff, Just Stuff

In the interest of no fluff, just stuff, I've altered my theme. The old theme was 162.7 KB for this entire frontpage (in Mozilla: File -> Save Page As...), while the new one is 101.8. So I've reduced it quite a bit, considering that there's around 50K of pictures from posts and such. Thanks to all who suggested reducing the page size. I don't know how long I'll keep this theme intact, at least until the end of the month probably - in hopes of saving some bandwidth. I hope you like it, and if you don't - let me know why - and then help me improve it.

• IE ignores the "max-width" CSS property, so you might get a width over 1024px for the body - causing the heading background image to look funny.

I'll add to this list as feedback rolls in. If you'd like to add to the list of available stylesheets for this theme, send me an image (1024 x 150) and I'll add it. Here's a simple stylesheet that you can alter to override settings in the basic one (simple.css). This theme has the stylesheet switcher integrated, so it's easy to change to a different stylesheet.

Using Struts' Declared Exceptions

With a little prodding from Erik Hatcher today, I took another look at Struts' Declared Exceptions feature. At the end of last year, I was wishing I could use declared exceptions to do chained exceptions for my Action classes. Basically, in each of my Actions, I have a try/catch wrapped around a call to the Business Delegate (example: UserAction.java). You'll notice that all the CRUD methods have the same catch block for exception handling:

} catch (Exception e) {
    e.printStackTrace();
    errors.add(ActionErrors.GLOBAL_ERROR,
               new ActionError("errors.general"));

    while (e != null) {
        errors.add(ActionErrors.GLOBAL_ERROR,
                   new ActionError("errors.detail", e.getMessage()));
        e = (Exception) e.getCause();
    }

    saveErrors(request, errors);

    return mapping.getInputForward();
}

After talking with Erik this morning, I decided to create an ActionExceptionHandler for java.lang.Exception. In my struts-config.xml, I added:

<exception type="java.lang.Exception" key="errors.general"
    handler="org.appfuse.webapp.action.ActionExceptionHandler"/>

I have "errors.general=The process did not complete. Details should follow." Here is the code for ActionExceptionHandler:

public final class ActionExceptionHandler extends ExceptionHandler {

    public ActionForward execute(Exception ex, ExceptionConfig ae,
                                 ActionMapping mapping,
                                 ActionForm formInstance,
                                 HttpServletRequest request,
                                 HttpServletResponse response)
      throws ServletException {
        ActionForward forward = null;
        ActionError error = null;
        ActionErrors errors = new ActionErrors();
        String property = null;

        // Build the forward from the exception mapping if it exists
        // or from the form input
        if (ae.getPath() != null) {
            forward = new ActionForward(ae.getPath());
        } else {
            forward = mapping.getInputForward();
        }

        ex.printStackTrace();
        errors.add(ActionErrors.GLOBAL_ERROR, new ActionError(error.getKey()));

        while (ex != null) {
            errors.add(ActionErrors.GLOBAL_ERROR,
                       new ActionError("errors.detail", ex.getMessage()));
            ex = (Exception) ex.getCause();
        }

        // Store the errors and exception
        request.setAttribute(Globals.ERROR_KEY, errors);

        return forward;
    }
}

This allows me to remove my generic try/catches from my action classes - very slick IMO (or at least better than the code smell I had)! Of course, I still have some catch blocks that catch specific exceptions, but I can either (1) leave those intact, or (2) create another declared exception for that particular action/exception. I dig it and will be adding it (in short order) to AppFuse.

Update (June 23, 2003): Here's a more thoroughly tested code sample of this same class.

Sending POJOs to the UI instead of ActionForms

I'm starting to think that my Struts-based apps could be simplified if I didn't convert POJOs to Action Forms when retrieving them from the database. By this, I mean to say that I'd like to retrieve and display POJOs on the UI, and then capture their information (as Action Forms) when saving the form. The reason I want to do this is because of Hibernate's Lazy Loading feature and formatting Dates. Basically, Hibernate allows you to load children of an object lazily (i.e. resumes of a User), when the getResumes() method is called. I've created [a page|POJOsToForms] on my wiki to explain further and continue this discussion. Of course, you can always leave comments here if you'd rather - they cross-reference each other. The [RollingWiki|http://www.rollerweblogger.org/wiki/Wiki.jsp?page=RollerWikiPlugin] rocks!

Add Accesskeys to your webapps

Are you a keyboard monkey that hates using your mouse? If so, you can bet your webapp's powerusers feel the same way. How about giving them the power to navigate your app using keyboard shortcuts? It's easy to do by adding an "accesskey" attribute to your links and form elements, but how do you tell your users they exist? Zeldman's got the goods:

In Issue No. 158 of A List Apart, For People Who Make Websites: All your favorite applications have shortcut keys. So can your site, thanks to the XHTML accesskey attribute. Accesskeys make sites more accessible for people who cannot use a mouse. Unfortunately, almost no designer uses accesskeys, because, unless they View Source, most visitors can't tell that you've put these nifty navigational shortcuts to work on your site. In "Accesskeys: Unlocking Hidden Navigation," Stuart Robertson unlocks the secret of providing visible accesskey shortcuts. Dig in and have fun.

Apple G5s - 1.8 MHz

From Slashdot (via Erik of course):

Apple Insider is reporting that Apple will announce computers based on IBM's 64 bit PPC 970 processor in the upcomming WWDC and will market them as G5. The new Power Mac G5s will sport a completely new motherboard design utilizing DDR 400 RAM as well as AGP 8x graphics, FireWire 800, and USB 2.0, sources said. "In the box" connectivity among the news systems is based on Hypertransport which provides 64-bit addressing and will replace Apple's multilevel bus architecture found in current systems. Initial offerings of the Power Mac G5 are said to boast 1.4 to 1.8GHz, single core PPC 970 processors, with the possibility of a dual 1.8GHz chips shortly thereafter.

Sounds good, but how long will those processors take to put in the PowerBooks? My advise - just go Intel - you'll get more customers and it'll be faster! How sweet would it be to buy a new Dell laptop and be able to run Windows, Linux and OS X on the same machine?! That would rock - and I'm willing to bet you'd get a lot of folks buying OS X. But then again, OS X is cheap - it's Apple's hardware that's spendy and it's probably a good revenue driver for them.

New Theme Switcher

I finally decided to replace my old theme-switcher with a more standard one. Switch themes all you like with the drop-down below the search box. If the text is too small right now, try the sunset theme, I think you'll like it. I noticed the Aqua theme needs a little work on the date bar, but I'm guessing no one uses it, so I'm not too concerned. Future enhancements (in the next 6 months - 1 year) include adding this to the X2 theme in Roller, as well as changing the drop-down to a slick "customize" button like the one found on Netscape's DevEdge (top right corner). Let me know if you experience any issues.

My main reason for doing this was so I could validate my CSS, which obviously needs some work!

Draggable IFRAMEs

Matt Kruse's JavaScript Toolbox is awesome. So good, in fact, that I've actually made a donation (small, but nevertheless, a donation). Today, I noticed a new script: Draggable IFRAMEs. I dig it. Don't know that I'll ever use it, but I've always liked drag n' drop examples for the web. While they are cool, I've found that sometimes a true popup window is much easier.

Cool Comments have arrived!

I got the idea the cool comments you now see from Joe Hewitt. It wasn't too bad to implement, but there's still lots of quirks. Many of which you can see. The hardest part was figuring to implement XML loading in Mozilla. Joe is using the following method:

gMediaDoc = document.implementation.createDocument("", "media", null);
gMediaDoc.addEventListener("load", onMediaLoaded, false);
gMediaDoc.load(aURL);

Which works great when the file is on a filesystem, with a .xml extension. I couldn't get Roller to accept a .xml for my comment page's "link" attribute, so I had to resort to a lot of web research, and I came up with the following:

gMediaDoc = document.implementation.createDocument("", "", null);
var xmlHttp = new XMLHttpRequest();
xmlHttp.overrideMimeType("text/xml");
xmlHttp.open("GET", aURL, false);
xmlHttp.send(null);
gMediaDoc.loadXML(xmlHttp.responseXML.xml);
onMediaLoaded();

The loadXML method is provided by Erik Arvidsson's XML Extras. Thanks Erik! There's quite a bit of work to enable inline comments, but I promise to document a how to before it's released to the general public. Here's some problems I hope to fix before that.

• Alignment - it'd be nice if I could make the div in-line, so I could put a comments link as before - with other text on either side of it. Either that, or make it inherit the parent's text-alignment. It'd be cool if the pictures below had the comments link right below them.
• URL Prefix - I suppose I could pass in the context + username to solve this one. While it was working normally for me to use $userName/comments for the URL while developing this, I had to use "/page/rd/comments" on this site. I think it's something to do with the <base href="" /> being set.
• Loading - it takes a few seconds for the templates to load. If you click on the comments link before they've loaded, you'll get a JavaScript error, and be routed to the default comments page. The window's status bar will say "Done initializing comment templates..." when comments are ready for action.
• No Preview. I don't think this is a big deal, but it probably wouldn't be too hard to add.
• Missing label from "Remember Me" checkbox. I'm not sure why this is happening, but the text is there!

That's all the enhancements I can think of for now. Tell me what you think and feel free to give these suckers a test drive.

Update: Strange - I'm seeing some errors that I didn't earlier. In IE6/WinXP, I get a JavaScript error ["Access is Denied" error (Line 149, Char 5)]. Also, I can see the "Remember Information" label here, whereas I couldn't on the machine I implemented this on (Win2K/IE6). Strangely enough, Julie's machine is Windows 2000/IE6, and these errors occur on hers as well. Looks like I have a lot more work to do!