~oif-team/ubuntu/natty/qt4-x11/xi2.1

« back to all changes in this revision

Viewing changes to doc/html/gestures-overview.html

  • Committer: Bazaar Package Importer
  • Author(s): Alessandro Ghersi
  • Date: 2009-11-02 18:30:08 UTC
  • mfrom: (1.2.2 upstream)
  • mto: (15.2.5 experimental)
  • mto: This revision was merged to the branch mainline in revision 88.
  • Revision ID: james.westby@ubuntu.com-20091102183008-b6a4gcs128mvfb3m
Tags: upstream-4.6.0~beta1
ImportĀ upstreamĀ versionĀ 4.6.0~beta1

Show diffs side-by-side

added added

removed removed

Lines of Context:
 
1
<?xml version="1.0" encoding="iso-8859-1"?>
 
2
<!DOCTYPE html
 
3
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
 
4
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
5
<!-- gestures.qdoc -->
 
6
<head>
 
7
  <title>Qt 4.6: Gestures Programming</title>
 
8
  <link rel="start" href="index.html" />
 
9
  <link href="classic.css" rel="stylesheet" type="text/css" />
 
10
</head>
 
11
<body>
 
12
<table border="0" cellpadding="0" cellspacing="0" width="100%">
 
13
<tr>
 
14
<td align="left" valign="top" width="32"><a href="http://qt.nokia.com/"><img src="images/qt-logo.png" align="left" border="0" /></a></td>
 
15
<td width="1">&nbsp;&nbsp;</td><td class="postheader" valign="center"><a href="index.html"><font color="#004faf">Home</font></a>&nbsp;&middot; <a href="classes.html"><font color="#004faf">All&nbsp;Classes</font></a>&nbsp;&middot; <a href="functions.html"><font color="#004faf">All&nbsp;Functions</font></a>&nbsp;&middot; <a href="overviews.html"><font color="#004faf">Overviews</font></a></td><td class="searchBar" align="right" valign="center"><form action="http://www.google.com/cse" id="cse-search-box"><div><input type="hidden" name="cx" value="000136343326384750312:dhbxnqlakyu" /><input type="hidden" name="ie" value="UTF-8" /><input type="text" name="q" size="31" /><input type="submit" name="sa" value="Search" /></div></form></td>
 
16
</tr></table><p>
 
17
</p>
 
18
<h1 class="title">Gestures Programming<br /><span class="subtitle"></span>
 
19
</h1>
 
20
<p>Qt includes a framework for gesture programming that gives has the ability to form gestures from a series of events, independently of the input methods used. A gesture could be a particular movement of a mouse, a touch screen action, or a series of events from some other source. The nature of the input, the interpretation of the gesture and the action taken are the choice of the developer.</p>
 
21
<ul><li><a href="#overview">Overview</a></li>
 
22
<li><a href="#using-standard-gestures-with-widgets">Using Standard Gestures with Widgets</a></li>
 
23
<li><a href="#using-standard-gestures-with-graphics-items">Using Standard Gestures with Graphics Items</a></li>
 
24
<li><a href="#creating-your-own-gesture-recognizer">Creating Your Own Gesture Recognizer</a></li>
 
25
<li><a href="#the-imageviewer-example">The ImageViewer Example</a></li>
 
26
</ul>
 
27
<a name="overview"></a>
 
28
<h3>Overview</h3>
 
29
<p><a href="qgesture.html">QGesture</a> is the central class in Qt's gesture framework, providing the API used by classes that represent specific gestures, such as QPanGesture, QPinchGesture, and QSwipeGesture. These standard classes are ready to use, and each exposes functions and properties that give gesture-specific information about the user's input. This is described in the <a href="#using-standard-gestures-with-widgets">Using Standard Gestures With Widgets</a> section.</p>
 
30
<p><a href="qgesture.html">QGesture</a> is also designed to be subclassed and extended so that support for new gestures can be implemented by developers. Adding support for a new gesture involves implementing code to recognize the gesture from incoming events. This is described in the <a href="#creating-your-own-gesture-recognizer">Creating Your Own Gesture Recognizer</a> section.</p>
 
31
<a name="using-standard-gestures-with-widgets"></a>
 
32
<h3>Using Standard Gestures with Widgets</h3>
 
33
<p>Gesture objects are applied directly to widgets and other controls that accept user input &mdash; these are the <i>target objects</i>. When a gesture object is constructed, the target object is typically passed to the constructor, though it can also be passed as the argument to the setGestureTarget() function.</p>
 
