QML problem with using data from other QML file: ReferenceError: theme is not defined

Nando

Hi,
i have a QML file which i create from my c++ code like this:

   QQuickWidget *registerAccount = new QQuickWidget;
   registerAccount->setSource(QUrl(QStringLiteral("qrc:/qml/RegisterAccount.qml")));
   registerAccount->show();

Inside the RegisterAccount.qml i want to access data from another QML which is also in my resourcers.

RegisterAccount.qml:

Item {
    width: 350; height: 600;

    Rectangle {
        anchors.fill: parent

        color: theme.themeColor0
...

The problem is with the theme object which is defined in another QML (also in the resources) like this:

GeneralSettings.qml:

import QtQuick 2.0

Item {

    QtObject  {
        id: theme

        property color themeColor0: "#0657bc" // main contrast color
        property color themeColor1: "#1f65bc" // main contrast color
        property color themeColor2: "#175eb5" // dark contrast color
        property color themeColor3: "#e09337"
        property color themeColor4: "#EEF0F2"
        property color themeColor5: "#A0A0A0"
        property color themeColor6: "#424248"
        property color themeColor7: "#FAFAFA"
        property color themeColor8: "#CACACA"




    }
}

But i always get the error:

qrc:/qml/RegisterAccount.qml:22: ReferenceError: theme is not defined

How can i make the GeneralSettgins.qml available to my (main) qml RegisterAccount.qml ?
Any ideas?

Thank you for your help.

Nando

Diracsbracket

Hi @Nando
The problem is that inside RegisterAccount.qml, you never instantiate a GeneralSettings.qml object.

If both QML files are in the same directory, you can simply modify RegisterAccount.qml like this:

Item {
    width: 350; height: 600;
  
    GeneralSettings {
          id: theme
    }

    Rectangle {
        anchors.fill: parent

        color: theme.themeColor0
       ...
}

If the qml files are in different directories, you must add an import statement for the file.

For the above to work as is, you should also simplify your GeneralSettings.qml file as follows:

Item {
        property color themeColor0: "#0657bc" // main contrast color
        property color themeColor1: "#1f65bc" // main contrast color
        property color themeColor2: "#175eb5" // dark contrast color
        property color themeColor3: "#e09337"
        property color themeColor4: "#EEF0F2"
        property color themeColor5: "#A0A0A0"
        property color themeColor6: "#424248"
        property color themeColor7: "#FAFAFA"
        property color themeColor8: "#CACACA"
}

ODБOï

@Nando
another way to do that is to declare your GeneralSettings as singleton

pragma Singleton
import QtQuick 2.0

Item {
 property alias theme1 : theme
    QtObject  {
        id: theme

        property color themeColor0: "#0657bc" // main contrast color
        property color themeColor1: "#1f65bc" // main contrast color
        property color themeColor2: "#175eb5" // dark contrast color
        property color themeColor3: "#e09337"
}

you have to create a simple file in your project folder called qmldir
//qmldir

singleton MyStyle 1.0 generalSettings.qml

then in your pages do

import "." // your generalSettings.qml

then you can write

Item {
    width: 350; height: 600;
  
  /*  GeneralSettings { // no need
          id: theme
    }*/

    Rectangle {
        anchors.fill: parent

        color: MyStyle.theme1.themeColor0
       ...
}

see this page for more : http://wiki.qt.io/Qml_Styling

Nando

@LeLev, @Diracsbracket : Sorry for my late answer. And Thank you very much for your answer. Great to have such a big community arround!
I will use it like you recommend it.

Greetings
Nando