IBM XPages: HTML Marquee, Dojo Rotator and AutoRotator Controls

08/07/2012 by Chris Toohey

I received an email the other day from a reader asking the following:

Are you aware of a xpages demo database that creates a Marquee from a notes view - I'm guessing it is easy to do with a repeat control but can't find anything for the life of me!

At first, I had no idea what they meant by a "marquee", but after a few more email exchanges I had an answer: a simple content scroller, something that will slide/scroll content from one side of the screen to another, like a stock ticker.

What I found was interesting and quite frankly a huge find for a project that I'm currently working on that needed a navigable content carousel.

HTML marquee Element

My first reaction to any "can it be done with XPages? question is to see if there is a native HTML element or tactic for achieving that desired result. Good and bad news there...

From Wikipedia.org: Marquee element:

The marquee tag is a non-standard HTML element which causes text to scroll up, down, left or right automatically. The tag was first introduced in early versions of Microsoft's Internet Explorer, and was compared to Netscape's blink element, as a proprietary non-standard extension to the HTML standard with usability problems. It is deprecated by the W3C and not advised by them for use in any HTML documents.

So what's the "marquee" element? Basically this:

Hello World!

The idea would be that you'd have a whole lot of content in the marquee... but it's all pretty useless and you quickly understand why it's deprecated.

Dojo Rotator and AutoRotator

When native HTML elements fail me, I look to what else I already have lying around... which for IBM XPages means looking at Dojo.

There I came across the dojox.widget.Rotator... which at first glance appears to be broken beyond repair...

All of the online demos use the dojox.widget.rotator.Fade module... which appears to be broken both in the online demos as well as any IBM XPages implementation of the Dojo libraries.

Changing the module to the otherwise fully functional dojox.widget.rotator.Slide, dojox.widget.rotator.Wipe or dojox.widget.rotator.Pan modules to support the Rotator transitions gave me a fully working demo.

... so what is a Dojo Rotator?

Think of a carousel or content slider. Something that allows you to page through one blob of content at a given time using a button or the onclick of some element (typically in a Previous/Next layout).

The demo below has a fully-functional dojox.widget.Rotator that walks an XPage data source via a simple xp:repeat Control using nothing more than a simple xp:div.

... but while that's working, I thought it would be really cool if there was a way to automatically make those slides transition -- just like a real carousel/content slider -- which led me to the Dojo dojox.widget.AutoRotator!

Doesn't get much easier than that!

Online Demo

On this demo, you'll see that I've setup a simple xp:dominoView data source for an XPage, and wired my HTML marquee Element, and our Dojo dojox.widget.Rotator and dojox.widget.AutoRotator Controls to display the xp:dominoView contents. There's also a standard xp:viewPanel set to display the xp:dominoView contents as a point of reference.

IBM XPages: HTML Marquee, Dojo Rotator and AutoRotator Demo

Conclusion

As luck would have it, I needed a featured content carousel, and was beating my head against a wall trying to get one working for me. Karma is a hell of a thing: I started on this hoping to help a fellow developer who reached out (which is the reason why I publically post my email address), and I in-turn helped myself.

I'm currently working on creating configurable Custom Controls (dojo:Rotator and dojo:AutoRotator) for both of these Dojo widgets... but until then, there's always using the amazingly simple xp:div controls + Dojo attributes trick to get the job done.