Shulou(Shulou.com)06/02 Report--

Xiaobian to share with you how to use QCefView, I believe most people still do not know how to use, so share this article for your reference, I hope you have a lot of harvest after reading this article, let's go to understand it together!

QCefView Introduction

  Official Website: tishion.github.io/QCefView/

  QCefView is a Qt third-party open source library integrated with Chromium Embedded Framework, LGPL license, can be used freely in projects, similar to CEF, QWebEngineView, providing C++ and web interaction capabilities.

QCefView Compilation Preparation

  My compilation environment win11, vs2019, Qt5.15.2, this compilation uses x64 compilation method, and finally generates vs2019 solution, so Qt needs to use msvc2019_64.

1 Download Code

  clone QCefView

git clone https://github.com/CefView/QCefView.git

  clone CefViewCore

git clone https://github.com/CefView/CefViewCore.git

  Although QCefView project has CefViewCore directory, but it is empty, you need to manually clone CefViewCore code, and then put it into QCefView project.

2 Modify CEF configuration

  Before compilation, you need to make some configuration modifications. Since QCefView depends on CEF, when configuring projects with CMake, CEF projects will be downloaded. If there is no good network environment, CEF may not be downloaded, but CEF can be downloaded manually and placed in the specified directory. Open QCefView\CefViewCore\CefConfig.cmake I am compiling for windows, comment out the download link of CEF, that is, line 7, for example, my comment:

  After the comment, we download CEF manually according to the CEF link with Thunderbolt, extract it into QCefView\CefViewCore\dep directory, do not need to change the file name, according to the prompt of cmake, extract the file to cef_binary_as prefix.

3 Modified Qt version

  Open QtConfig.cmake in the root directory of QCefView, and specify line 16 as your Qt path, such as my Qt path

  Then go to the environment variables to see if there are Qt-related settings, if any, it is best to delete them first, and then add the following system configuration

  vs Qt configuration in 2019

  After this is done, it is best to restart the computer, otherwise CMake may not recognize it. This leads to the following errors:

Start compiling QCefView

  1 Create a directory in the root directory of QCefView, such as build_vs2019_x64, and put the vs sln solution generated by CMake into this directory;

  2 Open the CMake GUI, find the QCefViwe directory, specify the source directory and the solution directory build_vs2019_x64, such as my settings:

  3 Click Configure to start configuring the project. The result is as follows:

  Then click Generate to generate vs2019 solution, as shown below:

  4 Open project compiled with vs2019, my compilation results

Path to generated dll

  QCefView compiled library path in the source root directory, such as my build results

lib path

header file

QCefView Project Description

  (1) QCefView is a dynamic library project, others are static libraries, QCefView static links to other libraries;

(2) QCefViewTest is an exe project, for example, open Baidu homepage, the display results are as follows:

How to use QCefView for development QCefView source code browsing

  Before writing the demo, take a look at the source code of QCefView

header file

class QCEFVIEW_EXPORT QCefView : public QWidget{ /// /// /// Q_OBJECTpublic: /// /// /// QCefView(const QString url, QWidget* parent = 0);

  From the header file, QCefView is a window, but the author encapsulates it as a dll, and the user needs to add QCefView to the interface layout.

Take a look at the implementation of the constructor

QCefView::QCefView (const QString url, QWidget* parent /*= 0*/) : QWidget(parent) , pImpl_(nullptr){ // initialize the layout QVBoxLayout* layout = new QVBoxLayout(this); layout->setContentsMargins (0, 0, 0, 0); setLayout(layout); // create the window QCefWindow* pCefWindow = new QCefWindow (windowHandle(), this); pCefWindow->create(); // create window container QWidget* windowContainer = createWindowContainer (pCefWindow, this); layout->addWidget (windowContainer); // create the implementation // url pass here to open pImpl_ = std::unique_ptr (new Implementation(url, this, pCefWindow)); // If we're already part of a window, we'll install our event handler // If our parent changes later, this will be handled in QCefView::changeEvent() if (this->window()) this->window()->installEventFilter(this);}

  Web operations, eventually call CEF to complete

///// Create a new browser window using the window parameters specified by// |windowInfo|. All values will be copied internally and the actual window will// be created on the UI thread. If |request_context| is NULL the global request// context will be used. This function can be called on any browser process// thread and will not block. The optional |extra_info| parameter provides an// opportunity to specify extra information specific to the created browser that// will be passed to cef_render_process_handler_t::on_browser_created() in the// render process./// CEF_EXPORT int cef_browser_host_create_browser( const cef_window_info_t* windowInfo, struct _cef_client_t* client, const cef_string_t* url, const struct _cef_browser_settings_t* settings, struct _cef_dictionary_value_t* extra_info, struct _cef_request_context_t* request_context); Window of QCefView

  QCefWindow can be seen in the QCefView constructor, which is as follows:

QCefWindow::QCefWindow(QWindow* parent, QCefView* hostView /*= 0*/) : QWindow(parent) , hwndCefBrowser_(nullptr){ setFlags(Qt::FramelessWindowHint); CCefManager::getInstance().initializeCef();}

  Remove the window border, initialize the CEF management class, deinit.

  Handling when window size changes

voidQCefWindow::resizeEvent(QResizeEvent* e){ syncCefBrowserWindow(); QWindow::resizeEvent(e);}

  Refer to QCefViewTest for the usage of opening web pages. This project newly creates a CustomCefView class, derived from QCefView, with the following code:

#ifndef CUSTOMCEFVIEW_H#define CUSTOMCEFVIEW_H#include class CustomCefView : public QCefView{ Q_OBJECTpublic: using QCefView::QCefView; ~CustomCefView(); void changeColor();protected: virtual void onDraggableRegionChanged(const QRegion& region) override; virtual void onQCefUrlRequest(const QString& url) override; virtual void onQCefQueryRequest(const QCefQuery& query) override; virtual void onInvokeMethodNotify(int browserId, int frameId, const QString& method, const QVariantList& arguments) override;private:};#endif // CUSTOMCEFVIEW_H

  This class overrides some of QCefView's methods for related notification callbacks. To display the web page, just pass in the url, the code is as follows:

cefview = new CustomCefView("https://www.baidu.com/", this);ui.cefContainer->layout()->addWidget(cefview);demo implementation

  First of all, you need to compile.lib .dll and include together, convenient vs2019 link, create Qt GUI project, add customcefview.h and customcefview.cpp in QCefViewTest project to the project, and then add CefView to the interface layout. My interface code is as follows:

MyTest.h#pragma once#include #include "ui_MyTest.h"#include "customcefview.h"class MyTest : public QWidget{ Q_OBJECTpublic: MyTest(QWidget *parent = Q_NULLPTR);private: Ui::MyTestClass ui; CustomCefView* m_pCefView = nullptr;};MyTest.cpp#include "MyTest.h"#include #include MyTest::MyTest(QWidget *parent) : QWidget(parent){ ui.setupUi(this); QVBoxLayout* pVlay = new QVBoxLayout(this); QLabel* label = new QLabel(u8"Qt CEF Demo"); label->setFixedHeight(30); m_pCefView = new CustomCefView("https://www.baidu.com/", this); pVlay->addWidget(label); pVlay->addWidget(m_pCefView); setLayout(pVlay);}

  The above code is to display Baidu home page, press F5 to run, it will prompt no dll, put all the compiled files in the bin directory into the directory interface where exe is located, MyTest runs as follows:

The above is "QCefView how to use" all the content of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.