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
Posts: 692
Registered: ‎08-09-2010
My Device: Not Specified

How to set Click event into Custom Button ?

Hello,

 

   I build Custom Button but there are some problem fetch

 

   How to click event set into Button?

 

   My custom Field like this 

 

  

import bb.cascades 1.0
Container {
property alias text: label.text
property alias defaultImageSource: imageBtn.defaultImageSource
property alias pressedImageSource: imageBtn.pressedImageSource
signal clicked()
layout: DockLayout {
}
id: customImageButton
ImageButton {
id: imageBtn
defaultImageSource: "asset:///images/form_button.png"
pressedImageSource: "asset:///images/form_button_hover.png"
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
onButtonClicked: clicked()
}
Label {
id: label
text: "text"
verticalAlignment: VerticalAlignment.Center
horizontalAlignment: HorizontalAlignment.Center
}
}

   So can you provide me suggestion or any feedback.

 

Developer
Posts: 313
Registered: ‎05-31-2010
My Device: Alpha 10, Bold 9900, Storm 9530, Tour 9630, Curve 9320, Curve 8900
My Carrier: All

Re: How to set Click event into Custom Button ?

[ Edited ]

It should use onClicked event handler.

 

Such as

ImageButton {
                objectName: "xxx"
                id: xxxButton
                defaultImageSource: "asset:///xxx_button_enabled.png"
                pressedImageSource: "asset:///xxx_button_selected.png"
                disabledImageSource: "asset:///xxx_button_enabled.png"
                layoutProperties: AbsoluteLayoutProperties {
                    positionX: xxx
                    positionY: xxx
                }
                preferredWidth: xxx
                preferredHeight: xxx
                onClicked: {
                    myPlayer.setSourceUrl("asset:///xxx.wav");
                    myPlayer.play();

                    var aboutPage = pageDefinition.createObject();
                    navigationPane.push(xxxPage);
                }
            }

 What is the purpose of "id: customImageButton"? I think that it should be deleted.




p(^_^)q
Good good study, day day up
Developer
Posts: 692
Registered: ‎08-09-2010
My Device: Not Specified

Re: How to set Click event into Custom Button ?

Hello,

 

    Please find attachement.I attached source code which i fetch issue.

Developer
Posts: 313
Registered: ‎05-31-2010
My Device: Alpha 10, Bold 9900, Storm 9530, Tour 9630, Curve 9320, Curve 8900
My Carrier: All

Re: How to set Click event into Custom Button ?

[ Edited ]

I changed a little and it finally works. onClicked -> onTouch




p(^_^)q
Good good study, day day up
Developer
Posts: 692
Registered: ‎08-09-2010
My Device: Not Specified

Re: How to set Click event into Custom Button ?

Hi Javayoug,

 

     I need click event into Main.qml where i define CustomButton.

 

     Like this type

   

    

Page {
    Container {
        CustomButtonField {
            id: deactivateBtn
            defaultImageSource: "asset:///images/big_red_btn.png"
            pressedImageSource: "asset:///images/big_red_btn_onpress.png"
            text: "Deactivate"
            onCliked:{
               console.log("button clicked");
            }
        }
    }
}

      But not working.

 

Thanks,

Umang Shah.

Developer
Posts: 163
Registered: ‎04-28-2012
My Device: BlackBerry 9800
My Carrier: BlackBerry

Re: How to set Click event into Custom Button ?

Hi,

 

     You need to emit the signal declared in the CustomButtonField like this.

 

import bb.cascades 1.0

Container {
    id: cutomBtn
    property alias text: label.text
    property alias defaultImageSource: imageBtn.defaultImageSource
    property alias pressedImageSource: imageBtn.pressedImageSource
    signal clicked()
    layout: DockLayout {
    }
    ImageButton {
        id: imageBtn
        defaultImageSource: "asset:///images/big_red_btn.png"
        pressedImageSource: "asset:///images/big_red_btn_onpress.png"
        horizontalAlignment: HorizontalAlignment.Center
        verticalAlignment: VerticalAlignment.Center
    }
    Label {
        id: label
        text: "text"
        verticalAlignment: VerticalAlignment.Center
        horizontalAlignment: HorizontalAlignment.Center
    }
    onTouch: {
        console.log("button clicked");
        if(event.isDown())
        {
            clicked();
        }
    }
}

Now  in main.qml  u can write ur code.

It will work.

 

Regards,

Naresh Kodumuri.

Developer
Posts: 263
Registered: ‎05-18-2011
My Device: Curve 9300, BB10 Dev Alpha C, Z10

Re: How to set Click event into Custom Button ?

the click event works but the ImageButton does not change the image to the pressedImage to reflect the touch event! Anyone know how to fix this?
--tom