With the release of BlackBerry 10.3 later this year Cascades apps will have the ability to set a custom highlight color. While this is typically defined in the bar-descriptor.xml file, doing so will prevent any theme from being applied when the app is run on phones running an older operating system. Fortunately there is a workaround. (Thanks to Derek Konigsberg for pointing out how to do this).

In short you can override the CASCADES_THEME environmental variable in the brief window between the app being launched, and the creation of the app’s UI. The following code sets a dark theme with pink highlights when run on OS 10.3 and sets a simplier dark theme for older OS versions.

Q_DECL_EXPORT int main(int argc, char **argv)
{
    bb::platform::PlatformInfo p_info;
    QString ver = p_info.osVersion();

    if(ver.startsWith("10.0") || ver.startsWith("10.1") || ver.startsWith("10.2"))
    {
        qputenv("CASCADES_THEME", "dark");
    }
    else
    {
        qputenv("CASCADES_THEME",
            "dark?primaryColor=0xF04FFF");
    }

    Application app(argc, argv);
    MileageTrackerApp mainApp(&app);
    return Application::exec();
}

The recently updated Mileage Tracker app (pictured above) is an example of an app that is using this technique.

There is a slight change in Cascades 10.3 dealing with conditional variables based off of the length of the hint text of a field. For example the following code (designed to only show the TextField when the hint text is not an empty string) would work on BlackBerry 10.2 but fails when run on BlackBerry 10.3

Container
{
    property alias hint:newTextField.hintText
    property alias text:lbl.text
    Label
    {
        id:lbl
        multiline:true
    }
    TextField
    {
        id:newTextField
        visible:
	{
            if(hint.length>0)
            {
                true
            }
            else
            {
                false
            }
        }
    }
}

Fortunately the work around for this is extremely simple. You just need to create (and set) an additional alias for the visibility of the field. This is shown below…

Container
{
    property alias hint:newTextField.hintText
    property alias text:lbl.text
    property alias showTextField:newTextField.visible
    Label
    {
        id:lbl
        multiline:true
    }
    TextField
    {
        id:newTextField
    }
}

I have made claims about my Erie Canal app being the first BlackBerry app to make use of the Ionic framework, so it should be worth pointing out how this was done. Technically the Ionic framework only support iOS and Android, but it is based off of Cordova just like BlackBerry’s Webworks framework is. Knowing how well BlackBerry 10 supports HTML5 I assumed that it was likely that supporting this new framework would be no trouble at all.

Using either BlackBerry Webworks or the Ionic Framework require quite a bit of set up involving the installation of Node.js and Cordova but once everything is set up, the process is fairly simple. First create two separate instances of your new project, one with the Ionic framework, and one with BlackBerry webworks. Then copy over the www/lib folder from the Ionic project to the BlackBerry project. This folder includes all of the css and javascript that make up the Ionic framework (and also includes the libraries needed to support angular.js). Once this folder is included, BlackBerry HTML5 apps can be compiled as normal.

In fact the entire www folder can be shared between BlackBerry, Android, and iOS versions of the app with the platform differences mostly taking place in manifest files and the actual compilation of the apps.