Menu
Home
Log in / Register
 
Home arrow Computer Science arrow Learn BlackBerry 10 App Development
< Prev   CONTENTS   Next >

QML

When building user interfaces with Cascades, you can proceed in two distinct ways: you can either write imperative code in C++ or create your UI declaratively with the Qt Modeling Language (QML). Most examples in this book use the latter approach for the following reasons:

n Thanks to the Cascades Builder tool, you get immediate feedback on the way your UI will look in QML.

n When it comes to designing UIs, writing C++ code can quickly become unmanageable, especially if you consider many nested components. In contrast, QML keeps the code much more tractable.

n Once you get the hang of QML, it is way faster to create a polished UI within a few minutes than in C++.

n Behind the scenes, you are still using C++ objects exposed to QML by Cascades. QML simply makes your life easier during the entire application development life cycle by avoiding numerous compile-build-deploy cycles until you get the UI right.

n QML is a much friendlier language than C++ for people with a programming background in JavaScript. You will therefore have a greater chance of sharing your UI designs with other members of your team if they are written in QML.

To illustrate the previous points, let's design a very simple UI using both approaches: one UI design in QML and another one in C++. As shown in Figure 1-2, the UI isn't very fancy; it's simply a text field stacked on top of a slider. Whenever the slider moves, the text field is updated with the slider's new position.

Figure 1-2. Stacked TextField and Slider

Listing 1-1 shows the QML markup version.

Listing 1-1. main.qml

import bb.cascades 1.0 Page {

Container {

TextField {

id: texfield

}

Slider{

id: slider fromValue: 0

toValue: 100 onImmediateValueChanged: {

texfield.text = Math.round(immediateValue)

}

}

}

}

The equivalent C++ version of the code for creating the same UI is given in Listings 1-2 and 1-3.

Listing 1-2. applicationui.hpp

class ApplicationUI : public QObject

{

Q_OBJECT

public:

ApplicationUI(bb::cascades::Application *app); virtual ~ApplicationUI() { }

public slots:

void onImmediateValueChanged(float value);

};

Listing 1-3. applicationui.cpp

ApplicationUI::ApplicationUI(bb::cascades::Application *app) : QObject(app) { Page *page = new Page();

Container *contentContainer = new Container(); contentContainer->setLayout(StackLayout::create());

TextField* textfield = TextField::create(); Textfield->setObjectName("textfield"); Slider* slider = Slider::create();

slider->setFromValue(0); slider->setToValue(100);

contentContainer->add(textfield); contentContainer->add(slider);

QObject::connect(slider, SIGNAL(immediateValueChanged(float)), this, SLOT(onImmediateValueChanged (float)));

page->setContent(contentContainer); app->setScene(page);

}

voidApplicationUI::onImmediateValueChanged(float value) { value = round(value);

QString stringValue = QString::number(value);

Application* app = static_cast<Application*>(this->parent());

TextField* textField = app->scene()->findChild<TextField*>("textfield"); textField->setText(stringValue);

}

ApplicationUI is the “application delegate” in charge of creating the user interface and wiring together the application's controls' event handling. You have to provide this class and it is instantiated during the application bootstrap process.

As you can see, the declarative way of building the UI in QML is very concise compared to the imperative C++ approach. This is also because Cascades takes care of a lot of the plumbing work for you behind the scenes when you're using QML.

 
Found a mistake? Please highlight the word and press Shift + Enter  
< Prev   CONTENTS   Next >
 
Subjects
Accounting
Business & Finance
Communication
Computer Science
Economics
Education
Engineering
Environment
Geography
Health
History
Language & Literature
Law
Management
Marketing
Philosophy
Political science
Psychology
Religion
Sociology
Travel