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
Developer
contryboy
Posts: 68
Registered: ‎08-16-2012
My Device: BB10 Dev Alpha
My Carrier: NA
Accepted Solution

overlapTouchPolicy does not work for Label overlaps ImageButton

Hi All,

 

I want to implment a button with custom image and text, what I did is to use a ImageButton to show the background, upon which I put a label to show the text. From documentation, I learnd that I should set overlapTouchPolicy: OverlapTouchPolicy.Allow on the label to have the button receive the click event.  How ever, it does not work: when I click on the label, it does not trigger the click event on the button. Here is the code:

         Container {
             layout: AbsoluteLayout {
             }
             preferredWidth: 768
             preferredHeight: 126
                          
             ImageButton {
                 id: sendButton
                 preferredWidth: 186
                 preferredHeight: 82
                 layoutProperties: AbsoluteLayoutProperties {
                     positionX: 560
                     positionY: 22
                 }
                 defaultImageSource: "images/title_btn_normal.png"
                 pressedImageSource: "images/title_btn_press.png"
                 onClicked: {
                     //do something                 }
             }
             
             Label {
                 text: qsTr("A button")
                 layoutProperties: AbsoluteLayoutProperties {
                     positionX: 600
                     positionY: 40
                 }
                 overlapTouchPolicy: OverlapTouchPolicy.Allow
             }
         }

 

Anyone has an ideaon how to resolve this problem?

 

Thanks,

Dong

Please use plain text.
Contributor
sanshah90
Posts: 36
Registered: ‎06-28-2012
My Device: BB10
My Carrier: RIM

Re: overlapTouchPolicy does not work for Label overlaps ImageButton

Hi,

 

You didn't handle the label's click event. If you click on image (not on label) the click event works in your code.

 

Try below code to handle the label's click event : 

 

Container {
        layout: AbsoluteLayout {
        }
        preferredWidth: 768
        preferredHeight: 126
        ImageButton {
            id: sendButton
            preferredWidth: 186
            preferredHeight: 82
            layoutProperties: AbsoluteLayoutProperties {
                positionX: 560
                positionY: 22
            }
            overlapTouchPolicy: OverlapTouchPolicy.Allow
            defaultImageSource: "direction_normal.png"
            pressedImageSource: "direction_over.png"
//            onClicked: {
//            }
        }
        Label {
            id: lbl1
            text: qsTr("A button")
            layoutProperties: AbsoluteLayoutProperties {
                positionX: 600
                positionY: 40
            }
//            overlapTouchPolicy: OverlapTouchPolicy.Allow    // Comment this line
            gestureHandlers: [
                TapHandler {
                    onTapped: {
                        // Handle the label click event
                        //lbl1.text = "label clicked worked..."
                    }
                }
            ]
        }
    }

 

Thanks

 

 

Please use plain text.
Developer
contryboy
Posts: 68
Registered: ‎08-16-2012
My Device: BB10 Dev Alpha
My Carrier: NA

Re: overlapTouchPolicy does not work for Label overlaps ImageButton

Thanks, this workaround works fine. How ever, I still think the overlap policy should work for this. should that be a bug? or do I misunderstand it?
Please use plain text.
Contributor
sanshah90
Posts: 36
Registered: ‎06-28-2012
My Device: BB10
My Carrier: RIM

Re: overlapTouchPolicy does not work for Label overlaps ImageButton

Hi,

 

It is not a bug.

I have mentioned in my last post.

 

You didn't handle the label's click event. If you click on image (not on label) the click event works in your code evenif you dont put overlaptouchpolicy statemet.You must handle the label's touch to make it work.

 


Thanks

Please use plain text.
Developer
contryboy
Posts: 68
Registered: ‎08-16-2012
My Device: BB10 Dev Alpha
My Carrier: NA

Re: overlapTouchPolicy does not work for Label overlaps ImageButton

Upon my understanding, the overlapTouchPolicy is used to make the overlapTouch transparent to the component underneath. e.g. If I have a label above a button, if I set the lable's overlapTouchPolicy to allow, then the touch event will goes directly into the button.

Is this how the overlapTouchPolicy used? If not, how it works?

 

Thanks,

Dong

Please use plain text.
Regular Contributor
Guillaume_LACHAUD
Posts: 60
Registered: ‎12-19-2012
My Device: BB10 Alpha B
My Carrier: SFR

Re: overlapTouchPolicy does not work for Label overlaps ImageButton

The code shown as a solution works to detect tap but doesn't work as expected regarding the imageButton. The pressed event is never received in the ImageButton when the Label is presed.

 

I have tried to tweak this with the touchPropagationMode but to no avail. Any idea ?

Please use plain text.
New Developer
Zucco
Posts: 8
Registered: ‎02-11-2010
My Device: All versions
My Carrier: None

Re: overlapTouchPolicy does not work for Label overlaps ImageButton

I was going crazy with this... But finally I found something that works.

 

First of all, put your label inside a container and then, set the touchPropagationMode of the container to none.

 

Check this code:

Container {
layout: DockLayout {}

    ImageButton {..}

    Container {
           touchPropagationMode: TouchPropagationMode.None

           Label {..}

     }

}

Please use plain text.