How to do it…

First, let's set up our WebEngine project:

  1. Download and install Microsoft Visual Studio if you do not have it installed on your computer. At the moment, Qt's WebEngine module only works with the Visual C++ compiler and not others, such as MinGW or Clang. This might change in the future, but it all depends on whether Qt developers want to make port it to other compilers or not. You can download the latest Visual Studio from https://www.visualstudio.com.
  1. Make sure that the Qt version you installed on your computer supports the Visual C++ compiler. You can add the MSVC 2015 64-bit component to your Qt installation using Qt's maintenance tool. Also, make sure that you have installed the Qt WebEngine component in your Qt version:

  1. Open up Qt Creator and create a new Qt Widgets Application project. Select a kit that uses the Visual C++ compiler:

  1. Open up your project file (.pro) and add the following modules to your project:
QT += core gui webengine webenginewidgets
  1. Open up mainwindow.ui and remove the menuBar, mainToolBar, and statusBar objects, as we don't need those in this project:

  1. Place two horizontal layouts on the canvas, then place a line edit widget and a push button for the layout at the top:

  1. Select the canvas and click on the Lay Out Vertically button located at the top of the editor:

  1. The layouts will expand and follow the size of the main window. The line edit will also expand horizontally, based on the width of the horizontal layout:

  1. Add two buttons to the left side of the line edit. We'll use these two buttons to move backward and forward between page histories. Add a Progress Bar widget at the bottom of the main window so that we can find out whether the page has finished loading or is still in progress. We don't have to worry about the horizontal layout in the middle at this point, as we'll be adding the webview to it later at step 16 using C++ code, and the space will be occupied:

  1. Right-click on one of the buttons and select Go to slot…, then select clicked() and click OK. A slot function will be automatically created for you in mainwindow.h and mainwindow.cpp. Repeat this step for all the other buttons as well.
  2. Right-click on the line edit and select Go to slot…, then select returnPressed() and click OK. Another slot function will now be automatically created for you in mainwindow.h and mainwindow.cpp.
  3. Let's hop over to mainwindow.h. The first thing we need to do is to add the following header to mainwindow.h:
#include <QtWebEngineWidgets/QtWebEngineWidgets>
  1. Declare the loadUrl() function under the class destructor:
public:
explicit MainWindow(QWidget *parent = 0);
~MainWindow();
void loadUrl();
  1. Add a custom slot function called loading() to mainwindow.h:
private slots:
void on_goButton_clicked();
void on_address_returnPressed();
void on_backButton_clicked();
void on_forwardButton_clicked();
void loading(int progress);
  1. Declare a QWebEngineView object and call it webview:
private:
Ui::MainWindow *ui;
QWebEngineView* webview;
  1. Open the mainwindow.cpp file and initiate the WebEngine view. Add it to the second horizontal layout and connect its loadProgress() signal to the loading() slot function we just added to mainwindow.h:
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow) {
ui->setupUi(this);
webview = new QWebEngineView;
ui->horizontalLayout_2->addWidget(webview);
connect(webview, QWebEngineView::loadProgress, this, MainWindow::loading);
}

  1. Declare what will happen when the loadUrl() function is called:
void MainWindow::loadUrl() {
QUrl url = QUrl(ui->address->text());
url.setScheme("http");
webview->page()->load(url);
}
  1. Call the loadUrl() function when the Go button is clicked or when the Enter key is pressed:
void MainWindow::on_goButton_clicked() {
loadUrl();
}
void MainWindow::on_address_returnPressed() {
loadUrl();
}
  1. As for the other two buttons, we'll ask the webview to load the previous page or the next page if it is available in the history stack:
void MainWindow::on_backButton_clicked() {
webview->back();
}
void MainWindow::on_forwardButton_clicked() {
webview->forward();
}
  1. Change the value of progressBar when the web page is being loaded:
void MainWindow::loading(int progress) {
ui->progressBar->setValue(progress);
}
  1. Build and run the program now and you will get a very basic but functional web browser:

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset