I have been trying to figure out why a scrollable view in my app is very jerky, it momentarily stops half way when I swip between pages. The contents of each page is not complex, just a few text fields and an image. The number of pages is up to 8.
The versions I use are; Titanium 3.1.2GA Alloy 1.2.1 iOS 6.1.3 on an iPhone4 <<< Important - the jerkyness is not that visible on the iPhone5
Please note that I started this project in November last year and have along the way upgraded my enviroment when new releases have become available. Could there be some old code being used? I saw an early pre-1.0 Alloy bug raised for this issue, could it still be there in my environment?
I created a test app using the standard two tab Alloy template and added the code below. For the second tab I had just saved to the disk the image used in tab 1. Tab 3 did not have any images but was still a bit jerky. In my app I have a few more views on each page and it is very jerky.
If anyone have any suggestions I would really appreciate it. It would be great if someone please confirm the issue with an iPhone4, just to have make sure my environment is not the cause (I guess i could try to uninstall and reinstall but I am not sure how to properly uninstall everything).
Cheers, Lars
Index.xml
<Alloy>
<TabGroup>
<Tab title="Tab 1" icon="KS_nav_ui.png">
<Window id="window1" title="Tab 1">
</Window>
</Tab>
<Tab title="Tab 2" icon="KS_nav_views.png">
<Window id="window2" title="Tab 2">
</Window>
</Tab>
<Tab title="Tab 3" icon="KS_nav_ui.png">
<Window id="window3" title="Tab 3">
</Window>
</Tab>
</TabGroup>
Index.js
function createViews() {
var v10 = createPage('http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/402px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg', "#00FFFF");
var v11 = createPage('http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/402px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg', "#FF00FF");
var v12 = createPage('http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/402px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg', "#FFFF00");
var v13 = createPage('http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/402px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg', "#FFFFFF");
var v14 = createPage('http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/402px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg', "#FFFFFF");
var v15 = createPage('http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/402px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg', "#FFFFFF");
var v20 = createPage("images/Mona_Lisa.jpg", "#00FFFF");
var v21 = createPage("images/Mona_Lisa.jpg", "#FF00FF");
var v22 = createPage("images/Mona_Lisa.jpg", "#FFFF00");
var v23 = createPage("images/Mona_Lisa.jpg", "#FFFFFF");
var v24 = createPage("images/Mona_Lisa.jpg", "#FFFFFF");
var v25 = createPage("images/Mona_Lisa.jpg", "#FFFFFF");
var v30 = createPage(null, "#229900");
var v31 = createPage(null, "#333333");
var v32 = createPage(null, "#009900");
var v33 = createPage(null, "#FF77FF");
var v34 = createPage(null, "#007744");
var v35 = createPage(null, "#009988");
var v36 = createPage(null, "#DDBB00");
var v37 = createPage(null, "#CCCCCC");
var v38 = createPage(null, "#99FFFF");
var photosView1 = Ti.UI.createScrollableView({
views:[
v10,v11,v12,v13,v14,v15 // http images
],
showPagingControl:true,
cacheSize: 21
});
$.window1.add(photosView1);
var photosView2 = Ti.UI.createScrollableView({
views:[
v20,v21,v22,v23,v24,v25 // file images
],
showPagingControl:true,
cacheSize: 21
});
$.window2.add(photosView2);
var photosView3 = Ti.UI.createScrollableView({
views:[
v30,v31,v32,v33,v34,v35 // colored pages
],
showPagingControl:true,
cacheSize: 21
});
$.window3.add(photosView3);
}
function createPage(image, bkgColor) {
var detailsView = Ti.UI.createView({
width: Ti.UI.FILL,
height: Ti.UI.FILL,
top: 5,
left: 5,
right: 5,
bottom: 100,
backgroundColor: bkgColor
});
if (image) {
var imageView = Ti.UI.createImageView({
image:image
});
detailsView.add(imageView);
}
var labelView0 = Ti.UI.createLabel({
text: "Label 0"
});
detailsView.add(labelView0);
var pageView = Ti.UI.createView({
width: Ti.UI.FILL,
height: Ti.UI.FILL,
backgroundColor: "#E4E8E8"
});
pageView.add(detailsView);
var labelContainer = Ti.UI.createView({
height: 90,
bottom: 5,
left: 5,
right: 5,
backgroundColor: "#FFAAFF"
});
pageView.add(labelContainer);
var labelView1 = Ti.UI.createLabel({
bottom: 50,
text: "Label 1"
});
labelContainer.add(labelView1);
var labelView2 = Ti.UI.createLabel({
bottom: 10,
text: "Label 2"
});
labelContainer.add(labelView2);
return pageView;
}
createViews();
$.index.open();
6 Sep 2013 ...
Based on a comment that ambiguity of the layouts could cause the jerkyness I have now tried with views that have absolute positions and sizes. I also used just images from the file system that had the exact size as the image view. Please see code below. It is better but the jerkyness is still there which means that the underlaying issue is not resolved by absolute positions and sizes.
function createPage(image, bkgColor) {
var detailsView = Ti.UI.createView({
width: 300,
height: 300,
top: 0,
backgroundColor: bkgColor
});
if (image) {
var imageView = Ti.UI.createImageView({
width: 300,
height: 300,
image:image
});
detailsView.add(imageView);
}
else {
var labelView0 = Ti.UI.createLabel({
width: 300,
height: 300,
text: "No Image"
});
detailsView.add(labelView0);
}
var pageView = Ti.UI.createView({
width: 300,
height: 400,
backgroundColor: "#E4E8E8"
});
pageView.add(detailsView);
var labelContainer = Ti.UI.createView({
width: 300,
height: 100,
top: 300,
backgroundColor: "#FFAAFF"
});
pageView.add(labelContainer);
var labelView1 = Ti.UI.createLabel({
width: 300,
height: 20,
top: 10,
left: 10,
text: "Label 1"
});
labelContainer.add(labelView1);
var labelView2 = Ti.UI.createLabel({
width: 300,
height: 20,
top: 40,
left: 10,
text: "Label 2"
});
labelContainer.add(labelView2);
return pageView;
}
For me, it had to do with the scrollableView.cacheSize property. Try setting it to the length of your views array.
Related
index.xml
<Alloy>
<Window class="container">
</Window>
</Alloy>
index.js
function btnClickedHandler(e){
alert(nameTi.text);
alert($.index.nameTi);
}
function addContent(){
var showBtn = Ti.UI.createButton({
id: "showButton",
title:"Show Text",
top: 10,
});
var nameTi = Ti.UI.createTextField({
id:"displayText",
textFieldId: 'displayText',
width: 50
});
showBtn.addEventListener("click", btnClickedHandler);
$.index.add(nameTi);
$.index.add(showBtn);
}
$.index.open();
addContent();
Any suggestions to access dynamically added text input. One way could be definitely by storing instance in global variable. But can be done using id like $("#instanceId")
Try this:
function addContent(){
var showBtn = Ti.UI.createButton({
id: "showButton",
title:"Show Text",
top: 10,
});
var nameTi = Ti.UI.createTextField({
id:"displayText",
textFieldId: 'displayText',
width: 50
});
showBtn.addEventListener("click", function(){
alert(nameTi.text);
alert($.index.nameTi);
}
});
$.index.add(nameTi);
$.index.add(showBtn);
}
$.index.open();
addContent();
var galWin = Ti.UI.createWindow({
title: "Alejandro's Big Adventure",
modal: true,
backgroundColor: "828F99",
layout: "horizontal"
});
var border = Ti.UI.createView({
backgroundColor: "2585CC",
height: 1,
width: pWidth,
top: 30
});
var bottomButton = Ti.UI.createView({
backgroundColor: "828F99",
height: "10%",
width: pWidth,
bottom: 0
});
var galContainer = Ti.UI.createScrollView({
top: 0,
width: pWidth,
height: pHeight - border.height - border.top,
backgroundColor: "2585CC",
layout: "horizontal",
contentWidth: pWidth,
showVerticalScrollIndicator: true
});
for(var i = 0; i < myImages.length; i++){
var view = Ti.UI.createView({
borderRadius: 10,
top: margin,
left: margin,
width: size,
height: size
});
var img = Ti.UI.createImageView({
image: "images/" + myImages[i],
top: 0,
width: view.width * 1.25,
height: view.height * 2
});
view.add(img);
galContainer.add(view);
};
Firstly: for the title if you want to get the title of the window
so you can get it with getTitle() method like this
galWin.getTitle()
secondly: for the bottom
if you want to get the bottom of the window here you can't do that because the window is the top element in you hierarchy and is the doc
Window's bottom position, in platform-specific units.
On Android, this property only works with lightweight windows. See "Android Heavyweight and Lightweight Windows" in the main description of Titanium.UI.Window for more information.
so you get the bottom of the element according to it's parent so here the window have no parent
but in general if you want to get the bottom of any element
you can use getBottom() but be aware that this method will return a number only if you provide a bottom property inside the element other than that you will get Nan
and if you want to get the bottom of an element after the layout drawn on the screen you can you postlayout event and using rect.y to get the top of the element and then you can add the element height and finally minus it from the window height and for that if you don't have the window height you can use displayCaps.contentHeight to get the screen height
sorry for Long hope it help
I have created a radio button from the following link, https://github.com/yozef/TiRadioButtonGroup. I am able to see the radio buttons but the respective radio button labels are not showing. How can we display the radio button labels.
My code:
View:
<Alloy>
<Window class="container">
<View id="radiopicker" ></View>
</Window>
</Alloy>
Style:
".container": {
backgroundColor:"red",
layout: 'vertical'
}
"#radiopicker":
{
width: '90%',
top: '25dp'
}
Controller:
(function() {
var radioButton = require('/ui/tiRadioButton');
var radioGroup2 = radioButton.createGroup({
groupId:1,
width:20,
height:150,
layout:'vertical',
radioItemsValue:['One', 'Two', 'Three'],
radioItemsPadding:10,
radioItemsBackgroundSelectedImage:'/radioButtonActive.png',
radioItemsBackgroundImage:'/radioButton.png',
radioItemsWidth:33,
radioItemsHeight:34
});
var button = Ti.UI.createButton({
title:'Get value'
});
button.addEventListener('singletap', function(e) {
alert("Vertical radioGroup selectedIdx: " + radioGroup2.selectedValue);
});
$.radiopicker.add(radioGroup2);
$.radiopicker.add(button);
})();
$.index.open();
Screenshot:
The label option one, two and three are not displaying. Please help me out of this issue. I need to display the labels too.
I've gone ahead and updated my Module which will give you the result you want... You can fetch it here:
https://github.com/yozef/TiRadioButtonGroup
I think you should put some label near to the radioButtons by yourself. Have a look at my modified code. It is not tested but should do the trick. Maybe you have to play around with the width/height/left etc attributes a bit.
(function() {
var radioButton = require('/ui/tiRadioButton');
var radioGroup2 = radioButton.createGroup({
groupId:1,
width:20,
height:150,
layout:'vertical',
radioItemsValue:['One', 'Two', 'Three'],
radioItemsPadding:10,
radioItemsBackgroundSelectedImage:'/radioButtonActive.png',
radioItemsBackgroundImage:'/radioButton.png',
radioItemsWidth:33,
radioItemsHeight:34
});
//Create a view to hold your labels
var labelsView = Ti.UI.createView({
height:150,
left: "30" //Or whereever you want to place it
layout:'vertical'
});
//Create the labels
var label1 = Ti.UI.createLabel({
text: "One",
height: "34",
width: Titanium.UI.SIZE
});
var label2 = Ti.UI.createLabel({
text: "Two",
height: "34",
width: Titanium.UI.SIZE
});
var label3 = Ti.UI.createLabel({
text: "Three",
height: "34",
width: Titanium.UI.SIZE
});
//Attach the labels to your view and your view to your radioPicker view
labelsView.add(label1);
labelsView.add(label2);
labelsView.add(label3);
$.radiopicker.add(labelsView);
var button = Ti.UI.createButton({
title:'Get value'
});
button.addEventListener('singletap', function(e) {
alert("Vertical radioGroup selectedIdx: " + radioGroup2.selectedValue);
});
$.radiopicker.add(radioGroup2);
$.radiopicker.add(button);
})();
$.index.open();
I have gone through your code and found that your window background color is set to 'white' or '#ffffff' and in tiRadioButton.js module label color is also set to 'white' or '#ffffff'. Hence you are not able to see the lable.
You can change either the window backgroundColor or label color.
For change windowBackground color :
at abc.tss file
".container": {
backgroundColor:"red", // any color you want
layout: 'vertical'
}
For change Label color :
at tiRadioButton.js file
var radioItemLabel = Ti.UI.createLabel({
width:Ti.UI.SIZE,
height:Ti.UI.SIZE,
text: arg.radioItemsValue[i],
font: {}, // Can add your own font styles
color:'#FFFFFF', //Label color
top:isVertical?null:5, // 5 padding between RadioBtn & Label
left:!isVertical?null:5, // 5 padding between RadioBtn & Label
id:i,
});
//**In color field you can change the label color **
I have created a button, I need some response from button like, on touch of the button, the button focus should enable like change in background color. How can I do that?
My code is,
View:
<Button class="button" id="proceedButton" onClick="openQuestionnaire">Proceed</Button>
Style:
".button":{
width: '50%',
top: '25dp',
borderRadius: 8,
borderWidth: 1,
borderColor: '#808080',
backgroundGradient: {
type: "linear",
startPoint: { x: "0%", y:"0%"},
endPoint: { x: "0%", y:"100%"},
colors: [
{ color: "#4F94CD", offset: 0.0 },
{ color: "#4F94CD", offset: 1.0 }
]
}
}
Controller:
$.proceedButton.addEventListener('touchstart', function() {
$.proceedButton.isFocused = true;
});
$.proceedButton.addEventListener('touchend', function() {
$.proceedButton.isFocused = false;
});
The above code is not working. Just I need to slight chage in background color while touch of the button.
Any solution!!
Use this property and pass colour code
backgroundSelectedColor : "RED"
focusable must be true for normal views.
for more you can refer this http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.Button-property-backgroundSelectedColor
I hope it may help you,
Alloy xml would be like this
<Button class="button" id="proceedButton" onClick="openQuestionnaire">Proceed</Button>
Then the button property would be like this
".button":{
width: '50%',
top: '25dp',
borderRadius: 8,
borderWidth: 1,
borderColor: '#808080',
backgroundSelectedColor : "red",
backgroundSelectedImage : "/my_image.png",
backgroundGradient: {
type: "linear",
startPoint: { x: "0%", y:"0%"},
endPoint: { x: "0%", y:"100%"},
colors: [
{ color: "#4F94CD", offset: 0.0 },
{ color: "#4F94CD", offset: 1.0 }
]
}
}
You can set your selected image or background color on touch focus.
You wont need the controller code you have written in the controller.
Also for some object you can also have selectedColor.
You can also set backgroundFocusedImage,
As #CodeForFun mentioned you can use backgroundSelectedColor property of button.
Also following are all the states which can be used by a button in Titanium.
Disabled : backgroundDisabledImage and backgroundDisabledColor
Normal : backgroundImage and backgroundColor
Focus : backgroundFocusedImage and backgroundFocusedColor
Selected : backgroundSelectedImage and backgroundSelectedColor
Hope this would be helpful.
Edit : An example of usage:
View :
<Button class="button" >Proceed</Button>
TSS :
".button":{
width: '50%',
top: '25dp',
backgroundSelectedColor : "#4F94CD" //usage
}
I have a win1 and it has a button to close it.
Also I have a button to create a view1.
view1 has a button to hide it.
When I click the hide button on the view1, the button on the win1 which supposed to create the view1 when clicked, becomes disabled. Why is it? It is only a problem in Android. Please help. Thank you.
var win1 = Titanium.UI.currentWindow;
var closeButton = Titanium.UI.createButton({
image:'images/icontest.png',
backgroundImage: 'none',
top:0,
right:0
});
closeButton.addEventListener('click',function()
{
win1.close({transition:Ti.UI.iPhone.AnimationStyle.CURL_DOWN});
});
win1.add(closeButton);
//Main view & button
var view1=Ti.UI.createView({
backgroundColor: '#fff',
borderColor: '#888',
borderWidth: 4,
height: 172,
width: 275,
top:50,
opacity: 0.75,
borderRadius: 8
});
var closeButton2 = Titanium.UI.createButton({
image:'images/icontest.png',
backgroundImage: 'none',
top:0,
right:0
});
closeButton2.addEventListener('click',function()
{
view1.hide();
});
view1.add(closeButton2);
var OpenButton = Titanium.UI.createButton({
image:'images/icontest.png',
backgroundImage: 'none',
top:100,
right:50
});
OpenButton.addEventListener('click',function()
{
win1.add(view1);
});
win1.add(OpenButton);
You are adding view1 every time OpenButton is clicked. Actually you want to show view1 when OpenButton is clicked. So what you should do is:
OpenButton.addEventListener('click',function()
{
view1.show();
});
and view1 should be added outside of OpenButton.addEventListener. Like this:
win1.add(OpenButton);
win1.add(view1);