CODEWITHSUNDEEP
androidiphonetitaniumappcelerator
Simon Peyou
Simon Peyou

Reputation: 703

Titanium button.backgroundGradient focus

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
        },
        ]
    };
}

Upvotes: 2

Views: 1609

Answers (2)

Simon Peyou
Simon Peyou

Reputation: 703

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.

Upvotes: 1

Sismetic
Sismetic

Reputation: 327

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?

Upvotes: 1

Related Questions