Skip to content

Instantly share code, notes, and snippets.

@gbaldera
Forked from pec1985/app.js
Created May 31, 2012 12:20
Show Gist options
  • Save gbaldera/2843033 to your computer and use it in GitHub Desktop.
Save gbaldera/2843033 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;
@gbaldera
Copy link
Author

gbaldera commented Jun 2, 2012

I'm gonna try it and let you know ;)

@bcpi
Copy link

bcpi commented Jun 2, 2012

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