A few design questions...

mzimmers

I meant that you need to implement a setCombGainI( int ) slot on your GUI class (Widget in the original example). This should modify the text string passed to the QLabel.

OK, so I'm going to modify setValue, right? Apart from (temporarily) changing it to work with only one variable, what else am I going to do? It still seems like I'm missing the "hook up" to a "real" GUI. Am I still going to use the ui->label->setText call for this?

ZapB

Yes that is right. The bit that I think is still missing is modifying the class with the properties to emit the notification signals when you have calculated new values.

Modifying the setData() slot to work with a single int and modifying the connect call should be all that is needed in addition.

I'll try to get a simple QML demo up and running shortly that shows how this will fit together.

mzimmers

OK, thanks, Zap. I'll stand by to hear from you on this before I make these changes. So, will I be doing some work within Designer for this upcoming step?

EDIT: hey, Zap...can you give me a sneak preview as to what the call to the new GUI will look like (or at least where to find it in the docs?) That might be enough to get me launched on this.

Thanks.

ZapB

Righto here goes...I have had to split this into multiple posts as the original was too large for a single post. Maybe I should turn this in to a wiki article ;-)

I have chosen to modify the original example that I gave you in the other thread - the one with our custom Widget class and the Generator class. I have renamed the property to combGainI to match your naming scheme so that it is easier for you to see how it would map across to your case.

In this example I have decided to keep the old QWidget based GUI and to extend it with a QML based widget that operates in parallel. This way you can see how both types of GUI can use the same C++ backend as a data source. I could of course added in a third view which was based on QGraphicsView but that is probably too much for a simple example ;-)

I'll present it as if we are starting from scratch but more briefly than before. So let's get started...

In qt-creator create a new Qt C++ project and choose QWidget as the base class of our main widget. Use designer to edit the ui file and add a QLabel and a QDeclarative view and lay them out vertically in the widget as shown below.

!http://www.theharmers.co.uk/simple-example-form.png(designer-form)!

The two parts of the form demonstrate the use of QWidget-based GUI elements and using QML for a declarative approach. For completeness the raw xml for widget.ui is:

@
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>Widget</class>
<widget class="QWidget" name="Widget">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>494</width>
<height>328</height>
</rect>
</property>
<property name="windowTitle">
<string>Widget</string>
</property>
<layout class="QVBoxLayout" name="verticalLayout">
<item>
<widget class="QLabel" name="label">
<property name="text">
<string>CombGainI =</string>
</property>
<property name="alignment">
<set>Qt::AlignCenter</set>
</property>
</widget>
</item>
<item>
<widget class="QDeclarativeView" name="declarativeView">
<property name="sizePolicy">
<sizepolicy hsizetype="Preferred" vsizetype="Expanding">
<horstretch>0</horstretch>
<verstretch>0</verstretch>
</sizepolicy>
</property>
</widget>
</item>
</layout>
</widget>
<layoutdefault spacing="6" margin="11"/>
<customwidgets>
<customwidget>
<class>QDeclarativeView</class>
<extends>QGraphicsView</extends>
<header>QtDeclarative/QDeclarativeView</header>
</customwidget>
</customwidgets>
<resources/>
<connections/>
</ui>
@

The main() function just creates our custom Widget and shows it:

@
#include <QtGui/QApplication>
#include "widget.h"

int main( int argc, char* argv[] )
{
QApplication a( argc, argv );
Widget w;
w.show();
return a.exec();
}
@

ZapB

Now we get to the interesting parts. We'll take a look at the Generator class first. The generator class is what is used to calculate new values of a property. Here is the class declaration:

@
#ifndef GENERATOR_H
#define GENERATOR_H

#include <QObject>

class Generator : public QObject
{
Q_OBJECT
Q_PROPERTY( int combGainI READ combGainI NOTIFY combGainIChanged )

public:
explicit Generator( QObject* parent = 0 );

int combGainI() const { return m_combGainI; }

public slots:
void calculateNextValue();

signals:
void combGainIChanged();

private:
int m_combGainI;
};

#endif // GENERATOR_H
@

As you can see we declare a single member variable, m_combGainI, which we expose via the Q_PROPERTY macro as a read-only property. That is not to say that we can't change th evalue of the variable, just that its value can only be changed form within the class but not via the property system.

Note that in accordance with the Q_PROPERTY statement we provide a getter function and a notifier signal that we must emit when the property changes.

