GeekZilla

Integrating Dojo Fisheye and SiteMapDataSource

Everybody seems to be getting excited over this AJAX thing. Even Microsoft are (at last... ok they started it with OWA) getting on the bandwagon with the Atlas libraries.

Of course just because Atlas exists doesn't mean you cannot use some other snazzy client side AJAX toolkits and one of the richest is the Dojo Toolkit. It includes a rich set of components including a range of 'widgets' for increasing user productivity. They also add a wow factor. My current favourite is the Fisheye list bar widget. This renders an icon bar Apple Mac style which cycles in size smoothly as the user moves the mouse pointer over it.

Having been asked to redesign an old commision I decided I would like to make use of the new ASP.NET navigation components but thought it would be cool to tie the data components to this Fisheye control and render a really slick navigation bar. There already have been some use of Dojo with ASP.NET and even intergrating it with Atlas but Fisheye is quite a recent widget addition and documentation is ongoing so to save you sometime here's what you need to do.

Add the Dojo bootstrap .js and other widget .js libraries to your project.

I added navigation to a master page. First add some boiler plate script to include set a debugging switch, include the Dojo bootstrapper and register the needed widget libraries:

<script language="javascript" type="text/javascript">
    var djConfig = {isDebug: false, debugAtAllCosts: false};
</script>

<script language="javascript" type="text/javascript" src="Script/Dojo/dojo.js">
</script>

<script language="javaScript" type="text/javascript">
    dojo.require("dojo.widget.FisheyeList");
    dojo.hostenv.writeIncludes();
</script>   

I decided to hold the site structure and navigation elements in web.sitemap and access it through the a SiteMapDataSource component. Then process each node and create the Fisheye list of items. The code below looks a bit messy but I will pick out some key features of the Fisheye widget:

  <div id="navigation">
            <div class="dojo-FisheyeList" dojo:itemwidth="50" dojo:itemheight="50" dojo:itemmaxwidth="100"
                dojo:itemmaxheight="100" dojo:orientation="vertical" dojo:effectunits="2" dojo:itempadding="10"
                dojo:attachedge="left" dojo:labeledge="right" dojo:enablecrappysvgsupport="false">
                <asp:Repeater ID="TopNavRepeat" runat="server" DataSourceID="SiteMapDataSource1">
                    <HeaderTemplate>
                        <ul>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <li class="dojo-FisheyeListItem" caption='<%# Eval("title") %>' dojo:iconsrc='<%# ((SiteMapNode)Container.DataItem)["icon"] %>'
                            onclick="navigate('<%# Eval("Url") %>')" ></li>
                    </ItemTemplate>
                    <FooterTemplate>
                        </ul>
                    </FooterTemplate>
                </asp:Repeater>
            </div>
        </div> 

This code creates a vertical icon bar which when mouse-overed enlarge to the max size and swing out slightly from the left with a caption positioned on the right of the icon on which the mouse is over.

The dojo-FisheyeList is defined in the widget library. Hopefully most of the settings speak for themselves. You can switch the dojo:orientation between vertical and hortizontal. dojo-attachedge specifies where the icons snap back to once they loose focus. dojo-labeledge specifies where the label (kind of tooltip) appears when a particular icon has focus. These two properties support top, bottom, left and right.

The dojo-FisheyeListItem creates the link icon. Again the properties should be self explanatory. The onclick event links to some other custom javascript to handle navigation as defined in the web.sitemap.

There are numerous uses for Dojo. Non widget libraries include function such as IO, encryption, logging and xml manipulation to name a few. And it includes support for JSON under the rpc components. In short this is a very rich toolkit and something all developers should give at least a once over. So if you have a few minutes to spare check out the demos at http://dojotoolkit.org/ and 'see it in action'.

Author Mark Page

Mark is trying not to drink too much 'cool aid' at the moment. All the more for everyone else!

Comments

Add Comment

Latest Articles