How to fix signals from javascript to qml

Question

I want to release a signal from a javascript file and get it in a qml file (to find when an operation is time consuming).

How can i do this?

Answer 1

Neither Alex nor the Raja solutions actually answer the question. Alex consists in calling directly from javascript in the QML slot method, and Raja consists in setting the property value of the QML object from Javascript code. Both approaches deny the main advantage of the signal / slot mechanism, which is that the signal object does not need to know about the slot.

An approach close to the spirit of the signal / slot mechanism is described in this post (not mine). It consists in creating a QML object in the javascript file (via the Qt.createQmlObject() function), whose only function is to contain the signals of the javascript object. The signals emitted by the call of javascript objects internal signal QML (e.g., internalQmlObject.signalName() ), and the signal javascript object can be connected to slots in QML QML by a conventional mechanism connect through javascriptObject.internalQmlObject.signalName.connect(receiver.slotName) .

The following is a blog example:

javascript_object.js:

 var internalQmlObject = Qt.createQmlObject('import QtQuick 2.0; QtObject { signal someSignal(int value) }', Qt.application, 'InternalQmlObject'); function doSomething() { internalQmlObject.someSignal(42); } 

test.qml:

 import QtQuick 2.0 import 'javascript_object.js' as JavascriptObject Rectangle { Rectangle { id: someComponent function someSlot(v) { console.log("Signal received " + v); } } Component.onCompleted: { JavascriptObject.internalQmlObject.someSignal.connect(someComponent.someSlot); JavascriptObject.doSomething(); } } 

When executed, it gives the following:

 % qmlscene test.qml Signal received 42 

Answer 2

Thanks, @RajaVarma.

I have found a solution for myself.

In the qml file : create an Item element (my loginItem) that contains a function that plays the role of a slot. For example (I need to know when a registration event is logged):

 import "scripts/auth.js" as Auth ... Item { id: loginItem // Send himself to javascript module named Auth Component.onCompleted: { Auth.setLoginItem(loginItem); } // "Slot" function function logged() { console.debug("Login successfully"); // Do something ... } } 

In js file : create a receiver for loginItem and use it.

 var loginItem; function setLoginItem(tempLoginItem) { loginItem = tempLoginItem; } ... // Emit "signal" loginItem.logged(); ... 

Answer 3

Well, these are very hacks to trigger signals from a real JS file. But there the best option, IMHO, used it myself. Create your own class.

Myclass.qml

 import QtQuick 2.0 QtObject { property var myVariable function myFunction() { console.log("emitting signal"); mySignal() } signal mySignal } 

This way you can easily achieve the necessary encapsulation. And you can even connect well to the object.

Then you can do whatever you want with it: create a singleton from it, create a global object, create an instance of it.

Answer 4

QML is a declarative UI language widely used for user interface development. You cannot write too many or complex functions in QML itself. But you can have both JavaScript and QML in one file.

Say, if you want to stop the animation, for example, loading a gif animation, after a time-consuming process, just consider the next line of code.

 loadingAnimation.running = false; 

The above line of code can be called from the JavaScript file itself. If you still think this feature is not enough, let us know your use case.