how i add View Array in my scrollView(in Android support)? - titanium

i am new App Developer with Titanium. i want to create a window base application. whose run on iphone or ipad or android platform.
When i run application on iphone than run properly, but when i run on Android than it show a msg (Unexpected Error) and after this it is close.
var win1 = Titanium.UI.createWindow({
backgroundColor : '#f0f0f0',
});
var view1 = Titanium.UI.createView({
height : 100,
width : 100,
backgroundColor : '#ff0000',
borderColor : '#000',
});
var scrollView1 = Titanium.UI.createScrollView({
contentHeight : 150,
backgroundColor : '#00ff00',
});
var abc = new Array();
abc[0] = 'images/img.png',
abc[1] = 'images/img1.png',
scrollView1.add(abc);
view1.add(scrollView1);
win1.add(view1);
win1.open();
how i add Array in my scroll view.
in array i store (images path)
please help me,
Thanks in advance,

Try This,
var array = new Array();
array[0] = 'image path';
array[1] = 'image path';
for(a = 0; a<array.length;a++){
var lab1 = Titanium.UI.createLabel({
backgroundImage : array1[a],
height : 75,
width : 75,
backgroundColor : '#712347',
borderRadius : '10',
zIndex : 11,
});
scrLabel.add(lab1);
}
I, Think this is supported, for you.

You can't 'add' an array to a window object - 'add' only takes Titanium Proxy objects - things returned from Ti.UI.create.... methods - as the argument. See my commented code below:
var win1 = Titanium.UI.createWindow({
backgroundColor : '#f0f0f0',
});
var view1 = Titanium.UI.createView({
height : 100,
width : 100,
backgroundColor : '#ff0000',
borderColor : '#000',
});
var scrollView1 = Titanium.UI.createScrollView({
contentHeight : 150,
backgroundColor : '#00ff00',
});
var abc = ['images/img.png', 'images/img1.png'];
// if you want the image paths available as a variable, just set it
scrollView1.abc = abc;
// But I don't understand why you are doing this - you can just access the paths
// from abc directly
view1.add(scrollView1);
// You were adding the scroll view twice: win1.add(scrollView1);
// You want to add the view:
win1.add(view1);
win1.open();

Try this code:
var win1 = Titanium.UI.createWindow({
backgroundColor : '#f0f0f0'
});
var view1 = Titanium.UI.createView({
height : 100,
width : 100,
backgroundColor : '#ff0000',
borderColor : '#000'
});
var scrollView1 = Titanium.UI.createScrollView({
contentHeight : 150,
backgroundColor : '#00ff00'
});
var abc = ['images/img.png','images/img1.png'];
scrollView1.add(abc);
view1.add(scrollView1);
win1.add(view1);
win1.open();

var array = new Array();
array[0] = 'image path';
array[1] = 'image path';
for(a = 0; a<array.length;a++){
var lab1 = Titanium.UI.createImageView({
backgroundImage : array1[a],
height : 75,
width : 75,
backgroundColor : '#712347',
borderRadius : '10',
zIndex : 11,
});
scrLabel.add(lab1);
}

Related

appcelerator createwindow makes the whole window black

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.

Titanium Alloy Custom Row Problems

Problem:
App - web based
I have been referring to http://cssgallery.info/custom-row-for-tableview-in-appcelerator-titanium/ on how to create a custom row
My app collects json from a server and parses through it line by line. It then pushes each line in to an array and finally out to the view.
How ever no matter how I do this the view seems to be missing see attached image.
It seems only DISTANCE is processed how ever if you look at the source of the created page the data seems to be parsing through but not displayed
for (var i = 0; i < parseddata.jsonp.length; i++) {
var lastRow = i, c = lastRow + 30;
lastRow < c;
lastRow++;
var VAIRABLE2 = parseddata.VAIRABLE2[i];
var VAIRABLE3 = parseddata.VAIRABLE3[i];
var DISTANCEFROMEVENT = parseddata.DISTANCEFROMEVENT[i];
var labelDesc = Ti.UI.createLabel({
text : VAIRABLE2,
font : {
fontFamily : 'Arial',
fontSize : 16,
fontWeight : 'bold'
},
// color : '#FFFFFF',
// width:'auto',
// textAlign:'left',
top : 2,
left : 40,
height : 16
});
var labelDetails = Ti.UI.createLabel({
text : DISTANCEFROMEVENT,
font : {
fontFamily : 'Arial',
fontSize : 12,
fontWeight : 'bold'
},
// color : '#FFFFFF',
// width:'auto',
// textAlign:'left',
bottom : 0,
left : 60,
height : 12
});
var labelDist = Ti.UI.createLabel({
text : DISTANCEFROMEVENT,
font : {
fontFamily : 'Arial',
fontSize : 12,
fontWeight : 'bold'
},
// color : '#FFFFFF',
// width:'auto',
// textAlign:'right',
bottom : 0,
right : 2,
height : 12
});
// apply rows to data array
row.add(labelDesc);
row.add(labelDetails);
row.add(labelDist);
tableData.push(row);
}
lastRow = c;
// and push this into our table.
eventslisttable.setData(tableData);
I do not see code for row so try to set row's height to Ti.UI.SIZE and all the lable's width to Ti.UI.SIZE
and most important thing is be sure that you are getting values of VAIRABLE2 and DISTANCEFROMEVENT
OK - found by removing 'height' every thing started to work again....
Thanks for your help Mitul

