How to use QML in C++ application

[JPNaude]

Hi

We have developed a calculator in Qt Quick which consists of a few files:
1) A few .png files
2) 3 QML files
3) 1 Javascript file

It works perfectly in the Qt QML Viewer. Now we are trying to use this in our main application. We added all these files to a .qrc resource file and tried to show the main file like this:

QDeclarativeView view = new QDeclarativeView;
view->setSource(QUrl("qrc:/qml/Calculator.qml"));
view->show();

QDeclarativeView view = new QDeclarativeView;
view->setSource(QUrl("qrc:/qml/Calculator.qml"));
view->show();

To copy to clipboard, switch view to plain text mode 

This shows a blank view. We also tried to load the file from our hard drive in which case it shows, but it does not find any images etc.

Any suggestions on how this must be done will be appreciated.
Thanks
Jaco

[wysota]

Is this the exact code? Does it compile? I'm asking because line #1 is missing an asterisk.

[JPNaude]

Hi

Sorry that was a typo. In the application we are using a d-pointer which contains the view. I removed this to make the example easier to understand.

Some progress information:
1) I managed to get it working from my hard drive. When I copied the files from the place where it was developed into the resource folder I moved the images and that is why they did not load. When I fixed it it works fine. This is the code:

QDeclarativeView* view = new QDeclarativeView;
view->setSource(QUrl::fromLocalFile("D:/Work/Calculator/resources/qml/Calculator.qml"));
view->show();

QDeclarativeView* view = new QDeclarativeView;
view->setSource(QUrl::fromLocalFile("D:/Work/Calculator/resources/qml/Calculator.qml"));
view->show();

To copy to clipboard, switch view to plain text mode 

2) However trying to get it to work out of the qt resource system still displays an empty white view.

Thanks,
Jaco

[wysota]

How do you refer to the other files that are called from within your qml file?

[JPNaude]

Just by their names. For example:

Image {
        anchors.fill: parent
        smooth: false
        source: "background.png"
        fillMode: Image.Stretch
    }

Image {
        anchors.fill: parent
        smooth: false
        source: "background.png"
        fillMode: Image.Stretch
    }

To copy to clipboard, switch view to plain text mode 

[wysota]

You have to tell Qt they are contained within the resource system.

Image {
        anchors.fill: parent
        smooth: false
        source: "qrc:/background.png"
        fillMode: Image.Stretch
}

Image {
        anchors.fill: parent
        smooth: false
        source: "qrc:/background.png"
        fillMode: Image.Stretch
}

To copy to clipboard, switch view to plain text mode 

[JPNaude]

Thank you that makes sense. I've changed it but I can still not see if it is working because when I try to load the main .qml file from the resource system it does not show. This is how I set the source.

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

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

To copy to clipboard, switch view to plain text mode 

I believe this is the correct way to construct a QUrl for something in the resource system because I found this in the documentation for QTextBrowser:

If you want to load documents stored in the Qt resource system use qrc as the scheme in the URL to load. For example, for the document resource path :/docs/index.html use qrc:/docs/index.html as the URL with setSource().

Am I missing something?

[wysota]

Make sure those files are really compiled into the resource system. Try listing all files under "qrc:/" directory (e.g. using QDir).

[JPNaude]

Ok I solved it!

While stepping into the setSource() function with the debugger I realized it was printing something to the app output. It could not find the javascript file since the case sensitivity was wrong, in the emulator it worked but not in the view.

One thing to note was that the images only worked when it did not have the qrc:/ infront of it.