We can call JavaScript functions from C++ through the following steps:
- Create a new Qt Widgets Application project and add the webengine and webenginewidgets modules to your project.
- Open mainwindow.ui and remove the mainToolBar, menuBar, and statusBar.
- 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.
- 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 OK. Qt will automatically add a slot function to your source code. Repeat this step for the other button:
- Open mainwindow.h and add the following headers to it:
#include <QtWebEngineWidgets/QWebEngineView>
#include <QtWebChannel/QWebChannel>
#include <QMessageBox>
- Declare the class pointer of a QWebEngineView object called webview:
public:
explicit MainWindow(QWidget *parent = 0);
~MainWindow();
QWebEngineView* webview;
- Open mainwindow.cpp and 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);
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"));
}
- Define what will happen when the changeHtmlText button and the playUIAnimation button are clicked:
void MainWindow::on_changeHtmlTextButton_clicked() {
webview->page()->runJavaScript("changeHtmlText('Text has been replaced by C++!');");
}
void MainWindow::on_playUIAnimationButton_clicked() {
webview->page()->runJavaScript("startAnim();");
}
- Let's create a resource file for our project by going to File | New File or Project. Select Qt Resource File under the Qt category and click Choose.... Insert your desired filename and click Next, followed by Finish.
- Add an empty HTML file and all the required add-ons (jQuery, Bootstrap, and Font Awesome) to the project resources. Add the tux.png image file to the resources file as well, as we'll be using it in a short while in step 14.
- Open the HTML file we just created and add it to the project resources; in our case, it's called test.html. Add the following HTML code to the file:
<!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 code, which is wrapped within the <script> tags, to the <head> element of our HTML file:
<script>
$(document).ready(function() {
$("#tux").css({ opacity:0, width:"0%", height:"0%" });
$("#listgroup").hide();
$("#listgroup2").hide();
new QWebChannel(qt.webChannelTransport, function(channel) {
mainWindow = channel.objects.mainWindow;
});
});
function changeHtmlText(newText) {
$("#infotext").html(newText);
}
- Define the startAnim() function:
function startAnim() {
// Reset
$("#tux").css({ opacity:0, width:"0%", height:"0%" });
$("#listgroup").hide();
$("#listgroup2").hide();
$("#tux").animate({ opacity:1.0, width:"100%", height:"100%" }, 1000, function() {
// tux animation complete
$("#listgroup").slideDown(1000, function() {
// listgroup animation complete
$("#listgroup2").fadeIn(1500);
});
});
}
</script>
- Add the following code to the <body> element of our HTML file:
<div class="container-fluid">
<form id="example-form" action="#" class="container-fluid">
<div class="form-group">
<div class="col-md-12"><h3>Call Javascript Function from C++</h3></div>
<div class="col-md-12">
<div class="alert alert-info" role="alert"><i class="fa fa-info-circle"></i> <span id="infotext"> Change this text using C++.</span></div>
</div>
<div class="col-md-2">
<img id="tux" src="tux.png"></img>
</div>
- Continue writing the following code to which we've added a list:
<div class="col-md-5">
<ul id="listgroup" class="list-group">
<li class="list-group-item">Cras justoodio</li>
<li class="list-group-item">Dapibus acfacilisis in</li>
<li class="list-group-item">Morbi leorisus</li>
<li class="list-group-item">Porta acconsectetur ac</li>
<li class="list-group-item">Vestibulum ateros</li>
</ul>
</div>
<div id="listgroup2" class="col-md-5">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">Item heading</h4>
<p class="list-group-item-text">Cras justo odio</p>
</a>
- The code continues as we add the remaining items to the second list:
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Item heading</h4>
<p class="list-group-item-text">Dapibus ac facilisis in</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Item heading</h4>
<p class="list-group-item-text">Morbi leo risus</p>
</a>
</div>
</div>
</form>
</div>
- Build and run the program; you should get a similar result to that in the following screenshot. When you click on the Change HTML Text button, the information text is located within the top panel. If you click on the Play UI Animation button, the penguin image, alongside the two sets of widgets, will appear one after the other, with different animations:
