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: 52
Registered: ‎03-29-2012
My Device: Playbook, Dev Alpha
My Carrier: Telus
Accepted Solution

Custom Icon Button in QML for Cascades

[ Edited ]

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.

Retired
Posts: 329
Registered: ‎05-07-2012
My Device: BB Alpha
My Carrier: N/A

Re: Custom Icon Button in QML for Cascades

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

Developer
Posts: 52
Registered: ‎03-29-2012
My Device: Playbook, Dev Alpha
My Carrier: Telus

Re: Custom Icon Button in QML for Cascades

[ Edited ]

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

sample button

 

 

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

Developer
Posts: 52
Registered: ‎03-29-2012
My Device: Playbook, Dev Alpha
My Carrier: Telus

Re: Custom Icon Button in QML for Cascades

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

Retired
Posts: 329
Registered: ‎05-07-2012
My Device: BB Alpha
My Carrier: N/A

Re: Custom Icon Button in QML for Cascades

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

Retired
Posts: 329
Registered: ‎05-07-2012
My Device: BB Alpha
My Carrier: N/A

Re: Custom Icon Button in QML for Cascades