diff options
| -rw-r--r-- | examples/qml/README | 3 | ||||
| -rw-r--r-- | examples/qml/example.qml | 113 | ||||
| -rw-r--r-- | examples/qml/index.html | 60 |
3 files changed, 176 insertions, 0 deletions
diff --git a/examples/qml/README b/examples/qml/README new file mode 100644 index 0000000..425a88c --- /dev/null +++ b/examples/qml/README @@ -0,0 +1,3 @@ +To run this example, install QtWebChannel and QtQuickControls modules, then run: + +qmlscene ./example.qml diff --git a/examples/qml/example.qml b/examples/qml/example.qml new file mode 100644 index 0000000..f77b4c6 --- /dev/null +++ b/examples/qml/example.qml @@ -0,0 +1,113 @@ +/**************************************************************************** +** +** Copyright (C) 2014 Klarälvdalens Datakonsult AB, a KDAB Group company, info@kdab.com, author Milian Wolff <milian.wolff@kdab.com> +** Contact: http://www.qt-project.org/legal +** +** This file is part of the QtWebChannel module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and Digia. For licensing terms and +** conditions see http://qt.digia.com/licensing. For further information +** use the contact form at http://qt.digia.com/contact-us. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Digia gives you certain additional +** rights. These rights are described in the Digia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 3.0 as published by the Free Software +** Foundation and appearing in the file LICENSE.GPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU General Public License version 3.0 requirements will be +** met: http://www.gnu.org/copyleft/gpl.html. +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.1 + +import QtWebChannel 1.0 + +import QtQuick.Controls 1.0 +import QtQuick.Layouts 1.0 + +import QtWebKit 3.0 +import QtWebKit.experimental 1.0 + +ApplicationWindow { + id: window + title: "QtWebChannel Example: QML Server to QtWebKit WebView Client" + width: 600 + height: 400 + + WebChannel { + id: webChannel + + onRawMessageReceived: { + textEdit.text += "Received message: " + rawMessage + "\n"; + } + } + + RowLayout { + id: myRow + anchors.fill: parent + ColumnLayout { + id: myCol + Label { + id: caption + text: "QML Server" + font.bold: true + } + TextArea { + Layout.fillHeight: true + Layout.fillWidth: true + id: textEdit + readOnly: true + } + RowLayout { + Label { + id: label + text: "Input: " + } + TextField { + id: input + Layout.fillWidth: true + } + Button { + id: send + text: "Send" + onClicked: { + if (input.text) { + webChannel.sendMessage("message", input.text); + textEdit.text += "Sent message: " + input.text + "\n"; + input.text = "" + } + } + } + } + } + WebView { + Layout.fillWidth: true + Layout.fillHeight: true + Layout.minimumWidth: window.width / 2 + id: webView + url: webChannel.baseUrl ? ("index.html?webChannelBaseUrl=" + webChannel.baseUrl) : "about:blank" + experimental.preferences.developerExtrasEnabled: true + } + } +} diff --git a/examples/qml/index.html b/examples/qml/index.html new file mode 100644 index 0000000..cd20ac9 --- /dev/null +++ b/examples/qml/index.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <script type="text/javascript" src="qrc:///qwebchannel/qwebchannel.js"></script> + <script type="text/javascript"> + //BEGIN SETUP + var baseUrl = (/[?&]webChannelBaseUrl=([A-Za-z0-9\-:/\.]+)/.exec(location.search)[1]); + new QWebChannel(baseUrl, function(channel) { + document.getElementById("send").onclick = function() { + var input = document.getElementById("input"); + var text = input.value; + if (!text) { + return; + } + var output = document.getElementById("output"); + output.innerHTML = output.innerHTML + "Sent message: " + text + "\n"; + input.value = ""; + channel.send(text); + } + + channel.subscribe("message", function(text) { + var output = document.getElementById("output"); + output.innerHTML = output.innerHTML + "Received message: " + text + "\n"; + }); + }, true /* raw web channel */); + //END SETUP + </script> + <style type="text/css"> + * { + padding: 0; + margin: 0; + font-size: 40px; + } + html, body { + height: 100%; + width: 100%; + } + #div { + height: 100%; + padding: 0 10%; + } + #input { + width: 50%; + margin: 0 10px; + } + #output { + width: 100%; + height: 80%; + } + </style> + </head> + <body> + <div id="div"> + <h1>HTML Client</h1> + <textarea id="output" readonly></textarea><br /> + Input: <input id="input" /><input type="submit" id="send" value="Send" onclick="javascript:click();" /> + </div> + </body> +</html> |