Cascades Development

[gdev001]

Hello, I just have a Container with Black background color.

I want to set its borders, round.

How can I do it? Any help? Thanks.

[ankur_siwach]

XYEdges padding = new XYEdges(5, 5, 5, 5);
int color = Color.BLACK;
int lineStyle = Border.STYLE_SOLID;
Border roundedBorder = BorderFactory.createRoundedBorder(padding, color, lineStyle);
editField.setBorder(roundedBorder);

add(editField);

[gdev001]

Could you please add a QML version of this solution??? Thanks.

[Curahee]

I always do this with a nine-sliced image. Although if it's possible with just code, that would be probably best practice.

How I do it (https://developer.blackberry.com/cascades/documentation/ui/image_resources/nine_slicing.html):

Create an image with roundedcorners. I called mine border.png

Create a file border.amd:

#RimCascadesAssetMetaData version=1.0
source: "border.png"
sliceMargins: 10 10 10 10

 In my qml, I set this border as an imageView in a docklayout

Container {
    topPadding: 20
    leftPadding: 20
    rightPadding: 20
    bottomPadding: 20
    layout: DockLayout { }
    
    ImageView {
        imageSource: "asset:///images/border.amd"
        horizontalAlignment: HorizontalAlignment.Fill
        verticalAlignment: VerticalAlignment.Fill
    }
    
    ListView {
        id: delayList
        leftPadding: 10
        rightPadding: 10
        dataModel: XmlDataModel { }
    }
    
    ActivityIndicator {
        objectName: "indicator"
        verticalAlignment: VerticalAlignment.Center
        horizontalAlignment: HorizontalAlignment.Center
        preferredWidth: 200    
        preferredHeight: 200   
    }
}   

 Hopefully this helped you a little. But as said before, using code to do this is probably better. 1 asset less to copy to the device.

[gdev001]

So basically you suggest I use an image which has rounded corners????

ps. In my code, I needed an black background for example, however, transparent a bit... I'd need to see how to achieve this with an image... thanks.

[Curahee · Accepted solution]

I'm saying that that is also a possibility.

Just use a semi-transparant png image?

Look at this page for more information

https://developer.blackberry.com/cascades/documentation/ui/image_resources/nine_slicing.html

[gdev001]

I have implemented the solution as you mentioned, seems to work fine. thanks; actually, I didn't use the 9 slice thing yet, just created a image with rounded corners, and in the image view had set it to semi trasnparent ...

[Curahee]

With nine-slicing your asset will become less big in filesize. You can just create a 20x20 image with roundedcorners, and use nine-slicing to divide everything. Then the file is also reusable for other components. It scales well when the component becomes bigger or smaller. For instance on the Q10.