Skip to content

Instantly share code, notes, and snippets.

@pec1985
Created May 20, 2012 06:55
Show Gist options
  • Save pec1985/2757068 to your computer and use it in GitHub Desktop.
Save pec1985/2757068 to your computer and use it in GitHub Desktop.
DashboardView JS module
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();
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;
@bcpi
Copy link

bcpi commented Jun 2, 2012

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!

@pec1985
Copy link
Author

pec1985 commented Jun 6, 2012

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.

@bcpi
Copy link

bcpi commented Jun 7, 2012

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment