(Difference between revisions)

Connecting to a QObjects signal with JavaScript slot in Qt WebKit

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Merge KB into wiki)
hamishwillee (Talk | contribs)

Latest revision as of 05:04, 14 June 2012

Article Metadata
Tested with
Devices(s): Nokia N97, Nokia N900
Platform(s): Qt
Keywords: Qt, web, WebKit, HTML, QWebView
Created: taaidant (07 Dec 2009)
Last edited: hamishwillee (14 Jun 2012)


[edit] Overview

This snippet demonstrates how to connect an exposed QObjects signal to a JavaScript slot with the Qt WebKit.

[edit] Preconditions

[edit] Code

First, we need to reference a HTML page and a JavaScript file with the resource file. The resource file also needs to be referenced from the project file.

[edit] WebKit_JS_signal.pro

QT += webkit
TARGET = WebKit_JS_slot
SOURCES += main.cpp \
mainwindow.cpp \
HEADERS += mainwindow.h \
FORMS += mainwindow.ui
RESOURCES += resources.qrc

[edit] resources.qrc

Here we reference all the required resources, like #view.html, the jquery.js helper library, and #signal.js.

<qresource prefix="/">

[edit] view.html

This is the HTML we will display in the QWebView and where we'll reference the JavaScript files.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Copyright (c) 2009 Nokia Corporation. -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<!-- You reference the resources with qrc:/ -->
<!-- JavaScript includes -->
<!-- jQuery http://jquery.com/ -->
<script type="text/javascript" src="qrc:/jquery.js" />
<!-- signal -->
<script type="text/javascript" src="qrc:/signal.js" />
<h1>Demonstrates signals</h1>

[edit] signal.js

* This is run after the the web page has been rendered.
* $(document).ready documented here:
* http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

$(document).ready(function() {
try {
/* This connects sampleQObjects signal to our slot */
/* This calls a slot which then in turn emits the signal. */
catch(e) {
function slot(object) {
var objectString = object.sender +
" has emited signal " +
object.signalsEmited +
" times.";

[edit] Postconditions

You've successfully connected an exposed QObject signal with a JavaScript slot with Qt WebKit.

[edit] See also

This page was last modified on 14 June 2012, at 05:04.
190 page views in the last 30 days.