Qt 5.4 - Scriptable Qml Application

[wysota]

The second snippet from above actually works. However, this

Component {
	id: networkManager
	url: "../network/NetworkManagerQml.qml"
}

Component {
	id: networkManager
	url: "../network/NetworkManagerQml.qml"
}

To copy to clipboard, switch view to plain text mode 

doesn't work as expected.

Yeah, it's incorrect. You'd need to use Loader instead of that. Component defines a component inline, not refers to an external component. Which is actually pretty stupid that there is no element to load an external component like that I guess you could declare a Component with a Loader inside but then your actual component would have to inherit Item.

As for your question regarding QtObject -- yes, it was a general idea. I'd probably create a dedicated element for this purpose so that I'm sure all implementations have correct API.

[anda_skoa]

The second snippet from above actually works. However, this

Component {
	id: networkManager
	url: "../network/NetworkManagerQml.qml"
}

Component {
	id: networkManager
	url: "../network/NetworkManagerQml.qml"
}

To copy to clipboard, switch view to plain text mode 

doesn't work as expected. See error above. But that's ok I can load the object in a function.

Component {
    NetworkManagerQml {
    }
}

Component {
    NetworkManagerQml {
    }
}

To copy to clipboard, switch view to plain text mode 

Cheers,
_

[wysota]

Component {
    NetworkManagerQml {
    }
}

Component {
    NetworkManagerQml {
    }
}

To copy to clipboard, switch view to plain text mode 

The point is to be able to dynamically choose the component so this will of course work but will not do the job of solving the original problem.

[motaito]

@wysota
I have been playing with this for a while and made some test. So far it's a much better solution than what I had initially. I am very grateful that you took the time to explain everything and provided all the help!

Component defines a component inline, not refers to an external component. Which is actually pretty stupid that there is no element to load an external component like that

I was also thinking that you should be able to just have a path to an external component and load it that way. Then again there is

import "some.qml" as ComponentName

import "some.qml" as ComponentName

To copy to clipboard, switch view to plain text mode 

which provides that functionality. The problem with this is that you have to provide an absolute path for components that are not in the qrc: resources. Since an import can not have a relative or dynamically build path there really should be an option to directly load/link a component based on an url. It would make some things easier.


@anda_skoa
That would essentially hard code it to one specific component. I need to dynamically load different qml files depending on the desired task. The path "../network/NetworkManagerQml.qml" was only there to point out it doesn't work. Technically it would be more like this:

Component {
	id: networkManager
	url: resolvePath(someTask);
}
 
function resolvePath(someTask) {
	// get path to some qml file. Where the qml file
	// can be different depending on the desired task
}

Component {
	id: networkManager
	url: resolvePath(someTask);
}

function resolvePath(someTask) {
	// get path to some qml file. Where the qml file
	// can be different depending on the desired task
}

To copy to clipboard, switch view to plain text mode 

But that leads to the same problem. I neglected to go into more details because I thought that would be clear based on the ongoing discussion. I should have been more specific.

So far this

function loadRresource(requiredTask)
{
	// get path to qml file depending on the task
	var path = resolvePath(requiredTask);
 
	var component = Qt.createComponent(path);
	if (component.status == Component.Ready) {
		var obj = component.createObject(myText);
		if (null == obj)
			console.log("Error creating component: " + component.errorString());
		else
		{
			// this is the tricky part... The obj might need some sort of setup to work
			// find a common way to initialize various components. e.g. setting up signals and slots
			obj.someSetupFunctionHook();
		}
	}
	else
		console.log("Error loading component " + component.errorString());
}

function loadRresource(requiredTask)
{
	// get path to qml file depending on the task
	var path = resolvePath(requiredTask);

	var component = Qt.createComponent(path);
	if (component.status == Component.Ready) {
		var obj = component.createObject(myText);
		if (null == obj)
			console.log("Error creating component: " + component.errorString());
		else
		{
			// this is the tricky part... The obj might need some sort of setup to work
			// find a common way to initialize various components. e.g. setting up signals and slots
			obj.someSetupFunctionHook();
		}
	}
	else
		console.log("Error loading component " + component.errorString());
}

To copy to clipboard, switch view to plain text mode 

seams to work best.


p.s. I will make sure I got it right before I mark the thread as solved. But so far I'm pretty happy with the result.

[wysota]

@wysota
I have been playing with this for a while and made some test. So far it's a much better solution than what I had initially. I am very grateful that you took the time to explain everything and provided all the help!

I was also thinking that you should be able to just have a path to an external component and load it that way. Then again there is

import "some.qml" as ComponentName

import "some.qml" as ComponentName

To copy to clipboard, switch view to plain text mode 

which provides that functionality. The problem with this is that you have to provide an absolute path for components that are not in the qrc: resources. Since an import can not have a relative or dynamically build path there really should be an option to directly load/link a component based on an url. It would make some things easier.

//ExternalComponent.qml
import QtQuick 2.0
 
QtObject {
    id: root
    readonly property real progress: 0
    readonly property int status: Component.Null
    property string url
 
    function createObject(parent, properties) {
      if(__cmp === null) return undefined
      return __cmp.createObject(parent, properties)
    }
    function errorString() {
      if(__cmp === null) return ""
      return __cmp.errorString()
    }
 
    property bool _initialized: false
    property var __cmp: null
 
    onUrlChanged: __maybeInitComponent()
 
    Component.onCompleted: {
        __initialized = true
        __maybeInitComponent()
    }
    function __maybeInitComponent() {
        if(!__initialized) return
        if(url === "") { __cmp = null; return; }
        __cmp = Qt.createComponent(url)
        __cmp.statusChanged.connect(function(st) { root.status = st; })
        __cmp.progressChanged.connect(function(pr) { root.progress = pr; })
        status = __cmp.status
        progress = __cmp.progress
    }
}

//ExternalComponent.qml
import QtQuick 2.0

QtObject {
    id: root
    readonly property real progress: 0
    readonly property int status: Component.Null
    property string url

    function createObject(parent, properties) {
      if(__cmp === null) return undefined
      return __cmp.createObject(parent, properties)
    }
    function errorString() {
      if(__cmp === null) return ""
      return __cmp.errorString()
    }
    
    property bool _initialized: false
    property var __cmp: null

    onUrlChanged: __maybeInitComponent()

    Component.onCompleted: {
        __initialized = true
        __maybeInitComponent()
    }
    function __maybeInitComponent() {
        if(!__initialized) return
        if(url === "") { __cmp = null; return; }
        __cmp = Qt.createComponent(url)
        __cmp.statusChanged.connect(function(st) { root.status = st; })
        __cmp.progressChanged.connect(function(pr) { root.progress = pr; })
        status = __cmp.status
        progress = __cmp.progress
    }
}

To copy to clipboard, switch view to plain text mode 

Not tested

[anda_skoa]

@anda_skoa
That would essentially hard code it to one specific component. I need to dynamically load different qml files depending on the desired task. The path "../network/NetworkManagerQml.qml" was only there to point out it doesn't work.

Then just use the "source" property of the Loader instead of the "sourceComponent" property.
The latter is for declaring components using Component, the former is for your use case, i.e. specifying the element using an URL.

Technically it would be more like this:

Component {
	id: networkManager
	url: resolvePath(someTask);
}

Component {
	id: networkManager
	url: resolvePath(someTask);
}

To copy to clipboard, switch view to plain text mode 

Loader {
    source: resolvePath(someTask);
}

Loader {
    source: resolvePath(someTask);
}

To copy to clipboard, switch view to plain text mode 

Cheers,
_

[motaito]

@wysota
If it doesn't exist, you can always build it yourself While that's an interesting approach, does it actually make it easier than loading the component in a JavaScript function?

@anda_skoa
A Loader might be working for me. Right now I have my tasks in a list. If I click on an item, the component is created. It then makes it's task and deletes itself again. Would that also work when I just clear the source from the Loader (source: "") after the task is completed? I'll try it later when I'm back at at home. Also, I'm unsure this is ideal form me because I need to hook up some signals. What if they are not always the same for each qml file that gets loaded. As far as I know the loader requires something like this:

Item {
    Loader {
       id: myLoader
       source: "MyItem.qml"
    }
 
    Connections {
        target: myLoader.item
        onSignal: slot(arg)  // these need to be flexible
    }
}

Item {
    Loader {
       id: myLoader
       source: "MyItem.qml"
    }

    Connections {
        target: myLoader.item
        onSignal: slot(arg)  // these need to be flexible
    }
}

To copy to clipboard, switch view to plain text mode 

in a JavaScript I can adjust the object creation based on the task. Yet I still have the option to load just one qml file. With a Loader I might need to do something like:

