Including a web viewer in Qt Creator App

Question

I'm pretty new to Qt and I'm trying to add a web viewer to an app.

I have an app with 3 windows and a navigation bar with 3 buttons. When I click on a button, it swipe to the window associated.

I would have one of this button open the web viewer, without exiting the app.

The app have to be compatible with mobile (Android, iOS, Windows Phone) also.

I searched and found QtWebengine but it doesn't really help me...

I'm on Qt Creator 3.4.2, Qt 5.5.0 and using Qt Designer (don't know if it's important...)

Coding in C++ and QML.

Thanks.

EDIT: I read about the Webview doc but it's still confusing... I saw that there is a Webkit Webview and a WbeEngine Webview. Webkit is being deprecated so I would like to use WebEngine. So I try the MiniBrowser Example, which uses WebEngine Webview, and it works on the platforms I want. But I can't figure how I can launch it by clicking a button...

I tried this :

main.cpp

#include "mainwindow.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();

    return a.exec();
}

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    connect(ui->pushButton, SIGNAL(clicked()), this, SLOT(slot_test()));
}

void MainWindow::slot_test()
{
    this->webview();
}

MainWindow::~MainWindow()
{
    delete ui;
}

webview.cpp

#include <QtCore/QUrl>

#include <QQmlApplicationEngine>

#include <QtCore/QCommandLineOption>
#include <QtCore/QCommandLineParser>
#include <QGuiApplication>
#include <QStyleHints>
#include <QScreen>

#include <QtQml/QQmlContext>
#include <mainwindow.h> //

#ifdef QT_WEBVIEW_WEBENGINE_BACKEND
#include <QtWebEngine>
#endif /* QT_WEBVIEW_WEBENGINE_BACKEND */

void MainWindow::webview()
{
#ifdef Q_OS_OSX
    // On OS X, correct WebView / QtQuick compositing and stacking requires running
    // Qt in layer-backed mode, which again resuires rendering on the Gui thread.
    qWarning("Setting QT_MAC_WANTS_LAYER=1 and QSG_RENDER_LOOP=basic");
    qputenv("QT_MAC_WANTS_LAYER", "1");
    qputenv("QSG_RENDER_LOOP", "basic");
#endif /* Q_OS_OSX */

#ifdef QT_WEBVIEW_WEBENGINE_BACKEND
    QtWebEngine::initialize();
#endif /* QT_WEBVIEW_WEBENGINE_BACKEND */

    QQmlApplicationEngine engine;

    engine.load(QUrl(QStringLiteral("qrc:/base/main.qml")));

}

main.qml

import QtQuick 2.2
import QtQuick.Controls 1.1
import QtWebView 1.0
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.2

ApplicationWindow {
    visible: true
    x: 500
    y: 500
    width: 500
    height: 500
    title: webView.title
    statusBar: StatusBar {
        id: statusBar
        visible: webView.loading && Qt.platform.os !== "ios"
        RowLayout {
            anchors.fill: parent
            Label { text: webView.loadProgress == 100 ? qsTr("Done") : qsTr("Loading: ") + webView.loadProgress + "%" }
        }
    }

    WebView {
        id: webView
        anchors.fill: parent
        url: "https://www.google.fr"
    }
}

(The webview.cpp is a simplified version of the MiniBrowser example)

When I try to launch it (in Desktop version or Android) and click on the Push Button, the Webview open in an other window and close immediately. I don't know how to solve this...

Use the native Qt WebView on iOS and Android: http://doc.qt.io/qt-5/qtwebview-index.html — MrEricSir, Sep 23 '15 at 18:55

score 0 · Answer 1 · answered Sep 23 '15 at 15:48

0

You can use QtWebKit but it is deprecated: http://doc.qt.io/qt-5/qtwebkit-index.html

You can use QtWebEngine but it doesn't support all the platforms you need.

answered Sep 23 '15 at 15:48

demonplus

5,613
12
49
68

But I tried the Qt example MiniBrowser http://doc.qt.io/qt-5/qtwebview-minibrowser-example.html and it worked on Desktop app, Android and iOS. I would like to include something like that in my app. (maybe in a Widget Container or something like that...) – user5368401 Sep 23 '15 at 15:53
I don't understand your "But". QtWebKit provides WebView API and it works on your platforms. You need to read about it and use. I said that QtWebEngine doesn't support all of the platforms – demonplus Sep 23 '15 at 17:15

Including a web viewer in Qt Creator App

1 Answers1