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
Bluenoser
Posts: 259
Registered: ‎04-04-2012
My Device: BlackBerry Z30/Z10/Z10LE/Q10/PlayBook

Alignment and spacing of Labels in Containers

I am making good progress in learning Cascades, but there is still somethings I am having problems with that I think should be simple. I have been reading the docs, but it isn't working.

 

Here is my QML:

/* Copyright (c) 2012 Ron Schofield.
*/
import bb.cascades 1.0

// A custom item used in the list on the WeatherPage.
Container {
    id: weatherConditionsItem
    layout: StackLayout {
        layoutDirection: LayoutDirection.LeftToRight
    }
    preferredWidth: 768.0

    Container {
        id: weatherImageGroup
        layoutProperties: StackLayoutProperties {
            spaceQuota: 2
        }
        ImageView {
            imageSource: {
                if (ListItemData.icon == undefined) {
                    "asset:///images/weather/256/na.png"
                } else {
                    "asset:///images/weather/256/" + ListItemData.icon + ".png"
                }
            }
        }
    }
    
    Container {
        id: weatherConditionsGroup
        layoutProperties: StackLayoutProperties {
            spaceQuota: 2
        }
        layout: StackLayout {
            layoutDirection: LayoutDirection.TopToBottom
        }
        Container {
            id: weatherMajorGroup
            layout: StackLayout {
                layoutDirection: LayoutDirection.TopToBottom
                }
            Label {
                text: ListItemData.weather
                textStyle.size: 48
                textStyle.color: Color.White
            }
            Label {
                text: ListItemData.tempc + "\u00B0C"
                textStyle.size: 64
                textStyle.fontWeight: FontWeight.Bold
                textStyle.color: Color.White
            }
        }
        Container {
            id: weatherMinorGroup
            layout: StackLayout {
                layoutDirection: LayoutDirection.LeftToRight
            }
            Container {
                id: weatherMinorPromptsGroup
                layout: StackLayout {
                    layoutDirection: LayoutDirection.TopToBottom
                }
                layoutProperties: StackLayoutProperties {
                    spaceQuota: 1
                }
                attachedObjects: [
                    TextStyleDefinition {
                        id: minorPromptsStyle
                        base: SystemDefaults.TextStyles.BodyText
                        color: Color.White
                        fontWeight: FontWeight.Normal
                        size: 24
                    }
                ]
                Label {
                    text: "Feels Like"
                    textStyle {
                        base: minorPromptsStyle.style
                    }
                }
                Label {
                    text: "Humidity"
                    textStyle {
                        base: minorPromptsStyle.style
                    }
                }
                Label {
                    text: "Wind"
                    textStyle {
                        base: minorPromptsStyle.style
                    }
                }
                Label {
                    text: "Sunrise"
                    textStyle {
                        base: minorPromptsStyle.style
                    }
                }
                Label {
                    text: "Sunset"
                    textStyle {
                        base: minorPromptsStyle.style
                    }
                }
            }
            Container {
                id: weatherMinorDetailsGroup
                layout: StackLayout {
                    layoutDirection: LayoutDirection.TopToBottom
                }
                layoutProperties: StackLayoutProperties {
                    spaceQuota: 1
                }
                attachedObjects: [
                    TextStyleDefinition {
                        id: minorDetailsStyle
                        base: SystemDefaults.TextStyles.BodyText
                        color: Color.White
                        fontWeight: FontWeight.Normal
                        size: 24
                    }
                ]
                Label {
                    text: ListItemData.feelslikec + "\u00B0C"
                    textStyle {
                        base: minorDetailsStyle.style
                    }
                }
                Label {
                    text: ListItemData.humidity
                    textStyle {
                        base: minorDetailsStyle.style
                    }
                }
                Label {
                    text: ListItemData.winddir + " " + ListItemData.windkph + " km/h"
                    textStyle {
                        base: minorDetailsStyle.style
                    }
                }
                Label {
                    text: ListItemData.sunrise
                    textStyle {
                        base: minorDetailsStyle.style
                    }
                }
                Label {
                    text: ListItemData.sunset
                    textStyle {
                        base: minorDetailsStyle.style
                    }
                }
            }
        }
    }
}

One problem is that I can't find a proper way to take the text and make the Labels right justifited. If I tried DockLayout, the Labels ended up on top of each other. The labels in weatherMajorGroup and weatherMinorDetailsGroup need to be right justified. The other problem is in the weatherMinorPromptsGroup. The labels are spaced too far apart vertically. Is there a way to make the horizontal spacing tighter?

 

Thanks in advamce.

 

Ron

Please use plain text.
BlackBerry Development Advisor (Retired)
amarcon
Posts: 155
Registered: ‎07-16-2012
My Device: Dev Alpha
My Carrier: Bell

