Getting multiple instances of a Widget with module to work on a view

Question

I can't get multiple instances of a widget to work. If I don't use the module in a widget I can do multiple instances. If I use multiple instances of it in a widget only the last one will work.

I have this widget.xml

<Alloy>
  <View id="container" class="container"></View>
</Alloy>

This widget.js

var args = arguments[0] || {};
var TiCircularSlider = require('de.marcelpociot.circularslider');
var lw = _.has(args, 'height') ? args.height*.05 : 5;
Ti.API.info("args: " + JSON.stringify(args));
var sliderView = TiCircularSlider.createView({
    top:_.has(args, 'top') ? args.top : 10,
    height: _.has(args, 'height') ? args.height : 100,
    width: _.has(args, 'width') ? args.width : 100,
    lineWidth: lw,
    filledColor: _.has(args, 'filledColor') ? args.filledColor : "blue",
    unfilledColor: _.has(args, 'unfilledColor') ? args.unfilledColor : "gray",
});

sliderView.addEventListener('change',function(e){
    Ti.API.info("e.value in sliderView event listener: " + e.value);
});
$.container.add(sliderView);

When I call it either in XML:

<Alloy>
    <Window id="win" backgroundColor="white">
    <View id="container" class="container">
            <Widget id="btn" top="100" src="btnCircularSlider"/>
            <Widget id="btn2" top="200" src="btnCircularSlider"/>
            <Widget id="btn3" top="300" src="btnCircularSlider"/>
        </View>
    </Window>
</Alloy>

or via code using Alloy.createWidget only the last instance works.

Answer 1

@pxtrick found the issue.

Set the incoming top value to the $.container, not the sliderView … like this:

$.container.top = _.has(args, 'top') ? args.top : 10;
var sliderView = TiCircularSlider.createView({
    height: _.has(args, 'height') ? args.height : 100,
    width: _.has(args, 'width') ? args.width : 100,
    lineWidth: lw,
    filledColor: _.has(args, 'filledColor') ? args.filledColor : "blue",
    unfilledColor: _.has(args, 'unfilledColor') ? args.unfilledColor : "gray"
 });

When passing top to the module, it sets the top of the “circle” within the view (created by the module) thus creating a long transparent rectangle. Setting the top in the container keeps the view (created by the module) as a square, and just positions it where you want. To see what I mean, try setting a borderColor on your widget container like this in widget.tss: ```'#container': { height: Ti.UI.SIZE, width: Ti.UI.SIZE, borderColor: '#f00' }