Dojo ToolTips

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.

July 13, 2009 by 15

New XPages Blog

Bruce (ever trying new things) has gathered together a few people who are using XPages a lot in their day jobs to form a group blog over at xpagesblog.com. Hopefully over the next weeks and months we can put together a really good library of XPages news, development techniques, tip and tricks for the community to use.

There’s already some good stuff up there, so it’s well worth a look.

July 12, 2009 by 5

Load testing XPages with the help of IBM

Mick Moignard and I have been down at IBM Hursley for a few days working on load testing an XPages application we’ve written for a customer.

Mick talks more about the (very impressive from our point of view) details, but I just wanted to add my voice to his in saying thanks to the team down there, especially Andy Walter who really helped us out with anything we needed, from server hardware, load testing software, expertise in building the kit and so on. 

If you are a BP in the UK then I’d highly recommend having a chat with the team down there. And I believe there are equivalent set ups in a lot of other countries around the world. It is nice to be able to praise IBM every now and again!

July 9, 2009 by 0

Human Readable Dates in XPages

Last year Jake published a really good article (as he generally does) about how to create Ruby style dates in LotusScript. So for example, instead of displaying “28/06/2009 09:35” the page will show “about 30 minutes ago”.

It’s a technique I bookmarked until I had a need for it, which I now have, but for an XPages app. So I have ported Jakes code across to use Server Side Javascript instead of LotusScript, and in “share and share alike” fashion, thought I should republish it for you to use as you see fit.

So you can download the code here: xpDates.jss 

Please let me know if you spot any bugs.

An interesting side note is, that if you compare Jakes LotusScript and my server side Javascript, you can see just how easy it is to port code from one syntax to the other. So if you’re just starting out in XPages development and are worried about losing all of your existing LotusScript agents, there really is no need to. You can spend (an admittedly boring) few hours reformatting and not lose any of your existing code at all.

It may not suit all cases, but for the majority of code it’s easier than starting from scratch.

June 28, 2009 by 5

How to add non breaking spaces to your XPages

Often when you’re designing a web page, you’ll need a space between elements (such as two field labels for example). Most of the time you should solve your UI issues with CSS, but sometimes that is not the correct answer. Enter &nbsp; this is a the classic non breaking space that you can use in HTML.

Unfortunately you cannot use that in your XPages source because it is not valid XML, so instead, we just have to use:

&#160;

160 is the decimal character code for the non breaking space and use of character code markup like this is valid in XML.

A very simple tip, but a useful one none the less.

June 27, 2009 by 3

Thing learned for the day

I’m sure this is well known already, but it was a new one on me.

I have a web form that has a tabular layout of fields. But at the end of each row is a field that mustn’t ever get focus (for reasons that are to boring to go into), so I have an onFocus Javascript event in those fields that immediately blurs the focus if the user tries to get into it. All fine and dandy until you try and tab your way around the table, when you reach the end of each row, we end up with no field having focus.

The thing I learned (was told by an exasperated web designer) is that you can set the “tabindex” of a field to -1. If you do this then it is effectively excluded from the tab order of the form as you use the keyboard to navigate around.

Cue much punching of the sky as we knock another bug off the list for the application I’m working on at the moment. It’s the little victories that count!

June 25, 2009 by 2

The daily constitutional

IMG_0010

I’ve been working from home pretty much exclusively for over a year now and I really like the more relaxed way of doing things. I can decide my own hours, work when it suits me.

On the flip side, it would be very easy to never leave the flat. So I have tried to get into the routine of heading out for a couple of hours from about 11am every day to stretch the legs and clear the head. This is when living in central London, in the summer really pays off. It really can be a great city.

For example, today part of my walk was from Westminster Underground to Bond Street, through St James’ Park and across the Mall (pictured). On a day like today when the weather is sunny and warm, but not too warm. Not too many tourists, life doesn’t really get much better.

So if you’ve never been to London, I highly recommend visiting and walking, it really is a surprisingly compact place once you get your bearings. The tube, taxis and buses are fine if you’re in a hurry, but if you’re inside Zone 1, then it’s normally as quick to walk and much more interesting.

June 24, 2009 by 0

Cross browser testing using VMWare

As an Apple user, when I’m doing Domino development I live in VMWare Fusion to emulate Windows. And since the release of the Windows 7 Release Candidate (free until next year) doing testing in IE6 and IE7 is nigh on impossible. There are tools that you can use to emulate the different browsers (such as IETester) but I have found them to be unreliable.

It’s a little know fact that Microsoft actually give out free copies of Virtual PCs setup for IE6 and IE7 compliance testing from their website. Of course because it’s a virtual PC image and not a VMWare image we have to go a little further and convert the one to the other. That’s where these instructions come in. You’ll need to download a conversion tool, the one that worked for me was Q which is actually mentioned in the comments rather than the main body.

Once you’ve done the conversion, you end up with small (i.e. <1gb) Virtual Machines that you can do “proper” IE testing in until you get the nerve to tell you’re idiot IE users that they need to move into the 21st century and start using one of the proper browsers.

Anyway, what it does mean is that you can leave XP and IE6 behind altogether except for your testing which can only be a good thing. Windows 7 really is a big step forwards, even for those of us who don’t even like Windows.

June 19, 2009 by 4

IdeaJam wins 2009 Beacon Award

We were just watching the “Business Partner Leadership Agenda” webcast with Sam Palmisano where he announced the 2009 Beacon Awards winners.

Like the Lotus Awards that we did so well in earlier in the year, these are given to leading IBM Business Partners and as Sam said the Beacon Awards are IBM’s “most prestigious award” so we’re completely blown away that IdeaJam and Elguji has won again.

This time we won the Innovative Collaboration Solution with Lotus Software award. There were 22 different awards given to solutions from over 340 nominations so we really couldn’t be happier.

June 9, 2009 by 3