From 1f05334932a060599a9fef914dea39bc5ac91cea Mon Sep 17 00:00:00 2001
From: Milian Wolff <milian.wolff@kdab.com>
Date: Wed, 15 Jan 2014 16:14:26 +0100
Subject: Add QML WebKit example which can be run with qmlscene.

It depends on QtQuickControls for layouting of the QML server side
and uses an HTML page similar to the one used by the existing standalone
example.

The example itself uses the simple raw message passing and simulates a
chat app between QML server and HTML client.

Change-Id: Ib4ce39ca736febb82a7d56bef4501888b8c06bc7
Reviewed-by: Simon Hausmann <simon.hausmann@digia.com>
---
 examples/qml/README      |   3 ++
 examples/qml/example.qml | 113 +++++++++++++++++++++++++++++++++++++++++++++++
 examples/qml/index.html  |  60 +++++++++++++++++++++++++
 3 files changed, 176 insertions(+)
 create mode 100644 examples/qml/README
 create mode 100644 examples/qml/example.qml
 create mode 100644 examples/qml/index.html

(limited to 'examples')

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>
-- 
cgit v1.2.1