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
|
<?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">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- qtscriptcalculator.qdoc -->
<title>Qt 4.8: QtScript Calculator Example</title>
<link rel="stylesheet" type="text/css" href="style/offline.css" />
</head>
<body>
<div class="header" id="qtdocheader">
<div class="content">
<a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
</div>
<div class="breadcrumb toolblock">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<!-- Breadcrumbs go here -->
<li><a href="all-examples.html">Examples</a></li>
<li>QtScript Calculator Example</li>
</ul>
</div>
</div>
<div class="content mainContent">
<h1 class="title">QtScript Calculator Example</h1>
<span class="subtitle"></span>
<!-- $$$script/calculator-description -->
<div class="descr"> <a name="details"></a>
<p>Files:</p>
<ul>
<li><a href="script-calculator-calculator-js.html">script/calculator/calculator.js</a></li>
<li><a href="script-calculator-calculator-ui.html">script/calculator/calculator.ui</a></li>
<li><a href="script-calculator-main-cpp.html">script/calculator/main.cpp</a></li>
<li><a href="script-calculator-calculator-pro.html">script/calculator/calculator.pro</a></li>
<li><a href="script-calculator-calculator-qrc.html">script/calculator/calculator.qrc</a></li>
</ul>
<p>In the <a href="qtscript.html">QtScript</a> Calculator example, we show how to implement the functionality of a calculator widget.<p class="centerAlign"><img src="images/qtscript-calculator-example.png" alt="" /></p><p>The program logic in this example is a fairly straight port of the logic in the C++ <a href="widgets-calculator.html">Calculator Example</a>. The graphical user interface is defined in a UI file.</p>
<p>The C++ part of the example consists of four steps:</p>
<ul>
<li>Evaluate the script code that defines the <tt>Calculator</tt> class.<pre class="cpp"> <span class="type"><a href="qscriptengine.html">QScriptEngine</a></span> engine;
<span class="type"><a href="qstring.html">QString</a></span> scriptFileName(<span class="string">":/calculator.js"</span>);
<span class="type"><a href="qfile.html">QFile</a></span> scriptFile(scriptFileName);
scriptFile<span class="operator">.</span>open(<span class="type"><a href="qiodevice.html">QIODevice</a></span><span class="operator">::</span>ReadOnly);
engine<span class="operator">.</span>evaluate(scriptFile<span class="operator">.</span>readAll()<span class="operator">,</span> scriptFileName);
scriptFile<span class="operator">.</span>close();</pre>
</li>
<li>Create a widget from the UI file using <a href="quiloader.html">QUiLoader</a>.<pre class="cpp"> <span class="type"><a href="quiloader.html">QUiLoader</a></span> loader;
<span class="type"><a href="qfile.html">QFile</a></span> uiFile(<span class="string">":/calculator.ui"</span>);
uiFile<span class="operator">.</span>open(<span class="type"><a href="qiodevice.html">QIODevice</a></span><span class="operator">::</span>ReadOnly);
<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>ui <span class="operator">=</span> loader<span class="operator">.</span>load(<span class="operator">&</span>uiFile);
uiFile<span class="operator">.</span>close();</pre>
</li>
<li>Call the Calculator constructor function to create a new <tt>Calculator</tt> script object, passing the widget as argument.<pre class="cpp"> <span class="type"><a href="qscriptvalue.html">QScriptValue</a></span> ctor <span class="operator">=</span> engine<span class="operator">.</span>evaluate(<span class="string">"Calculator"</span>);
<span class="type"><a href="qscriptvalue.html">QScriptValue</a></span> scriptUi <span class="operator">=</span> engine<span class="operator">.</span>newQObject(ui<span class="operator">,</span> <span class="type"><a href="qscriptengine.html">QScriptEngine</a></span><span class="operator">::</span>ScriptOwnership);
<span class="type"><a href="qscriptvalue.html">QScriptValue</a></span> calc <span class="operator">=</span> ctor<span class="operator">.</span>construct(<span class="type">QScriptValueList</span>() <span class="operator"><</span><span class="operator"><</span> scriptUi);</pre>
</li>
<li>Show the widget and start the application event loop.<pre class="cpp"> ui<span class="operator">-</span><span class="operator">></span>show();
<span class="keyword">return</span> app<span class="operator">.</span>exec();</pre>
</li>
</ul>
<p>On the script side, the <tt>Calculator</tt> constructor function initializes the instance variables of the new <tt>Calculator</tt> object, and connects the clicked() signal of the form's buttons to corresponding functions defined in the <tt>Calculator</tt> prototype object; the effect is that when a button is clicked, the proper script function will be invoked to carry out the operation.</p>
<pre class="js"> <span class="keyword">function</span> <span class="name">Calculator</span>(<span class="name">ui</span>)
{
this.<span class="name">ui</span> <span class="operator">=</span> <span class="name">ui</span>;
this.<span class="name">pendingAdditiveOperator</span> <span class="operator">=</span> <span class="name">Calculator</span>.<span class="name">NO_OPERATOR</span>;
this.<span class="name">pendingMultiplicativeOperator</span> <span class="operator">=</span> <span class="name">Calculator</span>.<span class="name">NO_OPERATOR</span>;
this.<span class="name">sumInMemory</span> <span class="operator">=</span> <span class="number">0</span>;
this.<span class="name">sumSoFar</span> <span class="operator">=</span> <span class="number">0</span>;
this.<span class="name">factorSoFar</span> <span class="operator">=</span> <span class="number">0</span>;
this.<span class="name">waitingForOperand</span> <span class="operator">=</span> <span class="number">true</span>;
<span class="keyword">with</span> (<span class="name">ui</span>) {
<span class="name">display</span>.<span class="name">text</span> <span class="operator">=</span> <span class="string">"0"</span>;
<span class="name">zeroButton</span>.<span class="name">clicked</span>.<span class="name">connect</span>(this.<span class="name">digitClicked</span>.<span class="name">bind</span>(this, <span class="number">0</span>));
<span class="name">oneButton</span>.<span class="name">clicked</span>.<span class="name">connect</span>(this.<span class="name">digitClicked</span>.<span class="name">bind</span>(this, <span class="number">1</span>));
<span class="name">twoButton</span>.<span class="name">clicked</span>.<span class="name">connect</span>(this.<span class="name">digitClicked</span>.<span class="name">bind</span>(this, <span class="number">2</span>));
<span class="name">threeButton</span>.<span class="name">clicked</span>.<span class="name">connect</span>(this.<span class="name">digitClicked</span>.<span class="name">bind</span>(this, <span class="number">3</span>));
<span class="name">fourButton</span>.<span class="name">clicked</span>.<span class="name">connect</span>(this.<span class="name">digitClicked</span>.<span class="name">bind</span>(this, <span class="number">4</span>));
<span class="name">fiveButton</span>.<span class="name">clicked</span>.<span class="name">connect</span>(this.<span class="name">digitClicked</span>.<span class="name">bind</span>(this, <span class="number">5</span>));
<span class="name">sixButton</span>.<span class="name">clicked</span>.<span class="name">connect</span>(this.<span class="name">digitClicked</span>.<span class="name">bind</span>(this, <span class="number">6</span>));
<span class="name">sevenButton</span>.<span class="name">clicked</span>.<span class="name">connect</span>(this.<span class="name">digitClicked</span>.<span class="name">bind</span>(this, <span class="number">7</span>));
<span class="name">eightButton</span>.<span class="name">clicked</span>.<span class="name">connect</span>(this.<span class="name">digitClicked</span>.<span class="name">bind</span>(this, <span class="number">8</span>));
<span class="name">nineButton</span>.<span class="name">clicked</span>.<span class="name">connect</span>(this.<span class="name">digitClicked</span>.<span class="name">bind</span>(this, <span class="number">9</span>));
<span class="name">pointButton</span>.<span class="name">clicked</span>.<span class="name">connect</span>(this, <span class="string">"pointClicked"</span>);
<span class="name">changeSignButton</span>.<span class="name">clicked</span>.<span class="name">connect</span>(this, <span class="string">"changeSignClicked"</span>);
<span class="name">backspaceButton</span>.<span class="name">clicked</span>.<span class="name">connect</span>(this, <span class="string">"backspaceClicked"</span>);
<span class="name">clearButton</span>.<span class="name">clicked</span>.<span class="name">connect</span>(this, <span class="string">"clear"</span>);
<span class="name">clearAllButton</span>.<span class="name">clicked</span>.<span class="name">connect</span>(this, <span class="string">"clearAll"</span>);
<span class="name">clearMemoryButton</span>.<span class="name">clicked</span>.<span class="name">connect</span>(this, <span class="string">"clearMemory"</span>);
<span class="name">readMemoryButton</span>.<span class="name">clicked</span>.<span class="name">connect</span>(this, <span class="string">"readMemory"</span>);
<span class="name">setMemoryButton</span>.<span class="name">clicked</span>.<span class="name">connect</span>(this, <span class="string">"setMemory"</span>);
<span class="name">addToMemoryButton</span>.<span class="name">clicked</span>.<span class="name">connect</span>(this, <span class="string">"addToMemory"</span>);
<span class="name">divisionButton</span>.<span class="name">clicked</span>.<span class="name">connect</span>(this.<span class="name">multiplicativeOperatorClicked</span>.<span class="name">bind</span>(this, <span class="name">Calculator</span>.<span class="name">DIVISION_OPERATOR</span>));
<span class="name">timesButton</span>.<span class="name">clicked</span>.<span class="name">connect</span>(this.<span class="name">multiplicativeOperatorClicked</span>.<span class="name">bind</span>(this, <span class="name">Calculator</span>.<span class="name">TIMES_OPERATOR</span>));
<span class="name">minusButton</span>.<span class="name">clicked</span>.<span class="name">connect</span>(this.<span class="name">additiveOperatorClicked</span>.<span class="name">bind</span>(this, <span class="name">Calculator</span>.<span class="name">MINUS_OPERATOR</span>));
<span class="name">plusButton</span>.<span class="name">clicked</span>.<span class="name">connect</span>(this.<span class="name">additiveOperatorClicked</span>.<span class="name">bind</span>(this, <span class="name">Calculator</span>.<span class="name">PLUS_OPERATOR</span>));
<span class="name">squareRootButton</span>.<span class="name">clicked</span>.<span class="name">connect</span>(this.<span class="name">unaryOperatorClicked</span>.<span class="name">bind</span>(this, <span class="name">Calculator</span>.<span class="name">SQUARE_OPERATOR</span>));
<span class="name">powerButton</span>.<span class="name">clicked</span>.<span class="name">connect</span>(this.<span class="name">unaryOperatorClicked</span>.<span class="name">bind</span>(this, <span class="name">Calculator</span>.<span class="name">POWER_OPERATOR</span>));
<span class="name">reciprocalButton</span>.<span class="name">clicked</span>.<span class="name">connect</span>(this.<span class="name">unaryOperatorClicked</span>.<span class="name">bind</span>(this, <span class="name">Calculator</span>.<span class="name">RECIPROCAL_OPERATOR</span>));
<span class="name">equalButton</span>.<span class="name">clicked</span>.<span class="name">connect</span>(this, <span class="string">"equalClicked"</span>);
}
}</pre>
<p>A <tt>Calculator</tt> object is just a plain script object; it is not a widget. Instead, it stores a reference to the calculator form (the widget) in an instance variable, <tt>ui</tt>. The calculator script functions can access components of the form by referring to the proper children of the <tt>ui</tt> member.</p>
<pre class="js"> <span class="name">Calculator</span>.<span class="name">prototype</span>.<span class="name">digitClicked</span> <span class="operator">=</span> <span class="keyword">function</span>(<span class="name">digitValue</span>)
{
<span class="keyword">if</span> ((<span class="name">digitValue</span> <span class="operator">==</span> <span class="number">0</span>) <span class="operator">&&</span> (this.<span class="name">ui</span>.<span class="name">display</span>.<span class="name">text</span> <span class="operator">==</span> <span class="string">"0"</span>))
<span class="keyword">return</span>;
<span class="keyword">if</span> (this.<span class="name">waitingForOperand</span>) {
this.<span class="name">ui</span>.<span class="name">display</span>.<span class="name">clear</span>();
this.<span class="name">waitingForOperand</span> <span class="operator">=</span> <span class="number">false</span>;
}
this.<span class="name">ui</span>.<span class="name">display</span>.<span class="name">text</span> <span class="operator">+=</span> <span class="name">digitValue</span>;
}</pre>
<p>The digitClicked() function is called when a digit button is clicked, with the input digit as argument.</p>
<pre class="js"> <span class="name">Calculator</span>.<span class="name">prototype</span>.<span class="name">changeSignClicked</span> <span class="operator">=</span> <span class="keyword">function</span>()
{
var <span class="name">text</span> = this.<span class="name">ui</span>.<span class="name">display</span>.<span class="name">text</span>;
var <span class="name">value</span> = <span class="name">text</span> <span class="operator">-</span> <span class="number">0</span>;
<span class="keyword">if</span> (<span class="name">value</span> <span class="operator">></span> <span class="number">0</span>) {
<span class="name">text</span> <span class="operator">=</span> <span class="string">"-"</span> <span class="operator">+</span> <span class="name">text</span>;
} else <span class="keyword">if</span> (<span class="name">value</span> <span class="operator"><</span> <span class="number">0</span>) {
<span class="name">text</span> <span class="operator">=</span> <span class="name">text</span>.<span class="name">slice</span>(<span class="number">1</span>);
}
this.<span class="name">ui</span>.<span class="name">display</span>.<span class="name">text</span> <span class="operator">=</span> <span class="name">text</span>;
}</pre>
<p>The changeSign() function shows how we retrieve the text property of the calculator's display, change it appropriately, and write back the new value.</p>
</div>
<!-- @@@script/calculator -->
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2012 Nokia Corporation and/or its
subsidiaries. Documentation contributions included herein are the copyrights of
their respective owners.</p>
<br />
<p>
The documentation provided herein is licensed under the terms of the
<a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation
License version 1.3</a> as published by the Free Software Foundation.</p>
<p>
Documentation sources may be obtained from <a href="http://www.qt-project.org">
www.qt-project.org</a>.</p>
<br />
<p>
Nokia, Qt and their respective logos are trademarks of Nokia Corporation
in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. <a title="Privacy Policy"
href="http://en.gitorious.org/privacy_policy/">Privacy Policy</a></p>
</div>
</body>
</html>
|
