How to enable button focus on touchStart?

Question

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!!

score 2 · Answer 1 · answered Oct 29 '14 at 15:47

2

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,

answered Oct 29 '14 at 15:47

Pritesh

172
1
14

Where can I use this property? – Vinod Oct 30 '14 at 06:18
1

on button property add this. – Pritesh Oct 30 '14 at 06:39
1

remove touch start and touch end event listner from controller, and just add property of backgroundSelectedColor : "RED" . – Pritesh Oct 30 '14 at 06:49
@CodeForFun Sorry didnt see that you have mentioned the right answer already. – SSS Oct 30 '14 at 07:00

score 2 · Answer 2 · answered Oct 30 '14 at 06:54

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,

turtle · Accepted Answer · 2014-10-30T06:28:44.420

0

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
}

edited Oct 30 '14 at 06:28

answered Oct 30 '14 at 06:05

turtle

1,619
1
14
30

Where can I use backgroundSelectedColor property? – Vinod Oct 30 '14 at 06:20

How to enable button focus on touchStart?

3 Answers3