Tuesday, October 17, 2006

 

Extending dojo.widget.Tooltip

I have been playing with Dojo for past few weeks (since we are using it for AJAX stuff at BlogScope). While it is a nice library, many parts are not well documented. One such area is extending widgets to add to their functionality. Tooltip is a good example of widget that requires improvement, since it does not provide an option to have some custom text displayed while the contents of tooltip are being fetched. For BlogScope, I wanted to have an loading icon displayed while the tooltip is being fetched in background. This article explains the code that I am using for this purpose. Note: I am no Dojo guru. This code may not be the best way to do this, but it works.

Demo: We have a demo page displaying the extended tooltip. This demo page also has javascript to resize the tooltip to specified max-height and max-width. While CSS can be used for max-height and max-width, to make it work in IE, javascript is required. View source of the demo page to get the complete javascript code.

Below is the HTML code for the tooltip. There are three main components. One is the link (with id=one), mouseover on which displays the tooltip. Second is the div element with dojoType="PostTooltip", which specifies the url from where contents of tooltip are to be fetched. Third component is the div block (id=two) that is the tooltip itself. After the contents are being fetched, innerHTML of this div block is updated.

<a href="some-page" id="one">bring your mouse here</a>
<div dojoType="PostTooltip" style="display:none;"
    dojo:connectId="one"
    dojo:uniqId="two"
    dojo:contentUrl="tooltip.php?id=two"
    dojo:executeScripts="true"
    >
    <div id="two" style="background-color: white; border: 1px dashed #aaaaaa;">
            this is a custom loading message.
    </div>
</div>

Below is the code for fetching the contents of tooltip and adjusting its dimensions. uniqId is the id of div block for the tooltip. Since the mimetype is text/javascript, the fetched contents must be a javascript source which when executed updates the innerHTML of tooltip's div block (something like document.getElementById(uniqId).innerHTML = 'This is the new content';).

function updatePostTooltip(postUrl, uniqId) {
        dojo.io.bind({
            url: postUrl,
            load: function(type, evalObject){
                dojo.debug("data received from "+postUrl);
                adjustPostTooltipDimensions(uniqId);
            },
            mimetype: "text/javascript"
        });
}

function adjustPostTooltipDimensions(uniqId) {
        var sHeight = document.getElementById(uniqId).scrollHeight;
        var sWidth = document.getElementById(uniqId).scrollWidth;
        var maxHeight = 450;
        var maxWidth = 480;
        dojo.debug("height and width are "+sHeight+" and "+sWidth+" for "+uniqId);
        if (sHeight > maxHeight) {
                dojo.debug("resizing to max height "+maxHeight);
                document.getElementById(uniqId).style.height = maxHeight + "px";
                document.getElementById(uniqId).style.overflow = "auto";
        }
        if (sWidth > maxWidth) {
                dojo.debug("resizing to max width "+maxWidth);
                document.getElementById(uniqId).style.width = maxWidth + "px";
                document.getElementById(uniqId).style.overflow = "auto";
        }
    }

And finally below is the code for extended Tooltip widget.

dojo.provide("my.widget.PostTooltip");
    dojo.widget.manager.registerWidgetPackage("my.widget");

    dojo.widget.defineWidget(
        "my.widget.PostTooltip",
        dojo.widget.html.Tooltip,
        {
                //we have added three new variables, uniqId, contentUrl and hasContents
                uniqId: "",
                contentUrl: "",
                hasContents: 0,
                //We modify this function from the original in dojo.widget.html.Tooltip
                onShow: function() {
                        // copied as is from dojo/src/widget/html/Tooltip.js
                        dojo.widget.html.Tooltip.superclass.onShow.call(this);
                        this.state="displayed";
                        if(this.eraseScheduled){
                                this.hide();
                                this.eraseScheduled=false;
                        }
                        //end of copied code
                        //this is our code
                        if (this.hasContents == 0) {
                                updatePostTooltip(this.contentUrl, this.uniqId);
                                this.hasContents = 1;
                        }
                }
        }
    );

Comments:
This comment has been removed by a blog administrator.
 
Thanks for posting this I'm a coop student trying to learn dojo and the lack of documentation is horrible I spend most of the day searching through blogs for help. This is a good find.

If you have any other tips, tricks or examples can you post them or send me any links you like, it would be most appreciated.

Best Regards

tudor_in_britishcolumbia at hotmail dot com
 
I have a question if you have time...

I'm trying to extend TitlePane but this doesn't work keep getting

" DEPRECATED: dojo.widget.Manager.getImplementationName Could not locate widget implementation for "palettepane" in "dojo.widget" registered to namespace "dojo". Developers must specify correct namespaces for all non-Dojo widgets -- will be removed in version: 0.5"

here's the code. help would be great but no worries if you don't have time.

tudor_in_britishcolumbia at hotmail dot com

dojo.provide("lite.widget.PalettePane");
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.TitlePane");
dojo.require("dojo.widget.ContentPane");
dojo.require("dojo.html.style");
dojo.require("dojo.lfx.*");

dojo.widget.defineWidget( // Widget Name and Class
"dojo.widget.PalettePane",

// Super Class? or Renderer???
dojo.widget.TitlePane,

// Properties and Methods
{
templateString:"some html I removed so I could submit",
onLabelMouseOver:function() {
var widget = dojo.widget.byId('menuBar');
widget.destroy();
}
}
);
 
Post a Comment



<< Home

This page is powered by Blogger. Isn't yours?