Created
May 20, 2012 06:55
-
-
Save pec1985/2757068 to your computer and use it in GitHub Desktop.
DashboardView JS module
This file contains 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 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; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.