-
-
Save gbaldera/2843033 to your computer and use it in GitHub Desktop.
DashboardView JS module
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
I'm gonna try it and let you know ;)
Thanks Gustavo! For me it shows one item per page, with the first page empty.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I have not yet tested on Android