Use QQuickControls for QtQuick browser ui.

example/main.cpp

@@ -56,12 +56,11 @@ int mainWidget(int argc, char **argv)
 
 int mainQuick(int argc, char **argv)
 {
-    QGuiApplication app(argc, argv);
+    QApplication app(argc, argv);
 
     QQuickWebContentsView::registerType();
 
-    QuickWindow window;
-    window.show();
+    ApplicationEngine appEngine;
 
     return app.exec();
 }

example/quickwindow.cpp

@@ -62,10 +62,8 @@ public:
 
 #include "quickwindow.moc"
 
-QuickWindow::QuickWindow()
+ApplicationEngine::ApplicationEngine()
 {
-    engine()->rootContext()->setContextProperty("utils", new Utils(this));
-    setSource(QUrl("example/quickwindow.qml"));
-    setResizeMode(QQuickView::SizeRootObjectToView);
-    setTitle("QQuick Example");
+    rootContext()->setContextProperty("utils", new Utils(this));
+    load(QUrl("example/quickwindow.qml"));
 }

example/quickwindow.h

@@ -42,14 +42,14 @@
 #ifndef QUICKWINDOW_H
 #define QUICKWINDOW_H
 
-#include <QQuickView>
+#include <QQmlApplicationEngine>
 
 class QWebContentsView;
 
-class QuickWindow : public QQuickView {
+class ApplicationEngine : public QQmlApplicationEngine {
     Q_OBJECT
 public:
-    QuickWindow();
+    ApplicationEngine();
 };
 
 #endif // QUICKWINDOW_H

example/quickwindow.qml

 import QtQuick 2.0
 import QtWebEngine 1.0
+import QtQuick.Controls 1.0
+import QtQuick.Layouts 1.0
 
-Item {
+ApplicationWindow {
     id: browserWindow
-    height: 480
-    width: 320
+    height: 600
+    width: 800
+    visible: true
 
-    Rectangle {
+    toolBar: ToolBar {
         id: navigationBar
-        color: "grey"
-        anchors.top: parent.top
-        anchors.left: parent.left
-        anchors.right: parent.right
-        height: 26
-
-        Rectangle {
-            id: backButton
-            color: "red"
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-            anchors.left: parent.left
-            width: height
+        RowLayout {
+            anchors.fill: parent
 
-            MouseArea {
-                anchors.fill: parent
-                onClicked: {
-                    webContentsView.goBack()
-                }
+            ToolButton {
+                id: backButton
+                iconName: "go-previous"
+                iconSource: "icons/go-previous.png"
+                onClicked: webContentsView.goBack()
             }
-        }
-        Rectangle {
-            id: forwardButton
-            color: "green"
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-            anchors.left: backButton.right
-            width: height
-
-            MouseArea {
-                anchors.fill: parent
-                onClicked: {
-                    webContentsView.goForward()
-                }
+            ToolButton {
+                id: forwardButton
+                iconName: "go-next"
+                iconSource: "icons/go-next.png"
+                onClicked: webContentsView.goForward()
             }
-        }
-        Rectangle {
-            id: reloadButton
-            color: "blue"
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-            anchors.left: forwardButton.right
-            width: height
-
-            MouseArea {
-                anchors.fill: parent
-                onClicked: {
-                    webContentsView.reload()
-                }
+            ToolButton {
+                id: reloadButton
+                iconName: "view-refresh"
+                iconSource: "icons/view-refresh.png"
+                onClicked: webContentsView.reload()
             }
-        }
-        TextInput {
-            id: addressBar
-            focus: true
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-            anchors.left: reloadButton.right
-            anchors.right: parent.right
+            TextField {
+                id: addressBar
+                focus: true
+                Layout.fillWidth: true
 
-            cursorVisible: true
-            persistentSelection: true
-            selectByMouse: true
-
-            onAccepted: {
-                webContentsView.url = utils.fromUserInput(text)
+                onAccepted: webContentsView.url = utils.fromUserInput(text)
             }
         }
     }
@@ -80,10 +45,7 @@ Item {
     WebContentsView {
         id: webContentsView
         focus: true
-        anchors.top: navigationBar.bottom
-        anchors.bottom: parent.bottom
-        anchors.left: parent.left
-        anchors.right: parent.right
+        anchors.fill: parent
         url: "http://qt-project.org/"
 
         Binding {