Cascades Development

[gdev001]

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.

[oliver_kranz]

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"
        }
    ]
}

[gdev001]

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.

[oliver_kranz]

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
        }
    }
}

[gdev001]

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...

[oliver_kranz]

You have to assign the text to textLabel.text.

textLabel.text="test"

[gdev001]

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.

[oliver_kranz]

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.

[gdev001]

hmmm... I have copied your code, instead of my old code, and nothing seems to happen when I click the button ... ?!

[Matt_Jia]

    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;
	            }    
    	    }
        }
    }
}