BlackBerry 10 devices

Due to the differences in screen size, all-touch devices and devices with a physical keyboard have the following screen resolutions:

Because users might run your app on devices with any of these screen resolutions, consider the following guidelines as you develop your apps:

Create resolution-independent UIs

The UI controls that you choose to use, and the way that you arrange these controls, depend on the resolution of the screen. On devices with a physical keyboard, you have less screen space to work with, so you may have to design your UI differently. You should try to develop UIs that don't depend on a particular resolution by using features such as dynamic layouts, margins, and space quotas.

To learn more, see Resolution independence and Handling different resolutions.

Use assets designed specifically for each resolution

If your app includes graphical assets, such as background images or other assets, you should consider how these assets might look when they're viewed in different resolutions. Cascades scales certain assets automatically to fit the size of the screen. If your assets don't scale very well, you might find that your app isn't very visually appealing on devices with different resolutions.

Fortunately, Cascades includes a static asset selector that can help your app use the right set of assets based on the target device that your app is running on. This feature lets you create different image assets—and even entirely new layouts—for each device that you want to support.

To learn more, see Using the static asset selector.

Keyboard input is a fundamental way that users interact with their mobile devices. In previous versions of BlackBerry devices, many users enjoyed models with a physical keyboard and became accustomed to the usability and feel of that interaction method. With BlackBerry 10, users can choose between devices with a physical keyboard and all-touch devices with a touch screen keyboard.

This choice means that you need to design your apps so that they support input using both the physical keyboard and touch screen keyboard. Consider the following guidelines as you develop:

Support keyboard shortcuts

Users who have owned BlackBerry devices for a long time might be familiar with the wide range of keyboard shortcuts that are available for core apps. Experienced users can compose emails, open apps, search for content, and perform other common tasks quickly, just by using shortcut keys and key combinations. To accommodate these users and how they prefer to interact with the device, provide support for keyboard shortcuts in your apps, where appropriate. When you make common tasks quick and easy to perform, users will continue to use your app and even recommend it to others.

Be careful, though; keyboard shortcuts work only on devices with a physical keyboard. On all-touch devices, keyboard shortcuts aren't generally available. However, you have more screen space to work with on these devices, so you might choose to provide additional options in your UI to make up for the lack of shortcuts. Try to support as many ways to interact with your app as possible, so that users have the flexibility to use your app no matter what device they have.

To learn more about keyboard shortcuts and how to support them in your apps, see Keyboard shortcuts.

Save room for the touch screen keyboard

On all-touch devices, when users need to type text in fields or other controls, the touch screen keyboard is displayed automatically. The touch screen keyboard uses the bottom portion of the screen, and when the keyboard is displayed, other components of an app's UI are compressed to make room for the keyboard. If you have a lot of controls in your UI, some of them might even be obscured when the keyboard is displayed. As you design your UIs, make sure to leave space for the touch screen keyboard to be displayed without obscuring important parts of your UI.

For example, consider the Quotes sample app that you can download from the Sample Apps page. This app displays quotes by various people, and it also allows you to add new quotes or edit existing ones. When you choose to edit an existing quote, you can change the text in several fields (first name, last name, or quote body). If you run this app on an all-touch device and you tap one of the fields, the touch screen keyboard is displayed:

Notice how all of the important aspects of the UI (the text fields, quote body, and buttons) still appear on the screen when the touch screen keyboard is displayed; only the empty space above and below these elements is compressed. The app leaves plenty of room for the keyboard to be displayed.

In some cases, the screens in your apps might have too much content to be rearranged properly when the touch screen keyboard is displayed. If it isn't feasible to reduce the complexity or number of UI controls on these screens, consider placing your controls inside a ScrollView. A ScrollView lets users scroll to see the remainder of the content on the screen.

Cascades provides a lot of core controls that you can use in your apps. There are controls that represent buttons, sliders, text fields, menus, action items, and much more. Most of these controls appear the same on both all-touch devices and devices with a physical keyboard, which makes it easier for you to create a consistent UI for both types of devices.

However, there are a few controls that look or function differently depending on the device. You should be aware of the following differences in core controls as you create your apps:

Action items and the action bar

The action bar is a special area at the bottom of the screen and contains action items that are applicable to the current screen. For example, a screen in an email app might have actions for composing a new message, saving a message as a draft, or deleting a message. You can choose which actions you want to show on the action bar in your app, and the remaining actions appear in an action menu.

Depending on the device that your app is running on, the behavior of action items and the action bar is different. On all-touch devices, any text that you set for action items (using the title property of the ActionItem class) is displayed below the icon for the action. On devices with a physical keyboard, this text doesn't appear; only the action icon is displayed. Users can tap and hold an action item to display the text for an action. The action bar itself is also slightly shorter, to fit better on the smaller screen of devices with a physical keyboard.

Themes

By default, devices with LCD and OLED screens use different visual styles (also called themes) for the controls in Cascades apps. Devices with LED screens (such as the BlackBerry Z10 smartphone) use a bright theme, while devices with OLED screens (such as the BlackBerry Q10 smartphone) use a dark theme. Certain core controls (such as labels, buttons, sliders, and so on), as well as the default app background, appear differently depending on the theme. Here's an example of the same app that's run using both themes:

The dark theme was chosen as the default theme for OLED screens because this type of screen consumes more power when displaying brighter images. In addition, brighter images can cause a burn-in effect on OLED screens, where pixels lose their luminosity and color properties over time. To learn more about OLED screens and how to design your apps for them, read Designing for OLED displays in the UI Guidelines.

When you create your UI, you should consider how it might look using both a bright theme and a dark theme. Make sure that your image assets appear correctly and that all UI elements are clearly visible using both themes. Some assets that you use, such as icons or nine-slice scaled images, might need special attention to ensure that they work well against both bright and dark backgrounds.

You can specify the theme that you want your app to use by modifying the bar-descriptor.xml file in your Cascades project. If you don't specify a theme, your app uses the default theme for the device that it's run on (for example, bright for all-touch devices and dark for devices with a physical keyboard). You can add the <cascadesTheme> element, with a value of either bright or dark, to the existing <initialWindow> element. Here's how to specify that your app should use the dark theme:

<initialWindow>
    <cascadesTheme>dark</cascadesTheme>
</initialWindow>

To help you manage your bright and dark assets, Cascades includes a static asset selector that determines the theme that's running on your target device and automatically selects the right set of assets. This selector lets you specify theme-based assets, as well as resolution-based assets.

To learn more about selecting assets based on theme, see Using the static asset selector.