Round one HTML external applications using QML(Qt5) WebKit2 w/o native bindings
This commit is contained in:
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