I am working on a Titanium mobile app and I have a problem with buttonfocusing while using backgroundRadient .
I meet success using the touchstart event (changeBackgroundGradient is simple enough to avoid display here):
authButton.addEventListener('touchstart', function(e) {
changeBackgroundGradient(authButton);
});
But the touchend event is not what I want. It fires only if the user end the touch on the element (behaves as a click event).
Touchmove is not what I want either, as it fires as soon as the user moves.
authButton.addEventListener('touchmove', function(e) {
revertBackgroundGradient(authButton);
});
What I want is: as long as the user is touching the button, the button is on focus. Something like 'ontap' and 'onrelease'.
I know there are backgroundFocusedColor and backgroundFocusedImage, but no backgroundFocusedGradient.
How can I handle button focus while using backgroundGradient property?
I want to have the default behaviour but it seems to stop as soon as I use the backgroundGradient property.
Thanks.
--edit:
Here is the full code :
// Authenticate Button
var authButton = Ti.UI.createButton({
width : '50%',
height : '60',
top : '15',
bottom : '15',
title : L('LoginView_authButton'),
font: {
fontSize: 20,
fontFamily: 'TrebuchetMS-Bold'
},
color : '#FFFFFF',
textAlign : 'center',
borderColor : '#3D86A9',
borderWidth : '2',
borderRadius : '5',
backgroundGradient : {
type : 'linear',
startPoint : {
x : '0%',
y : '0%'
},
endPoint : {
x : '0%',
y : '100%'
},
colors : [{
color : '#a2d6eb',
offset : 0.0
}, {
color : '#67afcf',
offset : 0.5
}, {
color : '#3591bc',
offset : 0.5
}, {
color : '#1e83b1',
offset : 1.0
},
]
}
});
authButton.addEventListener('touchstart', function(e) {
changeBackgroundGradient(authButton);
});
authButton.addEventListener('touchend', function(e) {
revertBackgroundGradient(authButton);
});
function changeBackgroundGradient(AuthButton)
{
AuthButton.backgroundGradient = {
type : 'linear',
startPoint : {
x : '0%',
y : '0%'
},
endPoint : {
x : '0%',
y : '100%'
},
colors : [{
color : '#f5bd8b',
offset : 0.0
}, {
color : '#e59a57',
offset : 0.5
}, {
color : '#da7a23',
offset : 0.5
}, {
color : '#c35211',
offset : 1.0
},
]
};
}
function revertBackgroundGradient(AuthButton)
{
AuthButton.backgroundGradient = {
type : 'linear',
startPoint : {
x : '0%',
y : '0%'
},
endPoint : {
x : '0%',
y : '100%'
},
colors : [{
color : '#9FD3E9',
offset : 0.0
}, {
color : '#63AAC9',
offset : 0.5
}, {
color : '#348BB8',
offset : 0.5
}, {
color : '#2081B2',
offset : 1.0
},
]
};
}
Oh ok, I get it now, it works as intended, it's not a bug, as you're adding the event listener TO the button, so it only applies to the button.
You might want to add a property to authButton called isFocused or something like that. And on the touchstart event, add:
authButton.isFocused:true;
And then add the touchend event on the view/window that contains the authButton with the revert function.
Do you see why?
I did the trick using touchCancel
authButton.addEventListener('touchstart', function(e) {
changeBackgroundGradient(authButton);
});
authButton.addEventListener('touchcancel', function(e) {
revertBackgroundGradient(authButton);
});
I first misunderstood the documentation:
touchcancel
Fired when a touch event is interrupted by the device
The touch event is indeed interrupted by the device if you end the touch outside the element. So it works as intended : as long as you press the screen, the button is orange, once you release the press outside of the button, the button goes back blue.
Thanks for your hints Sismetic, it made me figure out.
Related
The TableView is showing in iOS simulator...but it doesn't show in android physical device...
They are running the same code and without error occur.
var row = Titanium.UI.createTableViewRow({
width : Titanium.UI.FILL,
height : "20%",
left : 0,
backgroundColor : "orange",
separatorColor : "transparent",
fav_id:id,
});
var lblTitle = Ti.UI.createLabel({
top : "5%",
left : "0%",
height : Titanium.UI.SIZE,
width : "90%",
text : title,
textAlign : Ti.UI.TEXT_ALIGNMENT_LEFT,
color : "black",
//backgroundColor : 'blue',
maxLines: 2,
touchEnabled : false
});
var lblDate = Ti.UI.createLabel({
top : "50%",
left : "0%",
height : Titanium.UI.SIZE,
width : "90%",
text : date,
textAlign : Ti.UI.TEXT_ALIGNMENT_LEFT,
color : "black",
//backgroundColor : 'blue',
//maxLines:1,
touchEnabled : false
});
var lblCategory = Ti.UI.createLabel({
top : "50%",
left : "60%",
height : Titanium.UI.SIZE,
width : "90%",
text : category,
textAlign : Ti.UI.TEXT_ALIGNMENT_LEFT,
color : "black",
touchEnabled : false
//backgroundColor : 'white',
//maxLines:1,
});
row.add(lblTitle);
row.add(lblDate);
row.add(lblCategory);
dataTable.push(row);
$.tblFavourite.data = dataTable;
what happened to the android os? does design affected to the output of the tableview?
I think percentage is not working in case of tableViewRow.
Try to set row.height = "50dp"
Hope this will help you.
As Suraj already pointed out it is not possible to use percentages as the row height in Android. But there is a workaround I found in the Appcelerator forums:
You should calculate your percentage by yourself. Use Ti.Platform.displayCaps.platformWidth and Ti.Platform.displayCaps.platformHeight for your calculation.
Example for 10% height:
height : Math.floor(Ti.Platform.displayCaps.platformHeight / 10)
I am having this unexpected issue in my current project in TITANIUM.
I am using a webview for showing a local html file. It works perfect in iOS and in some android device as well. But in most of the HD android devices the html page or the contents of webview breaks while scrolling. Here is my code
var htmlTemplate = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, 'extras', 'learnMore.html');
var cssTemplate = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, 'extras', 'learnMore.css');![enter image description here][1]
var html = htmlTemplate.read().text;
var css = cssTemplate.read().text;
html = html.replace("#css#", css);
//Animations Transformations
var small = Ti.UI.create2DMatrix({
scale : 0.05
});
var big = Ti.UI.create2DMatrix({
scale : 1.2
});
var normal = Ti.UI.create2DMatrix({
scale : 1
});
//Animation Durations
var smallDuration = 350;
var bigDuration = 350;
var normalDuration = 250;
var win = Ti.UI.createWindow({
backgroundColor : 'transparent',
//navBarHidden : true,
});
var windowView = Ti.UI.createView({
top : OS_IOS ? 20 : 1,
right : 1,
bottom : OS_IOS ? 10 : 1,
left : 1,
backgroundColor : '#fff',
borderRadius : 7,
});
var closeImage = Ti.UI.createImageView({
zIndex : 1,
top : 5,
right : 1,
width : 35,
height : 35,
image : "/images/icons/black_cross_icon.png"
});
closeImage.addEventListener('click', closeWindow);
var webView = Ti.UI.createWebView({
width : '100%',
height : Ti.UI.SIZE,
backgroundColor : "transparent",
top : 0,
html : html,
//overScrollMode : Titanium.UI.Android.OVER_SCROLL_NEVER,
});
windowView.add(webView);
win.add(windowView);
win.add(closeImage);
function closeWindow() {
if (OS_ANDROID) {
win.close();
return;
}
win.animate({
duration : 300,
transform : big
}, function() {
win.animate({
duration : smallDuration,
transform : small
}, function() {
win.close();
webView = null;
});
});
}
(function() {
win.open();
if (OS_ANDROID) {
return;
}
win.transform = small;
win.animate({
duration : bigDuration,
transform : big
}, function() {
win.animate({
duration : normalDuration,
transform : normal
});
});
})();
win.addEventListener('open', function(e) {
Ti.API.error('********************* Learnmore OPEN ***********************');
if (OS_ANDROID) {
win.activity.actionBar.hide();
}
});
https://www.dropbox.com/s/ade8wssi5ima3gr/10671472_702509996463626_2272456868867723707_n.jpg?dl=0
Ok now i know this is not an ideal solution but if you are a titanium developer you have to deal with this kind situations in daily basis especially for our enemy-friend Android.
So as a work around what i have done is reloaded the html of webview second time after the webview is being loaded for first time.
var toggle = false;
webView.addEventListener('load', function(e) {
if (toggle == false && OS_ANDROID) {
this.html = html;
toggle = true;
}
});
this is beacuse in my html file i have set
<meta name="viewport" content="width=device-width, initial-scale=0.9,user-scalable = no" />
But unfortunately it was not taken effect some time and thus while scrolling it shows some buggy UI.After the work around it seems the meta tag works.
Hope it helps some one who came across something like this.
I am trying to add an overlay for android camera using Titanium SDK. Everything is fine. But, zoom is not working. Is there a way to implement that in titanium?
I am using the latest Titanium SDK 3.2.1GA
Here's my code:
// Containing window
var win = Ti.UI.createWindow({
navBarHidden : true,
backgroundColor : "#ffffff",
height : Ti.UI.FILL,
width : Ti.UI.FILL
});
// Blue button that opens the camera
var open_camera = Ti.UI.createButton({
height : Ti.UI.SIZE,
width : Ti.UI.SIZE,
bottom : 50,
title : 'Camera'
});
// Adding the "open camera" button
win.add(open_camera);
// Function to show the camera
function openCamera() {
alert('opening');
open_camera.backgroundColor = "#00ff00";
// Just checking if we got here
// The camera overlay I want displayed over the camera
var camera_overlay = Ti.UI.createView({
top : 0,
left : 0,
height : Ti.UI.FILL,
width : Ti.UI.FILL
});
var take_picture = Ti.UI.createButton({
height : Ti.UI.SIZE,
width : Ti.UI.SIZE,
bottom : 50,
title : 'Take Picture'
});
take_picture.addEventListener('click', function() {
Ti.Media.takePicture();
});
camera_overlay.add(take_picture);
// The actual show camera part
Ti.Media.showCamera({
success : function(e) {
alert('success');
// I want this!
},
cancel : function(e) {
},
error : function(error) {
},
autohide : false,
showControls : false,
mediaTypes : [Ti.Media.MEDIA_TYPE_PHOTO],
overlay : camera_overlay // The camera overlay being added to camera view
});
};
// Click event to show the camera
open_camera.addEventListener("click", function(e) {
openCamera();
});
// Open the window
win.open();
I have sencha touch 2 based app and I have facing issue while tapping and holding. Ideally i should get android context menu of copy paste but i dont.
Please refer to below two links.
http://try.sencha.com/touch/2.0.0/docs/Ext.field.TextArea.1/viewer.html
http://try.sencha.com/touch/2.2.0/docs/Ext.field.TextArea.1/viewer.html
On android first one gives the android (not tested on ios) copy paste menu but second one does not. I am facing the smae problem in my live app also.
Please suggest if any solution
Reply to #bwags:
Ext.define('HCMDoctor.view.PFQuestion', {
extend : 'Ext.form.Panel',
xtype : 'PFQuestion',
id : 'pfView',
config : {
layout : {
type : 'auto',
align : 'stretch'
},
flex : 1,
scrollable : 'vertical',
items : [{
xtype : 'container',
html : 'Click below to choose a different community',
style : {
width : '98%',
marginLeft : '5px',
marginTop : '10px',
fontSize : '10px'
}
}, {
xtype : 'selectfield',
store : 'CommunityWiseQuestions',
name : 'pfCommId',
id : 'pfCommId',
valueField : 'communityId',
displayField : 'displayFull',
centered : false,
usePicker : false,
defaultTabletPickerConfig : {
height : 400,
minHeight : 400,
width : 300,
minWidth : 300
},
style : {
marginTop : '10px',
marginBottom : '10px',
width : '96%',
marginLeft : '5px',
fontSize : '12px',
border : '1px solid #000'
}
}, {
html : '',
id : 'questionMessageDiv',
style : {
textAlign : 'center',
width : '100%'
}
}, {
xtype : 'panel',
id : 'pfQuestionHolder',
style : {
width : '98%',
marginLeft : '5px',
marginBottom : '10px'
},
tpl : [
'<span style="font-size:12px;"><b>{discussionTitle}</b><br>{description}',
// '<br><i><span style="color:green">Posted in
// <b>{postedInCommunityName}</b></span></i>',
'</span>']
}, {
xtype : 'hiddenfield',
id : 'pfQuestionId',
name : 'pfQuestionId'
}, {
xtype : 'textareafield',
id : 'pfAnswer',
name : 'pfAnswer',
placeHolder : 'Please write your answer here...',
style : {
marginBottom : '10px',
width : '97%',
marginLeft : '5px',
fontSize : '12px',
border : '2px solid #000'
}
,
listeners : {
focus : function(comp, e, eopts) {
listeners : {
var ost = comp.element.dom.offsetTop;
this.getParent().getScrollable().getScroller()
.scrollToEnd(true);
return true;
}
}
}
}, {
xtype : 'button',
text : 'Submit',
id : 'submitPFQuestion',
ui : 'confirm'
}, {
xtype : 'spacer',
height : 10
}, {
xtype : 'container',
html : '<a id="ignorePFQuestion" href="javascript:">Skip and Show Next Question</a>',
style : {
width : '98%',
marginLeft : '5px',
textAlign : 'center',
marginBottom : '80px'
}
}
]
},
initialize : function() {
this.element.on({
scope : this,
tap : this.ignorePremiumQuestion,
delegate : '#ignorePFQuestion'
});
return this.callParent();
},
ignorePremiumQuestion : function(obj, newValue, oldValue, eOpts) {
HCMDoctor.app.getController('Main').showPFQuestionNext();
}
});
This is one of the views I have. I am not getting the default context menu of copy paste on android as well as ios.
Infact the sencha try URL doesnot produce copy paste menus.
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.