Develop Reference

Android Soft Keyboard Pushing Controls Up Titanium

I can't seem to figure out why the appearance of the soft keyboard whilst editing a text field on Android causes some of my controls to get pushed up the page. Is there a way to stop a view or a button from being moved up? It makes a real mess!
code:
registration = {};
registration.view = Titanium.UI.createView({
top : 0,
backgroundImage : GetfilePath + 'bg.png',
});
registration.init = function(view, name) {
var Scrolview = Titanium.UI.createScrollView({
top : viewTop,
height : Ti.UI.SIZE,
layout : 'vertical',
scrollType : 'vertical',
showHorizontalScrollIndicator : false
});
registration.view.add(Scrolview);
var profileView = Ti.UI.createView({
top : 10,
height : 100,
width : 100,
//backgroundColor : 'red',
});
Scrolview.add(profileView);
var profileImage = Ti.UI.createImageView({
image : GetfilePath + 'ProfilePicIcon.png',
});
profileView.add(profileImage);
var chooseprofileView = Ti.UI.createView({
top : 8,
width : deviceName == 'tab' ? '92.5%' : '92.5%',
height : deviceName == 'tab' ? 75 : 60,
});
Scrolview.add(chooseprofileView);
var chooseprofileImage = Ti.UI.createView({
backgroundImage : GetfilePath + 'ChooseProfilebutton.png'
});
chooseprofileView.add(chooseprofileImage);
var chooseprofileLabel = Ti.UI.createLabel({
text : 'Choose Profile Pic ',
color : '#E6E6E6',
font : {
fontSize : deviceName == 'tab' ? 19 : 17,
//fontWeight : 'bold',
fontFamily : os({
iphone : 'Helvetica Neue',
ipad : 'Helvetica Neue',
ipod : 'Helvetica Neue',
android : 'helveticaneue-webfont'
})
},
});
chooseprofileImage.add(chooseprofileLabel);
//alert(UserDetailsInfoData[0].UserName);
var namesurnametextfield = Titanium.UI.createTextField({
borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
hintText : 'Name & Surname*',
backgroundColor : '#32302D',
color : 'white',
backgroundImage : 'none',
keyboardToolbarHeight : 30,
borderRadius : 10,
borderColor : '#3F4246',
borderWidth : 2,
paddingLeft : 10,
width : '90%',
height : 55,
top : '1%',
//backgroundColor:'green'
});
Scrolview.add(namesurnametextfield);
var emailtextfield = Titanium.UI.createTextField({
borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
hintText : 'Email Address*',
backgroundColor : '#32302D',
color : 'white',
backgroundImage : 'none',
keyboardToolbarHeight : 30,
borderRadius : 10,
paddingLeft : 10,
borderColor : '#3F4246',
borderWidth : 2,
width : '90%',
height : 55,
top : '1%',
});
Scrolview.add(emailtextfield);
var cellnotextfield = Titanium.UI.createTextField({
borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
hintText : 'Cellphone Number',
backgroundColor : '#32302D',
color : 'white',
backgroundImage : 'none',
keyboardToolbarHeight : 30,
borderColor : '#3F4246',
borderWidth : 2,
borderRadius : 10,
paddingLeft : 10,
width : '90%',
height : 55,
top : '1%',
keyboardType : Titanium.UI.KEYBOARD_NUMBER_PAD,
});
Scrolview.add(cellnotextfield);
//alert(UserDetailsInfoData[0].UserName);
var displaynametextfield = Titanium.UI.createTextField({
borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
hintText : 'Display Name*',
backgroundColor : '#32302D',
color : 'white',
backgroundImage : 'none',
keyboardToolbarHeight : 30,
borderRadius : 10,
borderColor : '#3F4246',
borderWidth : 2,
paddingLeft : 10,
width : '90%',
height : 55,
top : '1%'
});
Scrolview.add(displaynametextfield);
};
i followed this link but the problem remains same.
ANY Solution?

Try this :
In your tiapp.xml file under android tag add this line of code :
<activity android:windowSoftInputMode="stateVisible|adjustResize" . . . >
One of the group of soft input visibility constants, SOFT_INPUT_STATE_ALWAYS_HIDDEN, SOFT_INPUT_STATE_ALWAYS_VISIBLE, SOFT_INPUT_STATE_HIDDEN, SOFT_INPUT_STATE_UNSPECIFIED, or SOFT_INPUT_STATE_VISIBLE.
One of the group of soft input adjustment constants, SOFT_INPUT_ADJUST_UNSPECIFIED, SOFT_INPUT_ADJUST_RESIZE, or SOFT_INPUT_ADJUST_PAN.
Also, check this :
Titanium windowSoftInputMode
Android windowSoftInputMode
Sample Android example here

I have never tried titanium before, however in normal Java android development. we add this code to the manifest under the related activity tag.
<activity
android:name="Your-activity-name"
android:windowSoftInputMode="adjustPan"
...
I read that there is a Custom AndroidManifest.xml in Titanuim 3.x..
Hope this works for you.

Can not read property length of null in titanium appcelerator

I am retrieving the json data using titanium.But the problem is that whenever i calculate the length of json data it says can not read length of null Here is my code:
Ti.UI.setBackgroundColor('#000');
var win1 = Ti.UI.createWindow({
backgroundColor : '#fff',
title : 'Tab 1'
});
var tab1 = Ti.UI.createTab({
icon : 'KS_nav_views.png',
title : 'Tab 1',
window : win1
});
var JsonTable = Ti.UI.createTableView({
height : Ti.UI.FILL,
width : Ti.UI.FILL
});
win1.add(JsonTable);
function getData() {
var myfontsize = '14dp';
// I needed to add this to test
var tableData = [];
var Json, Story;
var xhr = Ti.Network.createHTTPClient({
onload : function() {
var json = JSON.parse(this.responseText);
// declare your variables :-)
//alert(JSON.stringify(Story));
// alert(Story.nombre);
alert(json.length);
// only one . between things
for (var i = 0; i < json.length; i++) {
Story = json[i];
//Ti.API.info('Story', JSON.stringify(Story));
//Ti.API.info('Story.nombre', Story.nombre);
var row = Ti.UI.createTableViewRow({
backgroundColor : 'yellow',
height : '85dp',
width : Ti.UI.FILL
});
var labTitle = Ti.UI.createLabel({
backgroundColor : 'orange',
color : 'black',
font : {
fontSize : myfontsize,
fontWeight : 'bold'
},
height : Ti.UI.SIZE,
left : '25%',
text : Story.nombre,
top : '2%',
width : Ti.UI.FILL
});
row.add(labTitle);
tableData.push(row);
}
JsonTable.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
});
JsonTable.addEventListener('click', function(e) {
var index = e.index;
});
xhr.open("GET", "http://aplicaciones4.sct.gob.mx/sibuac_internet/SerEscogeRuta?estados");
xhr.send();
}
var btnGo = Ti.UI.createButton({
title : 'Go'
});
btnGo.addEventListener('click', function(e) {
getData();
});
//win1.setRightNavButton(btnGo);
win1.add(btnGo);
var img = Ti.UI.createImageView({
height : 32,
image : 'activity_indicator.gif',
width : 32
});
//win1.add(img);
var tabGroup = Ti.UI.createTabGroup();
tabGroup.addTab(tab1);
tabGroup.open();
Can you help me in this
Thanks in advance

Try naming the result something other than "json".
Also, there's sloppy var declarations...
"var Json,Story;" << "J"son upper-case, never used

How to create registration form in Titanium using android and pass data to another form?

Please give me idea how to create a registration form in titanium and pass fill up the registration data from that form to another form .

Following is a sample code for registration. I have created an additional file 'success.js' in the resource folder, shows the second window. Please try the following code
Write these line in the app.js file
var win1 = Ti.UI.createWindow({
width : 'auto',
height: 'auto',
backgroundColor : '#FFFFFF'
});
var txtName = Ti.UI.createTextField({
top : '25%',
width : '75%',
height: '35',
hintText : 'Name'
});
win1.add(txtName);
var txtAddress = Ti.UI.createTextField({
top : '35%',
width : '75%',
height: '40',
hintText : 'Address'
});
win1.add(txtAddress);
var btnRegister = Ti.UI.createButton({
top : '55%',
width : '50%',
height : '35',
title : 'Register'
});
win1.add(btnRegister);
win1.open();
btnRegister.addEventListener('click', function(){
var win2 = Ti.UI.createWindow({
width : 'auto',
height: 'auto',
backgroundColor : '#FFFFFF',
url : 'success.js'
});
win2.name = txtName.value;
win2.address = txtAddress.value;
win2.open();
});
// Write the following lines in the success.js file
var win2 = Ti.UI.currentWindow;
var name = win2.name;
var address = win2.address;
var lblName = Ti.UI.createLabel({
top : '30%',
width : '75%',
height : 'auto',
color : 'yellow',
backgroundColor : 'blue',
text : name,
textAlign : 'center'
});
var lblAddress = Ti.UI.createLabel({
top : '40%',
width : '75%',
height : 'auto',
color : 'yellow',
backgroundColor : 'blue',
text : address,
textAlign : 'center'
});
win2.add(lblName);
win2.add(lblAddress);
now complile the code and run. It worked with me. Try it

Titanium Android Simple Form Creation

Im a Titanium Beginner who is trying to create a form page with 2 textfields of Name and address and a DateTimePicker. I am facing 2 problems right now being :
1) the DateTimePicker is successfully shown but i would like both of it and also including the 2 textfields to be on the same window, with a same submit button.
2) I have tried numerous times but am unable to create a simple textfield at all even just creating it on a single page.It just doesnt show up.
Anyone could offer some constructive help?
Thanks in advance. The Below is my current code.
var winTimePicker = Titanium.UI.createWindow({});
winTimePicker.backgroundColor = 'black';
var doneBtn = Ti.UI.createButton({
title: 'Done',
});
doneBtn.addEventListener('click', function() {
winTimePicker.hide();
});
winTimePicker.add(doneBtn);
var timePicker = Ti.UI.createPicker({
type:Ti.UI.PICKER_TYPE_TIME,
bottom:0,
});
// turn on the selection indicator (off by default)
timePicker.selectionIndicator = true;
timePicker.addEventListener('change', function(e) {
//your code
});
winTimePicker.add(timePicker);
//open window
winTimePicker.open();
var winDatePicker = Titanium.UI.createWindow({});
winDatePicker.backgroundColor = 'black';
var doneBtn = Ti.UI.createButton({
title: 'Done',
});
doneBtn.addEventListener('click', function() {
winDatePicker.hide();
});
winDatePicker.add(doneBtn);
var datePicker = Ti.UI.createPicker({
type:Ti.UI.PICKER_TYPE_DATE,
bottom:0,
});
// turn on the selection indicator (off by default)
datePicker.selectionIndicator = true;
datePicker.addEventListener('change', function(e) {
//your code
});
winDatePicker.add(datePicker);
//open window
winDatePicker.open();
var textField = Titanium.UI.createTextField({
color:'#336699',
width:"auto",
height:"auto",
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
});
var textField2 = Titanium.UI.createTextField({
color:'#336699',
width:"auto",
height:"auto",
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
});

