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