OLD | NEW |
1 {{+bindTo:partials.standard_nacl_article}} | 1 {{+bindTo:partials.standard_nacl_article}} |
2 | 2 |
3 <section id="view-change-focus-and-input-events"> | 3 <section id="view-change-focus-and-input-events"> |
4 <span id="view-focus-input-events"></span><h1 id="view-change-focus-and-input-ev
ents"><span id="view-focus-input-events"></span>View Change, Focus, and Input Ev
ents</h1> | 4 <span id="view-focus-input-events"></span><h1 id="view-change-focus-and-input-ev
ents"><span id="view-focus-input-events"></span>View Change, Focus, and Input Ev
ents</h1> |
5 <div class="contents local" id="contents" style="display: none"> | 5 <div class="contents local" id="contents" style="display: none"> |
6 <ul class="small-gap"> | 6 <ul class="small-gap"> |
7 <li><a class="reference internal" href="#overview" id="id2">Overview</a></li> | 7 <li><a class="reference internal" href="#overview" id="id2">Overview</a></li> |
8 <li><p class="first"><a class="reference internal" href="#handling-browser-event
s" id="id3">Handling browser events</a></p> | 8 <li><p class="first"><a class="reference internal" href="#handling-browser-event
s" id="id3">Handling browser events</a></p> |
9 <ul class="small-gap"> | 9 <ul class="small-gap"> |
10 <li><a class="reference internal" href="#didchangeview" id="id4">DidChangeView()
</a></li> | 10 <li><a class="reference internal" href="#didchangeview" id="id4">DidChangeView()
</a></li> |
(...skipping 18 matching lines...) Expand all Loading... |
29 event. The <code>mouse_lock</code> example is used to illustrate how your modul
e | 29 event. The <code>mouse_lock</code> example is used to illustrate how your modul
e |
30 can react to view change events. You can find these examples in the | 30 can react to view change events. You can find these examples in the |
31 <code>/examples/api/input_events</code> and <code>/examples/api/mouse_lock</code
> | 31 <code>/examples/api/input_events</code> and <code>/examples/api/mouse_lock</code
> |
32 directories in the Native Client SDK. There is also the | 32 directories in the Native Client SDK. There is also the |
33 ppapi_simple library that can be used to to implement most of the | 33 ppapi_simple library that can be used to to implement most of the |
34 boiler plate. The <code>pi_generator</code> example in | 34 boiler plate. The <code>pi_generator</code> example in |
35 <code>/examples/demo/pi_generator</code> uses ppapi_simple to manage view | 35 <code>/examples/demo/pi_generator</code> uses ppapi_simple to manage view |
36 change events and 2D graphics.</p> | 36 change events and 2D graphics.</p> |
37 <section id="overview"> | 37 <section id="overview"> |
38 <h2 id="overview">Overview</h2> | 38 <h2 id="overview">Overview</h2> |
39 <p>When a user interacts with the web page using a keyboard, mouse or | 39 <p>When a user interacts with the web page using a keyboard, mouse or some other |
40 some other input device, the browser generates input events. | 40 input device, the browser generates input events. In a traditional web |
41 In a traditional web application, these input events are | 41 application, these input events are passed to and handled in JavaScript, |
42 passed to and handled in JavaScript, typically through event listeners | 42 typically through event listeners and event handlers. In a Native Client |
43 and event handlers. In a Native Client application, user interaction | 43 application, user interaction with an instance of a module (e.g., clicking |
44 with an instance of a module (e.g., clicking inside the rectangle | 44 inside the rectangle managed by a module) also generates input events, which |
45 managed by a module) also generates input events, which are passed to | 45 are passed to the module. The browser also passes view change and focus events |
46 the module. The browser also passes view change and focus events that | 46 that affect a module’s instance to the module. Native Client modules can |
47 affect a module’s instance to the module. Native Client modules can | 47 override certain functions in the <a class="reference external" href="/native-cl
ient/pepper_stable/cpp/classpp_1_1_instance">pp::Instance</a> class to handle in
put |
48 override certain functions in the <a class="reference external" href="https://de
velopers.google.com/native-client/peppercpp/classpp_1_1_instance">pp::Instance</
a> | 48 and browser events. These functions are listed in the table below:</p> |
49 class to handle input and browser events. These functions are listed in | |
50 the table below:</p> | |
51 <table border="1" class="docutils"> | 49 <table border="1" class="docutils"> |
52 <colgroup> | 50 <colgroup> |
53 </colgroup> | 51 </colgroup> |
54 <thead valign="bottom"> | 52 <thead valign="bottom"> |
55 <tr class="row-odd"><th class="head">Function</th> | 53 <tr class="row-odd"><th class="head">Function</th> |
56 <th class="head">Event</th> | 54 <th class="head">Event</th> |
57 <th class="head">Use</th> | 55 <th class="head">Use</th> |
58 </tr> | 56 </tr> |
59 </thead> | 57 </thead> |
60 <tbody valign="top"> | 58 <tbody valign="top"> |
(...skipping 88 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
149 prior to overriding this | 147 prior to overriding this |
150 function.</td> | 148 function.</td> |
151 <td>An implementation of | 149 <td>An implementation of |
152 this function | 150 this function |
153 examines the input | 151 examines the input |
154 event type and | 152 event type and |
155 branches accordingly.</td> | 153 branches accordingly.</td> |
156 </tr> | 154 </tr> |
157 </tbody> | 155 </tbody> |
158 </table> | 156 </table> |
159 <p>These interfaces are found in the <a class="reference external" href="https:/
/developers.google.com/native-client/dev/peppercpp/classpp_1_1_instance">pp::Ins
tance class</a>. | 157 <p>These interfaces are found in the <a class="reference external" href="/native
-client/pepper_stable/cpp/classpp_1_1_instance">pp::Instance class</a>. The sec
tions below |
160 The sections below provide examples of how to handle these events.</p> | 158 provide examples of how to handle these events.</p> |
161 </section><section id="handling-browser-events"> | 159 </section><section id="handling-browser-events"> |
162 <h2 id="handling-browser-events">Handling browser events</h2> | 160 <h2 id="handling-browser-events">Handling browser events</h2> |
163 <section id="didchangeview"> | 161 <section id="didchangeview"> |
164 <h3 id="didchangeview">DidChangeView()</h3> | 162 <h3 id="didchangeview">DidChangeView()</h3> |
165 <p>In the <code>mouse_lock</code> example, <code>DidChangeView()</code> checks t
he previous size | 163 <p>In the <code>mouse_lock</code> example, <code>DidChangeView()</code> checks t
he previous size |
166 of instance’s rectangle versus the new size. It also compares | 164 of instance’s rectangle versus the new size. It also compares |
167 other state such as whether or not the app is running in full screen mode. | 165 other state such as whether or not the app is running in full screen mode. |
168 If none of the state has actually changed, no action is needed. | 166 If none of the state has actually changed, no action is needed. |
169 However, if the size of the view or other state has changed, it frees the | 167 However, if the size of the view or other state has changed, it frees the |
170 old graphics context and allocates a new one.</p> | 168 old graphics context and allocates a new one.</p> |
(...skipping 16 matching lines...) Expand all Loading... |
187 is_context_bound_ = BindGraphics(device_context_); | 185 is_context_bound_ = BindGraphics(device_context_); |
188 // ... | 186 // ... |
189 | 187 |
190 // Remember if we are fullscreen or not | 188 // Remember if we are fullscreen or not |
191 was_fullscreen_ = view.IsFullscreen(); | 189 was_fullscreen_ = view.IsFullscreen(); |
192 // ... | 190 // ... |
193 } | 191 } |
194 </pre> | 192 </pre> |
195 <p>For more information about graphics contexts and how to manipulate images, se
e:</p> | 193 <p>For more information about graphics contexts and how to manipulate images, se
e:</p> |
196 <ul class="small-gap"> | 194 <ul class="small-gap"> |
197 <li><a class="reference external" href="https://developers.google.com/native-cli
ent/dev/peppercpp/classpp_1_1_image_data">pp::ImageData class</a></li> | 195 <li><a class="reference external" href="/native-client/pepper_stable/cpp/classpp
_1_1_image_data">pp::ImageData class</a></li> |
198 <li><a class="reference external" href="https://developers.google.com/native-cli
ent/dev/peppercpp/classpp_1_1_graphics2_d">pp::Graphics2D class</a></li> | 196 <li><a class="reference external" href="/native-client/pepper_stable/cpp/classpp
_1_1_graphics2_d">pp::Graphics2D class</a></li> |
199 </ul> | 197 </ul> |
200 </section><section id="didchangefocus"> | 198 </section><section id="didchangefocus"> |
201 <h3 id="didchangefocus">DidChangeFocus()</h3> | 199 <h3 id="didchangefocus">DidChangeFocus()</h3> |
202 <p><code>DidChangeFocus()</code> is called when you click inside or outside of a | 200 <p><code>DidChangeFocus()</code> is called when you click inside or outside of a |
203 module’s instance in the web page. When the instance goes out | 201 module’s instance in the web page. When the instance goes out |
204 of focus (click outside of the instance), you might do something | 202 of focus (click outside of the instance), you might do something |
205 like stop an animation. When the instance regains focus, you can | 203 like stop an animation. When the instance regains focus, you can |
206 restart the animation.</p> | 204 restart the animation.</p> |
207 <pre class="prettyprint"> | 205 <pre class="prettyprint"> |
208 void DidChangeFocus(bool focus) { | 206 void DidChangeFocus(bool focus) { |
(...skipping 20 matching lines...) Expand all Loading... |
229 explicit InputEventInstance(PP_Instance instance) | 227 explicit InputEventInstance(PP_Instance instance) |
230 : pp::Instance(instance), event_thread_(NULL), callback_factory_(this) { | 228 : pp::Instance(instance), event_thread_(NULL), callback_factory_(this) { |
231 RequestInputEvents(PP_INPUTEVENT_CLASS_MOUSE | PP_INPUTEVENT_CLASS_WHEEL | | 229 RequestInputEvents(PP_INPUTEVENT_CLASS_MOUSE | PP_INPUTEVENT_CLASS_WHEEL | |
232 PP_INPUTEVENT_CLASS_TOUCH); | 230 PP_INPUTEVENT_CLASS_TOUCH); |
233 RequestFilteringInputEvents(PP_INPUTEVENT_CLASS_KEYBOARD); | 231 RequestFilteringInputEvents(PP_INPUTEVENT_CLASS_KEYBOARD); |
234 } | 232 } |
235 // ... | 233 // ... |
236 }; | 234 }; |
237 </pre> | 235 </pre> |
238 <p><code>RequestInputEvents()</code> and <code>RequestFilteringInputEvents()</co
de> accept a | 236 <p><code>RequestInputEvents()</code> and <code>RequestFilteringInputEvents()</co
de> accept a |
239 combination of flags that identify the class of events that the | 237 combination of flags that identify the class of events that the instance is |
240 instance is requesting to receive. Input event classes are defined in | 238 requesting to receive. Input event classes are defined in the |
241 the <a class="reference external" href="https://developers.google.com/native-cli
ent/dev/pepperc/group___enums.html#gafe68e3c1031daa4a6496845ff47649cd">PP_InputE
vent_Class</a> | 239 <a class="reference external" href="/native-client/pepper_stable/c/group___enums
.html#gafe68e3c1031daa4a6496845ff47649cd">PP_InputEvent_Class</a> |
242 enumeration in <a class="reference external" href="https://developers.google.com
/native-client/dev/pepperc/ppb__input__event_8h">ppb_input_event.h</a>.</p> | 240 enumeration in <a class="reference external" href="/native-client/pepper_stable/
c/ppb__input__event_8h">ppb_input_event.h</a>.</p> |
243 </section><section id="determining-and-branching-on-event-types"> | 241 </section><section id="determining-and-branching-on-event-types"> |
244 <h3 id="determining-and-branching-on-event-types">Determining and branching on e
vent types</h3> | 242 <h3 id="determining-and-branching-on-event-types">Determining and branching on e
vent types</h3> |
245 <p>In a typical implementation, the <code>HandleInputEvent()</code> function | 243 <p>In a typical implementation, the <code>HandleInputEvent()</code> function det
ermines the |
246 determines the type of each event using the <code>GetType()</code> function foun
d | 244 type of each event using the <code>GetType()</code> function found in the <code>
InputEvent</code> |
247 in the <code>InputEvent</code> class. The <code>HandleInputEvent()</code> functi
on then uses a | 245 class. The <code>HandleInputEvent()</code> function then uses a switch statement
to |
248 switch statement to branch on the type of input event. Input events | 246 branch on the type of input event. Input events are defined in the |
249 are defined in the <a class="reference external" href="https://developers.google
.com/native-client/dev/pepperc/group___enums.html#gaca7296cfec99fcb6646b7144d1d6
a0c5">PP_InputEvent_Type</a> | 247 <a class="reference external" href="/native-client/pepper_stable/c/group___enums
.html#gaca7296cfec99fcb6646b7144d1d6a0c5">PP_InputEvent_Type</a> |
250 enumeration in <a class="reference external" href="https://developers.google.com
/native-client/dev/pepperc/ppb__input__event_8h">ppb_input_event.h</a>.</p> | 248 enumeration in <a class="reference external" href="/native-client/pepper_stable/
c/ppb__input__event_8h">ppb_input_event.h</a>.</p> |
251 <pre class="prettyprint"> | 249 <pre class="prettyprint"> |
252 virtual bool HandleInputEvent(const pp::InputEvent& event) { | 250 virtual bool HandleInputEvent(const pp::InputEvent& event) { |
253 Event* event_ptr = NULL; | 251 Event* event_ptr = NULL; |
254 switch (event.GetType()) { | 252 switch (event.GetType()) { |
255 case PP_INPUTEVENT_TYPE_UNDEFINED: | 253 case PP_INPUTEVENT_TYPE_UNDEFINED: |
256 break; | 254 break; |
257 case PP_INPUTEVENT_TYPE_MOUSEDOWN: | 255 case PP_INPUTEVENT_TYPE_MOUSEDOWN: |
258 case PP_INPUTEVENT_TYPE_MOUSEUP: | 256 case PP_INPUTEVENT_TYPE_MOUSEUP: |
259 case PP_INPUTEVENT_TYPE_MOUSEMOVE: | 257 case PP_INPUTEVENT_TYPE_MOUSEMOVE: |
260 case PP_INPUTEVENT_TYPE_MOUSEENTER: | 258 case PP_INPUTEVENT_TYPE_MOUSEENTER: |
(...skipping 56 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
317 } | 315 } |
318 event_queue_.Push(event_ptr); | 316 event_queue_.Push(event_ptr); |
319 return true; | 317 return true; |
320 } | 318 } |
321 </pre> | 319 </pre> |
322 <p>Notice that the generic <code>InputEvent</code> received by <code>HandleInput
Event()</code> is | 320 <p>Notice that the generic <code>InputEvent</code> received by <code>HandleInput
Event()</code> is |
323 converted into a specific type after the event type is | 321 converted into a specific type after the event type is |
324 determined. The event types handled in the example code are | 322 determined. The event types handled in the example code are |
325 <code>MouseInputEvent</code>, <code>WheelInputEvent</code>, and <code>KeyboardIn
putEvent</code>. | 323 <code>MouseInputEvent</code>, <code>WheelInputEvent</code>, and <code>KeyboardIn
putEvent</code>. |
326 There are also <code>TouchInputEvents</code>. For the latest list of event type
s, | 324 There are also <code>TouchInputEvents</code>. For the latest list of event type
s, |
327 see the <a class="reference external" href="https://developers.google.com/native
-client/dev/peppercpp/classpp_1_1_input_event">InputEvent documentation</a>. | 325 see the <a class="reference external" href="/native-client/pepper_stable/c/class
pp_1_1_input_event">InputEvent documentation</a>. |
328 For reference information related to the these event classes, see the | 326 For reference information related to the these event classes, see the |
329 following documentation:</p> | 327 following documentation:</p> |
330 <ul class="small-gap"> | 328 <ul class="small-gap"> |
331 <li><a class="reference external" href="https://developers.google.com/native-cli
ent/dev/peppercpp/classpp_1_1_mouse_input_event">pp::MouseInputEvent class</a></
li> | 329 <li><a class="reference external" href="/native-client/pepper_stable/c/classpp_1
_1_mouse_input_event">pp::MouseInputEvent class</a></li> |
332 <li><a class="reference external" href="https://developers.google.com/native-cli
ent/dev/peppercpp/classpp_1_1_wheel_input_event">pp::WheelInputEvent class</a></
li> | 330 <li><a class="reference external" href="/native-client/pepper_stable/c/classpp_1
_1_wheel_input_event">pp::WheelInputEvent class</a></li> |
333 <li><a class="reference external" href="https://developers.google.com/native-cli
ent/dev/peppercpp/classpp_1_1_keyboard_input_event">pp::KeyboardInputEvent class
</a></li> | 331 <li><a class="reference external" href="/native-client/pepper_stable/c/classpp_1
_1_keyboard_input_event">pp::KeyboardInputEvent class</a></li> |
334 </ul> | 332 </ul> |
335 </section><section id="threading-and-blocking"> | 333 </section><section id="threading-and-blocking"> |
336 <h3 id="threading-and-blocking">Threading and blocking</h3> | 334 <h3 id="threading-and-blocking">Threading and blocking</h3> |
337 <p><code>HandleInputEvent()</code> in this example runs on the main module threa
d. | 335 <p><code>HandleInputEvent()</code> in this example runs on the main module threa
d. |
338 However, the bulk of the work happens on a separate worker thread (see | 336 However, the bulk of the work happens on a separate worker thread (see |
339 <code>ProcessEventOnWorkerThread</code>). <code>HandleInputEvent()</code> puts e
vents in | 337 <code>ProcessEventOnWorkerThread</code>). <code>HandleInputEvent()</code> puts e
vents in |
340 the <code>event_queue_</code> and the worker thread takes events from the | 338 the <code>event_queue_</code> and the worker thread takes events from the |
341 <code>event_queue_</code>. This processing happens independently of the main | 339 <code>event_queue_</code>. This processing happens independently of the main |
342 thread, so as not to slow down the browser.</p> | 340 thread, so as not to slow down the browser.</p> |
343 </section></section></section> | 341 </section></section></section> |
344 | 342 |
345 {{/partials.standard_nacl_article}} | 343 {{/partials.standard_nacl_article}} |
OLD | NEW |