Latest Updates

Products & Applications

Showtime
My Blackberry Enterprise Server Push Utility for the Lotus Notes Client, allows you to create Jobs for individual Channel, Message, and Browser Content Pushes, as well as allows you to delete Pushed Channel Icons from defined recipient devices.

Time Tracker
The idea is simple. At the start of your day - upon completion of your first task - create an entry highlighting what you did and whether you feel it was an efficient or inefficient use of your time. Based on several requests, you can also select the priority, apply categories, or even align your time against a project.

For Lotus Notes Client v8.0 and above, you can use the Time Tracker Widget to make this process even easier!

Zephyr
My Configuration-based Rich Text Mail Merge and Emailing Utility, Zephyr allows you to create rich, data-driven emails to support automated workflow - all via Microsoft Word Mail Merge-like architecture. Dear <firstname> allows you to personalize each email message not only to the individual recipient, but also to the individual application workflow event!

xCopy
xCopy is a simple configurable xCopy client for the Lotus Notes client. By creating and defining xCopy Profiles, you can batch process your file backup or remote upload jobs. With the addition of the xCopy sidebar widget, you can easily kick-off these jobs, and modify both the xCopy Profiles and xCopy itself.

Community & Resources

Lotus Technical Information & Education Community

The Lotus Technical Information & Education community is comprised of IBM, business partner, and customer subject matter experts who use product wikis, published articles, white papers, community blogs and the latest in social media to build and share high quality technical content.

OpenNTF.org - Open Source Community for Lotus Notes Domino

OpenNTF is devoted to enabling groups of individuals all over the world to collaborate on IBM Lotus Notes/Domino applications and release them as open source.

developerWorks Lotus : Wikis

Share your deployment experiences and best practices in our wikis and help IBM to create scenarios for successful deployments. Contribute to the community by collaborating on shared content and leverage the shared knowledge from that community.

IBM XPages: HTML Marquee, Dojo Rotator and AutoRotator Controls

08/07/2012 12:55:00 PM 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!
<marquee
 behavior="alternate"
 direction="right">
Hello World!
</marquee>

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.

<xp:div
   dojoType="dojox.widget.Rotator"
   style="height: 100px; border: 1px solid #999; overflow: hidden;">
    <xp:this.dojoAttributes>
        <xp:dojoAttribute
           name="transition"
           value="dojox.widget.rotator.slide">
        </xp:dojoAttribute>
        <xp:dojoAttribute
           name="continuous"
           value="true">
        </xp:dojoAttribute>
        <xp:dojoAttribute
           name="quick"
           value="true">
        </xp:dojoAttribute>
        <xp:dojoAttribute
           name="duration"
           value="500">
        </xp:dojoAttribute>
        <xp:dojoAttribute
           name="data-dojo-id"
           value="carousel">
        </xp:dojoAttribute>
    </xp:this.dojoAttributes>
    <xp:repeat
       value="#{viewDocuments}"
       var="thisDocument"
       disableOutputTag="true">
        <xp:text
           tagName="div"
           styleClass="pane"
           value="#{thisDocument.title}" />
    </xp:repeat>
</xp:div>

<xp:button
   id="button1"
   value="Previous">
    <xp:eventHandler
       event="onclick"
       submit="false">
        <xp:this.script><![CDATA[carousel.prev();]]></xp:this.script>
    </xp:eventHandler>
</xp:button>
<xp:button
   value="Next"
   id="button2">
    <xp:eventHandler
       event="onclick"
       submit="false">
        <xp:this.script><![CDATA[carousel.next();]]></xp:this.script>
    </xp:eventHandler>
</xp:button>

... 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!

<xp:div
   id="carouselAuto"
   dojoType="dojox.widget.AutoRotator"
   style="height: 100px; border: 1px solid #999; overflow: hidden;">
    <xp:this.dojoAttributes>
        <xp:dojoAttribute
           name="transition"
           value="dojox.widget.rotator.slide">
        </xp:dojoAttribute>
    </xp:this.dojoAttributes>
    <xp:repeat
       value="#{viewDocuments}"
       var="thisDocument"
       disableOutputTag="true">
        <xp:text
           tagName="div"
           styleClass="pane"
           value="#{thisDocument.title}" />
    </xp:repeat>
</xp:div>

<xp:button
   id="button3"
   value="Previous">
    <xp:eventHandler
       event="onclick"
       submit="false">
        <xp:this.script><![CDATA[dojo.publish('#{id:carouselAuto}/rotator/control', ['prev'])]]></xp:this.script>
    </xp:eventHandler>
</xp:button>
<xp:button
   value="Next"
   id="button4">
    <xp:eventHandler
       event="onclick"
       submit="false">
        <xp:this.script><![CDATA[dojo.publish('#{id:carouselAuto}/rotator/control', ['next'])]]></xp:this.script>
    </xp:eventHandler>
</xp:button>

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.

Permalink | Comments (4)

Community Demo Development Dojo IBM JavaScript Lotus SSJS XPages

 
David LeedyName:David LeedyWebsite:http://notesin9.comComment Wow.  Neat find. I might be able to use that on xpages.tv. So rather then one featured video I could use a Rotator.

Thanks for posting!
 Alan HurtName:Alan HurtComment I checked the Dojo nightlies, and two of their Rotator examples are working if that might be of any help/interest

http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/widget/tests/test_RotatorController.html

http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/widget/tests/test_Rotator_ThumbnailController.html Frank van der LindenName:Frank van der LindenComment Hi Chris,

Thank you for this example. It right what I needed for a customer project. Almost decided to use a jQuery plugin, but no I will use dojo
I will use the AutoRotator Dolly BadhamName:Dolly BadhamComment

Thanks for the tip Chris.

 

One question:  When my xpage loads I quickly see all the entries from the view in the div/panel then only the first value.  Is there a way to stop this from happening?  I am using this to display pictures from a view and don't want this 'effect'.

Many thanks

 

(not published)




Evaluate this Formula: @LowerCase(@Text("FOO"))