| 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 |