User interface

The UI of an OS affects the usability of both applications and the device as a whole. The following section provides the information on creating an awesome BlackBerry 10 experience using Cascades UI components.

Creating a UI for a Cascades app

Typically, QML is used to create the UI for a Cascades app. However, it's also possible to create the UI using C++.

Each QML document contains a set of human-readable elements and attributes that are defined in a hierarchical nature. For example, a button in Cascades is defined by an element called Button, and by the associated attributes that define its shape and size. You can embed JavaScript code in the QML element definition to handle events such as a button press.

The example contains a button labeled “Click me”. When the button is pressed, the clicked() signal is emitted, which is then captured by the onClicked() signal handler. In this example, the onClicked signal handler disables the button when it's pressed.

import bb.cascades 1.0
Page {
    Container {
        id: container1
            Button {
                id: button1
                text: "Click me"
                maxWidth: 200
                onClicked: {
                    enabled = false;

In addition to defining QML components in the editor, you can also drag and drop controls from the Components view.

In the Components view, controls can be displayed in a list or as icons, as shown in the images below:

Cascades components displayed in a list.
Cascades components displayed in an icon style.

The components view in the Momentics IDE for BlackBerry is very similar to the Object Library in Xcode. To add a Cascades control to a Page, you simply select the control in the components view and drag it onto the QML document in the position you want. The IDE adds the typical QML and JavaScript starter code for you automatically.

For more information about creating a UI for BlackBerry 10 using Cascades, see Creating User Interfaces.

Last modified: 2015-03-31

Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus