WebView and HTML mixed programming in Ubuntu QML (hybrid programming) __ Storage

For most web developers, we can make full use of our QML UI framework to achieve some of the more dazzling interface, we can also use HTML5 existing application architecture to implement our web-based applications. In today's routine, let's show how to combine these two aspects fully. This will make our application more dazzling, and make full use of the existing Ubuntu QML APIs to achieve some of our functions.

1 Design Our HTML file

 

To illustrate the convenience of the document, I designed a simple interface.

 

In the above interface, the contents of the HTML display do not include the button section above. Only one "Hello" is displayed. At the same time we have defined an event responder as follows:

 
Document.addeventlistener ("Qmlmessage", function (event) {
        Document.body.innerHTML + = "<p><font size=" ' color= ' Red ' >message received.  You said "+ event.detail.greeting + </font></p>";
    });
 

Whenever there is a real response called Qmlmessage, we automatically add a line of words to the interface. Like what:

 

 

 

 
2) triggering qmlmessage events 

In the following MAIN.QML code:

 
Import Qtquick 2.4 Import ubuntu.components 1.3 import ubuntu.web 0.2 import com.canonical.Oxide 1.9 as oxide Mainview { ObjectName for functional testing purposes (AUTOPILOT-QT5) objectname: "Mainview"//note!

    ApplicationName needs to match the "name" field of the click Manifest ApplicationName: "Webview-oxide.liu-xiao-guo" Property string Uscontext: "messaging://" Width:units.gu height:units.gu Page {title:  i18n.tr ("Webview-oxide") Rectangle {anchors.fill:parent//Both the UserScript and the  Call to SendMessage need to share the same//context, which should is in the form of a URL.
            It doesn ' t seem to matter//what it is, though.
                    Property string Uscontext: "messaging://" WebView {Id:webview Anchors { Top:parent.top Left:parent.left Right:parenT.right bottom:button.top} context:webcontext URL: {Console.log ("Address:" + qt.resolvedurl ("index.html")) return Qt.resolvedurl ("I Ndex.html ")}} webcontext {Id:webcontext UserS Cripts: [Oxide.userscript {context:uscontext url:q
                T.resolvedurl ("Oxide-user.js")}]} Button {
                    Id:button Anchors {bottom:parent.bottom left:parent.left
                    Right:parent.right} text: "Press Me" onclicked: { var req = webview.rootFrame.sendMessage (uscontext, "message", {greeting: "Hello"}) req.o nreply = function (msg){Console.log ("Got reply:" + msg.str); } req.onerror = function (code, explanation) {Console.log ("Error" + code + "
 : "+ Explanation)}}}}}
 

We use the button "button" to send our WebView the Qmlmessage event we need. Here we use the following:

 
            Webcontext {
                id:webcontext
                userscripts: [
                    oxide.userscript {
                        context:uscontext
                        URL: Qt.resolvedurl ("Oxide-user.js")
                    }
                ]
            }
 

The contents of the Oxide-user above are:

 
Oxide.addmessagehandler ("Message", function (msg) {
    var event = new Customevent ("Qmlmessage", {Detail:msg.args}); C10/>document.dispatchevent (event);
    Msg.reply ({str: "OK"});
});
 

That is, after we send out a message, we also get a return of the information "OK". This can be seen in the output of our application:

 

 

This enables us to interact from the QML to the HTML file. This is a very important tool for us to design some applications based on map positioning or navigation.

The source code of the whole project is: https://github.com/liu-xiao-guo/webview-oxide