mattwhite.me

The solution to one of the small but annoying bugs in IQJam had eluded me for quite a while, so this morning I resolved to have another go at it after a lazy weekend of feeling ill. And, lo and behold, I managed to fix it.

So a little bit of background to the problem, when you login to IQJam we provide a login button for you to press after filling in your username and password, but most people are used to just hitting return after finishing typing their password. Unfortunately, this is a case where Safari actually implements internet standards just a little too well. What browsers are meant to do (but none of them except Safari actually do) is submit the form that a text field is in when the user presses the return key.

Now in most development environments this is pretty easy to fix, you just add a

return false;

to the onSubmit action of the HTML form that the field is located in. But with XPages we don't have access to the action, onSubmit or anything else to do with the form, as pretty much everything you click on in an XPage will want to interact with the server using code that has been generated for us rather than written by us.

In this case, I wanted to do my own AJAX post request to the server and deal with the entire interaction myself and stop anything else being submitted to the server. The problem was how? I spent ages trying to stop event bubbling to try and cancel the keypress event when the user presses return to no avail. However, I did learn, at least, that the keypress event fires before the form is submitted back to the server.

So my solution is to put this code in the keypress event of the password field:

if (thisEvent.keyCode == 13){

dojo.connect(

document.forms[0], 

'onsubmit', 

null, 

function(e) { 

e.preventDefault();

return false;

}

);

doLogin("#{id:userName}", "#{id:password}")

}

Basically when the user presses the return key, using Dojo, I can re-write the form onsubmit method to prevent it posting back to the server, and instead run my own "doLogin" function.

It's important to be aware that this will effectively break the XPage for all other actions unless I re-write the original onSubmit function back to what it was after I have finished, but here, I am going to be re-loading the page anyway so it's not necessary.

Once again, we have more evidence that if you're beginning to get into XPages, it's worth spending as much time learning Dojo as it is to learn the XPages themselves.

Tooltips are one of those little features which you rarely have the time to add to your website (beyond the basic title settings of your HTML elements), but do add a surprising amount of polish to your application from your user's point of view.

In an application that I have been working on recently, we added some tooltips to convey some specific information on how to use certain features and the extra help went over really well. But how do you add them in XPages?

Well Dojo is your friend, and more specifically one of the "dijit" package of plugins called dijit.ToolTip. So in your XPage you add a computed field with the display type set to HTML. In the value of the field add the following:

"<div dojoType=\"dijit.Tooltip\"\n" +

"connectId=\"" + getClientId("hoverlabel") + "\" style=\"display:none;\">\n" +

"This is a tooltip\n" +

"</div>";

Basically what we're doing is creating a div that will get written out to the browser, the important elements are the dojoType which tells Dojo that this is something it needs to look at when the page loads. The connectId links the div to the label which we want to add the tooltip to. So in this case, I have a label called "hoverlabel". Set the div to be hidden using CSS so that while Dojo is processing it after the page load, it doesn't appear and then disappear very quickly.

Finally we just need to make sure that Dojo is enabled on our XPage, so:

1. Go to the All Properties of your XPage and then Basics, make sure that dojoParseOnLoad is set to true
2. I also set the dojoTheme to true as well.
3. Then in the resources property (still in All Properties -> Basics) click the Add button and choose xp:dojoModule)
4. In the dojoModule -> basics -> name property which gets added, set the value to "dijit.Tooltip"

 It's really very simple to get going and this is what you end up with:

A really nice looking tooltip with no coding on from out point of view that will be very helpful for your users.