Nice Paging control for scrollableViews for Titanium Appcelerator

PagingControl.js

// Forked from https://gist.github.com/2417902 to fix a small bug
// -----
function PagingControl(scrollableView){
       var pages = [];
       var page;
       var numberOfPages = 0;

        // Configuration
        var pageColor = "#c99ed5";
	var container = Titanium.UI.createView({
		height: 60
	});
	// Keep a global reference of the available pages
	numberOfPages = scrollableView.getViews().length;
	
	pages = []; // without this, the current page won't work on future references of the module
	
	// Go through each of the current pages available in the scrollableView
	for (var i = 0; i < numberOfPages; i++) {
		page = Titanium.UI.createView({
			borderRadius: 4,
			width: 8,
			height: 8,
			left: 15 * i,
			backgroundColor: pageColor,
			opacity: 0.5
		});
		// Store a reference to this view
		pages.push(page);
		// Add it to the container
		container.add(page);
	}
	
	// Mark the initial selected page
	pages[scrollableView.getCurrentPage()].setOpacity(1);
	// Attach the scroll event to this scrollableView, so we know when to update things
	scrollableView.addEventListener("scroll", onScroll);
        // Reset page control to default page when scollableView refresh
	scrollableView.addEventListener("postlayout", onPostLayout);

	return container;
};

onScroll = function(event){
	// Go through each and reset it's opacity
	for (var i = 0; i < numberOfPages; i++) {
		pages[i].setOpacity(0.5);
	}
	// Bump the opacity of the new current page
	pages[event.currentPage].setOpacity(1);
	
};

onPostLayout = function(event) {
	// Go through each and reset it's opacity
	for(var i = 0; i < numberOfPages; i++) {
		pages[i].setOpacity(0.5);
	}
	// Bump the opacity of the new current page
	pages[scrollableView.currentPage].setOpacity(1);

};


module.exports = PagingControl;

Hi,

I stumbled across this module and I have recently started to develop using appcelerator again. Where do I need to place the PagingControl.js file in order for the require('PagingControl'); to work.

I get an error that it could not find the module.

Thanks!

// This code is not working, could you please help me.. if says message = "Can't find variable: PagingControl";
var win = Ti.UI.createWindow();

var view1 = Ti.UI.createView({
backgroundColor : '#123'
});
var view2 = Ti.UI.createView({
backgroundColor : '#246'
});
var view3 = Ti.UI.createView({
backgroundColor : '#48b'
});

var sView = Ti.UI.createScrollableView({

backgroundColor : 'gray',
opacity : 0.8,
showPagingControl : false,
top : 20,
width : 280,
height : 350,
views : [view1, view2, view3],
currentPage : 0,
pagingControlColor : 'transparent'

});

if (sView && sView.views && sView.views.length > 0) {
require('PagingControl');
var sViewPagingControl = new PagingControl(sView);
sView.add(sViewPagingControl);
window.add(sView);
}

win.add(sView);
win.open();

As the previous person said, this code wouldn't work on iOS.

require('PagingControl');
var sViewPagingControl = new PagingControl(sView);

change to:

var PagingControl = require('PagingControl');
var sViewPagingControl = new PagingControl(sView);

Fixes that issue, then it can't find a lot of variables, so I just quickly made them all global.

Then who knows where it put the new paging control, so I didn't use the example of adding it to the scrollableView itself, but to my main window, underneath the scrollview.

Then it worked, although it flashes a lot during scrolling.
So changed the listener to scrollEnd, instead of Sroll. But it ultimately did work on iOS, after some changes.

Does it work for android?

Hi,
How to scroll to particular view on click of button?
I tried using sView.scrolltoView(5); But it does not scroll to 5th view.
Could you pls help?