src/native_client_sdk/src/getting_started/part1/index.html

   1 <!DOCTYPE html>
   2 <html>
   3   <!--
   4   Copyright (c) 2013 The Chromium Authors. All rights reserved.
   5   Use of this source code is governed by a BSD-style license that can be
   6   found in the LICENSE file.
   7   -->
   8 <head>
   9
  10   <title>hello_tutorial</title>
  11
  12   <script type="text/javascript">
  13     HelloTutorialModule = null;  // Global application object.
  14     statusText = 'NO-STATUS';
  15
  16     // Indicate load success.
  17     function moduleDidLoad() {
  18       HelloTutorialModule = document.getElementById('hello_tutorial');
  19       updateStatus('SUCCESS');
  20     }
  21
  22     // The 'message' event handler.  This handler is fired when the NaCl module
  23     // posts a message to the browser by calling PPB_Messaging.PostMessage()
  24     // (in C) or pp::Instance.PostMessage() (in C++).  This implementation
  25     // simply displays the content of the message in an alert panel.
  26     function handleMessage(message_event) {
  27       alert(message_event.data);
  28     }
  29
  30     // If the page loads before the Native Client module loads, then set the
  31     // status message indicating that the module is still loading.  Otherwise,
  32     // do not change the status message.
  33     function pageDidLoad() {
  34       if (HelloTutorialModule == null) {
  35         updateStatus('LOADING...');
  36       } else {
  37         // It's possible that the Native Client module onload event fired
  38         // before the page's onload event.  In this case, the status message
  39         // will reflect 'SUCCESS', but won't be displayed.  This call will
  40         // display the current message.
  41         updateStatus();
  42       }
  43     }
  44
  45     // Set the global status message.  If the element with id 'statusField'
  46     // exists, then set its HTML to the status message as well.
  47     // opt_message The message test.  If this is null or undefined, then
  48     // attempt to set the element with id 'statusField' to the value of
  49     // |statusText|.
  50     function updateStatus(opt_message) {
  51       if (opt_message)
  52         statusText = opt_message;
  53       var statusField = document.getElementById('statusField');
  54       if (statusField) {
  55         statusField.innerHTML = statusText;
  56       }
  57     }
  58   </script>
  59 </head>
  60 <body onload="pageDidLoad()">
  61
  62   <h1>NaCl C++ Tutorial: Getting Started</h1>
  63   <p>
  64     <!--
  65     Load the published pexe.
  66     Note: Since this module does not use any real-estate in the browser, its
  67     width and height are set to 0.
  68
  69     Note: The <embed> element is wrapped inside a <div>, which has both a 'load'
  70     and a 'message' event listener attached.  This wrapping method is used
  71     instead of attaching the event listeners directly to the <embed> element to
  72     ensure that the listeners are active before the NaCl module 'load' event
  73     fires.  This also allows you to use PPB_Messaging.PostMessage() (in C) or
  74     pp::Instance.PostMessage() (in C++) from within the initialization code in
  75     your module.
  76     -->
  77     <div id="listener">
  78       <script type="text/javascript">
  79         var listener = document.getElementById('listener');
  80         listener.addEventListener('load', moduleDidLoad, true);
  81         listener.addEventListener('message', handleMessage, true);
  82       </script>
  83
  84       <embed id="hello_tutorial"
  85              width=0 height=0
  86              src="hello_tutorial.nmf"
  87              type="application/x-pnacl" />
  88     </div>
  89   </p>
  90
  91   <h2>Status <code id="statusField">NO-STATUS</code></h2>
  92 </body>
  93 </html>