Has anyone successfully implemented the dojox.mobile.carousel in XPages

Question

I have a requirement for an application in a Domino version 9.x deployment for a carousel like interface similar to what Netflix and others use to allow continuous scrolling. I got the jQuery jCarousel code working from here. But that lacks the pizzazz the user wants since the swiping feature is not available. I also used 100% computed HTML instead of being able to intersperse XPages controls within the carousel code.

So I found dojox/mobile/carousel (examples here) but all implementations, including the basic examples are not working well. The number of elements does not seem to be flexible and the positioning of them is much lower than I would think the should be. I fiddled with the CSS to see if I could fix things but have not found the right combination.

Here is the entire custom control I am using for this test (I captured the images from the demo and added them as image resources):

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core"
    dojoParseOnLoad="true">
    <xp:this.resources>
        <xp:metaData
            name="viewport"
            content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
        </xp:metaData>
        <xp:metaData
            name="apple-mobile-web-app-capable"
            content="yes">
        </xp:metaData>
        <xp:styleSheet
            href="/.ibmxspres/dojoroot/dojox/mobile/themes/iphone/iphone.css">
        </xp:styleSheet>
        <xp:dojoModule
            name="dojox/mobile"></xp:dojoModule>
        <xp:dojoModule
            name="dojox/mobile/parser"></xp:dojoModule>
        <xp:dojoModule
            name="dojox/mobile/Carousel"></xp:dojoModule>
    </xp:this.resources>
    <xp:panel>Above it</xp:panel>
    <div
        id="carousel1"
        data-dojo-type="dojox/mobile/Carousel"
        data-dojo-props='height:"150px", navButton:false, numVisible:2, title:"Category"'>
        <!-- View #1 -->
        <div
            data-dojo-type="dojox/mobile/SwapView">
            <div
                data-dojo-type="dojox/mobile/CarouselItem"
                data-dojo-props='src:"dish1.jpg", value:"dish", headerText:"dish"'></div>
            <div
                data-dojo-type="dojox/mobile/CarouselItem"
                data-dojo-props='src:"glass1.jpg", value:"glass", headerText:"glass"'></div>
        </div>
        <!-- View #2 -->
        <div
            data-dojo-type="dojox/mobile/SwapView">
            <div
                data-dojo-type="dojox/mobile/CarouselItem"
                data-dojo-props='src:"stone1.jpg", value:"stone", headerText:"stone"'></div>
            <div
                data-dojo-type="dojox/mobile/CarouselItem"
                data-dojo-props='src:"shell1.jpg", value:"shell", headerText:"shell"'></div>
        </div>
    </div>
    <xp:panel>Below it</xp:panel>
</xp:view>

in the sample in the documentation it has this comment followed by the inclusion of a JavaScript file.

<!-- Need to load the theme files for Carousel and PageIndicator as well as the base theme file -->
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"
        data-dojo-config="mblThemeFiles: ['base','Carousel','PageIndicator']"></script>

Not having this step done may be my problem but I cannot see how to do that within the XPages environment.

Answer 1

The dojo carousel exists since 1.7 Notes 8.5.3 comes with 1.6 (i dont know the dojo version of Notes9), so you maby have to update your dojo or implement a newer dojo lib in your application.

I did a short experiment on it, i disabled the build in dojo adding xsp.client.script.libraries=none to my xsp.properties and importet the dojo 1.9 in my application under WEB-INF/dojo/... then add the dojo to my xPage as ClientSide script resource. As soon i finished this the programatic Example from the dojo homepage worked immediately with out bigger errors (forgot to change the image sources =) ..).

The problem when adding xsp.client.script.libraries=none to your xsp.properties is that you also disable the XSP. library and some other xPage features wich you have to rebuild using the newer dojo version.

I realy prefer using dojo over jquery but in this case If you dont want to update your dojo i recomend you to maby stay at the jquery Library for this or look for other solutions.