Item {
    Loader {
       id: loader0
       source: ""
    }
 
    Connections {
        target: loader0.item
        onSignal: slot(arg)
    }
 
    Loader {
       id: loader1
       source: ""
    }
 
    Connections {
        target: loader1.item
        onOtherSignal: otherSlot(arg1, arg2)
    }
 
    // add loader placeholders as needed
 
    function performTask(task)
    {
    	// clear loaders, not sure that actually works...
    	loader0.source = "";
    	loader1.source = "";
 
    	// load necessary qml
    	if(1 == task)
    		loader0.source = "some.qml"
    	else
    		loader1.source = "other.qml"
    }
}

Item {
    Loader {
       id: loader0
       source: ""
    }

    Connections {
        target: loader0.item
        onSignal: slot(arg)
    }

    Loader {
       id: loader1
       source: ""
    }

    Connections {
        target: loader1.item
        onOtherSignal: otherSlot(arg1, arg2)
    }

    // add loader placeholders as needed

    function performTask(task)
    {
    	// clear loaders, not sure that actually works...
    	loader0.source = "";
    	loader1.source = "";

    	// load necessary qml
    	if(1 == task)
    		loader0.source = "some.qml"
    	else
    		loader1.source = "other.qml"
    }
}

To copy to clipboard, switch view to plain text mode 

Can a loader be cleared like that? Does then the unneeded Loader take up memory? Technically it also is some object instance so it probably should, even if just a little, right?

[wysota]

