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 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