Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Contributor
bhargav3132
Posts: 18
Registered: ‎05-15-2013
My Device: 9700

BB10 Cascades touch events

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

 

Developer
jalue
Posts: 196
Registered: ‎03-04-2013
My Device: BB Z10

Re: BB10 Cascades touch events

Hey there... Try it this way...

 

Container {
    property alias image: imagev.imageSource
    id: dialButton
    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;
        } else if (event.touchType == TouchType.Up) {
            dialButton.background = Color.create("#ff00FF00");
        }
    }

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

 

Developer
gyubok
Posts: 520
Registered: ‎10-08-2009
My Device: Bold 9900

Re: BB10 Cascades touch events

[ Edited ]

Modify 

 

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

The "event.touchType == TouchType.Cancel" will catch an event of moving your finger away from the control area.