Re: Alignment and spacing of Labels in Containers

Hi Bluenoser,

 

there are different ways of doing it, one possible way is adding the lines below into your Labels, since you are using StackLayout on your Container

 

layoutProperties: StackLayoutProperties {
    horizontalAlignment: HorizontalAlignment.Right
}

 

One easy suggestion that might help you, while you are working on the layout of your UI, is set the background color of your Containers, using different colors for each one of them of course (such as background: Color.Green), to visually see how big they are, to get a better fit, size, position, etc...

 

Hope this helps.

 

 

Please use plain text.
Developer
kylefowler
Posts: 526
Registered: ‎05-17-2009
My Device: 9900
My Carrier: ATT

Re: Alignment and spacing of Labels in Containers

I am also curious about the vertical spacing between label controls. It seems very excessive. How can we decrease the space between the controls?

Like all of my posts
Please use plain text.
Developer
Bluenoser
Posts: 259
Registered: ‎04-04-2012
My Device: BlackBerry Z30/Z10/Z10LE/Q10/PlayBook

Re: Alignment and spacing of Labels in Containers

Hi,

 

  The following code

 

layoutProperties: StackLayoutProperties {
    horizontalAlignment: HorizontalAlignment.Right
}

  works on containers and not on labels. I am trying the text in the label to be right justified.

 

  I used your suggestion and am working with colouring the containers to assist me in figuring this out. Thanks

Please use plain text.
BlackBerry Development Advisor (Retired)
amarcon
Posts: 155
Registered: ‎07-16-2012
My Device: Dev Alpha
My Carrier: Bell

Re: Alignment and spacing of Labels in Containers