Note: While Loader itself is an Item, it can actually load objects which are not items themselves (at least that's what the docs claim).

[motaito]

And I just found the answer to my previous question in the docs as well

If the source or sourceComponent changes, any previously instantiated items are destroyed. Setting source to an empty string or setting sourceComponent to undefined destroys the currently loaded object, freeing resources and leaving the Loader empty.

I guess I'll just try it and see which works best for me.

[anda_skoa]

Would that also work when I just clear the source from the Loader (source: "") after the task is completed?

Yes. Also when "active" is set to false.

As far as I know the loader requires something like this:

Item {
    Loader {
       id: myLoader
       source: "MyItem.qml"
    }
 
    Connections {
        target: myLoader.item
        onSignal: slot(arg)  // these need to be flexible
    }
}

Item {
    Loader {
       id: myLoader
       source: "MyItem.qml"
    }

    Connections {
        target: myLoader.item
        onSignal: slot(arg)  // these need to be flexible
    }
}

To copy to clipboard, switch view to plain text mode 

I am not sure what you mean with "this" in "requires this".
You mean usage of a Connections element?
If so instead of what? Calling connect on the signal and passing the slot?

Cheers,
_

[motaito]

I am not sure what you mean with "this" in "requires this".
You mean usage of a Connections element?
If so instead of what? Calling connect on the signal and passing the slot?

I meant in order to hook up a signal-slot connection that a qml file might need. I am just wondering if I could load different qml files where they have different signals that they emit. In a JavaScript I can connect the signals to slots as needed. But I'm not sure how to do that with a Loader, because it seams that the connection has to be done in the "Connections {}" element. I don't think I can define one single Loader and have variable amounts of signal-slot connections depending on the qml file that gets loaded. Or is that possible?

E.g. some qml file emits signals to update a progress bar, when the task is done it sends a signal to update a text. Another qml might not need the progress bar and only sends a signal to update a text.

Would I have to pre-define the slots in the "Connections {}"? How would I treat such a slot if a loaded qml file wont need it?

Connections {
  onProgress: updateProgressBar(value)  // how to treat this if it's not needed by one of the qml files?
  onText: showText(text)
}

Connections {
  onProgress: updateProgressBar(value)  // how to treat this if it's not needed by one of the qml files?
  onText: showText(text)
}

To copy to clipboard, switch view to plain text mode 

Can I just ignore it because the file would never emit a signal, or would I have to somehow clear the connection?

I am probably over thinking the issue... But you made me curious. I like to tidy up everything. Having unneeded parts leaves me restless I probably have to look at it more like an interface that allows for certain options even if one of the loaded qml files won't need all of them. But will the Loader take care of it on it's own?

[wysota]

I meant in order to hook up a signal-slot connection that a qml file might need. I am just wondering if I could load different qml files where they have different signals that they emit. In a JavaScript I can connect the signals to slots as needed. But I'm not sure how to do that with a Loader, because it seams that the connection has to be done in the "Connections {}" element. I don't think I can define one single Loader and have variable amounts of signal-slot connections depending on the qml file that gets loaded. Or is that possible?

Since the element being loaded knows what signals it requires (or provides) it is the one who should be responsible for making those connections.

[motaito]

Meanwhile I tested it. The loader works pretty great.

// foo.qml
Item {
	id: root
	signal foo(string txt)
	anchors.fill: parent
 
	MouseArea {
		anchors.fill: parent
		onClicked: {
			root.foo("foo clicked");
		}
	}
}
 
// bar.qml
Item {
	id: root
	signal bar(string txt)
	signal baz(string txt)
	anchors.fill: parent
 
	MouseArea {
		anchors.fill: parent
		onClicked: {
			root.bar("bar clicked");
			root.baz("baz clicked");
		}
	}
}
 
// a qml with a loader
Loader {
	id: loader
	source: ""
}
Connections {
	onFoo: textFoo.text = txt  // some text component
	onBar: textBar.text = txt  // some text component
	onBaz: textBaz.text = txt  // some text component
}
 
// execute on some mouse click
function build()
{
	if("foo.qml" == loader.source)
		loader.source = "bar.qml"
	else
		loader.source = "foo.qml"
}

// foo.qml
Item {
	id: root
	signal foo(string txt)
	anchors.fill: parent

	MouseArea {
		anchors.fill: parent
		onClicked: {
			root.foo("foo clicked");
		}
	}
}

// bar.qml
Item {
	id: root
	signal bar(string txt)
	signal baz(string txt)
	anchors.fill: parent

	MouseArea {
		anchors.fill: parent
		onClicked: {
			root.bar("bar clicked");
			root.baz("baz clicked");
		}
	}
}

// a qml with a loader
Loader {
	id: loader
	source: ""
}
Connections {
	onFoo: textFoo.text = txt  // some text component
	onBar: textBar.text = txt  // some text component
	onBaz: textBaz.text = txt  // some text component
}

// execute on some mouse click
function build()
{
	if("foo.qml" == loader.source)
		loader.source = "bar.qml"
	else
		loader.source = "foo.qml"
}

To copy to clipboard, switch view to plain text mode 

It behaves as expected without having to set up anything further. No manual hooking of signal to slots is required. However, if foo.qml gets set as source I have a debug output like:

QML Connections: Cannot assign to non-existent property "onBar"
QML Connections: Cannot assign to non-existent property "onBaz"

QML Connections: Cannot assign to non-existent property "onBar"
QML Connections: Cannot assign to non-existent property "onBaz"

To copy to clipboard, switch view to plain text mode 

and likewise if I set bar.qml as source I have:

QML Connections: Cannot assign to non-existent property "onFoo"

QML Connections: Cannot assign to non-existent property "onFoo"

To copy to clipboard, switch view to plain text mode 

I don't know if I can savely ignore these outputs as they are expected. I am not sure that's good. What do you think, should I just ignore the warrnings and use a Loader?

[wysota]

Your Connections element lacks a target. There is also ignoreUnknownSignals property that will prevent such warnings.

[motaito]

There is also ignoreUnknownSignals property that will prevent such warnings.

Dame, it is so much easier to find stuff in the docu if you know what to look for.

ignoreUnknownSignals : bool
Normally, a connection to a non-existent signal produces runtime errors.

If this property is set to true, such errors are ignored. This is useful if you intend to connect to different types of objects, handling a different set of signals for each object.

So, it's a fairly common thing with a solution ready and not really an issue. Exactly what I was missing.

Thanks to all the help and tips in this thread I have significantly reduced and cleaned up my code. Furthermore, I improved on how to use and understand qml as a declarative environment. I very much appreciate the help from everyone! I think I mark the thread as solved now. I have everything I was looking for and more. The help form everybody is very much appreciated. A special Thanks to wysota for all the details, explanations an code snippets. Thanks again!

Edit: I will mark the thread as solved, as soon as I find out how

[wysota]

Edit: I will mark the thread as solved, as soon as I find out how

Eeem... there is no way to do that currently

[anda_skoa]

I meant in order to hook up a signal-slot connection that a qml file might need. I am just wondering if I could load different qml files where they have different signals that they emit. In a JavaScript I can connect the signals to slots as needed. But I'm not sure how to do that with a Loader, because it seams that the connection has to be done in the "Connections {}" element.

I know this is already solved, but remember that the Loader also has signals and a signal handler is a JavaScript context.
So even if Connections would not have been able to do what you need, you could still have done your connections in the Loader's onLoaded handler.

Cheers,
_