×
Namespaces

Variants
Actions
(Difference between revisions)

Connecting to a QObjects signal with JavaScript slot in Qt WebKit

From Nokia Developer Wiki
Jump to: navigation, search
seppo_fn (Talk | contribs)
hamishwillee (Talk | contribs)
 
(13 intermediate revisions by 5 users not shown)
Line 1: Line 1:
{{CodeSnippet
+
[[Category:Code Snippet]][[Category:Code Snippet]][[Category:Qt WebKit]]
|id=
+
{{ArticleMetaData <!-- v1.2 -->
|platform=Qt
+
|sourcecode= <!-- Link to example source code (e.g. [[Media:The Code Example ZIP.zip]]) -->
|devices=Nokia N97, Nokia N900
+
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
|category=Qt
+
|devices= Nokia N97, Nokia N900
|subcategory=
+
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
|creationdate=December 4, 2009
+
|platform= Qt
|keywords=Qt, web, WebKit, HTML, QWebView
+
|devicecompatability= <!-- Compatible devices (e.g.: All* (must have GPS) ) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Empty or one of Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= Qt, web, WebKit, HTML, QWebView
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20091207
 +
|author= [[User:Taaidant]]
 +
<!-- The following are not in current metadata -->
 +
|subcategory= Browsing, WebKit
 +
|id= CS001545
 
}}
 
}}
  
 
==Overview==
 
==Overview==
  
This snippet demonstrates how to connect a exposed QObjects signal to a JavaScript slot with [http://doc.trolltech.com/qtwebkit.html Qt WebKit].
+
This snippet demonstrates how to connect an exposed QObjects signal to a JavaScript slot with the [http://doc.qt.nokia.com/4.7/qtwebkit.html Qt WebKit].
  
 
==Preconditions==
 
==Preconditions==
  
 
* Qt is installed on your platform.
 
* Qt is installed on your platform.
** S60:
+
** Symbian S60:
*** Download Qt for Symbian release from here: [http://qt.nokia.com/downloads Qt Downloads]
+
*** Download Qt release from here: [http://qt.nokia.com/downloads Qt Downloads]
*** Install Qt for Symbian: [[Installing Qt on S60]]
+
*** Install Qt: [[How to Install Qt]]
*** Check this link for the installation guide: [ How to install the package]
+
 
** Maemo:
 
** Maemo:
 
*** More information about Qt on Maemo can be found here: [http://qt4.garage.maemo.org/ Qt4 Maemo port]
 
*** More information about Qt on Maemo can be found here: [http://qt4.garage.maemo.org/ Qt4 Maemo port]
* You've exposed the QObject like in this article [[Tools:Exposing QObjects to Qt Webkit]].
+
* You've exposed the QObject as demonstrated in the article [[Exposing QObjects to Qt Webkit]].
  
 
== Code ==
 
== Code ==
  
First we need to reference a html page and JavaScript file with the resource file. Of course the resource file has to be referenced also from the project file.
+
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.
  
 
=== WebKit_JS_signal.pro ===
 
=== WebKit_JS_signal.pro ===
Line 45: Line 61:
 
=== resources.qrc ===
 
=== resources.qrc ===
  
Here we reference all the needed resources, like the [[#view.html]], [http://jquery.com/ jquery.js helper library] and [[#signal.js]].
+
Here we reference all the required resources, like [[#view.html]], the [http://jquery.com/ jquery.js helper library], and [[#signal.js]].
  
 
<code xml>
 
<code xml>
Line 59: Line 75:
 
=== view.html ===
 
=== view.html ===
  
This is the HTML we will be displaying in the QWebView and where we'll reference the JavaScript files.
+
This is the HTML we will display in the QWebView and where we'll reference the JavaScript files.
  
 
<code xml>
 
<code xml>
Line 103: Line 119:
  
 
function slot(object) {
 
function slot(object) {
   var objectString = object.sender + " has emited signal " + object.signalsEmited + " times.";
+
   var objectString = object.sender +  
 +
                    " has emited signal " +  
 +
                    object.signalsEmited +  
 +
                    " times.";
 
   alert(objectString);
 
   alert(objectString);
 
}
 
}
Line 110: Line 129:
 
==Postconditions==
 
==Postconditions==
  
You've successfully connected to an exposed QObject signal to a JavaScript slot with Qt WebKit.
+
You've successfully connected an exposed QObject signal with a JavaScript slot with Qt WebKit.
  
 
==See also==
 
==See also==
  
* [[Calling an exposed QObject slot from Qts WebKit with JavaScript]]
+
* [[Calling an exposed QObject slot from Qt WebKit with JavaScript]]

Latest revision as of 05:04, 14 June 2012

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

Contents

[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
TEMPLATE = app
SOURCES += main.cpp \
mainwindow.cpp \
sampleqobject.cpp
HEADERS += mainwindow.h \
sampleqobject.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.

<RCC>
<qresource prefix="/">
<file>view.html</file>
<file>jquery.js</file>
<file>signal.js</file>
</qresource>
</RCC>

[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">
<head>
<!-- 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" />
 
<title>Signal</title>
</head>
<body>
<h1>Demonstrates signals</h1>
</body>
</html>

[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 */
sampleQObject.signal.connect(slot);
/* This calls a slot which then in turn emits the signal. */
sampleQObject.slotThatEmitsSignal();
}
catch(e) {
alert(e);
}
});
 
function slot(object) {
var objectString = object.sender +
" has emited signal " +
object.signalsEmited +
" times.";
alert(objectString);
}

[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.
226 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×