Weekend Coder: Text Styling

By Brian Scheirer on 5 Jan 2014 08:40 am EST
3
loading...
0
loading...
40
loading...

One of the easiest ways to make your app have a unique look is to change the text styling. Among basic changes such as color and size that have always been available in Cascades, 10.2 brings the option to change the font to any .otf or .ttf font included in your code. Let’s take a look at the available text styling and how to implement them in your app.

Adjusting text style can be done one of two ways, either individually in the Label/TextArea (non-editable) or within a TextStyleDefinition. If you plan on using the same text styling on multiple Labels/TextAreas, it is best to create a TextStyleDefinition which will not only cut down on the amount of code you’ll need to write but also speed up loading by helping the UI draw faster using a base styling. Additionally, if you want to slightly change from your TextStyleDefinition you can override it by over defining that specific property in the Label/TextArea.

Starting with a basic sample, here’s some code of styling directly in a Label:

Label {
    text: "Some Text!"     
    horizontalAlignment: HorizontalAlignment.Center
    verticalAlignment: VerticalAlignment.Center
    textStyle.fontSize: FontSize.Large
    textStyle.fontWeight: FontWeight.Bold
    textStyle.fontStyle: FontStyle.Italic
    textStyle.color: Color.Magenta
}

Similarly this code could be written as:

Label {
    text: "Some Text !"
    horizontalAlignment: HorizontalAlignment.Center
    verticalAlignment: VerticalAlignment.Center
    textStyle{
       color: Color.Magenta
       fontSize: FontSize.Large
       fontWeight: FontWeight.Bold
       fontStyle: FontStyle.Italic
       }
}

Both will yield a Label that says “Some Text!” that is large, bold, italic, and colored magenta. But as you can see that it is quite a bit of code to add to every place you want it so here’s how you can create your own base TextStyle:

Page {
    Container{
        attachedObjects: [
            TextStyleDefinition {
                id: myStyle
                color: Color.Magenta
                fontSize: FontSize.Large
                fontWeight: FontWeight.Bold
                fontStyle: FontStyle.Italic
            }
        ]

        Label{
            text: "Some Text!"
            textStyle.base: myStyle.style
        }
    }
}

As you can see the TextStyleDefinition is the same as the TextStyle I was able to define directly in the previous Label, except now it is defined within the attachedObjects and given an id. Then I can call that id as my textStyle.base.

Here we can also add the newest and most exciting piece of text styling, custom fonts. These can also either be added directly in the Label/TextArea or in the TextStyleDefinition. The code would look like this:

Container{
     attachedObjects: [
         TextStyleDefinition {
              id: myStyle
              color: Color.Magenta
              fontSize: FontSize.Large
              fontWeight: FontWeight.Bold
              fontStyle: FontStyle.Italic
                rules: [
                    FontFaceRule {
                        source: "nameOfTheFont.ttf"
                        fontFamily: "myFont"
                    }
                ]
              fontFamily: "myFont"
            }
       ]
     Label{
        text: "Some Text!"
        textStyle.base: myStyle.style
      }
    }

Above you can see the added rules within the TextStyleDefinition where a FontFaceRule is added. As I mentioned above the FontFaceRule is only available on 10.2 and higher. Inside that rule you must define the source, which is the name of the font file inside your asset folder of your project and a name of your newly created fontFamily. Then call that fontFamily name inside your TextStyleDefinition.

Now say you want the majority of your defined style but wanted to change a property or two you can have the following:

Label{
   text: "Some Text!"
   textStyle.base: myStyle.style
 }
Label{
   text: "Some BLUE Text!"
   textStyle.base: myStyle.style
   textStyle.color: Color.create("#0000FF")
 }

And your second label will have all the defined properties except rather than the color being magenta it will instead be #0000FF (blue). On that note, realize you can either define colors as the 18 predefined colors or use hex colors and RGB. Hex defined as I have above and RGB as textStyle.color: Color.create(X.XX, Y.YY, Z.ZZ).

Finally, if you don’t want to use native calls and want to inject some of your web skills into a Cascades app you can define your Label/TextArea as html and it’ll support quite a bit of css/html parameters. This includes support of emojis calling them as Unified or DoCoMo:

Label{
    text: "<html><head><style>p{color: blue; font-style: italic;}</style>
    </head><body><p>&#x1F3C8; ... cool, it's a football<br />&#xE656; ... and soccer ball</p></body></html>";
     multiline: true
}

Where the css changes the font to blue and italic, the football emoji is defined using the unified code, and the soccer ball in DoCoMo.

As you can see, lots of options here for styling your text in a Cascades app. So be sure to use some style, but remember don’t over style to the point where text is unreadable.

18 comments

jojo beaconsfield

I wish I could be like you and code

HotFix

As a fellow coder, mostly PowerShell these days, thank you for using example code with proper indentation. It's something I push people to do whenever I mentor them.

Plus cool code that makes existing programs more interesting is always a good thing.

Posted via CB10 on a Z10STL100-3/10.2.1.1925

Johny_Z10

How does a non coder ( read - not so cool) BlackBerry z10 user benefit from this?

Posted via CB10

Brian Scheirer

As much as I try to have something for coders and non-coders alike in my posts this one is mostly for coders. Perhaps your take away could be that, if you didn't know already, developers had no way to change the font prior to 10.2. So maybe some of the apps you use will get some fancy changes once they up their app's min OS level to 10.2. Also this may give you insight on why some apps say they need 10.2+.

Posted via CB10

blackberryfunboy

I have no clue how to do this. Where should I start?

Posted via CB10

jojo beaconsfield

If you have the time and really want to learn,I don't know, but maybe take an evening course,LOL

BriniaSona

I just want my forum to have an app like the cb10 mobile site. That is all.

Wilkerson4492

Thanks Brian, I always look forward to your posts.

For those asking how to start coding, search online for "Mooc" or "MIT Opencourseware". There are several actual University programming courses available to learn for free or a small donation.

To learn to code for BlackBerry, I'd start with the BlackBerry website. They have stuff for developers and if you use the provided samples etc you can see and play with the code.

Posted via CB10

christoph77

I wish I could code but I cannot. Maybe something I xill try to learn in 2014!

C0038297E Quote of the Day (BBM Channel)

kscribs

Sometimes I wish I was one of those teenaged hackers writing code and stuff, but alas! it is not to be

Lord of the Rings channel C00298494

Posted via CB10

jojo beaconsfield

I guess if you not the sharpest tool in the shed and you can't go to the moon and want a challenge ,coding is for you.And me,HAHA lol

Crabby Abie The Queen T-Flo

how do we change the font fonts?

Posted via CB10

beubeu67

Great tip. Thanks a lot, Brian!

Bacon Munchers

There is just no text style as clean and nice as the native BlackBerry 'Slate Pro' font.

Just sayin'.

Brian Scheirer

Sometimes for games/titles/headings it is nice to have a little of your own style. But I do agree that Slate Pro is great for reading plain text.

revil-0-316

Thanks Brian! Just in time I'm updating the font style of one of my upcoming app. :-)

revil-0-316

Question : I wanted the text on my app highlight-able and can be shared, kindly help how to code this (highlighting part). Thanks.