Native Development

[level32]

Just thought I'd share this in case somebody's looking for a solution to get a custom button using Cascades.
The idea is to have a custom button with an icon and label.

I'm using 2 nine sliced images as the background.

In C++,  I have a method called navClick(QString name) so I can tell what button was clicked by its label.

IconButton.qml

import bb.cascades 1.0

Container {
    layout: DockLayout {
    }
    property alias image: img.imageSource
    property alias text: lbl.text

    leftMargin: 10
    rightMargin: 10
    preferredWidth: 400
    
    //
    onTouch: {
        if (event.isUp ()) {
            root.navClick (text);
            console.log (text);
        }
        //
        if (event.isDown () || event.isMove ()) {
            panel.imageSource = "asset:///panel_down";
        } else {
            panel.imageSource = "asset:///panel_up"
        }
    } 

   //
    onTouchExit: {
        panel.imageSource = "asset:///ui/panel_up"
    }

    //
    ImageView {
        id: "panel"
        imageSource: "asset:///panel_up"
        preferredWidth: 400
        minHeight: 178
        scalingMethod: ScalingMethod.Fill
    }
    
    //
    Container {
        layoutProperties: StackLayoutProperties {
            horizontalAlignment: HorizontalAlignment.Center
        }
        preferredWidth: 400
        Container {
        }
        //
        ImageView {
            layoutProperties: StackLayoutProperties {
                horizontalAlignment: HorizontalAlignment.Center
            }
            id: img
            imageSource: "asset:///test.png"
            topMargin: 40
            preferredWidth: 51
            preferredHeight: 51
        }
        
        //
        Label {
            layoutProperties: StackLayoutProperties {
                horizontalAlignment: HorizontalAlignment.Center
            }
            
            //
            textStyle {
                color: Color.White
            }
            
            //
            id: lbl
            text: "label"
            topMargin: 26
        }
    }
}

 To use it in your layout, just add an IconButtonand set the image and text.

Example:

        Container {
            topMargin: 25
            bottomMargin: 25
            
             //
            layout: StackLayout {
                layoutDirection: LayoutDirection.LeftToRight
            }
            
            //
            layoutProperties: StackLayoutProperties {
                horizontalAlignment: HorizontalAlignment.Center
            }
            
            //
            IconButton {
                image: "asset:///icon_btn_one"
                text: "Button 1"
            }
            
            //
            IconButton {
                image: "asset:///icon_btn_two"
                text: "Button 2"
            }
            
             //
            IconButton {
                image: "asset:///icon_btn_three"
                text: "Button 3"
            }
        }

 If you have any ideas to improve this or suggest a better approach, I would love to hear it.

Update: added onTouchExit so it resets the state if you move out of the control.

[mgoulet]

Greetings,

If your goal is to have a button containing a line of text and single icon, this feature is already supported by the Button object in the Cascades Core Controls (for more information on this, please visit the first link below).You would create your button in the following manner via QML:

Button {
   id: button1
   text: "myText"
   imageSource: "asset:///myImageName"

   //Here you can add various events such as onTouch or onClick.
}

If your goal exceeds having a button with simple text and an icon, your suggestion is correct. See below for additional resources.

Using the Cascades Button object (including text & icon):


https://bdsc.webapps.blackberry.com/cascades/reference/bb__cascades__Button.html

Tutorial on creating custom components:


https://bdsc.webapps.blackberry.com/cascades/documentation/ui/custom_components/custom_components_tu...



More complex tutorial showcasing the use of custom components:


https://bdsc.webapps.blackberry.com/cascades/documentation/ui/animations/animations_set_up_project.h...



Good luck!



Martin

[level32]

My goal was to create a button that was taller than the default and to change the layout of the button.

From the Button doc: The height of the button is fixed, so the properties Control:referredHeight, Control::minHeight, and Control::maxHeight are not used.

[level32]

Is there a way to set the size or position of the image in a button?

[mgoulet · Accepted solution]

If you are using the Button class from Cascades, unfortunately, the layout of the text & image cannot be changed and the image is scaled to fit in the button automatically. You would need to build your own button as you have suggested, varying the layout and properties of the contained components accordingly.

Regards,

Martin