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
Related
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.
As I came to know that we cannot use custom image or background/border/text color in pickerview in titanium yet.
So I came up with the idea of showing a button to the user with custom image/font, and when user clicks the button, the picker view rows are shown just as if launched by clicking the picker view. Is it possible?
So My Question: How can launch a picker view when a button is clicked.
You can also try Titanium.UI.OptionDialog, you can change this and in stead of having the event listener in the window you can have it in another custom view which can be used as a button.
Ti.UI.setBackgroundColor('white');
var win = Ti.UI.createWindow({
title: 'Click window to test',
backgroundColor: 'white',
exitOnClose: true,
fullscreen: false
});
var opts = {
cancel: 2,
options: ['Confirm', 'Help', 'Cancel'],
selectedIndex: 2,
destructive: 0,
title: 'Delete File?'
};
win.addEventListener('click', function(e){
var dialog = Ti.UI.createOptionDialog(opts).show();
});
win.open();
Use This:
btn.addEventListener('click', function(){
//Do your picker initialization (Picker code is taken from titanium docs)
var picker = Ti.UI.createPicker({
top:50,
useSpinner: true
});
picker.selectionIndicator = true;
var fruit = [ 'Bananas', 'Strawberries', 'Mangos', 'Grapes' ];
var color = [ 'red', 'green', 'blue', 'orange' ];
var column1 = Ti.UI.createPickerColumn();
for(var i=0, ilen=fruit.length; i<ilen; i++){
var row = Ti.UI.createPickerRow({
title: fruit[i]
});
column1.addRow(row);
}
var column2 = Ti.UI.createPickerColumn();
for(var i=0, ilen=color.length; i<ilen; i++){
var row = Ti.UI.createPickerRow({ title: color[i] });
column2.addRow(row);
}
picker.add([column1,column2]);
win.add(picker);
});
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
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.
I want to navigate window one by one 4 time and lastly i want to come 1 window then how i come first window.
How i come 4th navigation window to first window
var tabGroup = Titanium.UI.createTabGroup();
var win1 = Titanium.UI.createWindow({
backgroundColor : '#fff',
navBarHidden : true,
orientationModes: [
Titanium.UI.PORTRAIT,
]
});
var tab1 = Titanium.UI.createTab({
title : 'Menu',
window : win1,
});
var btn =Ti.UI.createButton({
title :"click",
height : "100",
width : "100",
});
win1.add(btn);
btn.addEventListener('click',function(){
var win2 = Titanium.UI.createWindow({
url : "win2.js"
backgroundColor : '#fff',
navBarHidden : true,
orientationModes: [
Titanium.UI.PORTRAIT,
]
});
Ti.UI.currentTab.open(win2);
});
tabGroup.addTab(tab1);
tabGroup.open()
win2.js
var curwin = Ti.UI.currentWindow;
var btn =Ti.UI.createButton({
title :"click",
height : "100",
width : "100",
});
curwin.add(btn);
btn.addEventListener('click',function(){
var win3 = Titanium.UI.createWindow({
url : "win3.js"
backgroundColor : '#fff',
navBarHidden : true,
orientationModes: [
Titanium.UI.PORTRAIT,
]
});
Ti.UI.currentTab.open(win3);
});
win3.js
var curwin = Ti.UI.currentWindow;
var btn =Ti.UI.createButton({
title :"click",
height : "100",
width : "100",
});
curwin.add(btn);
btn.addEventListener('click',function(){
var win4 = Titanium.UI.createWindow({
url : "win4.js"
backgroundColor : '#fff',
navBarHidden : true,
orientationModes: [
Titanium.UI.PORTRAIT,
]
});
Ti.UI.currentTab.open(win4);
});
win4.js
var curwin = Ti.UI.currentWindow;
var btn =Ti.UI.createButton({
title :"click",
height : "100",
width : "100",
});
curwin.add(btn);
btn.addEventListener('click',function(){
// Here I want to back First Window how i can perform this iphone or android both
});
How I can perform this?
In Forging Titanium Episode 2 they developed a cross-platform navigation controller where to back to first window they stored each window they open in an array, then they loop through the array and close all windows stored in it. Below a piece of code from them of this idea.
//go back to the initial window of the NavigationController
exports.NavigationController.prototype.home = function() {
//store a copy of all the current windows on the stack
var windows = this.windowStack.concat([]);
for(var i = 1, l = windows.length; i < l; i++) {
(this.navGroup) ? this.navGroup.close(windows[i]) : windows[i].close();
}
this.windowStack = [this.windowStack[0]]; //reset stack
};