34
<pre></pre>
 
35
<p>In the above code, the gesture is set up in the constructor of the target object itself, so the argument to the QSwipeGesture constructor is <i>this</i>.</p>
 
36
<p>When the user performs a gesture, various signals may be emitted by the gesture object. To monitor the user's actions, you need to connect signals from the gesture object to slots in your code.</p>
 
37
<pre></pre>
 
38
<p>Here, the triggered() signal is used to inform the application that a gesture was used. More precise monitoring of a gesture can be implemented by connecting its started(), canceled() and finished() signals to slots.</p>
 
39
<p>Responding to a signal is simply a matter of obtaining the gesture that sent it and examining the information it contains.</p>
 
40
<pre></pre>
 
41
<p>Here, we examine the direction in which the user swiped the widget and modify its contents accordingly.</p>
 
42
<a name="using-standard-gestures-with-graphics-items"></a>
 
43
<h3>Using Standard Gestures with Graphics Items</h3>
 
44
<p>The approach used for applying gestures to widgets can also be used with graphics items. However, instead of passing a target object to the gesture object's constructor, you set a target graphics item with the setGraphicsItem() function.</p>
 
45
<a name="creating-your-own-gesture-recognizer"></a>
 
46
<h3>Creating Your Own Gesture Recognizer</h3>
 
47
<p><a href="qgesture.html">QGesture</a> is a base class for a user defined gesture recognizer class. In order to implement the recognizer you will need to subclass the <a href="qgesture.html">QGesture</a> class and implement the pure virtual function filterEvent() to filter out events that are not relevant to your gesture.</p>
 
48
<p>Once you have implemented the filterEvent() function to make your own recognizer you can process events. A sequence of events may, according to your own rules, represent a gesture. The events can be singly passed to the recognizer via the filterEvent() function or as a stream of events by specifying a parent source of events. The events can be from any source and could result in any action as defined by the user. The source and action need not be graphical, though that would be the most likely scenario. To find how to connect a source of events to automatically feed into the recognizer see the <a href="qgesture.html">QGesture</a> documentation.</p>
 
49
<p>Recognizers based on <a href="qgesture.html">QGesture</a> can emit any of the following signals to indicate their progress in recognizing user input:</p>
 
50
<ul>
 
51
<li>triggered() is emitted when a gesture is recognized.</li>
 
52
<li>started() indicates that the gesture object has started to recognize user input.</li>
 
53
<li>finished() is emitted when the gesture object has recognized the user input as a gesture, and finished handling it.</li>
 
54
<li>canceled() indicates that the gesture was canceled, either by the user or by the application.</li>
 
55
</ul>
 
56
<p>These signals are emitted when the state changes with the call to updateState(), more than one signal may be emitted when a change of state occurs. There are four GestureStates</p>
 
57
<p><table class="generic" align="center" cellpadding="2" cellspacing="1" border="0">
 
58
<thead><tr valign="top" class="qt-style"><th>New State</th><th>Description</th><th><a href="qgesture.html">QGesture</a> Actions on Entering this State</th></tr></thead>
 
59
<tr valign="top" class="odd"><td><a href="qt.html#GestureState-enum">Qt::NoGesture</a></td><td>Initial value</td><td>emit canceled()</td></tr>
 
60
<tr valign="top" class="even"><td><a href="qt.html#GestureState-enum">Qt::GestureStarted</a></td><td>A continuous gesture has started</td><td>emit started() and emit triggered()</td></tr>
 
61
<tr valign="top" class="odd"><td><a href="qt.html#GestureState-enum">Qt::GestureUpdated</a></td><td>A gesture continues</td><td>emit triggered()</td></tr>
 
62
<tr valign="top" class="even"><td><a href="qt.html#GestureState-enum">Qt::GestureFinished</a></td><td>A gesture has finished.</td><td>emit finished()</td></tr>
 
63
</table></p>
 
64
<p><b>Note:</b> started() can be emitted if entering any state greater than NoGesture if NoGesture was the previous state. This means that your state machine does not need to explicitly use the <a href="qt.html#GestureState-enum">Qt::GestureStarted</a> state, you can simply proceed from NoGesture to <a href="qt.html#GestureState-enum">Qt::GestureUpdated</a> to emit a started() signal and a triggered() signal.</p>
 
65
<p>You may use some or all of these states when implementing the pure virtual function filterEvent(). filterEvent() will usually implement a state machine using the GestureState enums, but the details of which states are used is up to the developer.</p>
 
