I am adding a table view in a scroll view, its smoothly working in case of iOS but in case of Android the table view not scrolls.
i have describe the code below which describe my problem..
Suggest me any answer which can help to solve my problem.
var rows = [];
var win = Ti.UI.createWindow({
backgroundColor:'white'
});
var scrollableView = Ti.UI.createScrollView({
top : 0,
contentWidth : '100%',
contentHeight : 'auto'
});
var fruit = Ti.UI.createView({
top : 40,
width : '70%',
height : 20,
left : 10,
backgroundColor:'#000'
});
var fruitLabel = Ti.UI.createLabel({
text : "Fruit list",
font:{
fontSize : 15,
fontWeight : 'bold'
},
color : 'red'
});
fruit.add(fruitLabel);
var fruitTableView = Titanium.UI.createTableView({
top : 70,
width : 200,
height : 150,
left : 80,
right : 20,
separatorColor : 'transparent'
});
rows = [];
for(var i=0; i<20; i++){
rows.push(Titanium.UI.createTableViewRow({
title:'fruit ' + String(i),
color : '#000'
}));
};
fruitTableView.setData(rows);
var veg = Ti.UI.createView({
top : 250,
width : '70%',
height : 20,
left : 10,
backgroundColor:'#82C6E8'
});
var vegLabel = Ti.UI.createLabel({
text : "Veg list",
font:{
fontSize : 15,
fontWeight : 'bold'
},
color : 'red'
});
veg.add(vegLabel);
var vegTableView = Titanium.UI.createTableView({
top : 280,
width : 200,
height : 150,
left : 80,
right : 20,
});
rows = [];
for(var i=0; i<20; i++){
rows.push(Titanium.UI.createTableViewRow({
title:'veg ' + String(i),
color : '#000'
}));
};
vegTableView.setData(rows);
var grains = Ti.UI.createView({
top : 460,
width : '70%',
height : 20,
left : 10,
backgroundColor:'pink'
});
var grainLabel = Ti.UI.createLabel({
text : "Grains list",
font:{
fontSize : 15,
fontWeight : 'bold'
},
color : 'red'
});
grains.add(grainLabel);
var grainsTableView = Titanium.UI.createTableView({
top : 490,
width : 200,
height : 120,
left : 80,
right : 20,
});
rows = [];
for(var i=0; i<50; i++){
rows.push(Titanium.UI.createTableViewRow({
title:'grain ' + String(i),
color : '#000'
}));
};
grainsTableView.setData(rows);
scrollableView.add(fruit);
scrollableView.add(fruitTableView);
scrollableView.add(veg);
scrollableView.add(vegTableView);
scrollableView.add(grains);
scrollableView.add(grainsTableView);
win.add(scrollableView);
win.open();
Thanks guys for your reply,
i found the right way to implement it with the help of #Surajkochale .
Here is the solution of my problem if i add these lines in my code and it works well..
fruitTableView.addEventListener('touchstart', function(){
scrollableView.canCancelEvents = false;
});
fruitTableView.addEventListener('touchend', function(){
scrollableView.canCancelEvents = true;
});
fruitTableView.addEventListener('touchcancel', function(){
scrollableView.canCancelEvents = true;
});
vegTableView.addEventListener('touchstart', function(){
scrollableView.canCancelEvents = false;
});
vegTableView.addEventListener('touchend', function(){
scrollableView.canCancelEvents = true;
});
vegTableView.addEventListener('touchcancel', function(){
scrollableView.canCancelEvents = true;
});
grainsTableView.addEventListener('touchstart', function(){
scrollableView.canCancelEvents = false;
});
grainsTableView.addEventListener('touchend', function(){
scrollableView.canCancelEvents = true;
});
grainsTableView.addEventListener('touchcancel', function(){
scrollableView.canCancelEvents = true;
});
you need to add tableview in a view...
fruit.add(fruitTableView);
scrollableView.add(fruit);
veg.add(vegTableView);
scrollableView.add(veg);
grains.add(grainsTableView);
scrollableView.add(grains);
you can check for contentHeight : Ti.UI.SIZE, it worked for me
try this
var tableView = Titanium.UI.createTableView({
bubbleParent:false,
});
not smoothly, but it work.
Related
I am new to the scene and wonder how i am to go about this.
I have a switch that should add +1 or a "point" to a label when the switch is true.
and When it is false it should withdraw that same "point".
var win = Ti.UI.createWindow({
backgroundColor: 'white'
});
var view = Ti.UI.createView();
var win = Ti.UI.createWindow({
backgroundColor: 'white'
});
var basicSwitch = Ti.UI.createSwitch({
title: "+1"
});
basicSwitch.addEventListener('click',function(e){
});
var label1=Ti.UI.createLabel({
text: ""
});
view.add(basicSwitch);
win.add(view);
win.open();
My code so far,not much i know.
Here you go first of all their are following errors in your code
1)Making window 2 times
2)Creating a label but not adding to parent container
3)Switch has change event listener instead of click one
4)You can set the switch title
and Here goes the correct code
var win = Ti.UI.createWindow({
backgroundColor : 'white'
});
var view = Ti.UI.createView({
width : Ti.UI.FILL,
height : Ti.UI.FILL
});
var basicSwitch = Ti.UI.createSwitch({
top : 30,
value : false,
});
basicSwitch.addEventListener('change', function(e) {
if (e.value = true) {
label1.text = 1;
} else {
}
});
var label1 = Ti.UI.createLabel({
text : ""
});
view.add(label1);
view.add(basicSwitch);
win.add(view);
win.open();
Thanks
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
I want autocomplete textbox like if i press a it should shows related words like apple,aeroplane etc.,i want to make like similar google search.is there any control like this operation in ios and android on titanium.Help with examples codes or it's not possible in titanium?
The following code will work for you. Try it and modify as per your need. Here I Used array(searchArray) as data storage(You can replace it with database field or source whatever as per your requirement).
//Table view showing your autocomplete values
var tblvAutoComplete = Ti.UI.createTableView({
width : '100%',
backgroundColor : '#EFEFEF',
height : 0,
maxRowHeight : 35,
minRowHeight : 35,
allowSelection : true
});
//Starts auto complete
txtAutoComplete.addEventListener('change', function(e){
var pattern = e.source.value;
var tempArray = PatternMatch(searchArray, pattern);
CreateAutoCompleteList(tempArray);
});
//You got the required value and you clicks the word
tblvAutoComplete.addEventListener('click', function(e){
txtAutoComplete.value = e.rowData.result;
});
//Returns the array which contains a match with the pattern
function PatternMatch(arrayToSearch, pattern){
var searchLen = pattern.length;
arrayToSearch.sort();
var tempArray = [];
for(var index = 0, len = arrayToSearch.length; index< len; index++){
if(arrayToSearch[index].substring(0,searchLen).toUpperCase() === pattern.toUpperCase()){
tempArray.push(arrayToSearch[index]);
}
}
return tempArray;
}
//setting the tableview values
function CreateAutoCompleteList(searchResults){
var tableData = [];
for(var index=0, len = searchResults.length; index < len; index++){
var lblSearchResult = Ti.UI.createLabel({
top : 2,
width : '40%',
height : 34,
left : '5%',
font : { fontSize : 14 },
color : '#000000',
text : searchResults[index]
});
//Creating the table view row
var row = Ti.UI.createTableViewRow({
backgroundColor : 'transparent',
focusable : true,
height : 50,
result : searchResults[index]
});
row.add(lblSearchResult);
tableData.push(row);
}
tblvAutoComplete.setData(tableData);
tblvAutoComplete.height = tableData.length * 35;
}
This code worked for me in both ios and android. Hope your problems get resolved:D
cool i can give some example for you with android auto address suggestion bar
var search = Titanium.UI.createTextField({
height : '40sp',
hintText : 'Search',
top : '3sp',
right : '0%',
width : '73%',
textAlign : 'left',
font : {
fontFamily : 'Verdana',
fontSize : '13sp',
},
});
your result dispaly as table row
var resulttable = Ti.UI.createTableView({
top : '0%',
left : '0%',
width : '100%',
height : '100%',
separatorColor : '#000000',
});
and add event listner as change and any change call function with your value and if value is empty remove table from your view
search.addEventListener("change", function(event, type) {
Titanium.API.info("in change event listener");
if ('' != search.value) {
tabgroupContentView.add(resulttable);
if (resulttable.data.length > 0) {
for (var i = resulttable.data[0].rows.length - 1; i >= 0; i--) {
resulttable.deleteRow(i);
}
}
auto_complete(search.value);
} else {
tabgroupContentView.remove(resulttable);
}
});
call following function to auto complte
function auto_complete(search_term) {
loader.open("GET", "https://maps.googleapis.com/maps/api/place/autocomplete/json?input=" + search_term + "&types=geocode&language=en&sensor=true&key=bar blar blar this is my key use ur one");
loader.onload = function() {
var histryresult = eval('(' + this.responseText + ')');
jsonArry = histryresult.predictions;
jsonArryterms = histryresult.terms;
for (var i = 0; i < jsonArry.length; i++) {
var service_row = Ti.UI.createTableViewRow({
height : '70sp',
width : '100%',
backgroundColor : '#ffffff',
backgroundFocusedColor : '#FF8F2F',
backgroundSelectedColor : '#FF8F2F',
hasChild : false
});
var lbl_oderid = Ti.UI.createLabel({
left : '3%',
top : '10%',
text : jsonArry[i].terms[1].value,
color : '#A70CAF',
font : {
fontSize : '17sp',
fontWeight : 'bold'
},
height : 'auto',
width : 'auto'
});
var descriptiontext;
if (jsonArry[i].description == undefined) {
descriptiontext = 'Not Valable';
} else {
descriptiontext = jsonArry[i].description;
}
var lbl_description = Ti.UI.createLabel({
left : '5%',
top : '50%',
text : descriptiontext,
color : '#000000',
font : {
fontSize : '12sp',
},
height : 'auto',
width : 'auto'
});
service_row.add(lbl_oderid);
service_row.add(lbl_description);
service_row.addEventListener('click', function(e) {
var locaName = jsonArry[e.index].description;
if (jsonArry[e.index].description == undefined) {
} else {
reversGeoloader.open("GET", "http://maps.googleapis.com/maps/api/geocode/json?address=" + locaName + "&sensor=false");
reversGeoloader.onload = function() {
var geoResult = eval('(' + this.responseText + ')');
jsonArry = geoResult.results;
var newlat = jsonArry[0].geometry.location.lat;
var newlng = jsonArry[0].geometry.location.lng;
curentlatitude = newlat;
curentlongitude = newlng;
getReversGeo(curentlatitude, curentlongitude, 'str');
usercurentlocation.setText('Set by serch');
tabTestWindow.close();
};
reversGeoloader.send();
}
});
resulttable.appendRow(service_row);
}
};
loader.send();
}
textField.addEventListener('change', function(e) {
// you can fill a tableView in this event with the suggested data
});
or this tutorial link might solve your problem
AutoCompleteTextField
Im having a scrollview problem and it does not work for me. Even though i have read that the scrollview contentwidth and height 'auto' has a bug and i have scaled it to a large value, it does not scroll down my content. Below is my current code as of now.
var scrollView = Titanium.UI.createScrollView({
contentWidth:'300',
contentHeight:'2000',
top:0,
showVerticalScrollIndicator:true,
showHorizontalScrollIndicator:true
});
var view = Ti.UI.createView({
backgroundColor:'#336699',
borderRadius:10,
width:300,
height:2000,
top:10
});
scrollView.add(view);
var timePickerWin = Ti.UI.createWindow({
navBarHidden : true,
backgroundColor : '#fff'
});
var label = Ti.UI.createLabel({
text:'Pick Up Detail Form',
font: {fontFamily: 'Verdana', fontSize:30},
color: '#000',
top : '15dp'
});
var label2 =Ti.UI.createLabel({
text:'Enter Your Pickup Details Below',
font: {fontFamily: 'Verdana', fontSize:12},
color: '#000',
top : '50dp'
})
var startTime = Ti.UI.createPicker({
top : '335dp',
left : '25dp',
useSpinner : false,
selectionIndicator : true,
type : Ti.UI.PICKER_TYPE_TIME,
format24 : false,
height : '130dp',
// width:'auto'
});
var startDate = Ti.UI.createPicker({
top : '200dp',
left : '25dp',
useSpinner : false,
selectionIndicator : true,
type : Ti.UI.PICKER_TYPE_DATE,
format24 : false,
height : '130dp'
});
var nextButton = Ti.UI.createButton({
width : '150dp',
height : '45dp',
top : '465dp',
title : 'Next',
backgroundColor : '#294079',
font : {
fontSize : '18dp',
fontWeight : 'bold'
},
color : '#fff'
});
nextButton.addEventListener('click', function() {
timePickerWin.hide();
});
startTime.addEventListener('change', function(e) {
//alert("User selected date: " + e.value);
startPickerValue = e.value;
});
startDate.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 : '75dp',
color : '#000000',
hintText : 'Enter full name'
// backGroundColor:'gray',
});
var addressTextBox= Ti.UI.createTextField({
borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
width : '275dp',
height : '45dp',
//value : '',
top : '117dp',
color : '#000000',
hintText : 'Enter Address'
});
var MobileNo = Ti.UI.createTextField({
borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
width : '275dp',
height : '45dp',
//value : '',
top : '155dp',
color : '#000000',
hintText : 'Enter Mobile No.'
// backGroundColor:'gray',
});
timePickerWin.add(scrollView);
timePickerWin.add(label);
timePickerWin.add(label2);
timePickerWin.add(MobileNo);
timePickerWin.add(startTime);
timePickerWin.add(startDate);
timePickerWin.add(addressTextBox);
timePickerWin.add(fullNameTextBox);
timePickerWin.add(nextButton);
timePickerWin.open()
You need to add all the contents of the scroll view into the scroll view.
Change these lines:
timePickerWin.add(scrollView);
scrollView.add(label);
scrollView.add(label2);
scrollView.add(MobileNo);
scrollView.add(startTime);
scrollView.add(startDate);
scrollView.add(addressTextBox);
scrollView.add(fullNameTextBox);
scrollView.add(nextButton);
Hope this will work for you.
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();
}
});