Using WebView in AppStudio Apps

1. Imports

import QtWebView 1.1

2. Basic Implementation

WebView {
   id: browser
   width: parent.width //800
   height: parent.height //500
   url: "http://www.esri.com"
}

3. Add a page loading progress bar

 Rectangle {
       width: parent.width * browser.loadProgress/100
       height: 2* AppFramework.displayScaleFactor
       color: "blue"
       z:11
       anchors.top: parent.top
       anchors.left: parent.left
       visible: browser.visible && browser.loadProgress < 100
   }

4. Add a busy indicator

BusyIndicator {
   running: browser.loading
   z:111
   anchors.centerIn: browser
}

5. Events

onTitleChanged: {
   console.log("Title changed: ", title);
}
onUrlChanged: {
   console.log("Url changed: ", url)
}
onLoadProgressChanged: {
  console.log(loadProgress);
}
onLoadingChanged: {
   //do or check something here
}

6. Add function to change URL

function refresh() {
   browser.stop();
   browser.reload();
}

function changeURL(url) {
   browser.stop();
   browser.url = url;
}