Skip to content

Instantly share code, notes, and snippets.

@egomez99
Created November 21, 2012 22:44
Show Gist options
  • Save egomez99/4128335 to your computer and use it in GitHub Desktop.
Save egomez99/4128335 to your computer and use it in GitHub Desktop.
TableView samples that use ClassName property
/*
//Sample 1
var tableView = require('tv_layout2');
tableView().open();
*/
/*
//Sample 2
var data = [];
var win = Ti.UI.createWindow();
var row = Ti.UI.createTableViewRow({
className : 'scrolltab',
height : 67,
backgroundColor : '#fff',
//selectionStyle : Ti.UI.iPhone.TableViewCellSelectionStyle.NONE
});
var scrollView = Titanium.UI.createScrollView({
contentWidth : 500,
contentHeight : 50,
top : 10,
height : 50,
width : 230,
borderRadius : 10,
backgroundColor : '#13386c'
});
row.add(scrollView);
var view1 = Ti.UI.createView({
backgroundColor : '#336699',
width : 440,
height : 40,
left : 10
});
row.add(view1);
// add a bunch more views to the scrollView
data.push(row);
feedTableView = Titanium.UI.createTableView({
data : data
});
win.add(feedTableView);
win.open();
*/
/*
//Sample 3
var win1 = Titanium.UI.createWindow({
title:'Form Test',
navBarHidden: true,
backgroundColor:'#eee'
});
var tableView = Ti.UI.createTableView({
});
var rows = [];
var start = new Date();
for (var i = 0; i < 100; ++i) {
var row = Ti.UI.createTableViewRow({ title: 'Row ' + i, className: 'Row' });
tableView.appendRow(row);
}
Ti.API.info(new Date() - start);
win1.add(tableView);
win1.open();
*/
/*
//Sample 4
var inArray = function(needle, haystack) {
for (var i = 0, len = haystack.length; i < len; i++) {
if (needle === haystack[i]) {
return true;
}
}
return false;
};
var extend = function(base, props, rejects) {
if (typeof base === 'undefined') {
return {};
}
props = props || {};
rejects = rejects || [];
var obj = {}, k;
for (k in base) {
if (base.hasOwnProperty(k)) {
obj[k] = base[k];
}
}
for (k in props) {
if (props.hasOwnProperty(k) && !inArray(k, rejects)) {
obj[k] = props[k];
}
}
return obj;
};
//create window
var win = Ti.UI.createWindow({
title: 'test'
});
var extData = extend(win._data),
EP_URL = 'http://www.mynailist.jp/json_n_list.php';
// Create Tableview
var table = Ti.UI.createTableView({});
// Create Rows (pictures)
var createRows = function(data) {
var rows = [], i, c, len, item, row, left, image,
BATCH = 20, COLS = 2, WIDTH = Ti.Platform.displayCaps.platformWidth,
SPACE = 8, GAP = 6,
width = Math.floor((WIDTH - 2 * SPACE - (COLS - 1) * GAP) / COLS);
for (i = 1, len = Math.min(BATCH, parseInt(data.kensu,10)); i <= len; i += COLS) {
if (!data['custid_' + i]) {
break;
}
row = Ti.UI.createTableViewRow({
backgroundColor: '#000000',
height: 180,
className: 'thumbitem'
});
left = SPACE;
for (c = 0; c < COLS; c++) {
if (!data['custid_' + (i + c)]) {
break;
}
image = Ti.UI.createImageView({
image: data['picnm_' + (i + c)],
top: 8,
left: left,
bottom: 8,
width: width,
maxHeight: 180,
ratio: parseInt(data['picnm_h_' + (i + c)], 10) / parseInt(data['picnm_w_' + (i + c)], 10)
});
row.add(image);
left += width + GAP;
}
rows.push(row);
}
return rows;
};
// Create Footer (Reading Button(Row))
var createFooter = function() {
// Create Footer (row)
var row = Ti.UI.createTableViewRow({
backgroundColor: '#000000',
height: 'auto',
className: 'thumbfoot'
});
// Create Footer (label)
var cond = Ti.UI.createLabel({
text: 'Read more 20 images',
color: '#ffffff',
textAlign: 'center',
top: 38,
bottom: 40,
height: 'auto',
width: 'auto',
font: {fontSize: 18}
});
row.add(cond);
return row;
};
// Reading JSON Data
var BATCH = 20;
var cache = {};
var load = function(params) {
Ti.API.info(params.offset);
// apply default parameters if needed
if (typeof params === 'undefined') {
params = {};
}
if (typeof params.offset === 'undefined') {
params.offset = 1;
}
// load from JSON API
var xhr = Ti.Network.createHTTPClient();
xhr.setTimeout(20000);
xhr.onload = function() {
// parse response text as JSON
var data = JSON.parse(this.responseText)[0],
total, page, news, rows;
// prepare header
total = parseInt(data.kensu,10);
// prepare result rows
if (!cache.rows) {
cache.rows = [];
}
news = createRows(data);
cache.rows = cache.rows.concat(news);
// prepare footer
if (!cache.footer) {
cache.footer = createFooter();
}
page = parseInt(data.offset,10);
cache.footer._offset = page + 1;
// Prepare data
rows = cache.rows.slice(0);
rows.unshift(cache.header);
if (page * BATCH < total) {
rows.push(cache.footer);
}
// append/insert rows
if (table.data.length === 0 || table.data[0].rowCount === 0) {
table.setData(rows, {animated: false});
} else {
for (var i = 0, len = news.length; i < len; i++) {
table.insertRowBefore(table.data[0].rowCount - 1, news[i],
{animated: false});
}
}
};
setTimeout(function() {
xhr.abort();
}, 20000);
xhr.open('GET', EP_URL + '?offset=' + params.offset);
xhr.send();
};
// check network availability
if (Ti.Network.online) {
// Reading First page
load(extData);
}
// When "Read more 20 images" footer is clicked, load more images
// Reading Button(Row) Event
table.addEventListener('click', function(e) {
if (typeof e.row._offset !== 'undefined') {
load(extend(extData, {offset: e.row._offset}));
Ti.API.info('---------------> Unused memory is currently: ' + Ti.Platform.availableMemory);
}
});
win.add(table);
win.open();
*/
/*
//Sample 4
var win=Ti.UI.createWindow({});
var table=Ti.UI.createTableView({});
win.add(table);
win.addEventListener("open",function () {
var data=[];
for(i=0;i<10;i++) {
(function(i) {
var row=Ti.UI.createTableViewRow({width:320,height:200});
row.addEventListener("postlayout",function() {Ti.API.info("row:"+i)});
var bimg=Ti.UI.createImageView({image:'http://overtheair.org/blog/wp-content/uploads/2011/09/appcelerator-logo.png',top:25,left:0,right:0,bottom:5});
bimg.addEventListener("postlayout",function() {Ti.API.info("bimg:"+i)});
var simg=Ti.UI.createImageView({image:'http://overtheair.org/blog/wp-content/uploads/2011/09/appcelerator-logo.png',top:25,left:5,width:30,height:30});
simg.addEventListener("postlayout",function() {Ti.API.info("simg:"+i)});
var bview=Ti.UI.createView({top:0,left:0,width:100,height:20});
bview.addEventListener("postlayout",function() {Ti.API.info("bview:"+i)});
var label=Ti.UI.createLabel({text:"row:"+i,top:5,left:5,right:5,bottom:5,height:Ti.UI.SIZE});
label.addEventListener("postlayout",function() {Ti.API.info("label:"+i)});
row.add(bimg);
row.add(simg);
bview.add(label);
row.add(bview);
row.className="testrow";
data.push(row);
})(i);
}
table.setData(data);
});
win.open();
*/
/*
//Sample 5
var win = Ti.UI.createWindow();
var table = Ti.UI.createTableView();
function Row(name) {
var row = Ti.UI.createTableViewRow({className: 'meh', reusable: true, height: Ti.UI.SIZE });
row.add(Ti.UI.createLabel({text: name}));
return row;
}
function reloadOne() {
var data = [
Row('Row 1'),
Row('Row 2'),
Row('Row 3'),
Row('Row 4')
];
table.setData(data);
}
function reloadTwo() {
var data = [
Row('Row 5'),
Row('Row 6'),
Row('Row 7'),
Row('Row 8')
];
table.setData(data);
}
win.add(table);
var btnOne = Ti.UI.createButton({
title : 'click',
});
var btnTwo = Ti.UI.createButton({
title : 'click',
});
btnOne.addEventListener('click', reloadOne);
btnTwo.addEventListener('click', reloadTwo);
win.rightNavButton = btnOne;
win.leftNavButton = btnTwo;
win.open({modal:true});
*/
function tv_layout2() {
var win = Titanium.UI.createWindow();
win.barColor = '#385292';
if (Ti.Platform.osname !== 'mobileweb') {
//
// CREATE SEARCH BAR
//
var search = Titanium.UI.createSearchBar({
barColor:'#385292',
showCancel:false
});
search.addEventListener('change', function(e)
{
e.value; // search string as user types
});
search.addEventListener('return', function(e)
{
search.blur();
});
search.addEventListener('cancel', function(e)
{
search.blur();
});
}
var tableView;
var data = [];
// create first row
var row = Ti.UI.createTableViewRow();
row.backgroundColor = '#576996';
row.selectedBackgroundColor = '#385292';
row.height = 40;
var clickLabel = Titanium.UI.createLabel({
text:'Click different parts of the row',
color:'#fff',
textAlign:'center',
font:{fontSize:14},
width:'auto',
height:'auto'
});
row.className = 'header';
row.add(clickLabel);
data.push(row);
// when you click the header, scroll to the bottom
row.addEventListener('click',function()
{
tableView.scrollToIndex(40,{animated:true,position:Ti.UI.iPhone.TableViewScrollPosition.TOP});
});
// create update row (used when the user clicks on the row)
function createUpdateRow(text)
{
var updateRow = Ti.UI.createTableViewRow();
updateRow.backgroundColor = '#13386c';
updateRow.selectedBackgroundColor = '#13386c';
// add custom property to identify this row
updateRow.isUpdateRow = true;
var updateRowText = Ti.UI.createLabel({
color:'#fff',
font:{fontSize:20, fontWeight:'bold'},
text:text,
width:'auto',
height:'auto'
});
updateRow.className = 'updated_row';
updateRow.add(updateRowText);
return updateRow;
}
// create a var to track the active row
var currentRow = null;
var currentRowIndex = null;
// create the rest of the rows
for (var c=1;c<50;c++)
{
var row = Ti.UI.createTableViewRow();
row.selectedBackgroundColor = '#fff';
row.height = 100;
row.className = 'datarow';
row.clickName = 'row';
var photo = Ti.UI.createView({
backgroundImage:'/images/custom_tableview/user.png',
top:5,
left:10,
width:50,
height:50,
clickName:'photo'
});
row.add(photo);
var user = Ti.UI.createLabel({
color:'#576996',
font:{fontSize:16,fontWeight:'bold', fontFamily:'Arial'},
left:70,
top:2,
height:30,
width:200,
clickName:'user',
text:'Fred Smith '+c
});
row.filter = user.text;
row.add(user);
var fontSize = 16;
if (Titanium.Platform.name == 'android') {
fontSize = 14;
}
var comment = Ti.UI.createLabel({
color:'#222',
font:{fontSize:fontSize,fontWeight:'normal', fontFamily:'Arial'},
left:70,
top:21,
height:50,
width:200,
clickName:'comment',
text:'Got some fresh fruit, conducted some business, took a nap'
});
row.add(comment);
var calendar = Ti.UI.createView({
backgroundImage:'/images/custom_tableview/eventsButton.png',
bottom:2,
left:70,
width:32,
clickName:'calendar',
height:32
});
row.add(calendar);
var button = Ti.UI.createView({
backgroundImage:'/images/custom_tableview/commentButton.png',
top:35,
right:5,
width:36,
clickName:'button',
height:34
});
row.add(button);
var date = Ti.UI.createLabel({
color:'#999',
font:{fontSize:13,fontWeight:'normal', fontFamily:'Arial'},
left:105,
bottom:5,
height:20,
width:100,
clickName:'date',
text:'posted on 3/11'
});
row.add(date);
data.push(row);
}
//
// create table view (
//
if (Ti.Platform.osname !== 'mobileweb') {
tableView = Titanium.UI.createTableView({
data:data,
search:search,
filterAttribute:'filter',
backgroundColor:'white'
});
} else {
tableView = Titanium.UI.createTableView({
data:data,
filterAttribute:'filter',
backgroundColor:'white'
});
}
tableView.addEventListener('click', function(e)
{
Ti.API.info('table view row clicked - source ' + e.source);
// use rowNum property on object to get row number
var rowNum = e.index;
var updateRow;
if (Ti.Platform.osname !== 'mobileweb') {
updateRow = createUpdateRow('You clicked on the '+e.source.clickName);
tableView.updateRow(rowNum,updateRow,{animationStyle:Titanium.UI.iPhone.RowAnimationStyle.LEFT});
} else {
updateRow = createUpdateRow('Row clicked');
tableView.updateRow(rowNum,updateRow);
}
});
win.add(tableView);
return win;
};
module.exports = tv_layout2;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment