IBM XPages: HTML Marquee, Dojo Rotator and AutoRotator Demo

Source xp:viewPanel

Deprecated HTML marquee Element

noneTest RTxxxxxExample AAExample ddddExample CExample XExample YExample Ztest from dynamic input UPDATEDtest Keithtestingewetwerw+;ww;+w;+w;+w;+w;+w;+wTESTtesting xeTestotest ksTESTdynamictestPK Test 1testTestTitleTESTtestand then

Code

<marquee
    behavior="alternate"
    direction="right">
    <xp:repeat
        value="#{viewDocuments}"
        var="thisDocument"
        disableOutputTag="true">
        <xp:text
            style="display: inline-block; width: 150px; border: 1px solid #999; padding: 4px; margin-right: 4px;"
            value="#{thisDocument.title}" />
    </xp:repeat>
</marquee>

Conclusion

Pretty useless really.. let's try something from the Dojo library.

xp:div dojox.widget.Rotator Control

none
Test RTxxxxx
Example AA
Example dddd
Example C
Example X
Example Y
Example Z
test from dynamic input UPDATED
test Keith
testing
ewetwer
w+;ww;+w;+w;+w;+w;+w;+w
TEST
testing xe
Testo
test ks
TEST
dynamic
test
PK Test 1
test
TestTitle
TEST
test
and then

Code

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

Conclusion

Much better! This at least gives me some options... But let's try another Dojo library control I stumbled onto.

xp:div dojox.widget.AutoRotator Control

none
Test RTxxxxx
Example AA
Example dddd
Example C
Example X
Example Y
Example Z
test from dynamic input UPDATED
test Keith
testing
ewetwer
w+;ww;+w;+w;+w;+w;+w;+w
TEST
testing xe
Testo
test ks
TEST
dynamic
test
PK Test 1
test
TestTitle
TEST
test
and then

Code

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

Conclusion

Wow - I really like this version! This thing SCREAMS "carousel"... and looking at the configuration-friendly properties of the dojox.widget.AutoRotator, it also screams "Custom Control"!

dojo:autoRotator Custom Control

Coming soon!