We also provide a handy function for the purposes of this example that allows a new value of the combGainI property to be calculated, calculateNextValue().

Here is the implementation of the Generator class:

@
#include "generator.h"

Generator::Generator( QObject* parent ) :
QObject( parent ),
m_combGainI( 0 )
{
}

void Generator::calculateNextValue()
{
// Calculate a new value
++m_combGainI;

// Let the world know this property has changed
emit combGainIChanged();

}
@

As you can see it is very simple. The calculateNextValue() function simply increments our member variable and then emits the appropriate property change notifier signal. Note that the signal implementation is provided by the moc during the build process.

That is all there is to our Generator class. Of course in your real application the calculations will likely be much more complex than this but this is enough to give you an idea of how it all works.

Now let's take a look at the Widget class. We have already layed out the ui for our Widget class consisting of a QLabel and a QDeclarativeView. Here is the declaration of the Widget class:

@
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

namespace Ui {
class Widget;
}

class Generator;

class QTimer;

class Widget : public QWidget
{
Q_OBJECT

public:
explicit Widget( QWidget* parent = 0 );
~Widget();

public slots:
void updateCombGainI();

protected:
void keyPressEvent( QKeyEvent* e );

private:
Ui::Widget ui;
QTimer m_timer;
Generator* m_generator;
};

#endif // WIDGET_H
@

This is a very simple class. We declare the ui member variable as per usual along with a pointer to a Generator object and a QTimer which is used to periodically call Generator::calculateNextValue().

I have also overridden the virtual QWidget::keyPressEvent( QKeyEvent* ) function in this class. As you'll see below, the implementation of this function simply quits the running application when the user presses the escape key.

ZapB

Here is the implementation of the Widget class:

@
#include "widget.h"
#include "ui_widget.h"

#include "generator.h"

#include <QCoreApplication>
#include <QDeclarativeContext>
#include <QKeyEvent>
#include <QTimer>

Widget::Widget( QWidget* parent ) :
QWidget( parent ),
ui( new Ui::Widget ),
m_timer( new QTimer( this ) ),
m_generator( new Generator( this ) )
{
ui->setupUi( this );

// Use a couple of connections to do something useful.

// This one causes new data to be calculated once a second (once the timer is started)
connect( m_timer, SIGNAL( timeout() ), m_generator, SLOT( calculateNextValue() ) );

// This one causes the new data to update the GUI
connect( m_generator, SIGNAL( combGainIChanged() ), this, SLOT( updateCombGainI() ) );

// Get a pointer to the declarative view
QDeclarativeView* view = ui->declarativeView;

// We need to tell the declarative view about our C++ object that we wish to expose.
// The exposed object and it's API form the interface with which our QML interacts.
view->rootContext()->setContextProperty( "generator", m_generator );

// Now load a qml file that binds to properties of this C++ object.
view->setSource( QUrl( "qrc:/simple.qml" ) );

// Start the timer off to kick things into motion
m_timer->start( 1000 );

}

Widget::~Widget()
{
delete ui;
}

void Widget::updateCombGainI()
{
int combGainI = m_generator->combGainI();
QString s = QString( "CombGainI = %1" ).arg( combGainI );
ui->label->setText( s );
}

void Widget::keyPressEvent( QKeyEvent* e )
{
switch ( e->key() )
{
case Qt::Key_Escape:
QCoreApplication::instance()->quit();
break;

    default:
        QWidget::keyPressEvent( e );
}

}
@

Let's look at the parts that implement the QWidget-based part of the GUI first. In the constructor we call

@ui->setupUi( this );@

to instantiate the actual widgets that we layed out in designer. Then we make a couple of connections that cause the timer to trigger a call to Generator::calculateNextValue() and also calls the function Widget::updateCombGainI() when the Generator class emits its notifier signal:

@
// Use a couple of connections to do something useful.

// This one causes new data to be calculated once a second (once the timer is started)
connect( m_timer, SIGNAL( timeout() ), m_generator, SLOT( calculateNextValue() ) );

// This one causes the new data to update the GUI
connect( m_generator, SIGNAL( combGainIChanged() ), this, SLOT( updateCombGainI() ) );
@

And finally in the constructor we start off the timer:

@
m_timer->start( 1000 );
@

The other half of the QWidget-based GUI is to actually show the updates in the QLabel. This is done in the function

