How do I create an image button in BlackBerry 10 Cascades?

Question

I need to create custom UI elements like buttons and lists with image backgrounds in Cascades Qml, However there doesn't seem to be a way to set the background of controls such as Button.

I can't find any examples of this anywhere.

It seems like this could be possible by using a container and creating a custom control, but I don't see a way of getting that container to have an onClick event.

score 3 · Answer 1 · answered Jan 15 '13 at 16:11

Custom control is actually very easy in BB10. Here's an example of what you are trying to do:

Container {
    property alias text: label.text
    property alias image: imagev.imageSource
    ImageView {
        id: imagev
        imageSource: "asset:///images/Button1.png"
    }        
    Label {
        id: label
        text: "demo"            
    }

    gestureHandlers: [
        TapHandler {
             onTapped: {
                 //do tapped code
             }                
        },
        LongPressHandler {
            onLongPressed: {
                //do long press code
            }            
        }        

    ]
}

Save it as "CustomButton.qml" and then in your main QML file you can access it like so:

Page {
    CustomButton {
        text: "my text"
        image: "images/myimage.png"
    }
}

JuliusG · Answer 2 · 2013-01-14T13:05:54.783

2

You can do this by using MouseArea element:

Item {
  Image {
    anchors.fill: parent
    source: "yourimg.png"
  }
  MouseArea {
    anchors.fill: parent
    onClicked: {
      console.log("do your action here!")
    }
  }
}

If you put this code in a separate QML file e.g. CustomButton.qml. You can use it in the other QML file like a custom button element:

CustomButton {
}

You can read more about this here.

edited Jan 14 '13 at 13:05

answered Jan 14 '13 at 10:43

JuliusG

2,321
21
30

It doesn't look like customisation of controls is really supported. Could it be that they don't want people doing custom controls? – Tjaart Jan 14 '13 at 12:39
The controls that are part of Cascades allow only a limited amount of customization. The Button for example allows you to add an image to it if you want. Look at the documentation of the [Button](https://developer.blackberry.com/cascades/reference/bb__cascades__button.html). If you want more customization you can create your own controls. I have updated the answer to show how you can create a custom control. – JuliusG Jan 14 '13 at 13:02
You can create custom components in Cascades as well. There is an example [here](https://developer.blackberry.com/cascades/documentation/ui/custom_components/). And from what I can see it is the same way as the one of QtQuick. – JuliusG Jan 14 '13 at 16:00
I think @onion was talking about your code. ``Item`` is QtQuick specific for example. – Marc Plano-Lesay Jul 19 '13 at 13:22

How do I create an image button in BlackBerry 10 Cascades?

2 Answers2