I am trying to open a new window by click a row in tableview in titanium.
this is my code,
function listpage(){
var tabgroup=Ti.UI.createTabGroup();
var win = Ti.UI.createWindow({
title:'Listpage',
backgroundColor:'#fff'
});
var dataArray = [{
title:'Sunday',
hasChild:true,
test:'detail'}];
for(var i=0;i<dataArray.length;i++){
dataArray[i].color = '#000';
dataArray[i].font = {fontWeight:'bold',fontSize:20};
}
var tableview=Ti.UI.createTableView({
data:dataArray
});
tableview.addEventListener('click',function(e){
if(e.rowData){
Ti.API.info(e.rowData.title);
var winEvent = Titanium.UI.createWindow({
backgroundColor:'#fff',
url:e.rowData.test
});
winEvent.open({animation:true});
}
});
win.add(tableview);
win.open();
}
detail.js code :
var self = Ti.UI.createWindow({
title:'Detail',
color:'#000',
backgroundColor:'white'
});
var label = Ti.UI.createLabel({
text:'Hai',
color:'#000'
});
self.add(label);
What to do to open detail.js window by clicking tableview row.
Thankyou.
Surendra, this is something similar to your problem. It opens a window while you clicks on each row.
Code is
var wndHome = Ti.UI.createWindow({
backgroundColor : 'white'
});
var tableView = Ti.UI.createTableView({
top : 0
});
var tabledata = [];
for(var i = 0 ; i < 10; i++){
var row = Ti.UI.createTableViewRow({
title : 'Title of window',
url : 'details.js'
});
tabledata.push(row);
}
tableView.data = tabledata;
wndHome.add(tableView);
wndHome.open();
tableView.addEventListener('click', function(e){
var wndNewWindow = Ti.UI.createWindow({
backgroundColor : '#999966',
url : e.rowData.url
});
wndNewWindow.open();
});
details.js file
var self = Ti.UI.currentWindow;
var label = Ti.UI.createLabel({
text:'Hai',
color:'#000'
});
self.add(label);
Here I've given the url to details.js. If you want to use different windows, then keep the file names in an array and while creating the tableViewRow, you can simply add the array element as the url(eg: fileArray = ['file1.js', 'file2.js','file3.js'];).
Try this and change your code as per your requirement.
Related
I want to create a custom table header View, but I want that view to be repeated
I have 3 sections and in all 3 sections I want to view the same header View for the table.
Here is my code :
var section1HeaderView = Ti.UI.createView({ height: 40,backgroundColor:'#00928F' });
var section1HeaderLabel = Ti.UI.createLabel({ text: 'I am the header, hear me roar!',color:'black' });
section1HeaderView.add(section1HeaderLabel);
var sectionFruit = Ti.UI.createTableViewSection({ headerView: section1HeaderView });
sectionFruit.add(Ti.UI.createTableViewRow({ title: 'Apples' }));
sectionFruit.add(Ti.UI.createTableViewRow({ title: 'Bananas' }));
var sectionVeg = Ti.UI.createTableViewSection({ headerTitle: 'Vegetables' });
sectionVeg.add(Ti.UI.createTableViewRow({ title: 'Carrots' }));
sectionVeg.add(Ti.UI.createTableViewRow({ title: 'Potatoes' }));
var table = Ti.UI.createTableView({
data: [sectionFruit, sectionFruit,sectionFruit]
});
$.win.add(table);
Output:
If you notice it is taking the height property but not the background color property nor the label added?
This doesn't answer the "Why can't I use the same headerView for multiple sections" (probably some restriction in Titanium or on native?) question but it does solve your problem.
var headerViewArray = [];
for(var i =0; i<3;i++){
var headerView = Ti.UI.createView({ height: 40,backgroundColor:'#00928F' });
var headerLabel = Ti.UI.createLabel({ text: 'I am the header, hear me roar!',color:'black' });
headerView.add(headerLabel);
headerViewArray.push(headerView);
}
var fruitData = [{'title':'Apples'},{'title':'Bananas'}];
var vegData = [{'title':'Carrots'},{'title':'Potatoes'}];
var meatData = [{'title':'Chicken'},{'title':'Beef'}];
var sectionFruit = Ti.UI.createTableViewSection({ headerView: headerViewArray[0] });
_.each(fruitData, function(item){
sectionFruit.add(Ti.UI.createTableViewRow(item));
})
var sectionVeg = Ti.UI.createTableViewSection({ headerView: headerViewArray[1] });
_.each(vegData, function(item){
sectionVeg.add(Ti.UI.createTableViewRow(item));
})
var sectionMeat = Ti.UI.createTableViewSection({ headerView: headerViewArray[2] });
_.each(meatData, function(item){
sectionMeat.add(Ti.UI.createTableViewRow(item));
})
var table = Ti.UI.createTableView({
data: [sectionFruit, sectionVeg, sectionMeat]
});
$.index.add(table);
$.index.open();
My case is that I want to remain/save entered data on text field and will make a drop down list of my previous entered data when I click on the text field and also if i close and open back the application, the entered data will still be in the drop down list. Example, i entered "abc123" in the text field and i press enter on a button, it will save "abc123" in the drop down list of the text field and if i quit the application and enter again, "abc123" will still be in the drop down list.
var win = Ti.UI.createWindow({
backgroundColor: 'white',
});
var txtfield = Ti.UI.createTextField({
});
var btn = Ti.UI.createButton({
title: 'go'
});
win.add(btn);
win.add(txtfield);
win.open();
You'll need to save the values to SQLite or Ti.App.Properties.
Here is a working example :
var win = Ti.UI.createWindow({
backgroundColor : 'white',
layout : 'vertical'
});
var txtfield = Ti.UI.createTextField({
width : Ti.UI.FILL,
height : Ti.UI.SIZE,
hintText : 'Enter new values...',
top : 0
});
var picker = Ti.UI.createPicker({
top : 10
});
var data = (Ti.App.Properties.hasProperty('itemList')) ? Ti.App.Properties.getList('itemList') : [];
Ti.API.info('data is ' + data);
var m = [];
if (data)
data.forEach(function(item) {
m.push(Ti.UI.createPickerRow({title:item}));
});
Ti.API.info('M is ' + m);
if (m.length > 0)
picker.add(m);
var btn = Ti.UI.createButton({
top : 10,
width : Ti.UI.SIZE,
height : Ti.UI.SIZE,
title : 'go'
});
btn.addEventListener('click', function(e) {
var s = [];
if (Ti.App.Properties.hasProperty('itemList')) {
Ti.API.info('Property found');
s = Ti.App.Properties.getList('itemList');
}
Ti.API.info('S is ' + s);
s.push(txtfield.value);
Ti.App.Properties.setList('itemList', s);
picker.add(Ti.UI.createPickerRow({title:txtfield.value}));
txtfield.value = '';
});
win.add(btn);
win.add(txtfield);
win.add(picker);
win.open();
Definitely recommend to use sessionStorage or localStorage
I started off with the basic tabbed model and using KitchenSink began changing,'customizing' it to my needs. I have created 3 tableviews each which opens to its own vertical layout and tableviewrows. For some reason, something that I have not read. i cannot attach anything to the first tab. Help would be appreciated.
I have also included a part of the JS file
app.js
(function() {
//determine platform and form factor and render approproate components
var osname = Ti.Platform.osname,
version = Ti.Platform.version,
height = Ti.Platform.displayCaps.platformHeight,
width = Ti.Platform.displayCaps.platformWidth;
//considering tablet to have one dimension over 900px - this is imperfect, so you should feel free to decide
//yourself what you consider a tablet form factor for android
var isTablet = osname === 'ipad' || (osname === 'android' && (width > 899 || height > 899));
var Window;
if (isTablet) {
Window = require('ui/tablet/ApplicationWindow');
}
else {
Window = require('ui/handheld/ApplicationWindow');
}
var ApplicationTabGroup = require('ui/common/ApplicationTabGroup');
new ApplicationTabGroup(Window).open();
})();
applicationTabGroup.
function ApplicationTabGroup(Window) {
//create module instance
var self = Ti.UI.createTabGroup();
//create app tabs
var win1 = new Window(('Core Measures')),
win2 = new Window(('Patient'));
win3 = new Window(('Provider'));
var tab1 = Ti.UI.createTab({
title: ('Core Measures'),
window: win1
});
win1.containingTab = tab1;
var tab2 = Ti.UI.createTab({
title: ('Patient'),
window: win2
});
win2.containingTab = tab2;
var tab3 = Ti.UI.createTab({
title: ('Provider'),
window: win3
});
win3.containingTab = tab3;
self.addTab(tab1);
self.addTab(tab2);
self.addTab(tab3);
return self;
};
module.exports = ApplicationTabGroup;
TableView
function CoreMeasures(title) {
var self = Ti.UI.createWindow({
title:.title,
backgroundColor:'white'
});
//create table view data object
var data = [
{title: 'Pneumonia', hasChild : true, test: 'ui/common/pneumonia'},
{title: 'CHF', hasChild: true, test:ui/common/CHF'},
{title: 'Myocardial Infarction', hasChild: true, test: 'ui/common/Myocardial Infarction'};
]
// create table view
for (var i = 0; i < data.length; i++ ) {
var d = data[i];
if(d.touchEnabled !==false) {
d.color = '#000'
data:data
});
// create table view event listener
tableview.addEventListener('click', function(e)
{
if (e.rowData.test)
{
var ExampleWindow = require(e.rowData.test),
win = new ExampleWindow({title:e.rowData.title,containingTab:self.containingTab,tabGroup:self.tabGroup});
if (Ti.Platform.name == "android") {
} else {
win.backgroundColor = "#fff"
A couple of things. I don't see anywhere that you have called the function CoreMeasures. Also you might have an issue with the following code:
function CoreMeasures(title) {
var self = Ti.UI.createWindow({
title:.title,
backgroundColor:'white'
});
I noticed a dot before your title.
i'm getting a JSON response properly but my problem is with showing it. what's wrong with my code.
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');
// create base UI tab and root window
var win1 = Titanium.UI.createWindow({
title : 'Main Window',
backgroundColor : '#fff'
});
var listUrl = "http://magadhena.com/test/list.php?FCODE=5&USERID=1";
var NumberOfLists = [];
var lists;
var tableData = [];
var table = Ti.UI.createTableView({
top : 40,
left : 10,
width : 300
});
var txt1 = Titanium.UI.createTextField({
top : 10,
left : 10,
width : 250
});
var button1 = Ti.UI.createButton({
top : 10,
left : 270,
width : 30
});
var xhr = Ti.Network.createHTTPClient();
xhr.setTimeout(3000);
xhr.onload = function() {
lists = eval('(' + this.responseText + ')');
for(var i = 0; i < lists.length; i++) {
var userId = lists[i].userid;
// The userID
var listId = lists[i].listid;
// The ListID
var listName = lists[i].listname;
// The ListName
var Object1 = new list(userId, listId, listName);
// Ti.API.log("Object is ",Object1.listId);
NumberOfLists.push(Object1);
// Ti.API.log("the size of the Json array is" , NumberOfLists.length);
}
};
xhr.open("GET", listUrl);
xhr.send();
for(var i = 0; i < NumberOfLists.length; i++) {
var row = Ti.UI.createTableViewRow({
title : NumberOfLists[i].listName
});
Ti.API.log("populating the data table ", NumberOfLists[i].toString);
tableData.push(row)
};
// Ti.API.log("the size of table data is ", tableData.length);
table.setData(tableData);
win1.add(table);
win1.add(txt1);
win1.add(button1);
// Opening Window1
win1.open();
///// List Objects
function list(userid, listid, listname) {
this.userId = userid;
this.listId = listid;
this.listName = listname;
}
You need to put table.setData() into xhr.onload function. Since you defined the code outside of the function, NumberOfLists is empty until xhr.onload function executed
im using for first time appcelerator for a Iphone app, im using a TableViewRow, when the window load all is fine, but if i want to refresh the window, the TableViewRow repeat the same data every time that i push refresh, so, i have 5 Categories, after refresh im having the same Categories repeting every time that im trying to refresh.
Ti.UI.backgroundColor = '#dddddd';
var url = "http://remoteJSON.js";
var win = Titanium.UI.currentWindow;
var table = Titanium.UI.createTableView();
var tableData = [];
var json, categorias, categoria, i, row, categoriaLabel, descripcionLabel;
var refreshBtn = Titanium.UI.createButton({
systemButton: Ti.UI.iPhone.SystemButton.REFRESH
});
refreshBtn.addEventListener('click', function() {
loadTutoriales();
});
win.setRightNavButton(refreshBtn);
var actInd = Titanium.UI.createActivityIndicator({
bottom:10,
height:50,
width:10,
style:Titanium.UI.iPhone.ActivityIndicatorStyle.PLAIN
});
function loadTutoriales(){
if(!Titanium.Network.online){
alert("Debe conectarse a internet.");
}
var xhr = Ti.Network.createHTTPClient({
onload: function() {
actInd.show();
actInd.message = 'Loading...';
//Ti.API.debug(this.responseText);
json = JSON.parse(this.responseText);
for (i = 0; i < json.categorias.length; i++) {
var rowColor = '#eeeeee';
if(i & 1){
rowColor = '#ffffff';
}
categoria = json.categorias[i];
var row = Ti.UI.createTableViewRow({
height:'auto',
hasChild:true
});
row.backgroundColor=rowColor;
/* add */
var post_view = Titanium.UI.createView({
height:'auto',
layout:'vertical',
top:5,
right:5,
bottom:5,
left:5
});
var av_image = Titanium.UI.createImageView({
image:categoria.imageUrl,
top:0,
left:0,
height:48,
width:48
});
post_view.add(av_image);
var inner_view = Titanium.UI.createView({
height:'auto',
layout:'vertical',
top:0,
right:0,
bottom:0,
left:0
});
/* end add */
var categoriaLabel = Ti.UI.createLabel({
text:categoria.categoryName,
left:54,
width:120,
top:-48,
bottom:0,
height:18,
textAlign:'left',
color:'#444444',
font:{fontFamily:'Trebuchet MS',fontSize:14,fontWeight:'bold'}
});
inner_view.add(categoriaLabel);
var descripcionLabel = Ti.UI.createLabel({
text:'"' + categoria.description + '"',
left:54,
top:0,
bottom:2,
height:'auto',
width:'auto',
textAlign:'left',
font:{fontSize:14}
});
inner_view.add(descripcionLabel);
post_view.add(inner_view);
row.add(post_view);
//row.add(descripcionLabel);
tableData.push(row);
}
table.setData(tableData);
},
onerror: function(e) {
Ti.API.debug("STATUS: " + this.status);
Ti.API.debug("TEXT: " + this.responseText);
Ti.API.debug("ERROR: " + e.error);
alert('There was an error retrieving the remote data. Try again.');
},
timeout:5000
});
//win.add(actInd);
win.add(table);
win.open();
//actInd.hide();
xhr.open("GET", url);
xhr.send();
}
loadTutoriales();
When you press the refresh button clear the tableData array and assign to table set data function before you fill your table again. So it will empty your table first and than fill new refreshed data.
Like this,
refreshBtn.addEventListener('click', function() {
tableData = [];
table.setData(tableData);
loadTutoriales();
});