Qt 5.11 | Qt WebEngine | Qt WebEngine Examples | WebEngine Qt Quick Minimal Example

Qt 5.11.3 Reference Documentation

# WebEngine Qt Quick Minimal Example

Displays a web page using the Qt Quick integration of Qt WebEngine.

WebEngine Qt Quick Minimal Example demonstrates how to use the WebEngineView item to render a web page. It shows the minimum amount of code needed to load and display an HTML page, and can be used as a basis for further experimentation.

## Running the Example

To run the example from Qt Creator, open the Welcome mode and select the example from Examples. For more information, visit Building and Running an Example.

## C++ Code

In `main.cpp` we use only the QGuiApplication and QQmlApplicationEngine classes. We also include `qtwebengineglobal.h` to be able to use QtWebEngine::initialize.

      #include <QGuiApplication>
      #include <QQmlApplicationEngine>
      #include <qtwebengineglobal.h>

In the `main` function we first set the Qt::AA_EnableHighDpiScaling attribute. This lets the web view automatically scale on high-dpi displays. Then we instantiate a QGuiApplication object.

Next, we call QtWebEngine::initialize, which makes sure that OpenGL contexts can be shared between the main process and the dedicated renderer process (`QtWebEngineProcess`). This method needs to be called before any OpenGL context is created.

Then we create a QQmlApplicationEngine, and tell it to load `main.qml` from the Qt Resource System.

Finally, QGuiApplication::exec() launches the main event loop.

      int main(int argc, char *argv[])
      {
          QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
          QGuiApplication app(argc, argv);

          QtWebEngine::initialize();

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

          return app.exec();
      }

## QML Code

In `main.qml` we create the top level window, set a sensible default size and make it visible. The window will be filled by a WebEngineView item loading the Qt Homepage.

      import QtQuick 2.0
      import QtQuick.Window 2.0
      import QtWebEngine 1.0

      Window {
          width: 1024
          height: 750
          visible: true
          WebEngineView {
              anchors.fill: parent
              url: "http://www.qt.io"
          }
      }

## Requirements

The example requires a working internet connection to render the Qt Homepage. An optional system proxy should be picked up automatically.

Files:

- webengine/minimal/main.cpp
- webengine/minimal/main.qml
- webengine/minimal/minimal.pro
- webengine/minimal/qml.qrc