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


Thank you for visiting the BlackBerry Support Community Forums.

BlackBerry will be closing the BlackBerry Support Community Forums Device Forums on April 1st (Developers, see below)

BlackBerry remains committed to providing excellent customer support to our customers. We are delighted to direct you to the CrackBerry Forums, a well-established and thorough support channel, for continued BlackBerry support. Please visit http://forums.crackberry.com or http://crackberry.com/ask. You can also continue to visit BlackBerry Support or the BlackBerry Knowledge Base for official support options available for your BlackBerry Smartphone.

"When we launched CrackBerry.com 10 years ago, we set out to make it a fun and useful destination where BlackBerry Smartphone owners could share their excitement and learn to unleash the full potential of their BlackBerry. A decade later, the CrackBerry community is as active and passionate as ever and I know our knowledgeable members and volunteers will be excited to welcome and assist more BlackBerry owners with their questions."

- Kevin Michaluk, Founder, CrackBerry.com

Developers, for more information about the BlackBerry Developer Community please review Join the Conversation on the BlackBerry Developer Community Forums found on Inside BlackBerry.


Reply
Developer
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

Developer
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

 

 

Developer
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?
Developer
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

Developer
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

Highlighted
Regular Contributor
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 ?

New Developer
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 {..}

     }

}