@
void Widget::updateCombGainI()
{
int combGainI = m_generator->combGainI();
QString s = QString( "CombGainI = %1" ).arg( combGainI );
ui->label->setText( s );
}
@

Since we are using the property notifier signal which has no arguments we first need to query the Generator object for the new value. Then we construct a string using that value and set it as the text property of the label. All simple stuff and nothing new here.

ZapB

Now let's consider the declarative approach. Looking at the Widget constructor again, we see that we get a pointer to the declarative view. Using this pointer we first expose our m_generator member variable to the world of QML by using the QDeclarativeContext associated with the view:

@view->rootContext()->setContextProperty( "generator", m_generator );@

This is a very important line. What this means is that within the qml file that we use the actual member variable m_generator from C++ will be available to use in the qml file as an object called "generator".

Think about that for a moment as this is the crucial part of linking our familar world of C++ with the brave new world of QML. The implications in this case are that we can bind properties of QML elements to javascript expressions including references to properties of the "generator" object. If our "generator" object also had writable properties we could set those properties from within QML too.

With this in mind it should be clear that the "generator" object and the API of the Generator class form the programming interface to our application for QML. When exposing objects to QML (or QtScript) it pays to think about what objects you should expose and what properties and invokable functions those objects should have. Choosing wisely is a key to a good design and a clean interface between C++ and QML/javascript.

OK, now that we have exposed the "generator" object (m_generator in C++) we can now proceed to load a qml file:

@
view->setSource( QUrl( "qrc:/simple.qml" ) );
@

Here I have decided to compile the qml file into the application to avoid the resource location issues that you know all about ;-) The contents of the resource file, simple.qrc are trivial:

@
<RCC>
<qresource prefix="/">
<file>simple.qml</file>
</qresource>
</RCC>
@

Now let's look at the actual content of the QML file. I simply added a new qml using qt-creator and edited it to look like this:

@
import QtQuick 1.0

Rectangle {
id: myRect
width: 100
height: 62
color: "#008000"

Text {
    // Here we use the expose "generator" object to set the text
    text: "CombGainI = " + generator.combGainI;
    anchors.centerIn: parent
}

Connections {
    target: generator
    onCombGainIChanged: {
        // This is not very declarative way of toggling the color but
        // this is just to show how simple it is to do things
        if ( myRect.color == "#008000" )
            myRect.color = "#ff0000";
        else
            myRect.color = "#008000";
    }
}

}
@

As you can see this is a very trivial QML file for demonstration purposes. It consists of a Rect item and within that a Text item. The Rect item has an id of "myRect" so that we can refer to it from elsewhere in the file. We set soem basic dimensions and then set the color to green.

Look carefully at the Text item. The line anchors.centerIn: parent simple tell the layout system to centre the text item in it's parent ie myRect. The magic line though is:

@text: "CombGainI = " + generator.combGainI;@

This establishes what is known as a "property binding". That is, the text property of the Text element is bound to the javascript expression which concatenates the string "CombGainI = " and the combGainI property of the "generator" object that we exposed in the constructor of the Widget class.

Once you have declared this property binding the QML framework does some bookkeeping and notices that the text property is dependent upon the "generator" object's combGainI property. It is kind enough to put in some glue such that anytime the combGainI property changes (and emits the notifier signal) the expression is re-evaluated and the text property updated.

That is the other part of the magic bridge between the worlds of C++ and QML. So to summarise the two aspects are:

Expose objects that have properties from C++ to QML using QDeclarativeContext::setContextProperty()

Use those exposed object's properties in property bindings in your QML documents.

I have added a little extra at the end of the simple.qml file that shows one way in which the background colour of the rectangle, myRect, can be toggled as a result of the combGainI property changing. In this case it is simply toggled between green and red.

When you build and run this example you should see the QLabel and the QML scene changing to show the new value of combGainI once every second. The rect in the QML scene will also flip between red and green.

Anyway that is the end of this long post. I hope it gives you an basic idea of how to couple C++ and QML together in order to display data calculated in C++ in a GUI written with QML.

It is a lot to take in at first but I have tried to highlight the important concepts. Feel free to come back with questions if you have any.

Happy hacking.

mzimmers

Hey, Zap -

Thanks a ton for all this work. I will have more questions soon, I'm sure, but right now...I don't see how to go about editing the .qrc file. I've created it, but it won't let me put anything in it. Advice?

