Create a button on Cascades with background image, BB-10

Question

I want to create a button using Cascades on Black Berry 10 development which has an image as a background and also possibly a text with white color. I found this class button, but it seems to not support setting an image as a background on the button. What can I do? What are the alternate ways? Maybe I should consider another library than Cascades for creating my UI??? any suggestions?

Maybe using an imageButton https://developer.blackberry.com/cascades/reference/bb__cascades__imagebutton.html — Michael B., Feb 08 '13 at 15:37
hmm... yes, but the strange thing with that button is that it can't have 'text' — user2054339, Feb 08 '13 at 18:24

hasanul hakim · Accepted Answer · 2013-03-07T05:28:20.770

 Container {
        id:account
        signal buttonClicked()
        layout: DockLayout {
        }
        preferredWidth: 768.0
        topMargin: 40.0
        bottomMargin: 40.0
        ImageButton {
            id: addButton
            defaultImageSource: "image/button_normal.png"
            pressedImageSource: "image/button_press.png"
            horizontalAlignment: HorizontalAlignment.Center
            onClicked: {
               buttonClicked();
            }
        }
        Label {
            text: "Add"
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Center
            textStyle {
                base: SystemDefaults.TextStyles.BodyText
                fontSize: FontSize.Small
                color: Color.create("#ffffff")
            }
            touchPropagationMode: TouchPropagationMode.None
        }
    }

score 0 · Answer 2 · answered Feb 08 '13 at 21:40

0

You can have a button with both text and image by using the default Button class: cascades_button.html">https://developer.blackberry.com/cascades/reference/bb_cascades_button.html

Having a background image on the button with text over top is not really recommended. A button should be clear and easy to read. See the BlackBerry 10 UI Guidelines here: https://developer.blackberry.com/devzone/files/design/bb10/UI_Guidelines_BlackBerry_10.pdf

If you really want to do it, you can always build a custom component in Cascades that has an image with a label over top.

answered Feb 08 '13 at 21:40

Paul Bernhardt

491
2
6

Hi, I am actually creating this button as a custom control, using a Container (whose background is set to the image I like), and a label. But I want it to emit the behaviour of an ordinary button, meaning, when you click a normal button for example, you know when it kind of gets "selected/highlighted"? right? How to add this functionality to my button which I mentioned above??? Thank you. – user2054339 Feb 11 '13 at 06:21
ps. Here is the code: `Container { background: backgroundImagePaint.imagePaint Label { text: "Button text" } attachedObjects: [ ImagePaintDefinition { id: backgroundImagePaint repeatPattern: RepeatPattern.Fill imageSource: "asset:///images/image.png.amd" } ] }` – user2054339 Feb 11 '13 at 06:21
You would have to build that yourself. – Paul Bernhardt Feb 11 '13 at 19:28

score 0 · Answer 3 · answered Feb 20 '13 at 22:12

0

I've faced the same issue.

At the end, as PBernhardt said, I created a custom Container with an ImageView or a background image, and added a Label inside.
Then, I overrided onTouch to catch the different touch states (event.isDown(), event.isMove(), event.isUp()) and update the button graphics accordingly (text color and background image).

I'm using a Q_INVOKABLE method to bind with my C++ files.

answered Feb 20 '13 at 22:12

nicolas

234
4
11

Yes, I did exactly the same (although I didn't use Q_INVOKABLE for this button class I guess...) – user2054339 Feb 21 '13 at 07:54

Create a button on Cascades with background image, BB-10

3 Answers3