how can I pass the value in a textfield to a new tab/window?

I am trying to build a calculator type of application where you input some values on tab 1 and then when you press tab 2 the values from tab 1 are used and calculate results to displayed on tab 2. I can not find how to pass the values of the textfields to tab 2. How is this done?

Thanks in advance

6 Answers

You could always save the value of the textfield as a Property that is saved and available app wide.

Something like:
Titanium.App.Properties.setString("Textfield_tab1",textfield.value);

Where textfield is the name of your textfield, and you'd call it by using

Titanium.App.Properties.getString("Textfield_tab1")
— answered October 29th 2010 by Chris Nelson
permalink

2 Comments
- I still get null here is what I have
  
  I have only 1 javascript file
  
  section of my code…
  
  var ageTf = Titanium.UI.createTextField();
  ageTf.borderColor = '#000';
  ageTf.width = 'auto';
  ageTf.top = 1;
  ageTf.left = 40;
  
  win1.add(label1);
  win1.add(ageTf);
  
  Titanium.App.Properties.setString("age_tab1",ageTf.value);
  
  //
  // create controls tab and root window
  //
  var win2 = Titanium.UI.createWindow({
  //title:'Tab 2',
  backgroundColor:'#fff'
  });
  
  Titanium.App.Properties.setString("age_tab1",ageTf.value);
  
  var tab2 = Titanium.UI.createTab({
  icon:'KS_nav_ui.png',
  title:'Results',
  window:win2
  });
  
  var label2 = Titanium.UI.createLabel({
  color:'#999',
  text:'Age = ' +Titanium.App.Properties.getString("age_tab1"),
  font:{fontSize:20,fontFamily:'Helvetica Neue'},
  textAlign:'center',
  width:'auto'
  });
  
  win2.add(label2);
  
  — commented October 29th 2010 by Dean Rochester
- I even tried adding an eventListener to win2 and an alert to see if I am even getting in the event. I am, the alert comes up, but the value of the textfield is not obtained with the .value
  
  Here is my entire code… what am I missing? I am testing this an Android app.
  
  // create tab group
  var tabGroup = Titanium.UI.createTabGroup();
  var ageVal = 0;
  
  //
  // create base UI tab and root window
  //
  var win1 = Titanium.UI.createWindow({
  //title:'Input',
  backgroundColor:'#fff'
  });
  var tab1 = Titanium.UI.createTab({
  icon:'KS_nav_views.png',
  title:'Input',
  window:win1
  });
  
  var label1 = Titanium.UI.createLabel({
  color:'#000',
  text:'Age',
  font:{fontSize:20,fontFamily:'Helvetica Neue'},
  left:1,
  top:1,
  verticalAlign:'bottom',
  width:'auto'
  });
  
  var ageTf = Titanium.UI.createTextField();
  ageTf.borderColor = '#000';
  ageTf.width = 50;
  ageTf.top = 1;
  ageTf.left = 40;
  
  win1.add(label1);
  win1.add(ageTf);
  
  //
  // create controls tab and root window
  //
  var win2 = Titanium.UI.createWindow({
  //title:'Tab 2',
  backgroundColor:'#fff'
  });
  
  // add the event to the first item
  win2.addEventListener('open', function (e) {
  alert("in addEventListener function!" + ageTf.value);
```
 ageVal = ageTf.value;  
```
  });
  
  var tab2 = Titanium.UI.createTab({
  icon:'KS_nav_ui.png',
  title:'Results',
  window:win2
  });
  
  var label2 = Titanium.UI.createLabel({
  color:'#999',
  text:'Age2 = ' +ageVal,
  font:{fontSize:20,fontFamily:'Helvetica Neue'},
  textAlign:'center',
  width:'auto'
  });
  
  win2.add(label2);
  
  //
  // add tabs
  //
  tabGroup.addTab(tab1);
  tabGroup.addTab(tab2);
  
  — commented October 29th 2010 by Dean Rochester
0 Votes

Took the basic example and added an event listener to update the fields on the second tab whenever it became active.

Like I said in the comment, there is no need for magic since it is all in one js file

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');

// create tab group
var tabGroup = Titanium.UI.createTabGroup();


