WebView and web settings

In this section, we will dive deeper into the features available in Qt's WebEngine 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:

  1. First of all, open up mainwindow.ui and add a vertical layout under the progress bar. Then, add a Plain Text Edit widget (under the input widget 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>
    How to do it…
  2. Next, go to File | New File or Project. A window will then pop up and ask you to choose a file template. Select Qt Resource File under the Qt category and click on the Choose… button. Type in your desired filename and click Next followed by Finish.
    How to do it…
  3. After that, open up the resource file we just created by right-clicking on it in the Projects pane and selecting the Open in Editor option. Once the file is opened by the editor, click on the Add button, followed by Add Prefix. Then, set the prefix as / and click Add, followed by Add Files. This time, the file browser window will appear and we will select the tux.png image file and click Open. We have now added the image file to our project, where it will be embedded into the executable file (.exe) once it's compiled:
    How to do it…
  4. Next, open up mainwindow.h and add the following headers to it:
    #include <QMainWindow>
#include <QtWebEngineWidgets/QtWebEngineWidgets>
#include <QDebug>
#include <QFile>
  5. Then, make sure the following functions and pointers have been declared in mainwindow.h:
    public:
  explicit MainWindow(QWidget *parent = 0);
  ~MainWindow();
  void loadUrl();

private slots:
  void on_goButton_clicked();
  void on_address_returnPressed();
  void on_backButton_clicked();
  void on_forwardButton_clicked();

  void startLoading();
  void loading(int progress);
  void loaded(bool ok);

  void on_loadHtml_clicked();
private:
  Ui::MainWindow *ui;
  QWebEngineView* webview;
  6. Once you're done with that, open up mainwindow.cpp and add the following code to the class constructor:
    MainWindow::MainWindow(QWidget *parent) :
  QMainWindow(parent),
  ui(new Ui::MainWindow)
{
  ui->setupUi(this);

  webview = new QWebEngineView;
  ui->horizontalLayout_2->addWidget(webview);

  //webview->page()->settings()>setAttribute(QWebEngineSettings::JavascriptEnabled, false);
  //webview->page()->settings()->setAttribute(QWebEngineSettings::AutoLoadImages, false);

  //QString fontFamily = webview->page()->settings()->fontFamily(QWebEngineSettings::SerifFont);
  QString fontFamily = webview->page()->settings()->fontFamily(QWebEngineSettings::SansSerifFont);
  int fontSize = webview->page()->settings()->fontSize(QWebEngineSettings::MinimumFontSize);
  QFont myFont = QFont(fontFamily, fontSize);
  webview->page()->settings()->setFontFamily(QWebEngineSettings::StandardFont, myFont.family());

  QFile file("://tux.png");
  if (file.open(QFile::ReadOnly))
  {
    QByteArray data = file.readAll();
    webview->page()->setContent(data, "image/png");
  }
  else
  {
    qDebug() << "File cannot be opened.";
  }

  connect(webview, SIGNAL(loadStarted()), SLOT(startLoading()));
  connect(webview, SIGNAL(loadProgress(int)), SLOT(loading(int)));
  connect(webview, SIGNAL(loadFinished(bool)), SLOT(loaded(bool)));
}
  7. The MainWindow::loadUrl() function still remains the same as the previous example, which sets the URL scheme to http before loading the page:
    void MainWindow::loadUrl()
{
  QUrl url = QUrl(ui->address->text());
  url.setScheme("http");
  webview->page()->load(url);
}
  8. The same goes for the following functions, which also remain the same:
    void MainWindow::on_goButton_clicked()
{
  loadUrl();
}

void MainWindow::on_address_returnPressed()
{
  loadUrl();
}

void MainWindow::on_backButton_clicked()
{
  webview->back();
}

void MainWindow::on_forwardButton_clicked()
{
  webview->forward();
}
  9. In the previous example, we only had MainWindow::loading(), which sets the value of the progress bar when the web page is being loaded. This time, we also added both the MainWindow::startLoading() and MainWindow::loaded() slot functions, which will be called by the loadStarted() and loadFinished() signals. What these two functions do is basically show the progress bar when a page is starting to load, and hide the progress bar when the page has finished loading:
    void MainWindow::startLoading()
{
  ui->progressBar->show();
}

void MainWindow::loading(int progress)
{
  ui->progressBar->setValue(progress);
}

void MainWindow::loaded(bool ok)
{
  ui->progressBar->hide();
}
  10. Lastly, we call webview->loadHtml() to convert the plain text to HTML content when the Load HTML button is clicked:
    void MainWindow::on_loadHtml_clicked()
{
  webview->setHtml(ui->source->toPlainText());
}
  11. Build and run the program now and you should see something like this:
    How to do it…

How it works…

In this example, we used C++ to load an image file and set it as the WebView's default content (instead of a blank page). We could achieve the same result by loading a default HTML file with an image at startup.

Some of the code in the class constructor has been commented out. You can remove the double slashes // and see the difference it makes—the JavaScript alert will no longer appear (since JavaScript is being disabled) and any images will no longer appear in your web view.

Another thing you can try is to change the font family from QWebEngineSettings::SansSerifFont to QWebEngineSettings::SerifFont. You will notice a slight difference in the font as it appears in the web view:

How it works…

By clicking the Load HTML button, we ask the WebView to treat the content of the plain text edit widget as HTML code and load it as an HTML page. You can use this to make a simple HTML editor powered by Qt!

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

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