summaryrefslogtreecommitdiff
path: root/examples
diff options
context:
space:
mode:
authorMilian Wolff <milian.wolff@kdab.com>2013-10-31 16:27:55 +0100
committerPierre Rossi <pierre.rossi@gmail.com>2013-11-01 13:57:48 +0100
commitb2eeff74bc4e0e003bc01bf108c9d90dd6794606 (patch)
treea4fbdd81fac3c5510c574eb05b5d73f2203abf88 /examples
parente42d338fde6a40b3672950530f3712cf6cb631a7 (diff)
downloadqtwebchannel-b2eeff74bc4e0e003bc01bf108c9d90dd6794606.tar.gz
Refactor QWebChannel to use a custom WebSocket server implementation.
The code is much simpler in my opinion and much faster and far more stable. Especially the timer issues or multiple signal connects are now properly resolved. Also simplify the QML WebChannel API: - Rename slot to sendRawMessage and signal to rawMessageReceived - Add a QML helper that has a respond and sendMessage method that transforms the input to the expected JSON format. Change-Id: Ic3266329d1a2877bd46227e4ad70b88dc340d289 Reviewed-by: Pierre Rossi <pierre.rossi@gmail.com>
Diffstat (limited to 'examples')
-rw-r--r--examples/hybridshell/qml/hybridshell/index.html62
-rw-r--r--examples/hybridshell/qml/hybridshell/main.qml18
-rw-r--r--examples/qmlapp/index.html14
-rw-r--r--examples/qmlapp/qmlapp.qml47
-rw-r--r--examples/qtobject/qml/qtobject/index.html26
-rw-r--r--examples/qtobject/qml/qtobject/main.qml15
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
View Lorry Controller Status