Titanium - Separate views in 'touchmove' animation

I am try to do appointment in a dayView in a calander I have build. But when I try to animate one appointment with 'longpress' and 'touchmove' the other appointments goes with, I try to use 'this.' but stil have problem.
Sorry that I hace comment the code on swedish :)
I would Appreciate if some one helped me!
Here is my code..
Ti.include('globalization/sv-SE.js');
Ti.include('core.js');
Ti.include('parser.js');
Ti.include('sugarpak.js');
Ti.include('time.js');
var time = 1;
var myTime = null;
var rows = [];
//Skapa fönstret med vit bakgrund
var win = Ti.UI.createWindow({
backgroundColor : 'white'
});
var calanderHeader = Ti.UI.createView({
width : '100%',
height : '50dp'
});
win.add(calanderHeader);
//Skapa en scrollView till dag-kalenderna
var dayViewScroll = Titanium.UI.createScrollView({
top : '80dp',
// canCancelEvents: false,
disableBounce : true,
contentHeight : 'auto',
backgroundColor : '#00ff00',
});
//Skapa själva kalendern
var dayViewCalenderContent = Ti.UI.createView({
layout : 'vertical',
height : '1464dp'
});
//Lägger kalenderna i scrollView
dayViewScroll.add(dayViewCalenderContent);
//Lägger scrollView till fönstret
win.add(dayViewScroll);
//Skapa alla 24 timmarna
for (var i = 0; i < 24; i++) {
//Se till att alla timmarna
//är 2 sifriga.
if (time < 10) {
myTime = '0' + time + '.00';
} else {
myTime = time + '.00';
}
//Skapa linjerna till timm-raderna.
var hr = Ti.UI.createView({
width : '100%',
height : '1dp',
backgroundColor : '#bbb',
top : '0dp',
bottom : '0dp'
});
rows.push(hr);
//Skapa timm-raderna.
var myRow = Ti.UI.createView({
backgroundColor : 'white',
borderColor : '#bbb',
borderWidth : '0dp',
width : '100%',
height : '60dp',
top : '0dp',
left : '0dp'
});
//Skapa högra linjen av timmarna
var borderRight = Ti.UI.createView({
height : '100%',
width : '1dp',
backgroundColor : '#bbb',
top : '0dp',
left : '90dp',
bottom : '0dp'
});
myRow.add(borderRight);
myRow.index = i;
//Skapa halvtimmers linjerna
var timeLine = Ti.UI.createView({
width : '100%',
height : '1dp',
backgroundColor : '#bbb',
left : '91dp',
top : '30dp'
});
myRow.add(timeLine);
var timeRow = Ti.UI.createView({
backgroundColor : 'white',
borderColor : '#bbb',
borderWidth : '0dp',
width : '90dp',
height : '60dp',
top : '0dp',
left : '0dp'
});
myRow.add(timeRow);
//Skapa siffrona i timmarna.
var timeLabel = Ti.UI.createLabel({
left : '25dp',
top : '23dp',
text : myTime
});
//Lägg till siffrona till timm-kolumnen.
timeRow.add(timeLabel);
myRow.foo = myTime;
rows.push(myRow);
time++;
}
//Lägg till alla skapta timmarna till kalenderna
dayViewCalenderContent.add(rows);
function Createbooking(globalPoint, bookedfromHaur, bookedfromMinute, bookedToHaur, bookedToMinute) {
var globalPoint = globalPoint;
var bookedfromHaur = bookedfromHaur;
var bookedfromMinute = bookedfromMinute;
var bookedToHaur = bookedToHaur;
var bookedToMinute = bookedToMinute;
// this.top = globalPoint;
//Skapa bokningsobjektet.
var bookingView = Titanium.UI.createView({
backgroundColor : '#000',
width : '160dp',
height : '92dp',
bubbleParent : false,
top : globalPoint
});
// this.bookingView.top = globalPoint;
//Skapa vyn för timmarna i bokningsobjektet
var bookingTimeView = Titanium.UI.createView({
backgroundColor : '#000',
height : 32,
width : '60%',
bubbleParent : false,
top : 0
});
bookingView.add(bookingTimeView);
bookingView.myBookingStartTime = new Date();
bookingView.myBookingEndTime = new Date();
bookingView.myBookedFrom = bookingView.myBookingStartTime.set({
hour : bookedfromHaur,
minute : bookedfromMinute
}).toString('HH:mm');
bookingView.myBookedTo = bookingView.myBookingEndTime.set({
hour : bookedToHaur,
minute : bookedToMinute
}).toString('HH:mm');
// var myDay = (11:mm).addHours(6);
//Skapa boka-från tidssiffrona.
bookingView.myBookingFromTimeLabel = Ti.UI.createLabel({
color : '#FFFFFF',
left : '0dp',
top : '3dp',
text : bookingView.myBookedFrom
});
//Skapa mellanslag mellan bokade tiderna
myBookingSeparaterTimeLabel = Ti.UI.createLabel({
color : '#FFFFFF',
top : '3dp',
text : ' -- '
});
//Skapa boka-till tidssiffrona.
bookingView.myBookingToTimeLabel = Ti.UI.createLabel({
color : '#FFFFFF',
top : '3dp',
right : '0dp',
text : bookingView.myBookedTo
});
//Lägg till bokningstids siffrona till Vyn för boknings tiderna
bookingTimeView.add(bookingView.myBookingFromTimeLabel);
bookingTimeView.add(myBookingSeparaterTimeLabel);
bookingTimeView.add(bookingView.myBookingToTimeLabel);
//Skapa boknings objektets body
var bookingViewContent = Titanium.UI.createView({
backgroundColor : 'yellow',
width : '160dp',
top : '32dp',
bottom : '32dp'
});
//Lägg till body i bokningsobjektet.
bookingView.add(bookingViewContent);
//Skapa handtaget till bokningsobjektet.
var dragDownView = Ti.UI.createView({
width : '160dp',
height : '32dp',
bottom : '0dp',
backgroundColor : '#999',
zIndex : 20
});
//Lägg till handtaget till bokningsobjektet.
bookingView.add(dragDownView);
//Skapa bild-Vy till handtaget.
dragDownImageView = Ti.UI.createView({
width : '70dp',
height : '32dp',
left : '95dp',
bottom : '0dp',
backgroundImage : 'images/dragDownIco.png',
zIndex : 20
});
//Lägg till bilden till handtaget.
dragDownView.add(dragDownImageView);
//Skapa "lysnare" till 'touchstart' på kalenderna
dayViewScroll.addEventListener('touchstart', function(e) {
//stoppa scrollningen vid 'touchstart'.
dayViewScroll.setScrollingEnabled(false);
// alert(e);
});
//Skapa "lysnare" till 'touchmove' på kalenderna
dayViewScroll.addEventListener('touchmove', function(e) {
this.myFinalGlobal = e.source.index * 61 + e.y + 1;
var newBookingEndTime = new Date();
var newBookedEndTime = newBookingEndTime.set({
hour : 12,
minute : 0
}).addMinutes(6).toString('HH:mm');
// updateEndTime(newBookedEndTime);
bookingView.myBookingToTimeLabel.setText(newBookedEndTime);
bookedToHaur = 10;
// alert(globalPoint);
if (this.myFinalGlobal - bookingView.top) {
bookingView.animate({
height : this.myFinalGlobal - bookingView.top,
duration : 10
});
bookingView.setHeight(this.myFinalGlobal - bookingView.top);
}
});
dayViewScroll.addEventListener('touchend', function(e) {
bookingView.setHeight(globalPoint + e.y);
dayViewScroll.setScrollingEnabled(true);
alert(bookingView.getHeight);
});
bookingView.setHeight(this.myFinalGlobal - bookingView.top);
return bookingView;
}
Createbooking.prototype.myToushMove = function() {
alert(this.globalPoint);
};
//Skapa 'lysnare' till 'longpress'.
dayViewCalenderContent.addEventListener('longpress', function(e) {
var myGlobal = e.source.index * 61 + e.y + 1;
var bookedfromHaur = e.source.index + 1;
var bookedfromMinute = e.y;
var bookedToHaur = e.source.index + 1;
var bookedToMinute = e.y;
this.myBooking = new Createbooking(myGlobal, bookedfromHaur, bookedfromMinute, bookedToHaur, bookedToMinute);
// e.source._event_myStart = myBooking;
dayViewScroll.add(this.myBooking);
//dayViewScroll.addEventListener('touchmove', myMove);
function myMove(e) {
//alert('Hejsan');
var myBookedFinalTo = this.myBooking.myBookingEndTime.set({
hour : bookedToHaur,
minute : bookedToMinute
}).addMinutes(e.y).toString('HH:mm');
this.myBooking.myBookingToTimeLabel.setText(myBookedFinalTo);
var myFinalGlobal = e.source.index * 61 + e.y + 1;
if (myFinalGlobal > this.myBooking.top) {
this.myBooking.animate({
height : myFinalGlobal - this.myBooking.top,
duration : 10
});
this.myBooking.setHeight(myFinalGlobal - this.myBooking.top);
//alert(myFinalGlobal - myBooking.top);
}
}
});
win.open();
Don't use "this." on an event handler. That'll have undesirable consequences, like your code not working, and it has a performance hit too (due to crossing from JS to Native when writing, and back when reading). Instead, promote some variables out to the appropriate scope.
Right now, you're doing:
function bar() {
this.foo++;
}
Instead do:
var foo = 0;
function bar() {
foo++;
}

Auto suggest dropdown in titanium example?

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

someView.visible = true not working in Titanium

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