66
<p>You may also need to reimplement the virtual function reset() if internal data or objects need to be re-initialized. The function must conclude with a call to updateState() to change the current state to <a href="qt.html#GestureState-enum">Qt::NoGesture</a>.</p>
 
67
<a name="the-imageviewer-example"></a>
 
68
<h3>The ImageViewer Example</h3>
 
69
<p>To illustrate how to use <a href="qgesture.html">QGesture</a> we will look at the ImageViewer example. This example uses QPanGesture, a standard gesture, and an implementation of TapAndHoldGesture. Note that TapAndHoldGesture is platform-dependent.</p>
 
70
<pre> void TapAndHoldGesture::reset()
 
71
 {
 
72
     timer.stop();
 
73
     iteration = 0;
 
74
     position = startPosition = QPoint();
 
75
     updateState(Qt::NoGesture);
 
76
 }</pre>
 
77
<p>In ImageViewer we see that the ImageWidget class uses two gestures: QPanGesture and TapAndHoldGesture. The QPanGesture is a standard gesture which is part of Qt. TapAndHoldGesture is defined and implemented as part of the example. The ImageWidget listens for signals from the gestures, but is not interested in the started() signal.</p>
 
78
<pre> private slots:
 
79
     void gestureTriggered();
 
80
     void gestureFinished();
 
81
     void gestureCancelled();</pre>
 
82
<p>TapAndHoldGesture uses <a href="qtouchevent.html">QTouchEvent</a> events and mouse events to detect start, update and end events that can be mapped onto the GestureState changes. The implementation in this case uses a timer as well. If the timeout event occurs a given number of times after the start of the gesture then the gesture is considered to have finished whether or not the appropriate touch or mouse event has occurred. Also if a large jump in the position of the event occurs, as calculated by the <a href="qpoint.html#manhattanLength">manhattanLength()</a> call, then the gesture is canceled by calling reset() which tidies up and uses updateState() to change state to NoGesture which will result in the canceled() signal being emitted by the recognizer.</p>
 
83
<p>ImageWidget handles the signals by connecting the slots to the signals, although <tt>canceled()</tt> is not connected here.</p>
 
84
<pre>     panGesture = new QPanGesture(this);
 
85
     connect(panGesture, SIGNAL(triggered()), this, SLOT(gestureTriggered()));
 
86
 
 
87
     tapAndHoldGesture = new TapAndHoldGesture(this);
 
88
     connect(tapAndHoldGesture, SIGNAL(triggered()), this, SLOT(gestureTriggered()));
 
89
     connect(tapAndHoldGesture, SIGNAL(finished()), this, SLOT(gestureFinished()));</pre>
 
90
<p>These functions in turn will have to be aware of which gesture object was the source of the signal since we have more than one source per slot. This is easily done by using the <a href="qobject.html#sender">QObject::sender</a>() function as shown here</p>
 
91
<pre> void ImageWidget::gestureTriggered()
 
92
 {
 
93
     if (sender() == panGesture) {</pre>
 
94
<p>As triggered() signals are handled by gestureTriggered() there may be position updates invoking calls to, for example, goNextImage(), this will cause a change in the image handling logic of ImageWidget and a call to updateImage() to display the changed state.</p>
 
95
<p>Following the logic of how the <a href="qevent.html">QEvent</a> is processed we can summmarize it as follows:</p>
 
96
<ul>
 
97
<li>filterEvent() becomes the event filter of the parent ImageWidget object for a QPanGesture object and a TapAndHoldGesture object.</li>
 
98
<li>filterEvent() then calls updateState() to change states</li>
 
99
<li>updateState() emits the appropriate signal(s) for the state change.</li>
 
100
<li>The signals are caught by the defined slots in ImageWidget</li>
 
101
<li>The widget logic changes and an update() results in a paint event.</li>
 
102
</ul>
 
103
<p>
 
104
</p>
 
105
<p /><address><hr /><div align="center">
 
106
<table width="100%" cellspacing="0" border="0"><tr class="address">
 
107
<td width="40%" align="left">Copyright &copy; 2009 Nokia Corporation and/or its subsidiary(-ies)</td>
 
108
<td width="20%" align="center"><a href="trademarks.html">Trademarks</a></td>
 
109
<td width="40%" align="right"><div align="right">Qt 4.6.0</div></td>
 
110
<script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript">google.load("elements", "1", {packages: "transliteration"});</script><script type="text/javascript" src="http://www.google.com/coop/cse/t13n?form=cse-search-box&t13n_langs=en"></script><script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script></tr></table></div></address></body>
 
111
</html>