Guest post from Markus Landin, Cascades UI Framework Product Manager
There are some amazing new features in the Cascades UI framework for BlackBerry 10.2. Here’s a roundup that will help make the development process smoother, and result in a better app for the end-user.
Differentiate with Fonts
“You can have any font as long as it’s Slate Pro.”
This used to be the case when creating a Cascades user interface, but now there is a much wider variety of choices.
As described in the developer documentation, “Slate Pro is elegant and legible, allowing users to access information quickly and easily.” Yes, it is a great-looking font that is clear and easy to read, and thus very suitable for a user interface. However, other fonts might be more suitable depending on context and type of application. Using a non-standard font can also be a simple but very efficient way to make your application stand out from the crowd.
With the 10.2 release, you can use any TTF or OTF formatted font. The screenshots below show the Hello Cascades sample application that has been around for a while. The picture to the left shows the application with the default system font. When changing to a font called “Happy Monkey,” the result is notably different. Most people would agree that for a speech balloon, a handwritten typeface simply looks better.
In order to use a custom font in your application, add the font (in TTF or OTF format) to the asset folder.
The font is placed inside of the assets folder
Then create a new text style definition, which you can use with your text-based controls. The following code snippet is a simple example of how this can be done. (More information is of course available in the developer documentation.)
Page { Container { attachedObjects: [ TextStyleDefinition { id: myStyle base: SystemDefaults.TextStyles.BodyText rules: [ FontFaceRule { source: "myfont.ttf" fontFamily: "MyFont" } ] fontFamily: "MyFont, sans-serif" } ] Label { text: "Hello, world!" textStyle.base: myStyle.style } } } In addition to your own fonts, the BlackBerry 10 OS now also has a suite of built-in fonts that you can use instead of Slate Pro. There are now more than 20 font families available, including Arial, Courier and Comic Sans. Refer to the developer documentation for the full list.
Visual style updates
Perhaps more exciting for you as a user of the handset, although highly relevant for you as a developer, are the visual changes our designers have made in 10.2 to improve the BlackBerry 10 user interface. We have a cleaner UI and increased information density by having made the UI slightly more compact. You will be able to see how some lists now fit more items, and that the mote around controls, like the button, picker and toggle button, have been removed.
Comparison of 10.1 and 10.2 versions of the core UI components on screens with different screen resolutions and pixel densities
The picture above shows visual differences between 10.1 and 10.2, as well as how Cascades handles differences in screen resolutions and pixel densities. In a previous blog post by Tim Neil, he notes that the Z10 is 1280×768 and Q10 is 720×720, and that there will be devices with a 1280×720 resolution. As part of our strategy around how to tackle form factor variations, we have decided to keep the physical size of the core controls as constant as possible. So in the example above, the rightmost screenshot illustrates how a 1280×720 screen with a comparably lower pixel density will fit more controls.
Accessibility – Enable Screen Reader on Your Application
A third significant addition to Cascades in the 10.2 release is the ability to enable screen reader on your application, making it accessible for users that are visually impaired.
The screen reader can identify information about the UI elements that are displayed on the screen, and the actions that occur in the UI. When the screen reader is enabled on the handset (under Settings > Accessibility > Screen Reader), it reads the information out-loud, or sends the information to a braille output device.
For some of the UI components, the screen reader will use the values of already existing properties. For example, if a button control has “send” assigned to its text property, the screen reader will read “send” when the user moves a finger over that button.
For the application to provide additional information to the screen reader, you would use the accessibility property (of type AbstractA11yObject), which is available for all UI controls. Below is a simple example that shows how to make the screen reader read something different compared to what shows on the screen:
Page { Container { Label { text: "RIM is now BlackBerry!!" accessibility.name: "Research In Motion is now BlackBerry!" } } } To enable screen reader for custom components, you will need use the CustomA11yObject. Similar to the AbstractA11yObject above, CustomA11yObject allows you to define the text to be read by the screen reader. It also allows you to set a role property (for example, whether the screen reader should interpret your control as a button or a slider). The code below is an example of what could be a custom list item, and how it is screen reader enabled:
Container { horizontalAlignment: HorizontalAlignment.Fill Label { id: mainLabelSimple text: ListItemData.name textStyle.fontSize: FontSize.Medium accessibilityMode: A11yMode.Collapsed } Label { id: subLabelSimple text: ListItemData.description textStyle.fontSize: FontSize.XSmall accessibilityMode: A11yMode.Collapsed } accessibility: CustomA11yObject { role: A11yRole.ListItem name: mainLabelSimple.text + ", " + subLabelSimple.text } } What the code above essentially does is tell the screen reader that the custom control is a list item, so that the screen reader can apply the appropriate interaction model, and that the text to be read is the two labels’ texts combined.
More information about how to make your application accessible (in more ways than just using the screen reader) can be found here.