Thanks again.

EDIT:

I might as well mention some build errors:

@ view->rootContext()->setContextProperty("soc", soc);@

is giving this:

bq. error: invalid use of incomplete type 'struct QDeclarativeContext'

soc is an instance of my Soc class; I've been using that instead of the m_generator variable. Did I mess this up?

I'm getting a similar error for QKeyEvent.

Thanks...

ZapB

Ah sorry I realised as I was going to sleep last night that I missed a trivial but important aspect to get this to build - you need to edit the .pro file so that it includes the line:

@QT += core gui declarative@

and re-run qmake. This will then tell qmake to add directives to the Makefile to allow the compiler and linker to find the QtDeclarative headers and libraries. Sorry about that.

To edit the .qrc file, just click on it in qt-creator. This will open it in the resource editor. Click on the "Add" button and choose "Add prefix". Then edit the prefix to "/" in the line edit below. Then click on "Add"->"Add Files..." and in the file dialog choose your .qml file. That's it. Your .qml file will now get compiled into your application.

Don't forget to add:

@
#include <QDeclarativeContext>
#include <QKeyEvent>
@

in your .cpp file.

ZapB

To make things easier I have uploaded a tarball of the example to my "webserver":http://www.theharmers.co.uk/simpletest.tar.gz. Just download it, unpack it and run qmake && make.

mgran

Kudos ZapB, good stuff :)

ZapB

Thank you Marius. If there is interest, I'll redo this and the pre-cursor as tutorials on the wiki.

mgran

[quote author="ZapB" date="1301993122"]Thank you Marius. If there is interest, I'll redo this and the pre-cursor as tutorials on the wiki.[/quote]

Would be nothing short of fantastic if you could do that :) Cheers!

ZapB

Hmmm, OK I think I feel a little tutorial series coming on. ;-)

mzimmers

I'm still getting one compiler error, and as fate would have it, it's on the line you described above as "very important."

First, a bit of context may be helpful. Here's the private section of my Widget class:

@private:
Ui::Widget *ui;
QTimer *m_timer;
Soc *soc;@

So, soc is what I'm using instead of m_generator. It's the top-level class/data structure in my program.

In widget.cpp, this line is giving me an error:

@ view->rootContext()->setContextProperty("soc", soc);@

[quote]error: invalid use of incomplete type 'struct QDeclarativeContext'
/Library/Frameworks/QtDeclarative.framework/Versions/4/Headers/qdeclarativeview.h:59: error: forward declaration of 'struct QDeclarativeContext[/quote]

What did I do wrong? Thanks.

ZapB

Sounds like you missed the line:

@#include <QDeclarativeContext>@

mzimmers

[quote author="ZapB" date="1302014795"]Sounds like you missed the line:

@#include <QDeclarativeContext>@[/quote]

Awcrud. You're right. So, do I still need both QDeclarativeView, or does QDeclarativeContext include that for me?

By the way, I followed your instructions on the creation of the .qrc file. I think it worked OK, but it doesn't look like your example above. It just has two lines: the slash and the filename. Not sure if that's a problem.

Thanks!

ZapB

My example only used:

@#include <QDeclarativeContext>@

The header for the view is included by the generated ui code.

Wrt to the qrc file, I am not sure. Try it and see what happens ;-) If the worst happens just download my entire example from "here":http://www.theharmers.co.uk/simpletest.tar.gz

mzimmers

Seems to work fine.

I just realized that I'd chosen the wrong variable(s) to display via the GUI. This will give me a good chance to see whether I understand this stuff enough to correctly change the program. Once I get this fixed, I'll report back, and we can talk about the next step, if that's OK with you.

EDIT:

Something I've been meaning to ask: what's the purpose of the convention of naming object elements with the "m_" prefix?

ZapB

The "m_" prefix is a subset of Hungarian notation that I choose to use as it helps me distinguish between local and member variables. I also use "ms_" prefix for static member variables. I do not bother encoding the type into the variable name as is done with full Hungarian notation though.

It's just a question of style. Other people will use different conventions.

What is your next step that you want to achieve?

Edit: NB Qt does not use Hungarian notation in its code base.

QtWS: Super Early Bird Tickets Available!

A few design questions...

Expose objects that have properties from C++ to QML using QDeclarativeContext::setContextProperty()

Use those exposed object's properties in property bindings in your QML documents.