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>🏈 ... cool, it's a football<br /> ... 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.
Read more
BlackBerry 10 device simulators updated to 10.3.1.2072
A little something for BlackBerry developers. If you head over to the BlackBerry developer site, you'll find a new batch of device simulators available for download. The last release shows them as running v10.3.1.2072 which should help with testing out any apps you're working on. As always, they're available for Window, Mac and Linux via VMWare images. There is no notable changes or...
BlackBerry OS 10.3.1.1949 device simulator now available
Just a little bit of a heads up for any developers (and those who just like to play around) who might not have spotted the update as of yet. You can now download the latest device simulator from the BlackBerry website, which sits at OS 10.3.1.1949. Keep in mind, if you plan on giving it a look you will need some VMWare tools in order to run it all but you can find the full details on...
Watch the application infrastructure for BES12 webcast
If you missed out on the application infrastructure for BES12 webcast on December 4th, you can now catch the replay of the event on your own time. We'll review the mobile app infrastructure built into BES 12 including how corporate systems can minimize risk when opening access to apps outside their firewall, and ensure data is secure through its journey from inside the corporate...
Application Infrastructure for BES 12 webcast
Creating apps for Enterprise customers can keep a developer busy but when doing so corporate data and systems need to be carefully managed. If you're building apps for BES12 customers, BlackBerry is hosting an application infrastructure for BES12 webcast on December 4, 2014, at 2 pm – 3 pm EST to help educate corporate app developers about best practices. We'll review the mobile...