1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Integrating Python and QML — PyQt 4.12.1 Reference Guide</title>
<link rel="stylesheet" href="_static/classic.css" type="text/css" />
<link rel="stylesheet" href="_static/pygments.css" type="text/css" />
<script type="text/javascript">
var DOCUMENTATION_OPTIONS = {
URL_ROOT: './',
VERSION: '4.12.1',
COLLAPSE_INDEX: false,
FILE_SUFFIX: '.html',
HAS_SOURCE: true,
SOURCELINK_SUFFIX: '.txt'
};
</script>
<script type="text/javascript" src="_static/jquery.js"></script>
<script type="text/javascript" src="_static/underscore.js"></script>
<script type="text/javascript" src="_static/doctools.js"></script>
<link rel="shortcut icon" href="_static/logo_tn.ico"/>
<link rel="index" title="Index" href="genindex.html" />
<link rel="search" title="Search" href="search.html" />
<link rel="next" title="Integrating Python and JavaScript in QtWebKit" href="webkit.html" />
<link rel="prev" title="Support for QSettings" href="pyqt_qsettings.html" />
</head>
<body>
<div class="related" role="navigation" aria-label="related navigation">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="genindex.html" title="General Index"
accesskey="I">index</a></li>
<li class="right" >
<a href="py-modindex.html" title="Python Module Index"
>modules</a> |</li>
<li class="right" >
<a href="webkit.html" title="Integrating Python and JavaScript in QtWebKit"
accesskey="N">next</a> |</li>
<li class="right" >
<a href="pyqt_qsettings.html" title="Support for QSettings"
accesskey="P">previous</a> |</li>
<li class="nav-item nav-item-0"><a href="index.html">PyQt 4.12.1 Reference Guide</a> »</li>
</ul>
</div>
<div class="document">
<div class="documentwrapper">
<div class="bodywrapper">
<div class="body" role="main">
<div class="section" id="integrating-python-and-qml">
<h1>Integrating Python and QML<a class="headerlink" href="#integrating-python-and-qml" title="Permalink to this headline">¶</a></h1>
<p>Qt v4.7 introduced QML as a means of declaratively describing a user interface
and using JavaScript as a scripting language within QML. It is possible to
write complete standalone QML applications, or to combine them with C++.</p>
<p>PyQt4 supports the integration of Python and QML as far as it can - given the
limitations of the QML implementation.</p>
<p>There are three types of QML application:</p>
<ul class="simple">
<li><em>Pure</em> applications that are written entirely in QML and can be run using the
<strong class="program">qmlviewer</strong> tool provided with Qt. PyQt4 fully supports this type
of application. The examples provided by <strong class="program">qtdemo.py</strong> under the <em>Qt
Declarative Examples</em> heading are all of this type.</li>
<li>QML allows <code class="docutils literal"><span class="pre">QObject</span></code> instances to be used in QML applications. QML code is
able to call an object’s slots and has read and write access to the object’s
properties. QML code can also respond to changes to the value of a property.
PyQt4 fully supports the use objects created in Python in this way. The
<strong class="program">minehunt.py</strong> example under the <em>Demonstrations</em> heading of
<strong class="program">qtdemo.py</strong> is an example of this type of application.</li>
<li>QML also allows <code class="docutils literal"><span class="pre">QObject</span></code> sub-classes to be used in QML applications so
that new instances are created from QML. PyQt4 does not support this. The
reason is that QML uses information generated at compile time (specifically
it uses <code class="docutils literal"><span class="pre">QObject::staticMetaObject</span></code>) rather than information created
dynamically at run time (i.e. <code class="docutils literal"><span class="pre">QObject::metaObject()</span></code>). This approach is
fine for a static language like C++ but causes problems for languages such as
Python that allow types to created dynamically. This limitation doesn’t
place any restriction on the functionality of a Python/QML application, it
only places restrictions on how that application is written.</li>
</ul>
<p>QML can implement JavaScript functions and define signals. PyQt4 allows both
of these to be accessed transparently from Python. The following is a simple
example application that displays the current date and time when the user
clicks on it.</p>
<p>The following is the QML (in the <code class="file docutils literal"><span class="pre">message.qml</span></code>) that defines the user
interface:</p>
<div class="highlight-default"><div class="highlight"><pre><span></span><span class="kn">import</span> <span class="nn">Qt</span> <span class="mf">4.7</span>
<span class="n">Rectangle</span> <span class="p">{</span>
<span class="n">signal</span> <span class="n">messageRequired</span><span class="p">;</span>
<span class="n">function</span> <span class="n">updateMessage</span><span class="p">(</span><span class="n">text</span><span class="p">)</span> <span class="p">{</span>
<span class="n">messageText</span><span class="o">.</span><span class="n">text</span> <span class="o">=</span> <span class="n">text</span>
<span class="p">}</span>
<span class="n">anchors</span><span class="o">.</span><span class="n">fill</span><span class="p">:</span> <span class="n">parent</span><span class="p">;</span> <span class="n">color</span><span class="p">:</span> <span class="s2">"black"</span>
<span class="n">Text</span> <span class="p">{</span>
<span class="nb">id</span><span class="p">:</span> <span class="n">messageText</span>
<span class="n">anchors</span><span class="o">.</span><span class="n">centerIn</span><span class="p">:</span> <span class="n">parent</span><span class="p">;</span> <span class="n">color</span><span class="p">:</span> <span class="s2">"white"</span>
<span class="p">}</span>
<span class="n">MouseArea</span> <span class="p">{</span>
<span class="n">anchors</span><span class="o">.</span><span class="n">fill</span><span class="p">:</span> <span class="n">parent</span>
<span class="n">onClicked</span><span class="p">:</span> <span class="n">messageRequired</span><span class="p">()</span>
<span class="p">}</span>
<span class="p">}</span>
</pre></div>
</div>
<p>This defines a signal <code class="docutils literal"><span class="pre">messageRequired</span></code> which is emitted when the user clicks
on the mouse area. It also implements a function <code class="docutils literal"><span class="pre">updateMessage()</span></code> which
updates the message being displayed.</p>
<p>The following is the Python code that implements the application logic:</p>
<div class="highlight-default"><div class="highlight"><pre><span></span><span class="kn">import</span> <span class="nn">sys</span>
<span class="kn">from</span> <span class="nn">PyQt4.QtCore</span> <span class="k">import</span> <span class="n">QDateTime</span><span class="p">,</span> <span class="n">QObject</span><span class="p">,</span> <span class="n">QUrl</span><span class="p">,</span> <span class="n">pyqtSignal</span>
<span class="kn">from</span> <span class="nn">PyQt4.QtGui</span> <span class="k">import</span> <span class="n">QApplication</span>
<span class="kn">from</span> <span class="nn">PyQt4.QtDeclarative</span> <span class="k">import</span> <span class="n">QDeclarativeView</span>
<span class="c1"># This class will emit the current date and time as a signal when</span>
<span class="c1"># requested.</span>
<span class="k">class</span> <span class="nc">Now</span><span class="p">(</span><span class="n">QObject</span><span class="p">):</span>
<span class="n">now</span> <span class="o">=</span> <span class="n">pyqtSignal</span><span class="p">(</span><span class="nb">str</span><span class="p">)</span>
<span class="k">def</span> <span class="nf">emit_now</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
<span class="n">formatted_date</span> <span class="o">=</span> <span class="n">QDateTime</span><span class="o">.</span><span class="n">currentDateTime</span><span class="p">()</span><span class="o">.</span><span class="n">toString</span><span class="p">()</span>
<span class="bp">self</span><span class="o">.</span><span class="n">now</span><span class="o">.</span><span class="n">emit</span><span class="p">(</span><span class="n">formatted_date</span><span class="p">)</span>
<span class="n">app</span> <span class="o">=</span> <span class="n">QApplication</span><span class="p">(</span><span class="n">sys</span><span class="o">.</span><span class="n">argv</span><span class="p">)</span>
<span class="n">now</span> <span class="o">=</span> <span class="n">Now</span><span class="p">()</span>
<span class="c1"># Create the QML user interface.</span>
<span class="n">view</span> <span class="o">=</span> <span class="n">QDeclarativeView</span><span class="p">()</span>
<span class="n">view</span><span class="o">.</span><span class="n">setSource</span><span class="p">(</span><span class="n">QUrl</span><span class="p">(</span><span class="s1">'message.qml'</span><span class="p">))</span>
<span class="n">view</span><span class="o">.</span><span class="n">setResizeMode</span><span class="p">(</span><span class="n">QDeclarativeView</span><span class="o">.</span><span class="n">SizeRootObjectToView</span><span class="p">)</span>
<span class="c1"># Get the root object of the user interface. It defines a</span>
<span class="c1"># 'messageRequired' signal and JavaScript 'updateMessage' function. Both</span>
<span class="c1"># can be accessed transparently from Python.</span>
<span class="n">rootObject</span> <span class="o">=</span> <span class="n">view</span><span class="o">.</span><span class="n">rootObject</span><span class="p">()</span>
<span class="c1"># Provide the current date and time when requested by the user interface.</span>
<span class="n">rootObject</span><span class="o">.</span><span class="n">messageRequired</span><span class="o">.</span><span class="n">connect</span><span class="p">(</span><span class="n">now</span><span class="o">.</span><span class="n">emit_now</span><span class="p">)</span>
<span class="c1"># Update the user interface with the current date and time.</span>
<span class="n">now</span><span class="o">.</span><span class="n">now</span><span class="o">.</span><span class="n">connect</span><span class="p">(</span><span class="n">rootObject</span><span class="o">.</span><span class="n">updateMessage</span><span class="p">)</span>
<span class="c1"># Provide an initial message as a prompt.</span>
<span class="n">rootObject</span><span class="o">.</span><span class="n">updateMessage</span><span class="p">(</span><span class="s2">"Click to get the current date and time"</span><span class="p">)</span>
<span class="c1"># Display the user interface and allow the user to interact with it.</span>
<span class="n">view</span><span class="o">.</span><span class="n">setGeometry</span><span class="p">(</span><span class="mi">100</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span> <span class="mi">400</span><span class="p">,</span> <span class="mi">240</span><span class="p">)</span>
<span class="n">view</span><span class="o">.</span><span class="n">show</span><span class="p">()</span>
<span class="n">app</span><span class="o">.</span><span class="n">exec_</span><span class="p">()</span>
</pre></div>
</div>
<p>Hopefully the comments in the code are sufficient explanation. The important
things to note are that the signal and JavaScript function appear as
appropriate attributes of the root object <code class="docutils literal"><span class="pre">QDeclarativeItem</span></code> returned by the
<code class="docutils literal"><span class="pre">rootObject()</span></code> method of <code class="docutils literal"><span class="pre">QDeclarativeView</span></code> and can be connected to and
called respectively.</p>
</div>
</div>
</div>
</div>
<div class="sphinxsidebar" role="navigation" aria-label="main navigation">
<div class="sphinxsidebarwrapper">
<p class="logo"><a href="index.html">
<img class="logo" src="_static/logo.png" alt="Logo"/>
</a></p>
<h4>Previous topic</h4>
<p class="topless"><a href="pyqt_qsettings.html"
title="previous chapter">Support for QSettings</a></p>
<h4>Next topic</h4>
<p class="topless"><a href="webkit.html"
title="next chapter">Integrating Python and JavaScript in QtWebKit</a></p>
<div id="searchbox" style="display: none" role="search">
<h3>Quick search</h3>
<form class="search" action="search.html" method="get">
<div><input type="text" name="q" /></div>
<div><input type="submit" value="Go" /></div>
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
</div>
</div>
<div class="clearer"></div>
</div>
<div class="related" role="navigation" aria-label="related navigation">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="genindex.html" title="General Index"
>index</a></li>
<li class="right" >
<a href="py-modindex.html" title="Python Module Index"
>modules</a> |</li>
<li class="right" >
<a href="webkit.html" title="Integrating Python and JavaScript in QtWebKit"
>next</a> |</li>
<li class="right" >
<a href="pyqt_qsettings.html" title="Support for QSettings"
>previous</a> |</li>
<li class="nav-item nav-item-0"><a href="index.html">PyQt 4.12.1 Reference Guide</a> »</li>
</ul>
</div>
<div class="footer" role="contentinfo">
© Copyright 2016 Riverbank Computing Limited.
Created using <a href="http://sphinx-doc.org/">Sphinx</a> 1.6.2.
</div>
</body>
</html>
|
