DashboardView JS module

app.js

var Dashboard = require('dashboard');

var win = Ti.UI.createWindow({
	backgroundColor:'lightgray'
});

var view = new Dashboard.View();

var data = [];
for(var i = 0; i < 20; i++){
	var item = new Dashboard.Item();
	item.setText('Hello World');
	item.setImage('KS_nav_ui.png');
	data.push(item);
}

view.setItems(data);
view.addToWindow(win);
view.onClick = function(_event){
	alert(_event);
};

win.open();

dashboard.js

var iPhone = Ti.Platform.osname == 'iphone';
var Android = Ti.Platform.osname == 'android';

/**
 * DashboardView
 * Constructor and initializer
 */
function View(){
	this._scrollable = Ti.UI.createScrollableView({
		width: Ti.UI.FILL,
		height: Ti.UI.FILL
	});
	this._innerViews = [];
	this._items = [];
	this._isWindowOpened = false;
	this._sizeOfItems = {width: 0, height: 0};
	this._widthOfScrollable = 0;
	this._heightOfScrollable = 0;
};

/**
 * Adds the items to the scrollable view
 * private method - do not call from outside
 */
View.prototype._addItemsToWindow = function(){
	var items = this._items;

	var _this = this;	
	function clicker(a, _event){
		a.addEventListener('singletap', function(){
			if(_this.onClick){
				_this.onClick(_event);
			}
		});
	}

	var currentPage = 0;
	this._innerViews[currentPage] = Ti.UI.createView({
		layout: 'horizontal'
	});
	
	var totalItem = Math.floor(this._heightOfScrollable / this._sizeOfItems.height) *
			Math.floor(this._widthOfScrollable / this._sizeOfItems.width);
	var count = 0;
	for(var i = 0, len = items.length; i < len; i++){
		if(count >= totalItem){
			currentPage++;
			this._innerViews[currentPage] = Ti.UI.createView({
				layout: 'horizontal'
			});
			count = 0
		}
		var view = items[i].view;
		view.width = this._sizeOfItems.width;
		view.height = this._sizeOfItems.height;
		if(count == 0 && Android){
			view.left = 0;
		}
		this._innerViews[currentPage].add(view);
		clicker(view, {
			view: view,
			image: items[i].image,
			text: items[i].label,
			index: i
		});
		count++;
	}
	this._scrollable.views = (this._innerViews);
}

/**
 * Adds the DashboardView to the window
 * @param { Ti.UI.Window } _window
 */
View.prototype.addToWindow = function(_window) {
	_window.add(this._scrollable);
	var _this = this;
	function windowOpen(){
		_window.removeEventListener('open', windowOpen);
		
		/**
		 * Android hack to get the size of the scrollable view after 100ms
		 */
		setTimeout(function(){
			_this._widthOfScrollable = _this._scrollable.size.width;
			_this._heightOfScrollable = _this._scrollable.size.height;
	
			_this._sizeOfItems.width = _this._sizeOfItems.height = (_this._widthOfScrollable - 40) / 3;
			_this._addItemsToWindow();
			return;
		},100);
	}
	_window.addEventListener('open', windowOpen);
};

/**
 * Sets the background color to the DashboardView
 * @param { String } _backgroundColor: background color
 */
View.prototype.setBackgroundColor = function(_backgroundColor) {
	this._scrollable.setBackgroundColor(_backgroundColor);
}

/**
 * Sets the items to the DashboardView
 * @param { Array } _items Array of DashBoardItem
 */
View.prototype.setItems = function(_items) {
	this._items = _items;
	if(this._isWindowOpened === true){
		this._addItemsToWindow();
	}
}

/**
 * DashboardItem
 * Constructor and initilizer
 */
function Item(){
	this.view = Ti.UI.createView({
		top: 10,
		left: 10
	});
	this.image = Ti.UI.createImageView({
		top: 0,
		bottom: 20,
		width: Ti.UI.FILL
	});
	this.label = Ti.UI.createLabel({
		bottom: 0,
		height: 20,
		width: Ti.UI.FILL,
		textAlign: 'center'
	});

	this.view.add(this.image);
	this.view.add(this.label);
}

/**
 * Sets the text of the item
 * @param { String } _text Item title
 */
Item.prototype.setText = function(_text) {
	this.label.setText(_text);
};

/**
 * Sets the image of the item
 * @param { String } _text Image name
 */
Item.prototype.setImage = function(_text) {
	this.image.setImage(_text);
};

exports.View = View;
exports.Item = Item;

Awesome module. Works great on iPhone, but on Android under v2.0.2GA is showing one dashboard item per view (page). Any ideas how to fix this? Thx!

I tested this on android, not in 2.0.2.

In 2.0.1 it worked at the time, I'll have to take a look, thanks.

Thanks Pedro. I tried 2.0.1 and 2.0.2 on both device and emulator, and get the same result; empty first screen, and one icon per screen thereafter.