Netvibes: a very slick Ajax portal

There’s quite a few Ajaxian start pages around at the moment, and more popping up all the time . There’s iGoogle, Microsoft’s Start.com, and Yahoo’s MyYahoo in terms of the big three, plus sites like Protopage and Netvibes, the subject of this blog.

I’ve had a brief play with most of these portals, but settled initially on iGoogle as it offered a way to group some useful gadgets around it’s powerful search engine, my engine of choice for many years. However I found it slightly clunky, slow and not 100% reliable, and when I started using Google Desktop’s “Quick Search Box” for launching my searches iGoogle took a back seat and I ended up switching back to the classic Google homepage for speed reasons.

Then an article about the popularity of Netvibes, your very own “digital dashboard”, caught my eye and I decided to check it out. The experience was very pleasing and much slicker than Google’s effort. It also offered great functionality in terms of reading RSS feeds, so much so that I quickly ditched my desktop RSS reader, Feedreader, and imported all my feeds into Netvibes. Now I can access my feeds wherever I go and no longer have synchronisation issues between home and work.

As well as displaying RSS feeds, there are modules for displaying local weather forecasts, a calendar supporting iCal, bookmarks, notes, to-do lists, multiple searches, support for POP3, IMAP4 email as well as several webmail providers including Gmail, Yahoo Mail, Hotmail, and AOL, Box.net web storage, del.icio.us, Facebook, Flickr photos and there’s podcast support with a built in audio player.

I’ve really enjoyed using Netvibes and strongly recommend you check it out!

Getting checkboxes to work correctly with Spring Form validation

I had a problem recently handling checkboxes within the Spring form validation framework. The checkbox would fail to retain its on state when the form was submitted and the validation failed. The checkbox was tied to a boolean attribute in the form object, so I’d followed the standard method of binding a field to the form in the JSP, as shown below.

<spring:bind path="myForm.booleanFieldName"> <input type="checkbox" name="<c:out value="${status.expression}"/>" value="true" <c:if test="${status.value}">checked</c:if>> </spring:bind>

But this didn’t work. It turns out you need to include an additional hidden field due to the nature of checkboxes - when a checkbox is not checked, the checkbox name is not present in the request parameters. Spring does support checkbox handling. You just need a hidden field with the same name as the checkbox but with a leading underscore, as shown below.

<spring:bind path="myForm.booleanFieldName">
<input type=”hidden” name=”_<c:out value=”${status.expression}”/>” value=”visible” />
<input type=”checkbox” name=”<c:out value=”${status.expression}”/>” value=”true” <c:if test=”${status.value}”>checked</c:if>>
</spring:bind>

Simple FAQ presentation using CSS and jQuery

The jQuery JavaScript library is something I discovered within the last few months and have been using actively in my current project. I love the ease with which you can traverse the DOM and select elements, add events and enable special effects. It dramatically reduces the lines of code required to perform these tasks and aids the separation of functionality from style.

When you combine this with CSS it can enable you to do amazing things with just a few snippets of code, which I’m going to demonstrate using the presentation of FAQs, something I had to do today.

First the HTML, with the FAQs being styled using a definition list:

<dl id="faq">
<dt>Question 1</dt>
<dd>Answer 1</dd>
<dt>Question 2</dt>
<dd>Answer 2</dd>
</dl>


Then the stylesheet:

#faq dt {
color: #2763A5;
cursor: pointer;
margin: 8px 0;
padding: 0;
}
#faq dd {
border: 1px solid #BABAC0;
padding: 10px 10px 0 10px;
margin: 10px 0 20px 0;
background-color: #FFFFE1;
}


Finally, the JavaScript, written using jQuery syntax:

$(document).ready(function() {
$(’#faq’).find(’dd’).hide().end().find(’dt’).click(function() {
var answer = $(this).next();
if (answer.is(’:visible’)) {
answer.slideUp();
} else {
answer.slideDown(’slow’);
}
});
});


That’s it! Here’s an example.

Be careful how you name your submit buttons

Last week I was banging my head against the door trying to perform the simple task of getting a button to submit a form using JavaScript. Normally this wouldn’t present a problem and is accomplished quite easily by adding an onclick event to the button which runs the following JavaScript…

document.forms[0].submit();

However both Internet Explorer and Firefox were giving me script errors…

IE: Object doesn’t support this property of method
FF: document.forms[0].submit is not a function

I struggled with this for around an hour, before realising the stupid mistake I’d made. I’d named the submit button”submit”. Hence, the JavaScript was trying to access an attribute of the object named “submit” rather than the performing the submit method of the form.

So, to avoid confusion and wasted debugging time, simply name your submit button anything other than “submit”!

Reordering buttons in your Windows taskbar

Do you like to have your taskbar buttons ordered in a specific way? Do you get annoyed when your taskbar buttons get out of order due to an Explorer crash or accidentally closing an application and having to reopen it? Well, I have a solution!

Just download a handy free utility called Taskix and launch the EXE and you can simply drag and drop the button you want to move.

A CSS workaround for working with multiple submit buttons in a web form

I ran into a problem today with my wizard style forms whereby pressing the Enter key would cause the wizard form to go to the previous page rather than the next one - not exactly desirable behaviour!

It turns out that when there are multiple submit buttons on a form the browser will select the first one it comes across, as HTML does not specify any method for defining the default action on a form. This is fair enough, but in the case of a wizard style form you tend to place the ‘previous’ button on the left and the ‘next’ button on the right, so the first one the browser finds is the ‘previous’ button due to its ordering within the code.

Thankfully, there is a solution which I found on another blog that makes use of the CSS Level 2 direction property. This property affects the direction the browser lays out content inside an element. The default is left to right, but by setting the direction property to rtl the direction of the elements is reversed.

So all I did was apply the direction property to the div containing the buttons and then placed the ‘next’ button first, followed by the ‘previous’. When viewed in the browser the buttons are reversed and displayed in the order you’d expect, but in the code the ‘next’ button comes first, so hitting the Enter key will cause the form to advance forward. Pretty nifty eh?!

This won’t work in older browsers, but it degrades nicely, as the buttons will be displayed in document order and the first submit button will still be used as the default.

How to prevent focus jumping to the address bar when tabbing in IE

I had a simple login form, consisting of username and password fields, which when submitted with the incorrect details would select the contents of the username field using the JavaScript select() command and prompt the user to correct their entry, but when pressing tab to jump to the next field, focus would jump to the address bar. Tabbing worked as expected in Firefox, but I wanted to fix the problem in IE.

I Googled in vain intially, findng a few people with the same problem, but no solution. Then I stumbled across someone offering advice on form validation which mentioned to focus on the field before selecting it, and that was all there was to it. Problem solved!

element.focus();
element.select();