//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'Tab 1',
    window:win1
});

var label1 = Titanium.UI.createLabel({
    color:'#999',
    text:'I am Window 1',
    font:{fontSize:20,fontFamily:'Helvetica Neue'},
    textAlign:'center',
    width:'auto'
});

win1.add(label1);

var ageTf = Titanium.UI.createTextField({
    color:'#336699',
    hintText:'field one',
    height:35,
    top:10,
    left:10,
    width:250,
    borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
win1.add(ageTf);
var anotherTf = Titanium.UI.createTextField({
    color:'#336699',
    hintText:'field two',
    height:35,
    top:50,
    left:10,
    width:250,
    borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
win1.add(anotherTf);

//
// create controls tab and root window
//
var win2 = Titanium.UI.createWindow({  
    title:'Tab 2',
    backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({  
    icon:'KS_nav_ui.png',
    title:'Tab 2',
    window:win2
});

var label2 = Titanium.UI.createLabel({
    color:'#999',
    text: '',
    font:{fontSize:20,fontFamily:'Helvetica Neue'},
    textAlign:'center',
    width:'auto'
});

win2.add(label2);



//
//  add tabs
//
tabGroup.addTab(tab1);  
tabGroup.addTab(tab2);  

win2.addEventListener('focus', function(e) {
     Titanium.API.info ('in event listener ' + e);
     label2.text = anotherTf.value + ageTf.value; 
    } );


// open tab group
tabGroup.open();

— answered October 29th 2010 by Aaron Saunders
permalink

2 Comments

Nope I pasted exactly what you have sent and it does not put anything on the second window as far as the label text also, nothing in the cat log window for info or in the console either. I even put in an alert to have it pop up so I knew it was in the actionListener. What am I missing? This should not be this hard. I even tried putting the actionListener on the tab2 for click and still nothing.

— commented October 30th 2010 by Dean Rochester
Does the location of the actionListener matter? I have it just as you sent in your sample. Here it is as I have it going against the tab2 object… but still nothing. I have tried this with the emulator and also on my t mobile g1 which is at 1.6 Android.

// add tabs
//
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);

tab2.addEventListener('click', function(e) {
alert("in addEventListener function!" + ageTf.value);
```
 Titanium.API.info ('in event listener ' + e);
 label2.text = anotherTf.value + ageTf.value; 
} );
```
// open tab group
tabGroup.open();

— commented October 30th 2010 by Dean Rochester

Well I figured out an answer… the ones supplied did not work. I looked at the kitchen sink and the tab group listener using blur seemed to do the trick. here is my code and this works on Android and Iphone… but the index for Android is for the tab you are coming from and for the Iphone it is for the tab you clicked on. Not nice… If I could find a way to find the title of the actual tab that was click on… then we might have something.

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');

// create tab group
var tabGroup = Titanium.UI.createTabGroup();

//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({
title:'Tab 1',
backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({
icon:'KS_nav_views.png',
title:'Tab 1',
window:win1
});

var label1 = Titanium.UI.createLabel({
color:'#999',
text:'I am Window 1',
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});

win1.add(label1);

var ageTf = Titanium.UI.createTextField({
color:'#336699',
hintText:'field one',
height:35,
top:10,
left:10,
width:250,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
win1.add(ageTf);
var anotherTf = Titanium.UI.createTextField({
color:'#336699',
hintText:'field two',
height:35,
top:50,
left:10,
width:250,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
win1.add(anotherTf);

//
// create controls tab and root window
//
var win2 = Titanium.UI.createWindow({
title:'Tab 2',
backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({
icon:'KS_nav_ui.png',
title:'Tab 2',
window:win2
});

var label2 = Titanium.UI.createLabel({
color:'#999',
text: '',
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});

win2.add(label2);

//
// add tabs
//
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);

// blur event listener for tracking tab changes
tabGroup.addEventListener('blur', function(e)
{
```
alert('tab blur - new index ' + e.index + ' old index ' + e.previousIndex);
if(e.index == 0)
{
    alert('tab 2 clicked');
    label2.text = anotherTf.value + ageTf.value; 
}
```
});

// open tab group
tabGroup.open();
— answered October 30th 2010 by Dean Rochester
permalink

0 Comments

0 Votes
Well I figured out an answer… the ones supplied did not work. I looked at the kitchen sink and the tab group listener using blur seemed to do the trick. here is my code and this works on Android and Iphone… but the index for Android is for the tab you are coming from and for the Iphone it is for the tab you clicked on. Not nice… If I could find a way to find the title of the actual tab that was click on… then we might have something.

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');

// create tab group
var tabGroup = Titanium.UI.createTabGroup();

//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({
title:'Tab 1',
backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({
icon:'KS_nav_views.png',
title:'Tab 1',
window:win1
});

var label1 = Titanium.UI.createLabel({
color:'#999',
text:'I am Window 1',
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});

win1.add(label1);

var ageTf = Titanium.UI.createTextField({
color:'#336699',
hintText:'field one',
height:35,
top:10,
left:10,
width:250,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
win1.add(ageTf);
var anotherTf = Titanium.UI.createTextField({
color:'#336699',
hintText:'field two',
height:35,
top:50,
left:10,
width:250,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
win1.add(anotherTf);

//
// create controls tab and root window
//
var win2 = Titanium.UI.createWindow({
title:'Tab 2',
backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({
icon:'KS_nav_ui.png',
title:'Tab 2',
window:win2
});

var label2 = Titanium.UI.createLabel({
color:'#999',
text: '',
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});

win2.add(label2);

//
// add tabs
//
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);

// blur event listener for tracking tab changes
tabGroup.addEventListener('blur', function(e)
{
```
alert('tab blur - new index ' + e.index + ' old index ' + e.previousIndex);
if(e.index == 0)
{
    alert('tab 2 clicked');
    label2.text = anotherTf.value + ageTf.value; 
}
```
});

// open tab group
tabGroup.open();
— answered October 30th 2010 by Dean Rochester
permalink

0 Comments

0 Votes
Well I figured out an answer… the ones supplied did not work. I looked at the kitchen sink and the tab group listener using blur seemed to do the trick. here is my code and this works on Android and Iphone… but the index for Android is for the tab you are coming from and for the Iphone it is for the tab you clicked on. Not nice… If I could find a way to find the title of the actual tab that was click on… then we might have something.

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');

// create tab group
var tabGroup = Titanium.UI.createTabGroup();

//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({
title:'Tab 1',
backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({
icon:'KS_nav_views.png',
title:'Tab 1',
window:win1
});

var label1 = Titanium.UI.createLabel({
color:'#999',
text:'I am Window 1',
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});

win1.add(label1);

var ageTf = Titanium.UI.createTextField({
color:'#336699',
hintText:'field one',
height:35,
top:10,
left:10,
width:250,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
win1.add(ageTf);
var anotherTf = Titanium.UI.createTextField({
color:'#336699',
hintText:'field two',
height:35,
top:50,
left:10,
width:250,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
win1.add(anotherTf);

//
// create controls tab and root window
//
var win2 = Titanium.UI.createWindow({
title:'Tab 2',
backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({
icon:'KS_nav_ui.png',
title:'Tab 2',
window:win2
});

var label2 = Titanium.UI.createLabel({
color:'#999',
text: '',
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});

win2.add(label2);

//
// add tabs
//
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);

// blur event listener for tracking tab changes
tabGroup.addEventListener('blur', function(e)
{
```
alert('tab blur - new index ' + e.index + ' old index ' + e.previousIndex);
if(e.index == 0)
{
    alert('tab 2 clicked');
    label2.text = anotherTf.value + ageTf.value; 
}
```
});

// open tab group
tabGroup.open();
— answered October 30th 2010 by Dean Rochester
permalink

0 Comments

0 Votes
I have used following code to transfer a value from one view to another.

In the first view/window

Titanium.App.Properties.setString("rowValue",row);

var editWindow = Ti.UI.createWindow({url:'addNoteWindow.js'});

editWindow.open();

In the editWindow

var textValue = Titanium.App.Properties.getString("rowValue");

— answered January 31st 2011 by Rizwan Qureshi
permalink

0 Comments

0 Votes

Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

how can I pass the value in a textfield to a new tab/window?

6 Answers