Check this code out and make changes as you find suitable to it:
var timePickerWin = Ti.UI.createWindow({
navBarHidden : true,
backgroundColor : '#fff'
});
var startTime = Ti.UI.createPicker({
top : '15dp',
left : '50dp',
useSpinner : false,
selectionIndicator : true,
type : Ti.UI.PICKER_TYPE_TIME,
format24 : false,
height : '130dp',
// width:'auto'
});
var endTime = Ti.UI.createPicker({
top : '15dp',
left : '50dp',
useSpinner : false,
selectionIndicator : true,
type : Ti.UI.PICKER_TYPE_TIME,
format24 : false,
height : '130dp'
});
var nextButton = Ti.UI.createButton({
width : '220dp',
height : '45dp',
top : '15dp',
title : 'Next',
backgroundColor : '#294079',
font : {
fontSize : '18dp',
fontWeight : 'bold'
},
color : '#fff'
});
startTime.addEventListener('change', function(e) {
//alert("User selected date: " + e.value);
startPickerValue = e.value;
});
endTime.addEventListener('change', function(e) {
//alert("User selected date: " + e.value);
endPickerValue = e.value
});
var fullNameTextBox = Ti.UI.createTextField({
borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
width : '275dp',
height : '45dp',
//value : '',
top : '15dp',
color : '#000000',
hintText : 'Enter full name'
// backGroundColor:'gray',
});
var emailTextBox = Ti.UI.createTextField({
borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
width : '275dp',
height : '45dp',
//value : '',
top : '15dp',
color : '#000000',
hintText : 'Enter email'
});
Finally add all these UI elements to the window which is the timePickerWin using add function
timePickerWin.add(startTime);
and so on for all the UI elements.After that open the timePickerWin as below
timePickerWin.open()
Make suitable layout changes by varying the left,right,height and width properties of each element.

Create a CheckBox in Titanium

