diff options
Diffstat (limited to 'examples')
| -rw-r--r-- | examples/hybridshell/qml/hybridshell/index.html | 62 | ||||
| -rw-r--r-- | examples/hybridshell/qml/hybridshell/main.qml | 18 | ||||
| -rw-r--r-- | examples/qmlapp/index.html | 14 | ||||
| -rw-r--r-- | examples/qmlapp/qmlapp.qml | 47 | ||||
| -rw-r--r-- | examples/qtobject/qml/qtobject/index.html | 26 | ||||
| -rw-r--r-- | examples/qtobject/qml/qtobject/main.qml | 15 |
6 files changed, 110 insertions, 72 deletions
diff --git a/examples/hybridshell/qml/hybridshell/index.html b/examples/hybridshell/qml/hybridshell/index.html index a76f047..b93daab 100644 --- a/examples/hybridshell/qml/hybridshell/index.html +++ b/examples/hybridshell/qml/hybridshell/index.html @@ -1,38 +1,48 @@ +<!DOCTYPE html> <html> <head> - <style> + <title>QML/HTML Hybrid Shell</title> + <style type="text/css"> + html, body { + margin:0; + padding:0; + width:100%; + height:100%; + } + #layout { + height:100%; + width:92%; + margin: 0 auto; + } #output { - width:92%; height: 95%; display: block; + width:100%; + margin-top:1%; + height: 94%; + display: block; border-radius: 5px; border-style: solid; border-color: #666666; background-image: -webkit-linear-gradient(left top,#dddddd, #ffffff) } #input { - width:92%; height: 5%; display: block; background-color: #dddddd; + width:100%; + height: 3%; + margin-top:1%; + margin-bottom:1%; + display: block; + background-color: #dddddd; border-radius: 3px; border-style: solid; border-color: #dddddd; background-image: -webkit-linear-gradient(left,#eeeeee, #cccccc) } </style> - <script> - document.write('<script src="' + (/[?&]webChannelBaseUrl=([A-Za-z0-9\-:/]+)/.exec(location.search)[1]) + '/webchannel.js/createWebChannel"><' + '/script>'); - </script> - <script> + <script type="text/javascript" src="qrc:///qwebchannel/webchannel.js"></script> + <script type="text/javascript"> function out(line) { document.querySelector("#output").value += line + "\r\n"; } - window.onload = function() { - out("Starting..."); - createWebChannel(function(webChannel) { - window.navigator.webChannel = webChannel; - out("Ready"); - webChannel.subscribe("stdout", out); - }); - }; - function send() { var input = document.querySelector("#input"); @@ -48,13 +58,25 @@ case 13: send(); break; - } } + + window.onload = function() { + out("Starting..."); + + var baseUrl = (/[?&]webChannelBaseUrl=([A-Za-z0-9\-:/]+)/.exec(location.search)[1]); + new QWebChannel(baseUrl, function(webChannel) { + window.navigator.webChannel = webChannel; + out("Ready"); + webChannel.subscribe("stdout", out); + }); + } </script> </head> - <body marginleft=0 margintop=0 style="width:480px; height: 800px"> - <textarea readonly id="output" ></textarea> - <input type="text" id="input" onkeyup="handleKey(event.keyCode)"></input> + <body> + <div id="layout"> + <textarea readonly id="output" ></textarea> + <input type="text" id="input" onkeyup="handleKey(event.keyCode)"></input> + </div> </body> </html> diff --git a/examples/hybridshell/qml/hybridshell/main.qml b/examples/hybridshell/qml/hybridshell/main.qml index c46aaa2..d6d598d 100644 --- a/examples/hybridshell/qml/hybridshell/main.qml +++ b/examples/hybridshell/qml/hybridshell/main.qml @@ -51,27 +51,33 @@ Rectangle { id: shell onStdoutData: { console.log(data); - webChannel.broadcast("stdout", data); + webChannel.sendMessage("stdout", data); } onStderrData: { - webChannel.broadcast("stderr", data); + console.error(data); + webChannel.sendMessage("stderr", data); } } WebChannel { id: webChannel - onExecute: { - shell.exec(requestData); + onRawMessageReceived: { + shell.exec(JSON.parse(rawMessage).data); } - onBaseUrlChanged: shell.start() + onInitialized: { + shell.start() + webView.url = "index.html?webChannelBaseUrl=" + webChannel.baseUrl; + } } width: 480 height: 800 WebView { + id: webView anchors.fill: parent - url: "index.html?webChannelBaseUrl=" + webChannel.baseUrl + url: "about:blank" + experimental.preferences.developerExtrasEnabled: true } } diff --git a/examples/qmlapp/index.html b/examples/qmlapp/index.html index f62a386..4f4593c 100644 --- a/examples/qmlapp/index.html +++ b/examples/qmlapp/index.html @@ -1,15 +1,15 @@ +<!DOCTYPE html> <html> <head> - <script> - document.write('<script src="' + (/[?&]webChannelBaseUrl=([A-Za-z0-9\-:/]+)/.exec(location.search)[1]) + '/webchannel.js/createWebChannel"><' + '/script>'); + <script type="text/javascript" src="qrc:///qwebchannel/webchannel.js"></script> + <script type="text/javascript"> function output(x) { document.querySelector("#out").innerHTML += x + "<br/>"; } - </script> - <script> window.onload = function() { - createWebChannel(function(c) { + var baseUrl = (/[?&]webChannelBaseUrl=([A-Za-z0-9\-:/]+)/.exec(location.search)[1]); + new QWebChannel(baseUrl, function(c) { c.subscribe( "foobar", function(message) { @@ -18,9 +18,9 @@ ); window.send = function() { c.exec( - JSON.stringify({a:"This is a request from HTML"}), + {a:"This is a request from HTML"}, function(response) { - output(JSON.parse(response).b); + output(response.b); } ); }; diff --git a/examples/qmlapp/qmlapp.qml b/examples/qmlapp/qmlapp.qml index f82973e..6599bf1 100644 --- a/examples/qmlapp/qmlapp.qml +++ b/examples/qmlapp/qmlapp.qml @@ -43,48 +43,55 @@ import QtQuick 2.0 import Qt.labs.WebChannel 1.0 import QtWebKit 3.0 +import QtWebKit.experimental 1.0 Rectangle { - width: 1000 - height: 360 + width: 500 + height: 600 WebChannel { id: webChannel - onExecute: { - console.log(requestData); - var data = JSON.parse(requestData); - txt.text = data.a; - response.send(JSON.stringify({b:'This is a response from QML'})); + onRawMessageReceived: { + console.log(rawMessage); + var msg = JSON.parse(rawMessage); + editor.text += msg.data.a + "\n"; + sendMessage("b", "This is a response from QML"); } - onBaseUrlChanged: { + onInitialized: { console.log(baseUrl); } } - WebView { - id: webView - url: "index.html?webChannelBaseUrl=" + webChannel.baseUrl; - anchors.top: txt.bottom - height: 2000 - width: 2000 - } - TextEdit { - width: 1000 - height: 100 + text: "enter data here\n" id: editor anchors.top: parent.top + width: parent.width + height: 400 } + Text { id: txt - text: "Click" anchors.top: editor.bottom + width: parent.width + height: 100 + text: "Click to send message to HTML client" MouseArea { anchors.fill: parent onClicked: { - webChannel.broadcast("foobar", JSON.stringify(editor.text)); + webChannel.sendMessage("foobar", editor.text); } } } + + WebView { + id: webView + width: parent.width + anchors.top: txt.bottom + height: 100 + url: "index.html?webChannelBaseUrl=" + webChannel.baseUrl; + experimental.preferences.developerExtrasEnabled: true + } + } diff --git a/examples/qtobject/qml/qtobject/index.html b/examples/qtobject/qml/qtobject/index.html index c5e2800..a4a94ed 100644 --- a/examples/qtobject/qml/qtobject/index.html +++ b/examples/qtobject/qml/qtobject/index.html @@ -1,24 +1,22 @@ <html> <head> + <script type="text/javascript" src="qrc:///qwebchannel/webchannel.js"></script> + <script type="text/javascript" src="qrc:///qwebchannel/qobject.js"></script> <script type="text/javascript"> - var base = (/[?&]webChannelBaseUrl=([A-Za-z0-9\-:/]+)/.exec(location.search)[1]); - document.write('<script src="' + base + '/webchannel.js/setupWebChannel"><'+'/script>'); - document.write('<script src="' + base + '/qobject.js"><'+'/script>'); window.output = function(x) { document.querySelector("#out").innerHTML += x + "\n"; } - window.onload = function() { - setupWebChannel(function(webChannel) { - setupQObjectWebChannel(webChannel, function() { - testObject1.sig1.connect(function(a, b, c) { output("1 sig1" + a + b + c); }); - testObject1.sig2.connect(function() { output("1 sig2"); }); - testObject2.sig1.connect(function(a, b, c) { output("2 sig1" + a + b + c); }); - testObject2.sig2.connect(function() { output("2 sig2"); }); - testObject3.sig1.connect(function(a, b, c) { output("3 sig1" + a + b + c); }); - testObject3.sig2.connect(function() { output("3 sig2"); }); - }); + var baseUrl = (/[?&]webChannelBaseUrl=([A-Za-z0-9\-:/]+)/.exec(location.search)[1]); + new QWebChannel(baseUrl, function(channel) { + setupQObjectWebChannel(channel, function() { + testObject1.sig1.connect(function(a, b, c) { output("1 sig1" + a + b + c); }); + testObject1.sig2.connect(function() { output("1 sig2"); }); + testObject2.sig1.connect(function(a, b, c) { output("2 sig1" + a + b + c); }); + testObject2.sig2.connect(function() { output("2 sig2"); }); + testObject3.sig1.connect(function(a, b, c) { output("3 sig1" + a + b + c); }); + testObject3.sig2.connect(function() { output("3 sig2"); }); }); - } + }); </script> </head> <body> diff --git a/examples/qtobject/qml/qtobject/main.qml b/examples/qtobject/qml/qtobject/main.qml index 2ca26ec..7a63cd2 100644 --- a/examples/qtobject/qml/qtobject/main.qml +++ b/examples/qtobject/qml/qtobject/main.qml @@ -68,14 +68,19 @@ Rectangle { WebChannel { id: webChannel - onExecute: { - var payload = JSON.parse(requestData); - if (!publisher.handleRequest(payload, webChannel, response)) { - console.log("unhandled request: ", requestData); + onRawMessageReceived: { + if (!publisher.handleRequest(rawMessage, webChannel)) { + console.log("unhandled request: ", rawMessage); } } - onInitialized: publisher.registerObjects({"testObject1": testObject1, "testObject2": testObject2, "testObject3":testObject3}); + onInitialized: { + publisher.registerObjects({ + "testObject1": testObject1, + "testObject2": testObject2, + "testObject3":testObject3 + }); + } } width: 480 |