While tech enthusiasts may be drooling over the specs of the BlackBerry Passport screen resolution, I’m sure more than one designer is panicked at the thought of building a UI for another resolution. But fear not! BlackBerry has you covered!
Back in May with the beta release of the 10.3 Native SDK, we introduced the concept of design units. And now that the 10.3 gold release of the Native SDK is available, we’d like to give you a quick refresher on how you can use design units to easily and efficiently work with different device screen sizes and resolutions, including the BlackBerry Passport’s awesome 1440 x 1440 resolution.
Design units are device-independent values that you use to assign dimensions to components in your UI. A design unit corresponds to a whole number of pixels based on the DPI of the device. At run-time the framework converts the design unit value to a pixel value that’s optimal for the screen density of the current device.
The following table describes how design units convert into pixel values for each device.
| Device | Pixels per design unit | Width (du) | Height (du) |
| BlackBerry Z30 and BlackBerry Z3 | 8 | 90 | 160 |
| BlackBerry Q10 and BlackBerry Q5 | 9 | 80 | 80 |
| BlackBerry Z10 | 10 | 76.8 | 128 |
| BlackBerry Passport | 12 | 120 | 120 |
We’ve added the object “ui” to the UIObject base class that can perform conversions from design units to pixels. You can choose to specify your component dimensions using design units (du), or snapped design units (sdu). Design units calculate an exact pixel value, while snapped design units round to the nearest whole pixel.
Design units may be specified in both C++ and QML. To use design units in QML you need to import bb.cascades version 1.3
Here is an example of an interface in QML that uses snapped design units to specify the attributes of objects on a page.
import bb.cascades 1.3
Page {
Container {
topPadding: ui.sdu(2)
bottomPadding: ui.sdu(2)
rightPadding: ui.sdu(2)
leftPadding: ui.sdu(2)
TextField {
hintText: "To:"
bottomMargin: ui.sdu(6)
}
TextField {
hintText: "Subject:"
bottomMargin: ui.sdu(6)
}
TextArea {
layoutProperties: StackLayoutProperties {
spaceQuota: 1
}
}
}
}
For more tips on resolution independent design, check out our best practices guide:
https://developer.blackberry.com/native/documentation/cascades/best_practices/resolution/index.html