mobile applications for BlackBerry 10 (native Cascades, C++)
2019-10-21 can take some time until all is published to the stores !!!!
QtWS 2019 Conference App is now available at the stores.
Android 5.0 or greater for Phones and Tablets from Google Play Store:
iOS 11.0 or greater for iPhone or iPads from Apple App Store:
Sourcecode at Github: https://github.com/ekke/c2gQtWS_x
Schedule:
Speakers:
Session Detail
Room:
Venue
QtWS2019 in Tokyo:
xxx
QtWS 2018 Conference App is now available at the stores.
Hint: Training Day Sessions are missed yet, but will follow soon. You’ll get them automatically from built-in Update Service.
Android 4.3 or greater for Phones and Tablets from Google Play Store:
iOS 10.0 or greater for iPhone or iPads from Apple App Store:
Sourcecode at Github: https://github.com/ekke/c2gQtWS_x
Schedule:
Speakers:
Session Detail
Room:
xxx
eclipsecon Europe 2016, Ludwigsburg, Germany
(can take up to 24 hours)
Android 4.3 or greater for Phones and Tablets from Google Play Store:
or download the APK from here if you prefer sideloading:
iOS 8.2 or greater for iPhone or iPads from Apple App Store:
just approved 2016-10-25 16:27 – can take a moment to be visible in App Store
Amazon Fire OS or BlackBerry10 on Amazon App Store:
Sorry – not enough time yet to also develop a native BlackBerry 10 App – hopefully for the next conference. Native BlackBerry 10 Cascades App loads faster and runs smoother on BlackBerry 10.
Also working on Windows 10 Mobile – runs in development mode on Lumia and others – haven’t finished the work to upload release to windows store yet.
You probably know that last years I always developed the BlackBerry 10 App for Eclipse Conferences. This year first I did it for Android and iOS using Qt 5.7 and brandnew Qt Quick Controls 2. Used Qt Quick Controls 2 and Google Material Style. To make my work easier, Entities (Session, Speaker, Track, Room, Conference, …) are generated using a Xtext / Xtend DSL. Started this DSL 2 years ago for BlackBerry 10 Cascades / Qt 4.8 and now I’m able also to generate code for Qt 5.7 / Qt Quick Controls 2. Hopefully at the end of year mobaDSL will be available Open Source.
Want to know more about HowTo develop Apps using Qt 5.7 for Android, iOS and Windows 10 ? The Sourcecode of my Qt World Summit Conference App is available at Github: https://github.com/ekke/c2gQtWS_x
Here some screenshots of eclipsecon Europe Conference App.
Schedule
Speakers
Session Detail
Drawer
xxx
Android 4.3 or greater for Phones and Tablets from Google Play Store:
iOS 8.2 or greater for iPhone or iPads from Apple App Store:
Amazon Fire OS or BlackBerry10 on Amazon App Store:
Windows Store:
Sourcecode at Github: https://github.com/ekke/c2gQtWS_x
Schedule:
Speakers:
Session Detail
Floorplan on PixelC Tablet:
xxx
This is part 8 of a series of apps helping you to understand Qt 5.7 for x-platform development on Android and iOS. This app is not a Demo App – it’s a real life APP I developed for QtCon 2016 in Berlin. Please read the blogs about my other Examples to understand the concepts and patterns I’m using:
The App is available at Google Play Store for Android Devices and from Apple Apptore for iPhones. Also work has started to provide a Windows 10 Mobile App.
You don’t have a Google Account and want to side-load the App ? Here’s the APK – Download – Link.
This blog will give you some insights and explain some parts of the code.
I’ll also speak at Qt World Summit about my experiences while developing this app and show what happens behind the scenes.
Here’s a short overview what I’m using to create the UI of my Qt 5.7 – QtQuickControls2 Business Apps:
There are also StackViews on top of a single Page from SwipeView:
Conference Schedule is a SwipeView, each Day is a Page with ListView for all Sessions of the Day. From the List you can open SessionDetailPage (pushing on Stack) and so on.
Main Navigation is done by a Drawer.
Now Google Material Style also supports Bottom Navigation I added a Bottom Navigation Bar to make it easier to navigate. To get the Drawer opened you must swipe from the left site or tap on the Menu Button on Top Left. The Menu Button on Top Left isn’t always visible: if pushing Pages on a Stack, the Button is replaced by a Back Arrow to navigate back – so in this case you must use the gesture from left side. Not so easy if you have a large display size or like to use your phone with one hand. The Bottom Navigation Bar enables you to go through the Pages faster without moving fingers a long distance.
There are buttons for Home, Schedule, Speaker and Tracks inside the Bottom Navigation Bar. You can reach these Buttons easy. There’s also a Menu Button (Hamburger) at Bottom Left position. This Button is always visible, which means you can easy switch between different parts of the App even if there are some Pages on the Stack.
The Bottom Navigation Bar is only visible in Portrait Mode – in Landscape it would eat too much space from available height.
Now there are two Hamburger Menus in Portrait and perhaps you don’t like to have the Menu Button at the bottom ?
No problem – you can customize this. GoTo Settings and select the way you like to navigate.
I implemented these options to demonstrate how easy it is to customize your QuickControls2 Apps.
BTW: Coming from BlackBerry 10 Cascades ? Then you already know about the Menu Button at Bottom left. So using Bottom Navigation with Menu Button there could also help to get same Navigation Workflow on different platforms. Will help you if developing Enterprise Business Apps as I’m doing.
Sometimes you pushed some Pages on top of a StackView. per ex. Schedule -> Session Detail -> Speaker Detail -> Room Info.
To push Pages on stack you tapped on Buttons to navigate “forward” to the next detail you’r interested in.
To go back to the Schedule – Sessions List you must tap on the Back Button multiple times. On Android you can also use the OS Back Button at Bottom Left, but on iOS you always have to move your finger to Top Left Back Button.
To speed up this kind of Navigation I implemented “Speed Stack Navigation”: the FAB (Floating Action Button) is used to navigate back: with one Tap you jump back to the last used List below. The FAB is always at Bottom Right position so always reachable even with one-hand-use.
Here’s an example from Session Details Page:
From Settings page you can also customize the Colors and dark / light theme:
here are screenshots using a dark theme:
—
There are many StackViews, SwipeViews, Pages, ListViews …
To provide a performant App it’s a good think to think about dynamic creation of Components. QtCon Conference App uses many Loaders. A Loader is only a placeholder and you must set the ‘active’ property to start Object creation.
Inspired by BlackBerry 10 Cascades TabbedPane delegateActivationPolicy I have implemented different Activation Policies:
Immediately means that the Loader is active from beginning and will remain until the end. This is used for HomePage – the first page a user will see.
Lazy means the first time a user wants to see this Page, the Loader will become active and then wil remain.
When Active means the Loader will only be active as long as the Page is in use. Closing the page will set the Loader to inactive and the Controls will be destroyed.
But that’s not the complete story – to speed up the Startup Time I’m doing it this way:
C++ classes like DataManager, DataServer, DataUtil are only created at startup – no init() is done – so it’s really fast.
In QML no Drawer and Bottom Navigation is created, because I don’t set a model. The initial Item of the root StackView (used by Drawer) is a special Page only containing a Busy Indicator:
As soon as this initial Page is created I start a Timer with 300 ms delay and from the Timer I’m calling all the C++ init() methods, all the data was read from cache and if all is done I’m setting the Drawer model. Now the Pages with Immediate – Activation – Policy are created and I’m swapping the initial Page and the Home Page is visible to the user.
In most cases the Busy Indicator will only be visible for some ms.
For this App I’m using a JSON File Cache.
A Conference App displays Sessions, Speaker, Rooms and this kind of data was read from Cache and QObject* are created – so the complete data was in-memory for fast access.
This data wasn’t changed from normal app – use. The only data a user enters is setting favorite Sessions to create the Personal Schedule. To avoid saving all the Sessions, I’m using an extra Class to store the ID’s of Sessions marked as Favorite. Caching this as JSON will only write a File with some Bytes.
At startup I’m looping through the Favorites and set a Property for these Sessions, so in Lists and Pages I’m getting the Favorite info directly from Session Class. This Property is a transient Property for Sessions.
Closing the App or sending to background I’m looping through the Sessions and create the Favorites. Then this small file was written to cache.
Using QObject* DataBinding to QML UI is easy – most difficult part is creating all the code for Q_PROPERTY. This is done by a Code Generator – all these C++ Classes you’ll find under src/gen. This Code Generator is based on Eclipse Xtext and I’m generating different Code for BlackBerry10 / Qt 4.8 and Qt 5.7 Android/iOS. The CodeGenerator will be Open Source – expect this by the end of 2016.
Caching and Data Binding is a complex story – will blog in an extra article about this.
Find some more Screenshots from the Conference App below.
Some Screenshots are outdated – per ex. the Icons to swap between Personal Schedule and Conference Schedule were changed because of Beta testers Feedback.
Stay tuned for more blog articles and videos explaining patterns and concepts.
There’s an Option Menu available at Startpage. All these Options are also part of the Drawer, but to help users first time using a Drawer I placed this Options Menu to get easy access to Help and Settings.
QtCon Conference App works in Portrait and Landscape. There are some situations where rotating back from Landscape to Portrait doesn’t work as expected. Will report this and more via Bugreports.
Conference Schedule is a SwipeView with pages for each Conference Day. The List of Sessions of a Day can be long, so there’s a ‘GoTo’ Button to jump to a specific Time Slot.
TimePicker is a customized UI Control I created with some help from Mitch Curtis.
Use this TimePicker to jump to Sessions starting at a specific time:
Personal Schedule (lists only marked Sessions). Easy toggling between Personal and Conference Schedule
Session Details:
Room Floorplan – you can Zoom-In / Zoom-Out or Fit-To-Window:
List of Speakers:
GoTo Speaker where Name starts with a specific Letter:
Speaker details
List of Tracks – in the meantime Tracks are colored to match UI from Web Browser.
Sessions per Track
Venue Info
Venue Rooms List. Tap on a Room to see all Sessions or on the Thumbnail to see the Floorplan.
Sessions per Room
Help Page
About Page
This Application is Open Source and available at Github: https://github.com/ekke/c2gQtCon
As a good Open Source Project Citizen I always report Bugs and Requests.
Here are some of the Bugs I ran into while developing this APP:
TBD
I’m waiting for Feedback from QtCon in Berlin to see what could be done better.
Next Conference App will be for Qt World Summit 2016 in San Francisco.
My personal wishlist for upcoming Qt Conference Apps:
Stay tuned for more Apps – next one will be for Qt World Summit 2016 in San Francisco.
…
This year first time ever I’ll attend Qt World Summit in Berlin and so I also in my spare time wrote a conference app.
Conference2Go Qt World Summit can be downloaded here
There was only a very short timeframe, a new API and also a complete rewrite from scratch, so if you know some of my other Conference2Go apps, this first version misses some things: Calendar- , Notebook-, Foursquare – Integration, Search for Sessions / Speaker, birds-eye-view of all sessions, Shortcuts for keyboard devices and full Classic Trackpad support. I’ll add this later.
Conference2Go Qt World Summit gives you:
Sessions and Trainings are segmented by Conference Day and grouped by Time.
Scheduled Items (Break, Lunch, Party, …) have a light background
Keynotes and Lightning Talks have own Icon, Session Tracks are colored.
Sessions marked as Favorite have an orange flag.
Tap on a Room / Floor and open in MediaPlayer to zoom in / out
All Screens support Portrait and Landscape
Video and more info will follow – here are some screenshots:
See you in Berlin and have fun with the app. If there’s something wrong or missing please send feedback from ekkes-corner Tab inside the app.
This is part #3 of my blog series ‘Supporting BlackBerry Classic’ as native BlackBerry10 developer.
Please read about screen sizes and first steps here and about Shortcuts here.
BlackBerry Classic isn’t only a great BlackBerry 10 Device with a physical keyboard and touch screen above –
there’s also the TrackPad back which gives you control on focus and speeds up working:
On a ‘normal’ Touchscreen Device (with or without a physical Keyboard) most times you’re not thinking about foucs: you touch on a UI Control or ActionItem and then something happens or you scroll through the content (using your fingers on touchable screen or on touchable keyboard on BlackBerry Passport)
Using a TrackPad is different. Think using a very small TouchPad outside of your TouchScreen or using a Mouse with clickable TrackWeel.
The TrackPad makes it very easy to move around on your screen and to ‘click’ on something. Of course you want to know which UI Control gets the Focus before clicking on it. In most cases Cascades does this for you and highlights the control getting the focus.
Here’s a TabbedPane where the actualTab is selected as usual:
While using the TrackPad the focus was shown to let you know which Tab gets the focus. Clicking on the Tab with focus selects this Tab.
Using a TrackPad you – as a developer – must always think about focus vs selected. For users of your app it should be easy to distinguish.
For this TabbedPane Cascades uses different background colors from the uipalette of your Theme to highlight the control with focus.
There are some UI Controls not getting focus by default: per ex. Labels, Containers, ImageView.
Here’s an ImageView using focusPolicy to let Cascades know that this control needs to get the focus:
ImageView {
id: startButton
navigation {
focusPolicy: NavigationFocusPolicy.Focusable
}
// ...
gestureHandlers: [
TapHandler {
onTapped: {
// doSomething
}
}
]
}
Using the TrackPad and ‘clicking’ on the Image will be the same as tapping on it: the onTapped() was executed – so it’s the same as tapping with a finger on it.
Tip: don’t use onTouch() instead of TapHandler – clicking the TrackPad will do nothing !
Using the NavigationPolicy.Focusable Cascades will highlight the ImageView with focus:
There are two lines at top and bottom and the background is slightly different. If this is ok for you, you’re done.
There will be situations where you want to change something more. Here’s another ImageView used as a placeholder for an empty list as long as there’s no data to be displayed. The Image has a Taphandler and ‘clicked’ there will be some informations for the user why there’s no data.
Here are the ImageViews on bright or dark theme and NO focus:
Before going on with focus from TrackPad take a look at the ActionBar: the Signature ActionItem in the middle is disabled, because we don’t have data.
NEVER disable a Signature ActionItem ! Signature Actionitems are colored and it’s not easy to know if it’s enabled or disabled – a better way is to remove the ActionItem and to add as soon as there’s some data:
Adding or removing is easy done:
attachedObjects: [
ActionItem {
id: summaryOpenAction
title: qsTr("Summary")
imageSource: "asset:///images/ic_calendar_month.png"
ActionBar.placement: ActionBarPlacement.Signature
onTriggered: {
navigationPane.pushTimeSummaryOpen()
}
}
]
ScrollView {
id: scrollView
visible: false
onVisibleChanged: {
if(visible){
removeAction(summaryOpenAction)
} else {
addAction(summaryOpenAction)
}
}
// ...
and now the ImageView with focus from TrackPad navigation:
Cascades allows you to customize the colors or to change the brightness or saturation.
Same ImageViews customized:
The Label on top of the ImageView becomes red if focused and the brightness was changed so the user knows immediately which control has focus.
Container {
ImageView {
id: image_01
navigation.focusPolicy: NavigationFocusPolicy.Focusable
//...
effects: [
BrightnessEffect {
enabled: image_01.navigation.wantsHighlight
brightness: rootPane.isDark()? 50.0 : -10.0
}
]
}
Label {
id: label_01
text: ""
//...
textStyle.color: image_01.navigation.wantsHighlight? Color.Red :Color.Black
}
gestureHandlers: [
TapHandler {
onTapped: {
doSomething()
}
}
]
// ...
The ImageView gets NavigationFocusPolicy.Focusable and a BrightnessEffect with different values for dark or bright theme.
Text color of the Label changes from black to red as soon as the ImageView wants to be highlighted.
Tip: Don’t forget: if coloring Labels try to use Colors from your uipalette.
Below you can see some Labels using uipalette.primaryBase and uipalette.primary:
Label {
text: qsTr("in")
textStyle.fontSize: FontSize.Large
textStyle.color: ui.palette.primaryBase
}
Label {
id: daysLeftLabel
text: ""
textStyle.fontSize: FontSize.XXLarge
textStyle.color: ui.palette.primary
}
Label {
text: qsTr("days")
textStyle.fontSize: FontSize.Large
textStyle.color: ui.palette.primaryBase
}
Documentation TrackPad, BrightnessEffect
stay tuned – more info HowTo support BlackBerry Classic will follow.
You followed my article series HowTo Support BlackBerry Passport as a native Cascades Developer ?
You learned all about the new things:
I finally created three short Videos to demo how this is looking and working in a real-life application.
A little Utility APP – only one Screen, some animations and settings.
ekkes EXPRESS charts allow to easy create a business chart diagram on-the-fly and to save this as an Image.
Primary use-case of this app is to be integrated like a PlugIn into BlackBerry EXPRESS – a cool app to create nice looking presentations directly from your phone.
This Video demonstrates what it means to have such a big screen from Passport together with touch enabled keyboard.
As you can see OS 10.3 gives your apps a new fresh UI and allows easier navigation through complex apps.
I really recommend not simply to update your app – you have to rethink UI and Navigation !
Have Fun with 10.3.
Any questions ? Please public at Cascades Forums or via Twitter.
Welcome to the last part of my article series on ‘Supporting BlackBerry Passport and 10.3 SDK / API’
First three parts of this article series help you to support the BlackBerry Passport from SDK / API 10.2 – the other ones are using SDK 10.3
Please read these articles before going on:
This article will be the last one telling you HowTo transition your apps from 10.2 to 10.3 and support the new BlackBerry Passport.
From now on developing for 10.3 will be the normal case for me: all new apps will start with 10.3 – existing apps will get bug fixes (or updated data for my Conference Apps) for 10.2, too.
This week – just in-time for the launch of BlackBerry Passport today – I finished my work and most of my apps are now 10.3 and all are supporting the size and density of BlackBerry Passport.
You want to test some of them ? Open BlackBerry World, search for ‘ekke’:
All Apps marked with 10.3 require as minimum OS 10.3.0 and are using some of the new cool features.
ekkes EXPRESS charts are working best with BlackBerry EXPESS.
Here’s a short summary what I did to make my apps 10.3 – ready. Something like a recipe. To understand it all please read the other 8 parts of this blog series !
10.3. development becomes my ‘master’ branch in Github projects. 10.2 will remain in a branch and from time to time will get changes manually or via Git CherryPick
Move all Images you’re using for
from assets/images to assets/10ppd/images. Check if you’re using some of the standard BlackBerry 10 Icons, download them from Cascades UI Guide Pages and copy the ones you’re using into assets/12ppd/images. (The new ones are 96×96)
Put a task on your ToDo list to design all Images from 10ppd/images for 12ppd/images or even for all sizes (8ppd, 9ppd, 12 ppd, 16ppd)
Place Device-Specific Images (Backgrounds, Covers) into static assets folders like assets/1440×1440
Let Images you always want to use as-is in exactly that pixel-size at assets/images.
Remember:
Add method bool isPassport(){…} to ApplicationUI.cpp
Then it’s easy to test if something must be done specific for the Passport
Try to avoid this and to create adaptable Layouts
Go through all of your qml files and change the import of bb.cascades to 1.3
Search for 720, 768, 1280 inside your *.qml files – you’ll probably find layouts with minWidth, maxWidth etc you now have to change to support the 1440×1440
Search for OrientationHandler: add some code to ignore Orientation Changes Portrait<->Landscape if device isPassport()
You’re using Images from assets folder also from C++ – per ex. creating a Toast Dialog with an Icon ?
Before 10.3 Images were merged from static assets only – so at runtime you were sure to get the right one.
Now with 10.3 the ppd folders are ALL available for the app – this means you don’t know if your Image is coming from 10ppd or 12ppd or …
There’s a new method from Application Class to request the Assets URL for a specific filename.
Inside your bar-descriptor.xml you ca set a branding color.
From your code you have access to the generated color palette. So go through your layouts to see where you have to change Colors from Color.XXX to ui.palette.primary or so. per ex. if setting your own ‘Selection’ Color in Lists.
You can also use this color for Text or to colorize Icons (filterColor)
Application Icons for 10.2 are sized 114×114 – now for 10.3 it’s recommended to provide different sized Application Icons.
Check if all your ScrollViews and ListViews are scrolling from Passport Keyboard swiping. If not request the focus to your ScrollView or ListView.
Hint: pehaps after pushing a Page on top and coming back to your ListView you have to request the focus again.
Use the new features from 10.3 ActionBar: Signature Icons or Compact Mode.
Hint: If using Compact Mode add some bottom padding to your ListView or ScrollView or add an empty Container with some minHeight – otherwise the last row perhaps isn’t completely visible because of SignatureAction or TabMenu from left or OverflowMenu from right overlapping.
Change all your Paddings, Margings, Width / Height from Pixel to Design Units – then your layouts will look similar on different devices.
You’re supporting the Dark and Bright Theme ? Then let your users decide what to use from your app settings.
Hint: I’m not allowing to set the Bright one on organic display technology (OLED)
Don’t forget a last check using Passport in Landscape Mode if all works as expected !
Have Fun with 10.3 and BlackBerry Passport.
I will add some screenshots to demo what I changed between 10.2 and 10.3 for my apps I mentioned above.
As soon as these blogs will be available I will tweet about and add a link here.
Welcome to part eight of my article series on ‘Supporting BlackBerry Passport and 10.3 SDK / API’
First three parts of this article series help you to support the BlackBerry Passport from SDK / API 10.2 – the other ones are using SDK 10.3
Please read these articles before going on:
As a long time Cascades Developer you always have used Pixels to define sizes, margins or paddings – so the challenge is to rethink and use ‘du’.
A ‘Design Unit’ always has the same physical size on all devices, which means for higher density you need more pixel to fill the same space. Devices are grouped into ‘buckets’ by density:
8 buckets means you need 8 Pixel for each Design Unit (du) on a Z30, but 12 Pixel on a Passport. Now it’s easy to understand, why a Padding value of 48 Pixels looks different on the devices: 48 Pixel on Z30 are 6 du (48 / 8), but only 4 du (48 / 12) on a Passport.
Let’s take a look at the screen sizes in Design Units:
Most of us started development for Z10, so as a first step try to get the ‘du’ dividing the Pixel by 10: an Icon for ActionBars now is 8×8 du instead of 81×81 Pixel before on a Z10, but 64×64 Pixel on a Z30, 72×72 Pixel on a Q5/Q10 and 96×96 Pixel on a Passport. If you don’t want to design all sizes, provide the one with the highest density: 96×96 Pixel or to be prepared for more future devices with even higher density use 16 buckets ( 128×128 Pixel)
In part 6 we already discussed how Cascades is looking for Images from density-dependent folders like 10ppd, 12ppd, … These folders are important if you need images for ActionBar, Tabs, Menus … where Images are only defined by their name.
Looking for an Image like ‘edit.png’ Cascades tries to find the Image from the folder bound to density:
For Images not found, Cascades is looking if there’s an Image with higher density and scales it down. If there’s only an Image found with lower density or from root, this one is used without upscaling !
What about your Images defined by ImageView ?
If you only provide the ImageSource, Cascades will try to find the right one – which means looking into your ppd folder and use the Image found without scaling. If not found, Cascades takes a look at ppd folders with higher density: if the Image was found, Cascades will scale it down. If not found Cascades takes a look at ppd folders with lower density: if found the Image will be scaled up ! This is different from ActionBar / Tab / Menu – Images where Cascades only scales down !
Attention: If the Image was found in the root folder, Cascades will use it without any scaling ! This can cause Images to become larger or smaller as expected. It’s always a golden rule: place all your Images into ppd folders ! Only Images used with fixed Pixel Size can remain in the root.
If you have to leave your Images in assets root, there’s a workaround. To guarantee same size on all devices set minWidth, maxWidth and minHeight,maxHeight for ImageView – of course using ‘du’. The example above (240×240 Pixel on passport) can be defined as an ImageView with 20 du width / height. Now Cascades knows: this Image should be 240×240 Pixel on Passport and 160×160 Pixel on Z30. Same story again: find the Image from 12ppd folder only Cascades will scale down to 160×160 Pixel on Z30 – finding the Image only as 160×160 inside 8ppd, Cascades will scale up to 240×240 Pixel on Passport ! Don’t forget to set the ScalingMethod !
Sounds confusing ? Only the first time !
To understand it better: here’s a Cascades Project at Github to play with 🙂
In my sample I’m using three Images:
To see what happens if ‘B’ or ‘C’ are NOT inside ppd folders – only at root – I placed a renamed copy at assets/root and displayed it ‘as-is’ vs scaled using min/max width/height
Here’s the result from BlackBerry Passport (12ppd):
From ‘B’ in the middle you see 160×160 px are smaller then 20 du (240×240) if used unscaled from root.
… and here’s how it looks from Z30 (8ppd):
From ‘C’ in the middle you can see the too large image with 240×240 unscaled on Z30.
The ActionBar on Z30 is OK because ‘C’ was downscaled automatically – on Passport ‘B’ is too small because Cascades doesn’t upscale for ActionBar Images.
You still need some Images Device-specific for Absolute Layouts or fine-tunied backgrounds or special Covers ? Place them inside static assets folders like 1440×1440 for the BlackBerry Passport.
Have fun with BlackBerry Passport and 10.3
business apps 