QmlWeb & Qt Webserver

Tue Mar 31 20:03:17 UTC 2015

Hi Christian,

Sorry for the late reply, I've been on holiday for the last week. Still thanks 
for your interest in QmlWeb. :)

On Monday 23 March 2015 03:57:50 you wrote:
> Hi Anton,
> 
> currently I am very interested in web programming with QML and Qt. So some
> questions raises, hopefully you could help me?
> 
> 1.
> I wrote a small library with Qt to get HTTP requests and send HTTP
> responses. Now I thought, I could use the QmlWeb library for client. Is
> there already any solution how to communicate between this Qml and (Qt)
> backend server?
You can use whatever technology you'd use for every html/javascript client 
(XmlHttpRequest or jQuery). You'd open the connection from your global 
javascript scope (where you instantiate QmlWeb) and just use the variables you 
created in the global scope from QML.

Alternatively, you can use QtWebEngine (http://www.kdab.com/qt-webchannel-bridging-gap-cqml-web/):

To use it on client side:

1. include qwebchannel.js into your index.html:
    <script type="text/javascript" src="qmlweb/src/qwebchannel.js"></script>

2. instanciate a websocket and a webchannel in your js-code:

var socket = new WebSocket('example.com:8080/myWebSocketServer');
var myObj;

socket.onclose = function() {
    console.log("web channel closed.");
};
socket.onerror = function(error) {
    console.error("web channel error: " + error);
};
socket.onopen = function() {
    new QWebChannel(socket, function(channel) {
        // Stuff we do when the remote object arrives.
        myObj = channel.objects.myObj;
        myObj.someSignal.connect(function(someArg) {
                //...
        });
    });
}

3. In Qml do whatever you want with it (you can just access your object using
myObj). But attention: You always have to handle the case, the object is not
yet there. Alternatively you can create the QML scene just when the object
arrived.
I plan to implement QMLEngine.registerSingleton(), though, which would then
wait for the channel to be ready, synchronously.

4. For the (C++/Qt-) server side you need (e.g. in your main()):

QWebChannel channel;
QWebSocketServer server("QWebChannel Standalone Example Server",
QWebSocketServer::NonSecureMode);
if (!server.listen(QHostAddress::Any, 10002)) {
    qFatal("Failed to open web socket server.");
    return 1;
}

MyObj myObj;

QObject::connect(&server, &QWebSocketServer::newConnection, [&] () {
    channel.connectTo(new WebSocketTransport(server.nextPendingConnection()));
    // Do some init stuff...
});

channel.registerObject("myObj", &myObj);

> 2.
> Can I combine HTML with this QmlWeb library? I know I can print out HTML for
> example in QML text element, but is there another work around avaiable? For
> example, when I write following:
> 
> <html>
> ....
>    <div id=”box”>any html stuff and so on</div>
>     <script>
>       // qml stuff
>     </script>
>   </body>
> </html>
> 
> Can I communicate between this box and QML? (I think not)
> How is the support to jQuery and how can I use it?
You can integrate html and QML in both ways:

1. To integrate some html stuff you can use Item and use the QmlWeb-specific 
property dom, which exposes the according dom element.
Simply write:
Item {
    dom.innerHTML: "<div>My custom html code</div>"
}

Alternatively if you want to use e.g. jQueryUI, you can use 
Component.onCompleted and use the dom property to append jQueryUI stuff (see 
https://github.com/movetech/dashIT/blob/master/qml/Calendar.qml for an example 
implementing a Calendar component using jQueryUI)

2. To integrate QML into an html page, you have to create an empty div-tag 
somewhere and pass the according dom-node to the constructor of QMLEngine, 
like `var engine = new QMLEngine(document.getElementById("qmlView"));`

Beware that you'll have to manage the size of the scene yourself. It's not 
possible to set it using css to, like 100%, and have the qml scene 
automatically resize on change. That's because there is no element-resize-
event or similar, that QmlWeb could use to know about the change. So, in that 
case always set the (QML) root elements size explicitly and change it 
yourself, if needed.

> 
> 3.
> Also I would like to know whether it is possible to add new QML components
> like Calendar or TextField to this library (on eventually simple way). In
> your presentation at Developer Days 2013 you estimated to need only about a
> half hour for elements like Canvas.^^ A text field element I already write
> for myself, because I want to use placeholder text. But it does not work,
> the signal-slot connection between Text {id:placeholder} and MouseArea
> (onClicked:placeholder.visible=false) will be ignored unfortunately. :(
Currently, you'll have to patch it into QmlWeb (feel free to send me the patch 
:) ), but a mate did a patch to change that ;)
Concerning your text element: See src/qtcore.js, line 3639, there is the code 
for QMLTextInput, it's probably easier to add it there :)
If you succeed, please send me the patch or better add a review request on 
reviewboard.kde.org. I'll gladly include it :)

> 
> I am sorry for this loong loong e-mail and my probably bad English..
> Have a nice day,
> 
> Christian

Kind regards,

Anton

-- 
Kind regards to the NSA.
-------------- next part --------------
A non-text attachment was scrubbed...
Name: signature.asc
Type: application/pgp-signature
Size: 230 bytes
Desc: This is a digitally signed message part.
URL: <http://mail.kde.org/pipermail/qmlweb/attachments/20150331/0d59d1ad/attachment.sig>