Custom paging control for scrollableViews for Titanium Appcelerator

PagingControl.js

// I was unhappy about there was close to no control over the "pageControl" 
// in scrollableViews, so I hacked my own
// -----

// Configuration
var pageColor = "#c99ed5";

PagingControl = function(scrollableView){
	var container = Titanium.UI.createView({
		height: 60
	});
	// Keep a global reference of the available pages
	var numberOfPages = scrollableView.getViews().length;
	
	var 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++) {
		var 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);
	
	// Callbacks
	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);
		
	};
	
	// Attach the scroll event to this scrollableView, so we know when to update things
	scrollableView.addEventListener("scroll", onScroll);
	
	return container;
};

module.exports = PagingControl;

not really clear what this is accomplishing... but the code looks good

Pretty much my own control for the ScrollableView (so I can color the little dots at the bottom, set a transparent background color, etc)

AH... I like

Is this for iphone only?

Make sure the paging control switch back to default page when scrollableView refreshes. Check my code @ https://gist.github.com/2729533. Please advise me as well. Thx

just tested it on iOS... on the iPad is working fine...

This fixes a problem with how commonJS caches things

How do you add this to a scroll view?

@raulriera Brilliant, thanks! :)

@raulriera
How do i scroll to particular view on click of button?
scrollableView.scrolltoView(index);

does not work in case we use this customised paging control.