This is one of the tests I've made:

 

        Container {
            id: weatherMajorGroup
            layout: StackLayout {
            layoutDirection: LayoutDirection.TopToBottom
            
            }
            background: Color.Green
            Label {
                text: "weather"//ListItemData.weather
				layoutProperties: StackLayoutProperties {
				    horizontalAlignment: HorizontalAlignment.Right
				}
                textStyle.color: Color.White

            }
            Label {
                text: "temp"//ListItemData.tempc + "\u00B0C"
                layoutProperties: StackLayoutProperties {
                    horizontalAlignment: HorizontalAlignment.Right            
                }
                textStyle.size: 64
                textStyle.fontWeight: FontWeight.Bold
                textStyle.color: Color.White
        }

 

Please use plain text.
Developer
Bluenoser
Posts: 259
Registered: ‎04-04-2012
My Device: BlackBerry Z30/Z10/Z10LE/Q10/PlayBook

Re: Alignment and spacing of Labels in Containers

OK. That works. I tried it this morning and it didn't seem to work. It does now.

 

Now if  the horizontal spacing of Labels can be solved.

Please use plain text.
Developer
Bluenoser
Posts: 259
Registered: ‎04-04-2012
My Device: BlackBerry Z30/Z10/Z10LE/Q10/PlayBook

Re: Alignment and spacing of Labels in Containers

I did find one way to adjust the horizontal spacing. It may not be the correct way, but it works.I have also added the alignment code that works.

 

import bb.cascades 1.0    

Page {
    Container {
        maxWidth: 768
        maxHeight: 256
        background: Color.create("#FF0000")
        layout: StackLayout {
            layoutDirection: LayoutDirection.LeftToRight
        }
        Container {
            preferredHeight: 256
            layoutProperties: StackLayoutProperties {
	           spaceQuota: 2
            }
            background: Color.create("#00FF00")
//            ImageView {
//	           imageSource: "asset:///images/weather/256/0.png"
//             }
        }

        Container {
            layout: StackLayout {
                layoutDirection: LayoutDirection.TopToBottom
            }
            layoutProperties: StackLayoutProperties {
	           spaceQuota: 3
            }
            background: Color.create("#0000FF")
            Container {
                layoutProperties: StackLayoutProperties {
                    horizontalAlignment: HorizontalAlignment.Right
	                spaceQuota: 1
                }
                background: Color.create("#FFFF00")
                attachedObjects: [
	               TextStyleDefinition {
                        id: tsd
                        base: SystemDefaults.TextStyles.BodyText
                        fontWeight: FontWeight.Bold
                        alignment: TextAlignment.Center
                    }
                ]
                Label {
                    layoutProperties: StackLayoutProperties {
                        horizontalAlignment: HorizontalAlignment.Right            
	                spaceQuota: 1
                    }
                    text: 'Thunderstorm'
                    textStyle {
                        base: tsd.style
                    }
                }
                Label {
                    layoutProperties: StackLayoutProperties {
                        horizontalAlignment: HorizontalAlignment.Right            
	                spaceQuota: 6    
                    }
                    text: '16 C'
                    textStyle {
                        base: tsd.style
                    }
                }
            }
            Container {
                background: Color.create("#FF00FF")
                layout: StackLayout {
                    layoutDirection: LayoutDirection.LeftToRight
                }
                layoutProperties: StackLayoutProperties {
                    horizontalAlignment: HorizontalAlignment.Right
	                spaceQuota: 1
                }
                Container {
                     layoutProperties: StackLayoutProperties {
	                    spaceQuota: 1
                     }
                     Label {
	                    layoutProperties: StackLayoutProperties {
	                        spaceQuota: 1
                         }
                         text: 'Feels Like'
                     }
                     Label {
                         layoutProperties: StackLayoutProperties {
                             spaceQuota: 1
                         }
                         text: 'Humidity'
                     }
                     Label {
                         layoutProperties: StackLayoutProperties {
	                        spaceQuota: 1
                         }
                         text: 'Wind'
                     }
                     Label {
                         layoutProperties: StackLayoutProperties {
	                        spaceQuota: 3    
                         }
                         text: 'Precipitation'
                     }
                }
                Container {
                     layoutProperties: StackLayoutProperties {
	                    spaceQuota: 1
                     }
                     Label {
                         layoutProperties: StackLayoutProperties {
                             horizontalAlignment: HorizontalAlignment.Right            
                         }
                         text: '16 C'
                     }
                     Label {
                         layoutProperties: StackLayoutProperties {
                             horizontalAlignment: HorizontalAlignment.Right            
                         }
                         text: '40 %'
                     }
                     Label {
                         layoutProperties: StackLayoutProperties {
                             horizontalAlignment: HorizontalAlignment.Right            
                         }
                         text: 'W 12 km/h'
                     }
                     Label {
                         layoutProperties: StackLayoutProperties {
                             horizontalAlignment: HorizontalAlignment.Right            
                         }
                         text: '0 %'
                     }
                }
            }
        }
	}
}

 What I did was set the spaceQuota for each of the Labels to 1 and then increased the last Labels spaceQuota until it pushed or squeezed the Labels above it.

 

  I hope there is a better way. I will be open to other suggestions.

Please use plain text.
BlackBerry Development Advisor (Retired)
amarcon
Posts: 155
Registered: ‎07-16-2012
My Device: Dev Alpha
My Carrier: Bell

Re: Alignment and spacing of Labels in Containers

Yeap, that's one way of doing it, another one would be using AbsoluteLayout and place the Labels on your preferred position. But for both cases, you could be overlapping the Labels, which could possibly overlap the text.

 

 

Please use plain text.
Developer
Bluenoser
Posts: 259
Registered: ‎04-04-2012
My Device: BlackBerry Z30/Z10/Z10LE/Q10/PlayBook

Re: Alignment and spacing of Labels in Containers

So is there anyway to tighten up the Label? Seems like a waste of space.

Please use plain text.
BlackBerry Development Advisor (Retired)
smacmartin
Posts: 499
Registered: ‎05-07-2012
My Device: developer
My Carrier: developer

Re: Alignment and spacing of Labels in Containers

The documentation says that the label will be at least the height of the text.  (Currently it is fixed height; if/when multi-line labels are supported we can expect to be able to make labels taller)

 

You can set bottomMargin to 0.   See cascadescookbookqml Label.qml

You can also use a smaller font.  (Again, see same example)

 

I'm not sure using a positive spaceQuota on fields with fixed height is wise.  This allows the layout to take space from the item -- but this is space the item is "supposed" to have.   There's nothing stopping the layout from clipping text, even if there's a better choice of whitepace to trim, and you don't have control of how the layout chooses to trim: is it clipped?  Shrunk? Or is one label overlayed?  You are relying on undocumented implementation, and being undocumented, it could hypothetically change.  I would use spaceQuota > 0 on a "filler" item or any component whose height is allowed to change to reflect a change in orientation or screen size, like a ListView.

 

Also, if you overlay controls to hide some whitespace you could run into issues in other fonts or languages, because you are hiding part of a control that the UI engine expects it can use.  e.g. you might not have descenders in the English text , but might in French.  You are also overriding the spacing to be different from other apps.

 

All those caveats said, if you want to use spaceQuota or absolute layouts to overlay Labels on top of each other, I think it would be wise to have a transparent background of the Label.   Here's what I would pursue:

- have an outer container (A) with two items the size of the container:  a background image, and a container (B) that has the labels

- set container (B) to have transparent background

 

Hopefully this would allow any non-text of one Label to sit on top of the text of another Label without hiding the text.

 

Hope this helps.

 

Stuart

Please use plain text.