Active Frame made easy

One of the coolest thing in BB10 is the possibility for an app to display informations in it’s Active Frame when the app is minimize. If you’re building your first app, you might want to add Active Frame support, but looking at the official documentation can discourage some of you because it looks hard to code: having to deal with C++, creating a custom class, inherit from SceneCover… For a new developer, this can look like an impossible task.

Fortunately, there’s an easy way to create an Active Frame using almost only QML, with only a few lines of code.

First, let’s register SceneCover and AbstractCover in C++ so that QML knows what we’re talking about. Add this at the top of your applicationUI.cpp file

#include <bb/cascades/SceneCover>
#include <bb/cascades/AbstractCover>

And then, in the same file, add this in your constructor

ApplicationUI::ApplicationUI() :
        QObject()
{
    qmlRegisterType<SceneCover>("bb.cascades", 1, 2, "SceneCover");
    qmlRegisterUncreatableType<AbstractCover>("bb.cascades", 1, 2, "AbstractCover", "");
...

Now, let’s go to QML.

import bb.cascades 1.2

Page {
    attachedObjects: [
        // An Active Frame is a Scene Cover
        SceneCover {
            id: sceneCover
            content: Container {
                Label {
                    id: label
                    textStyle.color: Color.Red
                    multiline: true
                }
            }
        }
    ]
    
    // Set the Scene Cover for this application on app start
    onCreationCompleted: Application.setCover(sceneCover)
    
    // This is your main app
    Container {
        TextArea {
            hintText: "Text shown in Active Frame"
            onTextChanging: label.text = text
        }
    }
}

That’s it! Easy, isn’t it?
Even updating the Active Frame is really easy with this method, you just need to call the Active Frame object you want to update by it’s id.

So, don’t be afraid anymore, Active Frames are fun to play with and give your app a professional look.