BB10 Cascades touch events

Question

I am developing a BB10 Cascades native application. I am using some containers as buttons as I need a custom look. I am therefore using the onTouch event to handle 'presses'. What I would like to do is play a tone when the 'button' is pressed and stop the tone when the 'button' is released.

Here is the code

 Container {

property alias image: imagev.imageSource
id: dialbutton
signal onTouch()
signal onTouchExit()
background: Color.create("#ff0000FF")

ImageView {
    id: imagev
    scalingMethod: ScalingMethod.AspectFit
    horizontalAlignment: HorizontalAlignment.Center
    verticalAlignment: VerticalAlignment.Center
}

onTouch: {


    if (event.touchType == TouchType.Down) {

        dialbutton.background = Color.Blue;
        dialbutton.onTouch(event);
    }
    else if (event.touchType == TouchType.Up)
    {
        dialbutton.background = Color.create("#ff00FF00");

    }

}

onTouchExit:
    {
    dialbutton.background = Color.create("#ff00FF00");
    dialbutton.onTouchExit();
    }
}

The problem I have is when the 'button is tapped the color should change to BLUE and then revert back when released. However if I tap the button and then keep it pressed and move off the button it stays blue. This is what the onTouchExit was supposed to solve but it doesn't really work this way as onTouchExit events are fired even when pressing down on the button and not moving off the button. I would also like to play a tone (code not shown) but I need to get the color change working properly first.

Any one know what I need to alter to get this working correctly

Thanks

Ergin Babani Ergin Babani · Accepted Answer · 2013-03-20T04:07:31

Change your "else if" inside the onTouch block to also handle TouchType.Cancel. TouchType.Cancel is the event your button receives when you move your finger off of it. You should't need the onTouchExit code after the change.

onTouch: {

    if (event.touchType == TouchType.Down) {

        dialbutton.background = Color.Blue;
        dialbutton.onTouch(event);
    }
    else if (event.touchType == TouchType.Up || event.touchType == TouchType.Cancel)
    {
        dialbutton.background = Color.create("#ff00FF00");

    }

}

BB10 Cascades touch events

1 Answers