forked from ialexi/hedwig
-
Notifications
You must be signed in to change notification settings - Fork 2
/
capturing.html
159 lines (123 loc) · 5.89 KB
/
capturing.html
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
<html><head><title>Docs
</title><meta http-equiv: 'Content-Type' content="text/html; charset=utf-8" />
<style type="text/css">
body {
font-family: "Lucida Sans", "Lucida Grande", Verdana, Arial, sans-serif;
margin: 0px;
margin-bottom:1em;
font-family: sans-serif;
font-size: 10px;
line-height:1.2;
}
.content { font-size: 14px; }
code {
font-family: Monaco, Inconsolata, Courier, fixed-width;
font-size: 12px;
}
pre code {
margin-right: 1em;
border: 1px solid #a0b0a0;
overflow-y: hidden;
overflow-x: auto;
background: #f5f9f5;
display:block;
padding: 1em;
}
a { text-decoration: none; color: rgb(50, 50, 155); }
.header {
background-color: rgb(38, 43, 50);
height: 60px;
padding-top:17px;
padding-bottom:17px;
padding-left:2em;
}
.header a.img {
float: left;
}
.header .here {
float:left;
margin-top:27px;
margin-left:5px;
color: rgb(200, 255, 200);
font-size: 25px;
}
.header span.here {
margin-top:34px;
font-size:15px;
color: white;
}
.header a.item {
float:right;
margin-top: 34px;
margin-right:10px;
color: white;
font-size:15px;
}
.header a.item:hover {
text-decoration: underline;
}
.content {
padding-top: 1em;
padding-left: 2em;
padding-right: 2em;
}
img { margin-left: auto; margin-right: auto; display: block; }
h1, h2, h3 { color: rgb(100, 155, 100); }
code .class { color: rgb(0, 0, 150); }
/*code .variable { color: rgb(10, 70, 10); }*/
code .comment { color: rgb(100, 150, 200); }
code .string { color: rgb(0, 100, 10); }
code .number { color: rgb(0, 0, 255); }
code .keyword, code .this { color: rgb(25, 110, 25); font-weight: bold; }
</style>
</head><body><div class="header"><a href="../../index.html" class="img"><img src="../../resources/logo.png" /></a><a href="../../index.html" class="here">Documentation
</a><a href="../../reference/index.html" class="item">SproutCore Reference
</a></div><div class="content"><h1>Capturing</h1>
<p>There are many instances where you may have to capture touches. We'll consider scroll views,
however, because it is very easy to explain <em>why</em> they need to be able to.</p>
<p>If you are implementing a scroll view, you'll need to capture the touch before the target view gets it.</p>
<p>This is because scroll views have some subtle quirks. For instance, a touch should not pass
through to the actual target until a split-second has passed&emdash;this is to prevent flicker should
the user decide to scroll rather than touch the target. Also, it needs to add itself to what is
called the "touch responder stack" <em>before</em> the target view, so that the target view can hand control back
simply as discussed above.</p>
<h2>Touch Responder Stack</h2>
<p>Very briefly mentioned in the "Touch Events" article, the <em>touch responder</em> is the view which
"owns" a touch—the view which gets all touchesDragged events and the touchEnd for that touch.</p>
<p>However, in our scroll view case, we want to pass control to the target view, but allow it
to <em>transfer control back</em> (a process covered in "Releasing"). That means it needs to know
what view to hand it back to. Also, what if you had a scroll view <em>within</em> a scroll view?</p>
<p>To solve these issues, there is a "stack" of those views to which control can be passed back to.</p>
<p>You generally work with it by either:</p>
<ul>
<li>Specifically telling it to "stack" your view when capturing a touch.</li>
<li>Telling it to change touch responder to a touch responder in the stack (see Releasing)</li>
</ul>
<h2>Capturing</h2>
<p>Capturing the touch is simple. Before starting at the target view and working its
way up to the root calling touchStart (the same way all SproutCore events work),
SproutCore's touch events go the opposite direction, starting at the root and working their way down
to the target, calling a method named captureTouch:</p>
<pre><code class='syntax js'><span class="variable">captureTouch</span>: <span class="keyword">function</span>(<span class="variable">touch</span>) {
</code></pre>
<p>If the view returns YES, the touchStart event will be sent directly to it.</p>
<p>You could then use invokeLater to wait that split-second. But then what? You don't actually
know what the target view should be. What you need is to start at the original target, and
do the whole working up to it calling captureTouch and work down from it calling touchStart
thing—but this time, starting from your own view, rather than the root. </p>
<p>Thankfully, you can do this in one line of code:</p>
<pre><code class='syntax js'><span class="variable">touch</span>.<span class="variable">captureTouch</span>(<span class="this">this</span>, <span class="class">YES</span>); <span class="comment">// the YES means stack, which I'm guessing you'd want to do</span>
<span class="comment">// so that the new view can easily pass control back to this...</span>
<span class="comment">// ... but you may know better than me.</span>
</code></pre>
<p>What happens next depends on whether or not you told it to stack your view:</p>
<ul>
<li>If stacked, you will receive a touchCancelled when the touch actually ends, unless the
view which captures the touch hands control back to your view. If it does, you will <em>not</em>
receive another <code class='syntax js'><span class="variable">touchStart</span></code>, but you <em>will</em> start receiving <code class='syntax js'><span class="variable">touchesDragged</span></code> and
will receive a <code class='syntax js'><span class="variable">touchEnd</span></code> when the touch ends.</li>
<li>If not stacked, your view will receive <code class='syntax js'><span class="variable">touchCancelled</span></code>.</li>
</ul>
<h2>What Does It Look Like?</h2>
<p><a href='capturing.js' class='demo'>capturing.js</a></p>
</div><div class="footer"></div></body></html>