I have List of Checkboxes which i want to create using FOR LOOP.
I have following type of data.
Value 1 --> checkbox image
Value 2 -->
Value 3 -->
.
.
.
Value 15 --> checkbox Image
I am using following code for that but not getting how will it work??? Is it correct code??
var chkArray = ['Value 1', 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6', 'Value 7', 'Value 8', 'Value 9', 'Value 10'];
AssessmentArray = function createChkBx() {
var chkBx = [];
for(var i in chkArray) {
var t = 80;
var checkbox = Ti.UI.createSwitch({
style : Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
title : chkArray[i],
value : true,
left : '20dp',
top : t + 30,
height : 25,
width : 'auto'
});
checkbox.addEventListener("change", function(e) {
Ti.API.info("The checkbox has been set to " + e.value);
});
chkBx.push(checkbox);
}
return chkBx;
}
var assessData = new AssessmentArray();
Now how should I add this to my Window??? This is specifically for Android only...

var AssessmentArray = function()
{
function AssessmentArray ()
{
//Pass the parent view inside which u want to add the check boxes and teh values as array
//gap or the distance between two checkboxes
this.addCheckBoxes = function(window, values, gap)
{
var t = 0;
var chkBx = [];
var i = 0;
for(i = 0; i < values.length; i++) {
var checkbox = Ti.UI.createSwitch({
style : Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
title : chkArray[i],
value : true,
left : '20dp',
top : i * gap,
height : 25,
width : 'auto'
});
checkbox.addEventListener("change", function(e) {
Ti.API.info("The checkbox has been set to " + e.value);
});
win.add(checkbox);
chkBx.push(checkbox);
}
return chkBx;
}
}
return AssessmentArray;
}();
var ass = new AssessmentArray();
ass.addCheckBoxes(Ti.UI.createWindow(), ['Value 1', 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6'], 50);
try some thing like this.

U may prefer something like this,it can be used both in Ios and Android.
var win = Titanium.UI.createWindow({
title : 'app',
backgroundColor : 'white',
fullscreen : false,
navBarHidden : true,
layout : 'vertical',
height : Ti.UI.FILL,
width : Ti.UI.FILL
});
var checkboxview = Titanium.UI.createView({
width : Ti.UI.FILL,
height : Ti.UI.SIZE,
//layout : 'horizontal',
horizontalWrap : false,
//right : '10dp',
//left : '10dp',
layout : 'horizontal',
//backgroundImage : '/images/backblue.png'
backgroundColor : '#045FB4',
//top : '20dp',
//backgroundColor:''
});
win.add(checkboxview);
var checkbox = Ti.UI.createButton({
title : '',
top : 10,
right : 10,
width : 30,
height : 30,
borderColor : 'black',
borderWidth : 2,
borderRadius : 3,
backgroundColor : 'white',
backgroundImage : 'none',
color : '#fff',
font : {
fontSize : 25,
fontWeight : 'bold'
},
value : false //value is a custom property in this casehere.
});
checkboxview.add(checkbox);
var hinttext = Ti.UI.createLabel({
color : 'black',
font : {
fontSize : '17dp',
//fontWeight : 'bold',
fontFamily : 'Rod'
},
left : '10%',
text : 'user1'
});
checkboxview.add(hinttext);
//Attach some simple on/off actions
checkbox.on = function() {
this.backgroundColor = '#007690';
this.title = '\u2713';
this.value = true;
};
checkbox.off = function() {
this.backgroundColor = '#aaa';
this.title = '';
this.value = false;
};
checkbox.addEventListener('click', function(e) {
if (false == e.source.value) {
e.source.on();
alert(hinttext.text);
} else {
e.source.off();
}
});
var checkboxview1 = Titanium.UI.createView({
width : Ti.UI.FILL,
height : Ti.UI.SIZE,
//layout : 'horizontal',
horizontalWrap : false,
//right : '10dp',
//left : '10dp',
layout : 'horizontal',
//backgroundImage : '/images/backblue.png'
backgroundColor : '#045FB4',
//top : '20dp',
//backgroundColor:''
});
win.add(checkboxview1);
var checkbox1 = Ti.UI.createButton({
title : '',
top : 10,
right : 10,
width : 30,
height : 30,
borderColor : '#666',
borderWidth : 2,
borderRadius : 3,
backgroundColor : '#aaa',
backgroundImage : 'none',
color : '#fff',
font : {
fontSize : 25,
fontWeight : 'bold'
},
value : false,
//value is a custom property in this casehere.
});
checkboxview1.add(checkbox1);
var hinttext1 = Ti.UI.createLabel({
color : 'black',
font : {
fontSize : '17dp',
//fontWeight : 'bold',
fontFamily : 'Rod'
},
left : '10%',
width : Ti.UI.SIZE,
height : Ti.UI.SIZE,
text : "User2"
});
checkboxview1.add(hinttext1);
//Attach some simple on/off actions
checkbox1.on = function() {
this.backgroundColor = '#007690';
this.title = '\u2713';
this.value = true;
};
checkbox1.off = function() {
this.backgroundColor = '#aaa';
this.title = '';
this.value = false;
};
checkbox1.addEventListener('click', function(e) {
if (false == e.source.value) {
e.source.on();
alert(hinttext1.text);
} else {
e.source.off();
}
});