diff options
| author | obscuren <geffobscura@gmail.com> | 2014-04-21 06:58:02 +0800 |
|---|---|---|
| committer | obscuren <geffobscura@gmail.com> | 2014-04-21 06:58:02 +0800 |
| commit | aec3e26ea0074842ca36a5d918cc3ed049a547cf (patch) | |
| tree | 09187c6682cfce438118283a414fa610c23763f3 | |
| parent | 6d5d539a859cae43a1e97acd6fc5675d45b09063 (diff) | |
| download | dexon-aec3e26ea0074842ca36a5d918cc3ed049a547cf.tar.gz dexon-aec3e26ea0074842ca36a5d918cc3ed049a547cf.tar.zst dexon-aec3e26ea0074842ca36a5d918cc3ed049a547cf.zip | |
Round one HTML external applications using QML(Qt5) WebKit2 w/o native bindings
| -rw-r--r-- | ethereal/assets/ethereum.js | 48 | ||||
| -rw-r--r-- | ethereal/assets/qml/webapp.qml | 85 | ||||
| -rw-r--r-- | ethereal/assets/test.html | 27 |
3 files changed, 160 insertions, 0 deletions
diff --git a/ethereal/assets/ethereum.js b/ethereal/assets/ethereum.js new file mode 100644 index 000000000..b8908913d --- /dev/null +++ b/ethereal/assets/ethereum.js @@ -0,0 +1,48 @@ +// Helper function for generating pseudo callbacks and sending data to the QML part of the application +function postData(data, cb) { + data._seed = Math.floor(Math.random() * 1000000) + if(cb) { + eth._callbacks[data._seed] = cb; + } + + navigator.qt.postMessage(JSON.stringify(data)); +} + +// Main Ethereum library +window.eth = { + prototype: Object(), + + send: function(cb) { + document.getElementById("out").innerHTML = "clicked"; + postData({message: "Hello world"}, cb); + } +} +window.eth._callbacks = {} + +function debug(/**/) { + var args = arguments; + var msg = "" + for(var i=0; i<args.length; i++){ + if(typeof args[i] == "object") { + msg += " " + JSON.stringify(args[i]) + } else { + msg += args[i] + } + } + + document.getElementById("debug").innerHTML += "<br>" + msg +} + +navigator.qt.onmessage = function(ev) { + var data = JSON.parse(ev.data) + + if(data._seed) { + var cb = eth._callbacks[data._seed]; + if(cb) { + // Call the callback + cb(data.data); + // Remove the "trigger" callback + delete eth._callbacks[ev._seed]; + } + } +} diff --git a/ethereal/assets/qml/webapp.qml b/ethereal/assets/qml/webapp.qml new file mode 100644 index 000000000..4695903e8 --- /dev/null +++ b/ethereal/assets/qml/webapp.qml @@ -0,0 +1,85 @@ +import QtQuick 2.0 +import QtWebKit 3.0 +import QtWebKit.experimental 1.0 +import QtQuick.Controls 1.0; +import QtQuick.Layouts 1.0; +import QtQuick.Window 2.1; +import Ethereum 1.0 + +ApplicationWindow { + id: window + title: "Webapp" + width: 900 + height: 600 + minimumHeight: 300 + property alias url: webview.url + + Item { + id: root + anchors.fill: parent + state: "inspectorShown" + + WebView { + id: webview + anchors { + left: parent.left + right: parent.right + bottom: sizeGrip.top + top: parent.top + } + onTitleChanged: { window.title = title } + experimental.preferences.javascriptEnabled: true + experimental.preferences.navigatorQtObjectEnabled: true + experimental.preferences.developerExtrasEnabled: true + experimental.userScripts: [ui.assetPath("ethereum.js")] + experimental.onMessageReceived: { + console.log("[onMessageReceived]: ", message.data) + var data = JSON.parse(message.data) + + webview.experimental.postMessage(JSON.stringify({data: {message: data.message}, _seed: data._seed})) + } + } + + Rectangle { + id: sizeGrip + color: "gray" + visible: true + height: 10 + anchors { + left: root.left + right: root.right + } + y: Math.round(root.height * 2 / 3) + + MouseArea { + anchors.fill: parent + drag.target: sizeGrip + drag.minimumY: 0 + drag.maximumY: root.height + drag.axis: Drag.YAxis + } + } + + WebView { + id: inspector + visible: true + url: webview.experimental.remoteInspectorUrl + anchors { + left: root.left + right: root.right + top: sizeGrip.bottom + bottom: root.bottom + } + } + + states: [ + State { + name: "inspectorShown" + PropertyChanges { + target: inspector + url: webview.experimental.remoteInspectorUrl + } + } + ] + } +} diff --git a/ethereal/assets/test.html b/ethereal/assets/test.html new file mode 100644 index 000000000..bd8711d38 --- /dev/null +++ b/ethereal/assets/test.html @@ -0,0 +1,27 @@ +<html> +<head> +<title>Epic Works (TM)</title> +<body> +<h1>It just works!</h1> + +<p>Play with me...</p> + +<button onclick="test();">test</button> +<div id="out"></div> +<div id="in"></div> +<div id="debug"></div> + +<script type="text/javascript"> +function test() { + eth.send(function(data) { + debug(data) + document.getElementById("in").innerHTML ="and the other way around " + data.message; + }) +} + + +</script> + +</body> +</html> + |