Custom Paging Control with Alloy, Titanium (Appcelerator)

Interested in a hands-on tutorial in Titanium? Building Cross-Platform Apps using Titanium, Alloy, and Appcelerator Cloud Services

Thanks to this Gist from Raúl Riera: https://gist.github.com/raulriera/2417902 which we forked here: https://gist.github.com/philsmithsonuk/6791373

Our specific requirements were a custom pagingcontrol element (which is unsupported by Titanium) with different designs for active and inactive pagingcontrols.

Here’s a simplified implementation of what we did:

1. Index.xml:

...
<Window id="window1">
 <View id="view_slider_container">
  <ScrollableView id="sview_slider">
   <View backgroundImage='dummy.png' class="img_slider"></View>
   <View backgroundImage='dummy.png' class="img_slider"></View>
   <View backgroundImage='dummy.png' class="img_slider"></View>
   <View backgroundImage='dummy.png' class="img_slider"></View>
   <View backgroundImage='dummy.png' class="img_slider"></View>
   <View backgroundImage='dummy.png' class="img_slider"></View>
   <View backgroundImage='dummy.png' class="img_slider"></View>
   <View backgroundImage='dummy.png' class="img_slider"></View>
  </ScrollableView>
 </View>
</Window>
...

2. Index.js

...
require('PagingControl');
var sViewPagingControl = new PagingControl($.sview_slider);
$.window1.add(sViewPagingControl);
...

 



About Phil Smithson

Ultrarunner & CTO. Passions include Mobile app development, Scrum, Kanban, Wordpress and Symfony.

Leave a Reply

Your email address will not be published. Required fields are marked *


*