Multi 'page' QML application issues with external QML/Javascript

[scgrant327]

You haven't used any of the elements of that directory in the code you provided so far, so it is hard to tell what could be wrong.

Fair enough. To get where my UI is updated as detailed below, I was trying to pass the QML to my javascript function. So, I import the SubPages folder and pass the MainWin.qml to my javascript, but that results in the MainWin undefined error:

function gpsOneShotUpdate() {
        Funcs.gpsOneShotUpdate(MainWin)
    }

function gpsOneShotUpdate() {
        Funcs.gpsOneShotUpdate(MainWin)
    }

To copy to clipboard, switch view to plain text mode 

Ah, I remember now. You are trying to create an artifically complex situation. Any specific reason for that?

Not trying to complicate things...

This is for use on mobile devices... On startup, my app needs to get the users location (which is done via a gpsio.cpp function). Once that location is determined, the app needs to update the UI with that location. This initial location needs to be determined before the initial 'Main Window' is visible.

So... C++ gets location and sets main.qml variables. Then C++ calls main.qml function to update UI on SubPage qml. main.qml function in turn calls javascript function which does the real Text object updates on SubPage qml.

[anda_skoa]

Fair enough. To get where my UI is updated as detailed below, I was trying to pass the QML to my javascript function. So, I import the SubPages folder and pass the MainWin.qml to my javascript, but that results in the MainWin undefined error:

function gpsOneShotUpdate() {
        Funcs.gpsOneShotUpdate(MainWin)
    }

function gpsOneShotUpdate() {
        Funcs.gpsOneShotUpdate(MainWin)
    }

To copy to clipboard, switch view to plain text mode 

You are not passing MainWin.qml but MainWin.
Did you want to pass an instance of MainWin?

I.e. you are trying the C++ equivalent of passing a class name as a function argument.

Not trying to complicate things...

Well, exporting the values is far easier than to call into QML.

This is for use on mobile devices... On startup, my app needs to get the users location (which is done via a gpsio.cpp function). Once that location is determined, the app needs to update the UI with that location. This initial location needs to be determined before the initial 'Main Window' is visible.

So just gather the value and set it as a context property before loading main.qml?

So... C++ gets location and sets main.qml variables.

Which is not jsut very uncommon (creating a C++ -> QML dependency instead of just the other way around), it is also more complicated.

Then C++ calls main.qml function to update UI on SubPage qml. main.qml function in turn calls javascript function which does the real Text object updates on SubPage qml.

Quite complicated, isn't it?

Even if values would change after loading the QML, exposing them via properties on an object would still be easier by far.

The only thing that it is not so easy is to get the equivalent of the return value.
But you don't seem to either return something from the function nor do you try to use the returned value. Quite puzzling why you even retrieve it.

Cheers,
_

[scgrant327]

Did you want to pass an instance of MainWin?

Yes! I guess?

So just gather the value and set it as a context property before loading main.qml?

Going to mod my code and load main.qml (and additionally MainWin.qml inside main.qml), and then use the gpsio function to get and set the values. I am already exposing the necessary variables from main.qml to C++, so the gpsio function can update them as needed.

Which is not jsut very uncommon (creating a C++ -> QML dependency instead of just the other way around), it is also more complicated.

...and 100% necessary. In the end, there will be a gpsio function that continuously updates the QML UI with new values.

The only thing that it is not so easy is to get the equivalent of the return value.
But you don't seem to either return something from the function nor do you try to use the returned value. Quite puzzling why you even retrieve it.

The return value is not necessary. It is left over from me just trying to get everything to work....and copy/pasting code from online examples. The return value can and will be deleted.

[anda_skoa]

Yes! I guess?

Then you need to pass the id of the instance or the name of the property holding the instance.
In C++ you would also pass the name of the variable that hold the pointer to the object, not the class name, right?

I am already exposing the necessary variables from main.qml to C++, so the gpsio function can update them as needed.

I was talking about exposing the C++ values to QML.

...and 100% necessary. In the end, there will be a gpsio function that continuously updates the QML UI with new values.

Not necessary at all, that is what property bindings are for.

The return value is not necessary. It is left over from me just trying to get everything to work....and copy/pasting code from online examples. The return value can and will be deleted.

I see.

Then it is really unnecessary to call a JavaScript function from C++. Getting a return value is basically the only use case for that.

Cheers,
_

[scgrant327]

Ok...some progress...

Property bindings look like they will work fine for my purpose.

Issues:
When calling my javascript functions, why can I not access my QML objects? I get errors about the object being undefined. I've tried by using the alias for the object, the id for the object and the QML file name that houses the object....all give the same error.

AND... do I need to 'import' the parent and SubPages folders into each of my SubPages/*.qml files?
I ask because if I try to reference an object in SubPages/Page1.qml from SubPages/Page2.qml, I get an error about that object being undefined.

For instance, when I load SubPages/Page2.qml using the loader I showed earlier. Page2 has a Label that when clicked on will change a value on Page1. But, if I try this I get an error:

In Page2:

MouseArea {
            anchors.bottom: parent.bottom
            anchors.right: parent.right
 
            Label {
                id: page2Label
                text: qsTr("ClickME")
                horizontalAlignment: Text.AlignRight
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.right: parent.right
                anchors.left: parent.left
                font.pointSize: 24
                color: "lime"
            }
            onClicked: {
                Page1.page1Label.text = page2Label.text
                Page1.page1Label.color = "lime"
                page2Label.color = "darkred"
            }
        }

MouseArea {
            anchors.bottom: parent.bottom
            anchors.right: parent.right

            Label {
                id: page2Label
                text: qsTr("ClickME")
                horizontalAlignment: Text.AlignRight
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.right: parent.right
                anchors.left: parent.left
                font.pointSize: 24
                color: "lime"
            }
            onClicked: {
                Page1.page1Label.text = page2Label.text
                Page1.page1Label.color = "lime"
                page2Label.color = "darkred"
            }
        }

To copy to clipboard, switch view to plain text mode 

[anda_skoa]

Property bindings look like they will work fine for my purpose.

Excellent, bindings on C++ properties is definitely the way to go.
Way more elegant than making C++ code dependent on QML code.

When calling my javascript functions, why can I not access my QML objects? I get errors about the object being undefined. I've tried by using the alias for the object, the id for the object and the QML file name that houses the object....all give the same error.

Can you show such a function and where the objects are defined?

For example your gpsOneShotUpdate() function should be fine if there is an object with id mainWin in the same file or a property with the name mainWin in the object the function is in.

AND... do I need to 'import' the parent and SubPages folders into each of my SubPages/*.qml files?

import allows you access to types, just like includes in C++.
The current directory, i.e. the directory the current QML file is in, is always implicitly imported.

In your case you don't need to import SubPages in main.qml since you are using a Loader, you are not instantiating objects of these types directly in QML code.

I ask because if I try to reference an object in SubPages/Page1.qml from SubPages/Page2.qml, I get an error about that object being undefined.

Access to objects has nothing to do with imports.

For instance, when I load SubPages/Page2.qml using the loader I showed earlier. Page2 has a Label that when clicked on will change a value on Page1. But, if I try this I get an error:

In Page2:

onClicked: {
                Page1.page1Label.text = page2Label.text
                Page1.page1Label.color = "lime"
                page2Label.color = "darkred"
            }
        }

onClicked: {
                Page1.page1Label.text = page2Label.text
                Page1.page1Label.color = "lime"
                page2Label.color = "darkred"
            }
        }

To copy to clipboard, switch view to plain text mode 

Page1 is not a valid id nor a valid property name (both need to start with a lower case letter).

Cheers,
_

[scgrant327]

Ok, I ended up declaring non-visible instances of the SubPages in my main.qml. Works pretty well with my custom 'loader' javascript function to show/hide each page on demand.

Thanks for the help!

[anda_skoa]

You really like doing things imperatively :-)

However, you might want to look into doing things declaratively for future projects, it really pays off and makes things easier.

Cheers,
_