Let's learn how to call C++ functions from JavaScript using the following steps:
- Create a Qt Widgets Application project. Open the project file (.pro) and add the following modules to the project:
QT += core gui webengine webenginewidgets
- Open mainwindow.ui and delete the mainToolBar, menuBar, and statusBar, as we don't need any of these in this example program.
- 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 how it look like after we applied the font properties to our style sheet:
- Go to File | New File or Project and create a resource file. Add an empty HTML file and all the JavaScript files, CSS files, font files, and so on that belong to jQuery, Boostrap, and Font Awesome to your project resources:
- Open your HTML file, which in this case is called test.html. Link all the necessary JavaScript and CSS files to the HTML source code, between the <head> tags:
<!DOCTYPE html>
<html>
<head>
<script src="qrc:///qtwebchannel/qwebchannel.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
</head>
<body>
</body>
</html>
- Add the following JavaScript to the <head> element, wrapped between the <script> tags:
<script>
$(document).ready(function() {
new QWebChannel(qt.webChannelTransport, function(channel) {
mainWindow = channel.objects.mainWindow;
});
$("#login").click(function(e) {
e.preventDefault();
var user = $("#username").val();
var pass = $("#password").val();
mainWindow.showLoginInfo(user, pass);
});
- Print Good bye! when clicking on the changeText button with the following code:
$("#changeText").click(function(e) {
e.preventDefault();
mainWindow.changeQtText("Good bye!");
});
});
</script>
- Add the following code to the <body> element:
<div class="container-fluid">
<form id="example-form" action="#" class="container-fluid">
<div class="form-group">
<div class="col-md-12"><h3>Call C++ Function from Javascript</h3></div>
<div class="col-md-12">
<div class="alert alert-info" role="alert">
<i class="fa fa-info-circle"></i>
<span id="infotext">Click "Login" to send username and password variables to C++. Click "Change Cpp Text" to change the text label on Qt GUI.</span>
</div>
</div>
- Continuing from the previous code, this time, we create the input fields for username and password, with two buttons at the bottom called Login and Change Cpp Text:
<div class="col-md-12">
<label>Username:</label>
<input id="username" type="text"><p />
</div>
<div class="col-md-12">
<label>Password:</label> <input id="password" type="password"><p />
</div>
<div class="col-md-12">
<button id="login" class="btn btn-success" type="button"><i class="fa fa-check"></i> Login</button> <button id="changeText" class="btn btn-primary" type="button"> <i class="fa fa-pencil"></i> Change Cpp Text</button>
</div>
</div>
</form>
</div>
- Open mainwindow.h and add the following public functions to the MainWindow class:
public:
explicit MainWindow(QWidget *parent = 0);
~MainWindow();
Q_INVOKABLE void changeQtText(QString newText);
Q_INVOKABLE void showLoginInfo(QString user, QString pass);
- Open mainwindow.cpp and add the following headers to the top of the source code:
#include <QtWebEngineWidgets/QWebEngineView>
#include <QtWebChannel/QWebChannel>
#include <QMessageBox>
- Add the following code to the MainWindow constructor:
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow) {
qputenv("QTWEBENGINE_REMOTE_DEBUGGING", "1234");
ui->setupUi(this);
QWebEngineView* webview = new QWebEngineView();
ui->verticalLayout->addWidget(webview);
QWebChannel* webChannel = new QWebChannel();
webChannel->registerObject("mainWindow", this);
webview->page()->setWebChannel(webChannel);
webview->page()->load(QUrl("qrc:///html/test.html"));
}
- Declare what happens when changeQtText() and showLoginInfo() are called:
void MainWindow::changeQtText(QString newText) {
ui->label->setText(newText);
}
void MainWindow::showLoginInfo(QString user, QString pass) {
QMessageBox::information(this, "Login info", "Username is " + user + " and password is " + pass);
}
- Compile and run the program; you should see something similar to the following screenshot. If you click on the Change Cpp Text button, the word Hello! at the top will change to Goodbye! If you click on the Login button, a message box will appear and show you exactly what you typed in the Username and Password input fields:
