Fancy Dojo Widget: A Simple Image with Lazy-Loading Tooltip Content

Today i needed an image displaying some data from a webservice. Only catch is, the data should only be loaded, when the tip is displayed - so i had to code my own custom widget for Dojo 1.6 (.1).

Here it is for you to use it in your projects, if you like:

Code:

        dojo.provide("dijit.ImageTooltipWidget"); 
        dojo.require("dijit._Widget"); 
        dojo.require("dijit._Templated"); 
        dojo.declare("dijit.ImageTooltipWidget",
            [dijit._Widget,dijit._Templated],{ 
                id: "someId", 
                src: 'info.jpg', 
                templateString: '<div id="${id}"><img src="${src}" data-dojo-attach-point="imgNode"/></div>', 
                tooltip: null, 
                defaultLabel: "Lade...", 
                showDelay: 250, 
                getData: null, 
                onTooltipFocus: null, 
                postCreate: function(){ 
                        dojo.require('dijit.Tooltip'); 
                        var tooltip = new dijit.Tooltip({ 
                                connectId: this.domNode, 
                                label: this.defaultLabel, 
                                showDelay: this.showDelay 
                        }); 
                        tooltip._destroyOnRemove =true; 
                        tooltip.startup(); 
                        if(this.onTooltipFocus) 
                                dojo.connect(this.imgNode,
                                  "mouseover",this,"onTooltipFocus"); 
                        else if(this.getData){ 
                                this.onTooltipFocus = function (){ 
                                        tooltip.set("label",this.getData()); 
                                } 
                                dojo.connect(this.imgNode,
                                  "mouseover",this,"onTooltipFocus"); 
                        } 
                        this.tooltip = tooltip; 
                    this.inherited(arguments); 
                }, 
                constructor:function(args){ 
                        this.inherited(arguments); 
                        //do some other stuff 
                } 
        }); 

Useage:

new dijit.ImageTooltipWidget({src: "anImage.jpg", id:"toolTipImage", "getData": someFunctionThatReturnsData});

where the someFunctionThatReturnsData could be something like:

function someFunctionThatReturnsData (){

     return "<div> Data from 'service'... </div>";

}

or you can create your own onToolTipFocus as a function hook.

Dojo Data Grid in XPages - Lessons Learned

Here are some things i came across when implementing a dojo data grid (the default dojo 1.6.1 in domino 8.5.3) on my xpage projects:

• include the correct css ("/.ibmxspres/dojoroot/dojox/grid/resources/Grid.css" will work)
• if you use an expensive web service, use the store to get the items and add them to the store manually, this way client side rendering and sorting will be faster (here is how you can do it)
• use dojo.data.ItemFileReadStore as a container for your items if you do not want to bother implementing your own sorting and caching
• do not use "auto" columns - it can only work if you are not using a store in the grid and you load all the data only once and push it to the grid, and even then it is discouraged
• do not set the style of element that contains the grid to "display: none" it will just not work
• try not to encapsulate the grid inside other panels or divs if possible, some css settings might break the design - in most cases the grid did not even show a single visible pixel for me, but it was definately there and populated
• set a style in px to tell dojo what dimensions to render, directly in the div / panel like this: style="width: 400px; height:300px"
• declare your own datastore to process data and connect easily to the fetch and _processResults methods and not mess with the original implementation (here is how its done)
• use a loading screen and connect to the _processResults to hide it after the data has been loaded

Useful Tool: Domino Error Codes (Freeware)

I just found this handy tool, that helped me translate a notes error box into a lotus script error code. Pretty nice and saves some debugging for the right code. The help is not helpful in this context anyways.

Domino Error Codes (Freeware)

Would be nice to get it in other languages like german too, but well... pretty helpful as it is.