Qt Webkit Tutorial : Web Browser with QtCreator using QWebView - 2020

In this tutorial, we'll make our own browser using Qt Webkit.

First, we'll just try to load a url to display a web page, then start to build the more refined browser.

In my opinion, one of the most important pieces of Qt Webkit is QWebView. The Qt document also says:

QWebView is the main widget component of the QtWebKit web browsing module. It can be used in various applications to display web content live from the Internet.

A web site can be loaded onto QWebView with the load() function. So, the core part of making browser is following lines of code:

QWebView *view = new QWebView(parent);
view->load(QUrl("http://google.com/"));
view->show();

We make a QWebView object, and load a page using load(). Like all Qt widgets, to display QWebView, the show() function must be invoked.

To make it work, we need a module from webkit (actually, webkitwidgets), and we will set it in .pro file.

Though it's not necessary for this simple project, we'll use Creator.

File->New File or Project...->Other Project->Empty Qt Project->Choose...

Paste the following lines to the Browser1.pro:

QT       += core gui
QT       += webkitwidgets

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

TARGET = Browser1
TEMPLATE = app

SOURCES += main.cpp

Then we need a main().

Right click on the Project name and select Add new...->C++->C++ Source File->Choose...

Copy the following code for the main.cpp:

#include <QApplication>
#include <QWebView>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QWebView view;
    view.show();
    view.load(QUrl("http://google.com"));

    return a.exec();
}

Run qmake->Run, then we'll get our browser with the page loaded:

NOTE: The linking against the Webkit does not seem to be needed. So, I dropped the following line from the Browser1.pro file.

QT       += webkit

Though our browser version 1 is able to display a page, it does not have controls such as backward, forward, or refresh etc.

So, in the next tutorial, we'll put some UI elements so that our browser become more closer to the real one.

Qt Webkit Tutorial : Web Browser with QtCreator using QWebView B.