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;

May I ask how to use it with scrollable view?
I just cannot find the method to replace the pagecontrol of scrollableview....

Hi @piceman,
after you make "showPagingControl : false" on your scrollable view, you can use the following guide lines in your main view to add this customized paging control (assume your scrollable view is called sView, and main view which contains the scrollable view is called parent):

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

But keep in mind that as this paging control is not the default control, you may need to keep track of the current index and send it to the customized paging control so that it will show the right page indicator.
Wish this will help you and thank you very much.

Hi @wgx731
Thanks for your reply, but I got some problem...
I did what you mentioned, and refresh the module as it it now
That means I use "pages[0].setOpacity(1);" instead of " pages[event.source.currentPage].setOpacity(1));".
Console has no error report now, but I didn't see the new PageControl view appears on screen.

Here is my code

var sView = Ti.UI.createScrollableView({

backgroundColor : 'gray',

opacity: 0.8,

showPagingControl :false,

top : 20,

width : 280,

height : 350,

views : [view2, view3, view4],

currentPage : 0,

pagingControlColor : 'transparent'

});

if(sView && sView.views && sView.views.length > 0) {

require('PageControl');

var sViewPagingControl = new PagingControl(sView);

window.add(sView);

}

@piceman, sry, my fault. please add sViewPagingControl to ur window and try again. thx

Hi @wgx731:
Thanks for your prompt, I just make it done.
Below is my code in using:

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

Thanks for your kind again :).

I wanted to apply this but I get several undefined errors... it appears the post layout fires every time a view is added (for each view) so in some cases I get undefined

Hi @raulriera and @piceman,
As previously my development is on Android, after I have tried out on iPhone today, I got undefined error for postlayout event as well. I want to use postlayout event is because in my project the scrollableview and this paging control is in a tab and each time I switch tab, I will need to repopulate my scollableview (fetching new data from server) and paging control again, if docs is correct then using postlayout event should be ok and it is working in Android. I just have no idea why it fails on iphone. :( If you guys have any suggestions, please update with me as well. Thank you very much. :D

Greetings:

I'm implementing this module to customize ShowPagingControl implement but when I get an error in the methods onPostLayout and onScroll in the variable numberOfPages.

Can't find variable numberOfPages

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?