1<!DOCTYPE html>
2<html>
3<head>
4  <title>Ruby Example</title>
5
6  <script type="text/javascript">
7    RubyModule = null;  // Global application object.
8    statusText = 'NO-STATUS';
9    rubyReady = false;
10
11    // Indicate load success.
12    function moduleDidLoad() {
13      RubyModule = document.getElementById('ruby');
14      form = document.getElementById('source-form');
15      form.style.display = "block";
16      updateStatus('SUCCESS');
17    }
18
19    function evalSource() {
20      if (rubyReady) {
21        RubyModule.postMessage('eval:' + document.getElementById("source").value);
22      } else {
23        throw "Not yet ready";
24      }
25      return false;
26    }
27
28    function RubyError(message) {
29      this.message = message;
30      this.toString = function() {
31        return message;
32      }
33    }
34
35    function FatalError(message) {
36      this.message = message;
37    }
38
39    // The 'message' event handler.  This handler is fired when the NaCl module
40    // posts a message to the browser by calling PPB_Messaging.PostMessage()
41    // (in C) or pp::Instance.PostMessage() (in C++).  This implementation
42    // simply displays the content of the message in an alert panel.
43    function handleMessage(message_event) {
44      var raw = message_event.data;
45      var components;
46      if (raw.indexOf("error") == 0) {
47        components = raw.split(":", 2);
48        throw new RubyError(components[1]);
49      } else if (raw.indexOf("return") == 0) {
50        components = raw.split(":", 2);
51        document.getElementById("result").value = components[1];
52      } else if (raw == "rubyReady") {
53        rubyReady = true;
54      } else {
55        throw new FatalError(raw);
56      }
57    }
58
59    // If the page loads before the Native Client module loads, then set the
60    // status message indicating that the module is still loading.  Otherwise,
61    // do not change the status message.
62    function pageDidLoad() {
63      if (RubyModule == null) {
64        updateStatus('LOADING...');
65      } else {
66        // It's possible that the Native Client module onload event fired
67        // before the page's onload event.  In this case, the status message
68        // will reflect 'SUCCESS', but won't be displayed.  This call will
69        // display the current message.
70        updateStatus();
71      }
72    }
73
74    // Set the global status message.  If the element with id 'statusField'
75    // exists, then set its HTML to the status message as well.
76    // opt_message The message test.  If this is null or undefined, then
77    // attempt to set the element with id 'statusField' to the value of
78    // |statusText|.
79    function updateStatus(opt_message) {
80      if (opt_message)
81        statusText = opt_message;
82      var statusField = document.getElementById('status_field');
83      if (statusField) {
84        statusField.innerHTML = statusText;
85      }
86    }
87  </script>
88</head>
89<body onload="pageDidLoad()">
90
91<h1>Native Client Module Ruby</h1>
92<p>
93  <!-- Load the published .nexe.  This includes the 'nacl' attribute which
94  shows how to load multi-architecture modules.  Each entry in the "nexes"
95  object in the .nmf manifest file is a key-value pair: the key is the
96  instruction set architecture ('x86-32', 'x86-64', etc.); the value is a URL
97  for the desired NaCl module.
98  To load the debug versions of your .nexes, set the 'nacl' attribute to the
99  _dbg.nmf version of the manifest file.
100
101  Note: Since this NaCl module does not use any real-estate in the browser,
102  it's width and height are set to 0.
103
104  Note: The <EMBED> element is wrapped inside a <DIV>, which has both a 'load'
105  and a 'message' event listener attached.  This wrapping method is used
106  instead of attaching the event listeners directly to the <EMBED> element to
107  ensure that the listeners are active before the NaCl module 'load' event
108  fires.  This also allows you to use PPB_Messaging.PostMessage() (in C) or
109  pp::Instance.PostMessage() (in C++) from within the initialization code in
110  your NaCl module.
111  -->
112  <div id="listener">
113    <script type="text/javascript">
114      var listener = document.getElementById('listener');
115      listener.addEventListener('load', moduleDidLoad, true);
116      listener.addEventListener('message', handleMessage, true);
117    </script>
118
119    <embed name="nacl_module"
120       id="ruby"
121       width="0" height="0"
122       src="ruby.nmf"
123       type="application/x-nacl" />
124    <form id="source-form" action="#" method="post" style="display:none"
125      onsubmit="evalSource(); return false">
126      <table>
127        <tbody>
128          <tr>
129            <th>Source</th>
130            <td>
131              <textarea rows="10" cols="80" id="source"></textarea>
132              <input type="submit" />
133            </td>
134          </tr>
135          <tr>
136            <th>Result</th>
137            <td>
138              <textarea rows="10" cols="80" id="result"></textarea>
139            </td>
140          </tr>
141        </tbody>
142      </table>
143    </form>
144  </div>
145</p>
146
147<h2>Status</h2>
148<div id="status_field">NO-STATUS</div>
149</body>
150</html>
151