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
Related
i googled and found below code which creats checkbox .but these check boxes get selected when i click both the checkbox.my requirement is, i need one check box is checked while other is unchecked.that is one checkbox has to be checked at a time .and pressing reset button all the check box should be unchecked.
var win = Ti.UI.createWindow({backgroundColor:"white"});
var checkbox = Ti.UI.createSwitch({
style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
title:"male",
value:true
});
win.add(checkbox);
checkbox.addEventListener("change", function(e){
Ti.API.info("The checkbox has been set to " + e.value);
});
var checkbox1 = Ti.UI.createSwitch({
style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
title:"female",
value:true
});
win.add(checkbox1);
checkbox1.addEventListener("change", function(e){
Ti.API.info("The checkbox has been set to " + e.value);
});
var resetbtn = Ti.UI.createButton({
top : '100',
width : '50',
height : '35',
title : 'Reset'
});
win1.add(resetbtn);
resetbtn.addEventListener('click', function(){
checkbox.value='';
}
win.open();
please help me i am new to titanium,i want checkbox should be unclicked on presing resetbutton press and one checkbox as to get clicked at a time.
As your query you want the following thing :
You need one check box is checked while other is unchecked i'e,
one checkbox has to be checked at a time.
Pressing reset button all the check box should be unchecked.
For Point 1 : Here is the code for this point :
var win = Ti.UI.createWindow({backgroundColor:"white"});
var checkbox = Ti.UI.createSwitch({
style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
title:"male",
value:true,
width: "200dp", height:"120dp", left:"10dp"
});
win.add(checkbox);
checkbox.addEventListener("change", function(e){
Ti.API.info("The checkbox has been set to " + e.value);
if(e.value) {
checkbox1.value=false;
} else {
checkbox1.value=true;
}
});
var checkbox1 = Ti.UI.createSwitch({
style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
title:"female",
value:true
});
win.add(checkbox1);
checkbox1.addEventListener("change", function(e){
Ti.API.info("The checkbox has been set to " + e.value);
if(e.value) {
checkbox.value=false;
} else {
checkbox.value=true;
}
});
var resetbtn = Ti.UI.createButton({
top : '100',
width : '50',
height : '35',
title : 'Reset'
});
win.add(resetbtn);
resetbtn.addEventListener('click', function(){
Ti.API.info('Refresh button click');
});
win.open();
For point 2 : I am just code as per your need but this not the right way i think. If you want to reset checkbox with your requirement (one checkbox has to be checked at a time) then better to use image for checkbox or radio-button. But Here is the code for that :
var win = Ti.UI.createWindow({backgroundColor:"white"});
var checkFlag = true;
var resetTouch = false;
var checkbox = Ti.UI.createSwitch({
style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
title:"male",
value:true,
width: "200dp", height:"120dp", left:"10dp"
});
win.add(checkbox);
checkbox.addEventListener("change", function(e){
Ti.API.info("The checkbox has been set to " + e.value);
if(e.value) {
checkbox1.value=false;
} else {
checkbox1.value=true;
}
});
var checkbox1 = Ti.UI.createSwitch({
style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
title:"female",
value:true
});
win.add(checkbox1);
checkbox1.addEventListener("change", function(e){
Ti.API.info("The checkbox has been set to " + e.value);
if(e.value) {
checkbox.value=false;
} else {
checkbox.value=true;
}
});
var resetbtn = Ti.UI.createButton({
top : '100',
width : '50',
height : '35',
title : 'Reset'
});
win.add(resetbtn);
var checkboxNew = Ti.UI.createSwitch({
style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
title:"male",
value:false,
width: "200dp", height:"120dp", left:"10dp"
});
win.add(checkboxNew);
var checkboxNew1 = Ti.UI.createSwitch({
style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
title:"female",
value:false
});
win.add(checkboxNew1);
resetbtn.addEventListener('click', function(){
Ti.API.info('checkFlag = ' + checkFlag);
if(checkFlag) {
checkbox.hide();
checkbox1.hide();
checkboxNew.show();
checkboxNew1.show();
checkFlag = false;
} else {
checkbox.show();
checkbox1.show();
checkboxNew.hide();
checkboxNew1.hide();
checkFlag = true;
}
});
checkboxNew.addEventListener("change", function(e){
Ti.API.info("The checkboxNew has been set to " + e.value);
checkboxNew.value=false;
checkboxNew1.value=false;
});
checkboxNew1.addEventListener("change", function(e){
Ti.API.info("The checkboxNew1 has been set to " + e.value);
checkboxNew.value=false;
checkboxNew1.value=false;
});
checkbox.hide();
checkbox1.hide();
checkboxNew.show();
checkboxNew1.show();
win.open();
Please Take a look on it.
I'm using the Titanium to develop an iOS app. I have a main window and I need to open a modal window above it.
I put on the modal window (attached the code) a textArea and two buttons for save and cancel.
The problem is when I open the window, the whole window is turned black.
What do I do wrong? Thanks...
addEvenButton.addEventListener('click', function() {
var eventDesc = '';
var t = Titanium.UI.create2DMatrix();
t = t.scale(0);
var noteWin = Titanium.UI.createWindow({
backgroundColor : '#b4be00',
borderWidth : 8,
borderColor : '#999',
height : 460,
width : 325,
borderRadius : 10,
opacity : 0.92,
modal: true,
transform : t
});
// create first transform to go beyond normal size
var t1 = Titanium.UI.create2DMatrix();
t1 = t1.scale(1.1);
var a = Titanium.UI.createAnimation();
a.transform = t1;
a.duration = 1000;
// when this animation completes, scale to normal size
a.addEventListener('complete', function() {
var t2 = Titanium.UI.create2DMatrix();
t2 = t2.scale(1.0);
noteWin.animate({
transform : t2,
duration : 200
});
});
var noteField = Titanium.UI.createTextArea({
color : 'black',
hintText : 'Enter text description here',
suppressReturn:false,
height : 200,
top : 100,
width : 250,
keyboardType : Titanium.UI.KEYBOARD_NAMEPHONE_PAD,
returnKeyType : Titanium.UI.RETURNKEY_DEFAULT,
borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
// create a button to close window
var closeButton = Titanium.UI.createButton({
title : 'Save text',
height : 40,
left : 40,
top : 50,
width : 100
});
// create a button to close window
var cancelButton = Titanium.UI.createButton({
title : 'Cancel',
height : 40,
left : 180,
top : 50,
width : 100
});
noteWin.add(noteField);
noteWin.add(closeButton);
noteWin.add(cancelButton);
closeButton.addEventListener('click', function() {
var t3 = Titanium.UI.create2DMatrix();
t3 = t3.scale(0);
noteWin.close({
transform : t3,
duration : 300
});
addEvent('Event', noteField.value);
});
cancelButton.addEventListener('click', function() {
var t3 = Titanium.UI.create2DMatrix();
t3 = t3.scale(0);
noteWin.close({
transform : t3,
duration : 300
});
});
noteWin.addEventListener('singletap', function(e) {
noteField.blur();
});
noteWin.addEventListener('open', function(e) {
noteField.focus();
});
noteWin.open(a);
});
Try to add the "zIndex:1000" property to the modal window to make sure that it is not hidden by another one.
I am able to implement auto suggest drop down in jquery .Now I am implementing a same functionality in titanium but when i googled I don't found much in autosuggestion
drop down in titanium .
can you suggest a way of autogestion.
Mean I have a array (element).When I click on textfield it show related element.
Try the following code 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
I have a view that is set to show when a button is clicked.
This works but only if the button has been clicked once already.
So it works but not as it should eg. the first time the button is clicked.
I add the view to tableView as soon as it is created later in the code BTW.
here is some code to look at...
var vLabel = Ti.UI.createView({
backgroundColor : 'white',
width : '100%',
height : 46,
bottom : 25
});
var topBorderView = Ti.UI.createView({
backgroundColor : '#d8d8d8',
width : '100%',
height : 1,
top : 0
});
var aLabel = Ti.UI.createLabel({
backgroundColor : 'white',
objName : 'aLabel',
text : "All Points - Takes a few moments to load.",
font : {
fontSize : 12
},
color : '#df0101',
backgroundPaddingTop : 5,
backgroundPaddingBottom : 3,
left : '5%',
width : '90%',
height : 42,
top : 2,
zIndex : 6000,
textAlign : Ti.UI.TEXT_ALIGNMENT_CENTER
});
vLabel.add(topBorderView);
vLabel.add(aLabel);
sortButton.addEventListener('click', function(e) {
vLabel.visible = 1;
vLabel.show();
var loaders = getLoader();
tableView.add(loaders);
loaders.start();
var tempRows = [];
if (content.uid == 998) {
if (e.index == 0) {
tempRows = sortAllPoints(content, e.index);
loaders.stop();
vLabel.visible = false;
tableView.remove(loaders);
tableView.setData(tempRows, {
animationStyle : Titanium.UI.iPhone.RowAnimationStyle.NONE
});
rowMainData = tableView.data;
SearchBar.value = '';
} else {
tempRows = sortAllPoints(content, e.index);
loaders.stop();
vLabel.visible = false;
tableView.remove(loaders);
tableView.setData(tempRows, {
animationStyle : Titanium.UI.iPhone.RowAnimationStyle.NONE
});
rowMainData = tableView.data;
SearchBar.value = '';
}
}
});
Anyone have any clue as to why the view is showing on the 2nd button click but not the first??
Everything else works as it should eg. the loader animation
Thanks a lot,
George.
Lateral Thinking! That's what you need. I had set the position of the view to be relative the bottom of the tableView. This worked while there was nothing in the table eg. it was loading or sorting the content. The answer was to make it's position relative to the top therefore no matter whether the content was being loaded or being sorted it is always visible. Sleep is good for this sort of thing!
use setVisible method:
someView.setVisible = true
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.