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
gdev001
Posts: 163
Registered: ‎01-30-2013
My Device: Blackberry 10 Simulator

Button with a Background Image

HI, I started developing my app using cascades, and I am encountering some strange situations.

 

I want a button which has text of white color and an image as a background.

I am looking at this button: https://developer.blackberry.com/cascades/reference/bb__cascades__button.html

-- and it seems it will not satisfy my requirements??

 

What to do in such a case???

 

Thank you.

Please use plain text.
Developer
oliver_kranz
Posts: 216
Registered: ‎09-18-2009
My Device: Z10

Re: Button with a Background Image

Container {
    background: backgroundImagePaint.imagePaint
    onTouch: {
        if (event.isUp()) {
            // Handle click here.
        }
    }
    Label {
        text: "Button text"
    }
    attachedObjects: [
        ImagePaintDefinition {
            id: backgroundImagePaint
            repeatPattern: RepeatPattern.Fill
            imageSource: "asset:///images/image.png.amd"
        }
    ]
}

 

Please use plain text.
Developer
gdev001
Posts: 163
Registered: ‎01-30-2013
My Device: Blackberry 10 Simulator

Re: Button with a Background Image

Hi thanks for your reply. Yes it seems one must do a container if wants a functionality like I mentioned??
Anyway, I set the background image of my container using a:
ImageView {
id: imagev
imageSource: "asset:///btn-green.png"
}
Do you suggest I use:
attachedObjects: [
ImagePaintDefinition {
id: backgroundImagePaint
repeatPattern: RepeatPattern.Fill
imageSource: "asset:///images/image.png.amd"
}
]
???
Also, there is one detail. When you click button usually, say they are of green color, during the click, they get a bit darkened if you know what I mean (for example dark green color), how to implement this functionality now on my Container Button ?? Thank you.
Please use plain text.
Developer
oliver_kranz
Posts: 216
Registered: ‎09-18-2009
My Device: Z10

Re: Button with a Background Image

By using the ImagePaintDefinition you can assign it directly to the Container.background property. I think this is the advantage.

 

Furthermore, highlighting of the button can also be implemented.

 

Container {
    onTouch: {
        if (event.isDown() || event.isMove()) {
            // Focused
        } else if (event.isUp()) {
            // Unfocused
        } else if (event.isCancel()) {
            // Unfocused
        }
    }
}

 

Please use plain text.
Developer
gdev001
Posts: 163
Registered: ‎01-30-2013
My Device: Blackberry 10 Simulator

Re: Button with a Background Image

[ Edited ]

Hi, this is my code

 

           Container {
                 background: backgroundImagePaint.imagePaint
                 horizontalAlignment: HorizontalAlignment.Center
                         
                 onTouch: {
                      if (event.isDown() || event.isMove()) {
                                  // Focused
                                  background: backgroundImagePaintHighlighted.imagePaint
                                  textLabel="test";
                              } else if (event.isUp()) {
                                  background: backgroundImagePaint.imagePaint
                                  
                                  // Unfocused
                              } else if (event.isCancel()) {
                                  background: backgroundImagePaint.imagePaint
                                  
                                  // Unfocused
                              }
                 }
                 Label {
                     id: textLabel
                     text: "Button text"
                    textStyle.color: Color.create("#ffffffff")
                }
                 attachedObjects: [
                     ImagePaintDefinition {
                         id: backgroundImagePaint
                         repeatPattern: RepeatPattern.Fill
                         imageSource: "asset:///btn-green.png"
                     },
                      ImagePaintDefinition {
                          id: backgroundImagePaintHighlighted
                          repeatPattern: RepeatPattern.Fill
                          imageSource: "asset:///btn-darkgreen.png"
                  }
                 ]
             }

but it seems not to be working.... does not have a "selected" effect on the button... actually, I think I never enter the isDown scope since the text of the label does not change either... help appreciated...

Please use plain text.
Developer
oliver_kranz
Posts: 216
Registered: ‎09-18-2009
My Device: Z10

Re: Button with a Background Image

You have to assign the text to textLabel.text.

 

textLabel.text="test"

 

 

 

Please use plain text.
Developer
gdev001
Posts: 163
Registered: ‎01-30-2013
My Device: Blackberry 10 Simulator

Re: Button with a Background Image

OK, thanks that's working but my problem is that I could not make the "selected/highlighted" feature work?! please can you see my code above, that is where I try to make it work: when the user clicks the button, as usually, it's color should get darkened a bit ... Thanks.
Please use plain text.
Developer
oliver_kranz
Posts: 216
Registered: ‎09-18-2009
My Device: Z10

Re: Button with a Background Image

Container {
    background: backgroundImagePaint.imagePaint
    horizontalAlignment: HorizontalAlignment.Center
        Container {
                 onTouch: {
                      if (event.isDown() || event.isMove()) {
                                  // Focused
                                  background: Color.create("#88FFFFFF")
                              } else if (event.isUp()) {
                                  background: Color.create("#00FFFFFF")                                  
                                  // Unfocused
                              } else if (event.isCancel()) {
                                  background: Color.create("#00FFFFFF")                                  
                                  // Unfocused
                              }
                 }
                 Label {
                     id: textLabel
                     text: "Button text"
                    textStyle.color: Color.create("#ffffffff")
                }
          }
    attachedObjects: [
        ImagePaintDefinition {
            id: backgroundImagePaint
            repeatPattern: RepeatPattern.Fill
            imageSource: "asset:///btn-green.png"
        }
    ]
}

 Use a second container.

Please use plain text.
Developer
gdev001
Posts: 163
Registered: ‎01-30-2013
My Device: Blackberry 10 Simulator

Re: Button with a Background Image

hmmm... I have copied your code, instead of my old code, and nothing seems to happen when I click the button ... ?!
Please use plain text.
New Contributor
Matt_Jia
Posts: 7
Registered: ‎01-23-2013
My Device: Simulator

Re: Button with a Background Image

    Hi, brother, have you solved it? If not, you can try the following code which works well:

import bb.cascades 1.0

Page {
    Container {
        layout: StackLayout {}
        background: backgroundPaint.imagePaint
	    attachedObjects: [
	        ImagePaintDefinition {
	            id: backgroundPaint
	            imageSource: "asset:///images/background.png"
	        }
	    ]
	    
	    Button{
	        id: defaultButton
	        text: "default button"    
            preferredWidth: 300
	    }
        
        Container {
            id: customButton
            background: Color.Gray
            preferredHeight: 70
            preferredWidth: 300
            layout: StackLayout {}
            
            Label {
    	        text: "custom button"
	            verticalAlignment: VerticalAlignment.Center
	            horizontalAlignment: HorizontalAlignment.Center
    	    }
    	    
    	    onTouch: {
    	        if (event.isDown() || event.isMove()) {
	                  // Focused, change the background 
	                  customButton.background = Color.Blue;
	            } else if (event.isUp()) {
	                  customButton.background = Color.Gray;
	                  // Unfocused
	            } else if (event.isCancel()) {
	                  customButton.background = Color.Gray;
	            }    
    	    }
        }
    }
}

 

No claim to God...
Please use plain text.