dojo

Dojo 1.7.2 in XPages

I had need to make use of some of the more advanced Dojo Mobile controls for a project last week which ship with Dojo 1.7.2. For various reasons I needed the Dojo files inside the nsf rather than on the file system, and if you’ve had to do that before you’ll know what a massive pain it is to get the files loaded. So I thought I’d share a simple nsf with the files loaded.

You can either clone the database from Github here: https://github.com/whitemx/Dojo172XPages

Or you can download the nsf here: Dojo172.nsf.zip 

The other changes I’ve made to the database are to disable the standard Dojo libraries (1.6.1 in 8.5.3) in the xsp.properties file and also turned off the default theme settings as well so no CSS will be downloaded unless you manually specify it in the resources.

Dojo Charts and IE

I’ve just spent the better part of three days working on a suite of Dojo Charts for an application. They are usually pretty easy to get going and look as good, if not better than a lot of the flash charting tools out there. But, and there’s always a but isn’t there, getting the charts working in IE can be a real challenge with very little in the way of guidance.

So here are three tips which I shall pass on learned through bitter experience over the last few days…

It may well look as though you can initialise your charts using in line JavaScript and, indeed, it will work absolutely fine in Firefox, Safari, Chrome and other “modern” web browser. Not so much with IE. So break your initialisation code into a function and call it from the either the onClientLoad client side event in the XPage or using XSP.addOnLoad(init) depending on your preference.

This was a weird one, and took me ages to find. But one of my charts requires the user to select some options and then I fire a partial refresh of the page to generate the JSON data which populates the chart. But if the data which is returned by the AJAX request (the partial update) begins with JavaScript which needs to be evaluated then you may find in IE that the code is not being evaluated. So the JSON objects I was generating were not available for use in the chart. The solution, and it still grates me that I had to do this, was to add an empty, hidden div at the top of the area which is being refreshed, then the JSON data will be processed correctly.

Finally another thing which I had to do to make my code less efficient was re-write the way that I was generating some of the JSON data. One of the charts has multiple, variable numbers of series of data depending upon what the user selects. So I was generating each series of data to be a JSON object inside an array of JSON objects that I just looped through when building the chart. But no, it seems IE doesn’t like accessing multi dimensional arrays of JavaScript when building charts, so instead I had to create a different variable for each JSON data series and reference them using evaluates.

So the lesson from all of this is that, a) do your initial development in Firefox or Chrome, b) never, ever under estimate the amount of time you’ll need to spend getting the bloody thing working in IE.

Catch and Cancel Return Key Press for Safari in XPages

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.

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.