diff options
Diffstat (limited to 'examples/hybridshell/qml')
-rw-r--r-- | examples/hybridshell/qml/hybridshell/index.html | 62 | ||||
-rw-r--r-- | examples/hybridshell/qml/hybridshell/main.qml | 18 |
2 files changed, 54 insertions, 26 deletions
diff --git a/examples/hybridshell/qml/hybridshell/index.html b/examples/hybridshell/qml/hybridshell/index.html index a76f047..b93daab 100644 --- a/examples/hybridshell/qml/hybridshell/index.html +++ b/examples/hybridshell/qml/hybridshell/index.html @@ -1,38 +1,48 @@ +<!DOCTYPE html> <html> <head> - <style> + <title>QML/HTML Hybrid Shell</title> + <style type="text/css"> + html, body { + margin:0; + padding:0; + width:100%; + height:100%; + } + #layout { + height:100%; + width:92%; + margin: 0 auto; + } #output { - width:92%; height: 95%; display: block; + width:100%; + margin-top:1%; + height: 94%; + display: block; border-radius: 5px; border-style: solid; border-color: #666666; background-image: -webkit-linear-gradient(left top,#dddddd, #ffffff) } #input { - width:92%; height: 5%; display: block; background-color: #dddddd; + width:100%; + height: 3%; + margin-top:1%; + margin-bottom:1%; + display: block; + background-color: #dddddd; border-radius: 3px; border-style: solid; border-color: #dddddd; background-image: -webkit-linear-gradient(left,#eeeeee, #cccccc) } </style> - <script> - document.write('<script src="' + (/[?&]webChannelBaseUrl=([A-Za-z0-9\-:/]+)/.exec(location.search)[1]) + '/webchannel.js/createWebChannel"><' + '/script>'); - </script> - <script> + <script type="text/javascript" src="qrc:///qwebchannel/webchannel.js"></script> + <script type="text/javascript"> function out(line) { document.querySelector("#output").value += line + "\r\n"; } - window.onload = function() { - out("Starting..."); - createWebChannel(function(webChannel) { - window.navigator.webChannel = webChannel; - out("Ready"); - webChannel.subscribe("stdout", out); - }); - }; - function send() { var input = document.querySelector("#input"); @@ -48,13 +58,25 @@ case 13: send(); break; - } } + + window.onload = function() { + out("Starting..."); + + var baseUrl = (/[?&]webChannelBaseUrl=([A-Za-z0-9\-:/]+)/.exec(location.search)[1]); + new QWebChannel(baseUrl, function(webChannel) { + window.navigator.webChannel = webChannel; + out("Ready"); + webChannel.subscribe("stdout", out); + }); + } </script> </head> - <body marginleft=0 margintop=0 style="width:480px; height: 800px"> - <textarea readonly id="output" ></textarea> - <input type="text" id="input" onkeyup="handleKey(event.keyCode)"></input> + <body> + <div id="layout"> + <textarea readonly id="output" ></textarea> + <input type="text" id="input" onkeyup="handleKey(event.keyCode)"></input> + </div> </body> </html> diff --git a/examples/hybridshell/qml/hybridshell/main.qml b/examples/hybridshell/qml/hybridshell/main.qml index c46aaa2..d6d598d 100644 --- a/examples/hybridshell/qml/hybridshell/main.qml +++ b/examples/hybridshell/qml/hybridshell/main.qml @@ -51,27 +51,33 @@ Rectangle { id: shell onStdoutData: { console.log(data); - webChannel.broadcast("stdout", data); + webChannel.sendMessage("stdout", data); } onStderrData: { - webChannel.broadcast("stderr", data); + console.error(data); + webChannel.sendMessage("stderr", data); } } WebChannel { id: webChannel - onExecute: { - shell.exec(requestData); + onRawMessageReceived: { + shell.exec(JSON.parse(rawMessage).data); } - onBaseUrlChanged: shell.start() + onInitialized: { + shell.start() + webView.url = "index.html?webChannelBaseUrl=" + webChannel.baseUrl; + } } width: 480 height: 800 WebView { + id: webView anchors.fill: parent - url: "index.html?webChannelBaseUrl=" + webChannel.baseUrl + url: "about:blank" + experimental.preferences.developerExtrasEnabled: true } } |