Application Development : Text Controls – Text Styles

Text is probably the most ubiquitous control in any UI. Cascades therefore gives you lots of flexibility in handling text, as well as its appearance. You can customize the text styles by creating your own text style definitions. This section will review the three main text controls, which are Label, TextField, and TextArea, and show you how to customize their corresponding text style.

1. Text Styles

You can customize a text control’s appearance by setting its textStyle.base property, which is an instance of the TextStyle object. In practice, you will use a TextStyleDefinition attached object to create a new TextStyle instance (in other words, the TextStyleDefinition object is a factory for TextStyle objects).Using a TextStyleDefinition, you can customize visual attributes such as font weight (light, normal, and bold), color, size, and alignment. When specifying a TextStyleDefinition, you will always start with a system default base, TextStyle, which gives you an initial set of attributes to work from. The SystemDefaults.TextStyles class gives you the following default text styles:

• SystemDefaults.TextStyles.BigText: The default text style for large text.
• SystemDefaults.TextStyles.BodyText: The default text style for body text.
• SystemDefaults.TextStyles.PrimaryText: The default text style for primary text.
• SystemDefaults.TextStyles.SmallText: The default text style for small text.
• SystemDefaults.TextStyles.SubtitleText: The default text style for subtitle text.
• SystemDefaults.TextStyles.TitleText: The default text style for title text.

Listing 1 shows you how you can use the default system text styles with a Label.

Listing 1.  System Text Styles

import bb.cascades 1.2
Page {
    Container {
        Label {
            text: "This is big text"
            textStyle.base: SystemDefaults.TextStyles.BigText
        }
        Label {
            text: "This is title text"
            textStyle.base: SystemDefaults.TextStyles.TitleText
        }
        Label {
            text: "This is subtitle text"
            textStyle.base: SystemDefaults.TextStyles.SubtitleText
        }
        Label {
            text: "This is body text"
            textStyle.base: SystemDefaults.TextStyles.BodyText
        }
        Label{
            text: "This is primary text"
            textStyle.base: SystemDefaults.TextStyles.PrimaryText
        }
        Label{
            text: "This is small text"
            textStyle.base: SystemDefaults.TextStyles.SmallText
        }
    }
}

Listing 2 shows you how to customize a text style using a TextStyleDefintion.

Listing 2.  Custom Text Style

import bb.cascades 1.2
Page {
    Container {
        attachedObjects: [
            TextStyleDefinition {
                id: myStyle
                base: SystemDefaults.TextStyles.BigText
                color: Color.DarkBlue
                fontWeight: FontWeight.Bold
            }
        ]
        Label {
            text: "Some bold text"
            textStyle.base: myStyle.style
        }
    }
}

The advantage of specifying a TextStyleDefinition object is that you will be able to reuse it throughout your UI without redefining text styles for each control.