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: 210
Registered: ‎01-08-2013
My Device: Z10 LE
My Carrier: SiMobil
Accepted Solution

Creating custom button: onPress, onRelease?

[ Edited ]

In the code below there is a custom button code. The only problem I have is dealing with background image, to change when you press the button and when you release it. I for testing purpose put it into onTouchCapture, but of course that gets called many times, and I have no way of detecting when it is released. Any signals I could use to manage background image?

 

import bb.cascades 1.2

Container {
    property alias text: label.text

    signal clicked() //emits a clicked signal.
    gestureHandlers: [
        TapHandler {
            onTapped: {
                clicked();
            }
        }
    ]

    onTouchCapture: {
        btn_background.imageSource = "asset:///images/button_custom_press.amd"
    }

    layout: DockLayout {
    }

    ImageView {
        id: btn_background
        imageSource: "asset:///images/button_custom.amd"
        verticalAlignment: VerticalAlignment.Fill
        horizontalAlignment: HorizontalAlignment.Fill
    }
    horizontalAlignment: HorizontalAlignment.Fill
    Container {
        horizontalAlignment: HorizontalAlignment.Center
        verticalAlignment: VerticalAlignment.Center

        Label {
            id: label
            text: "Išči"
            textStyle {
                base: tsLabel.style
            }
            topMargin: 0
            bottomMargin: 0
        }

    }

    attachedObjects: [
        TextStyleDefinition {
            id: tsLabel
            fontSize: FontSize.Small
            color: Color.White
            fontWeight: FontWeight.W500
        }
    ]
}

 

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Creating custom button: onPress, onRelease?

Why not use ImageButton instead?

 

http://developer.blackberry.com/native/reference/cascades/bb__cascades__imagebutton.html


If you've been helped click on Like Button, if you've been saved buy the app. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 210
Registered: ‎01-08-2013
My Device: Z10 LE
My Carrier: SiMobil

Re: Creating custom button: onPress, onRelease?

You can't put text on ImageButton. I will reuse this button a few times

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Creating custom button: onPress, onRelease?

I predicted you were going to say that :smileyhappy:

 

Just use a container with a DockLayout and place a label on top.


If you've been helped click on Like Button, if you've been saved buy the app. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 1,523
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: Creating custom button: onPress, onRelease?

in onTouchCapture there's 'event' parameter.

http://developer.blackberry.com/native/reference/cascades/bb__cascades__touchevent.html

It has methods such as event.isUp() and event.isDown() to differentiate keypresses.

Andrey Fidrya, @zmeyc on twitter
Developer
Posts: 210
Registered: ‎01-08-2013
My Device: Z10 LE
My Carrier: SiMobil

Re: Creating custom button: onPress, onRelease?

You mean just put a Label over ImageButton? Hmm, that could work

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Creating custom button: onPress, onRelease?

[ Edited ]

Not just could, it does, and a lot simpler than the code you are struggling with just make sure to set the overlapTouchPolicy to allow on the Label.

 


If you've been helped click on Like Button, if you've been saved buy the app. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Creating custom button: onPress, onRelease?

Simplified custom button to get you started...

 

CustomButton.qml

import bb.cascades 1.2

Container {
    signal customClicked()

    property alias btnText: l.text
    property alias btnDefault: ib.defaultImageSource
    property alias btnDisabled: ib.disabledImageSource
    property alias btnPressed: ib.pressedImageSource

    layout: DockLayout { }

    ImageButton {
        id: ib
        horizontalAlignment: HorizontalAlignment.Center
        verticalAlignment: VerticalAlignment.Center
		
        onClicked: {
            customClicked();
        }
    }
	
    Label {
        id: l
        horizontalAlignment: HorizontalAlignment.Center
        verticalAlignment: VerticalAlignment.Center
        overlapTouchPolicy: OverlapTouchPolicy.Allow
    }
}

 


If you've been helped click on Like Button, if you've been saved buy the app. :smileyhappy:

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 210
Registered: ‎01-08-2013
My Device: Z10 LE
My Carrier: SiMobil

Re: Creating custom button: onPress, onRelease?

[ Edited ]

Thanks to you all! Now my apps will look better in the future.

This is what I will use (slightly changed BBSJdev solution) if anyone needs it in the future

 

import bb.cascades 1.2

Container {
    signal customClicked();
    
    property alias text: label.text
    property alias btnDefault: ib.defaultImageSource
    property alias btnDisabled: ib.disabledImageSource
    property alias btnPressed: ib.pressedImageSource
    
    layout: DockLayout { }
    
    ImageButton {
        id: ib
        horizontalAlignment: HorizontalAlignment.Fill
        verticalAlignment: VerticalAlignment.Fill
        defaultImageSource: "asset:///images/button_custom.amd"
        pressedImageSource: "asset:///images/button_custom_press.amd"
        onClicked: {
            customClicked();
        }
    }
    
    Label {
        id: label
        horizontalAlignment: HorizontalAlignment.Center
        verticalAlignment: VerticalAlignment.Center
        overlapTouchPolicy: OverlapTouchPolicy.Allow
        textStyle {
            fontSize: FontSize.Small
            color: Color.White
            fontWeight: FontWeight.W500
        }
    }
}