Round one HTML external applications using QML(Qt5) WebKit2 w/o native bindings
This commit is contained in:
obscuren
parent
6d5d539a85
commit
aec3e26ea0
|
|
@ -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];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
Loading…
Reference in New Issue