Developing Web Applications Using Qt WebEngine

Qt includes a module called Qt WebEngine that allows us to embed a web browser widget into our program and use it to display web pages or local HTML content. Prior to version 5.6, Qt used another similar module called Qt WebKit, which is now deprecated and has since been replaced by the Chromium-based WebEngine module. Qt also allows communication between JavaScript and C++ code through Qt WebChannel, which enables us to make use of this module in a much more effective fashion.

In this chapter, we will cover the following recipes:

• Introducing Qt WebEngine
• Using webview and web settings
• Embedding Google maps in your project
• Calling C++ functions from JavaScript
• Calling JavaScript functions from C++

Technical requirements

The technical requirements for this chapter include Qt 6.6.1 MSVC 2019 64 bit, Qt Creator 12.0.2, and Microsoft Visual Studio. All the code used in this chapter can be downloaded from the following GitHub repository: https://github.com/PacktPublishing/QT6-C-GUI-Programming-Cookbook---Third-Edition-/tree/main/Chapter13.

Introducing Qt WebEngine

In this example project, we will explore the basic features of the WebEngine module in Qt and try building a simple working web browser. Since Qt 5.6, Qt’s WebKit module has been deprecated and replaced by the WebEngine module, which is based on Google’s Chromium engine.

How to do it…

First, let’s set up our WebEngine project:

1. At the moment, Qt’s WebEngine module only works with the Visual C++ compiler and not others, such as MinGW or Cygwin. This might change in the future, but it all depends on whether Qt developers want to port it to other compilers or not. Make sure that the Qt version you installed on your computer supports the Visual C++ compiler. You can add the MSVC 2019 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:

Figure 13.1 – Making sure MSVC 2019...

Using webview and web settings

In this recipe, we will dive deeper into the features available in Qt’s WebEngine module and explore the settings that we can use to customize our webview. We will use the source files from the previous example and add more code to it.

How to do it…

Let’s explore some of the basic features of the Qt WebEngine module:

1. Open mainwindow.ui and add a vertical layout under the progress bar. Add a Plain Text Edit widget (under the Input Widgets category) and a push button to the vertical layout. Change the display of the push button to Load HTML and set the plaintext property of the Plain Text Edit widget to the following:

   <Img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"></img>
   <h1>Hello World!</h1>
   <h3>This is our custom HTML page.</h3>
   <script>alert("Hello!");</script>

   This is how it should look after you have added...

Embedding Google maps in your project

In this recipe, we will learn how to embed Google maps in our project through Qt’s WebEngine module. This example doesn’t focus much on Qt and C++, but rather on the Google Maps API in HTML code.

How to do it…

Let’s create a program that displays Google maps by following these steps:

1. Create a new Qt Widgets Application project and remove the statusBar, menuBar, and mainToolBar objects.
2. Open your project file (.pro) and add the following modules to your project:

   QT += core gui webenginewidgets

3. Open mainwindow.ui and add a vertical layout to the canvas. Then, select the canvas and click the Lay Out Vertically button on top of the canvas. You will get the following:

Figure 13.14 – Adding a vertical layout to the central widget

4. Open mainwindow.cpp and add the following header to the top of the source code:

   #include <QtWebEngineWidgets/QWebEngineView>

...

Calling C++ functions from JavaScript

In this recipe, we will learn how to put our knowledge to use and create a functional login screen using Qt and SQLite.

How to do it…

Let’s learn how to call C++ functions from JavaScript using the following steps:

1. Create a Qt Widgets Application project. Open the project file (.pro) and add the following modules to the project:

   QT += core gui webenginewidgets

2. Open mainwindow.ui and delete the mainToolBar, menuBar, and statusBar objects, as we don’t need any of these in this example program.
3. Add a vertical layout to the canvas, then select the canvas and click on the Lay Out Vertically button on top of the canvas. Add a text label to the top of the vertical layout and set its text to Hello!. Make its font bigger by setting its styleSheet property as follows:

   font: 75 26pt "MS Shell Dlg 2";

   This is what it looks like after we applied the font properties to our style sheet:

...

Calling Javascript functions from C++

In the previous recipe, we learned how to call C++ functions from JavaScript through Qt’s WebChannel system. In this example, we will try to do the reverse: call JavaScript functions from C++ code.

How to do it…

We can call JavaScript functions from C++ through the following steps:

1. Create a new Qt Widgets Application project and add the webenginewidgets module to your project.
2. Open mainwindow.ui and remove the mainToolBar, menuBar, and statusBar objects.
3. Add a vertical layout and a horizontal layout to the canvas. Select the canvas and click Lay Out Vertically. Make sure the horizontal layout is located at the bottom of the vertical layout.
4. Add two push buttons to the horizontal layout; one is called Change HTML Text and the other is called Play UI Animation. Right-click on one of the buttons and click Go to slot…. A window will pop up and ask you to pick a signal. Select the clicked() option and click...