jni/ruby/nacl/example.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

<!DOCTYPE html>
<html>
<head>
  <title>Ruby Example</title>

  <script type="text/javascript">
    RubyModule = null;  // Global application object.
    statusText = 'NO-STATUS';
    rubyReady = false;

    // Indicate load success.
    function moduleDidLoad() {
      RubyModule = document.getElementById('ruby');
      form = document.getElementById('source-form');
      form.style.display = "block";
      updateStatus('SUCCESS');
    }

    function evalSource() {
      if (rubyReady) {
        RubyModule.postMessage('eval:' + document.getElementById("source").value);
      } else {
        throw "Not yet ready";
      }
      return false;
    }

    function RubyError(message) {
      this.message = message;
      this.toString = function() {
        return message;
      }
    }

    function FatalError(message) {
      this.message = message;
    }

    // The 'message' event handler.  This handler is fired when the NaCl module
    // posts a message to the browser by calling PPB_Messaging.PostMessage()
    // (in C) or pp::Instance.PostMessage() (in C++).  This implementation
    // simply displays the content of the message in an alert panel.
    function handleMessage(message_event) {
      var raw = message_event.data;
      var components;
      if (raw.indexOf("error") == 0) {
        components = raw.split(":", 2);
        throw new RubyError(components[1]);
      } else if (raw.indexOf("return") == 0) {
        components = raw.split(":", 2);
        document.getElementById("result").value = components[1];
      } else if (raw == "rubyReady") {
        rubyReady = true;
      } else {
        throw new FatalError(raw);
      }
    }

    // If the page loads before the Native Client module loads, then set the
    // status message indicating that the module is still loading.  Otherwise,
    // do not change the status message.
    function pageDidLoad() {
      if (RubyModule == null) {
        updateStatus('LOADING...');
      } else {
        // It's possible that the Native Client module onload event fired
        // before the page's onload event.  In this case, the status message
        // will reflect 'SUCCESS', but won't be displayed.  This call will
        // display the current message.
        updateStatus();
      }
    }

    // Set the global status message.  If the element with id 'statusField'
    // exists, then set its HTML to the status message as well.
    // opt_message The message test.  If this is null or undefined, then
    // attempt to set the element with id 'statusField' to the value of
    // |statusText|.
    function updateStatus(opt_message) {
      if (opt_message)
        statusText = opt_message;
      var statusField = document.getElementById('status_field');
      if (statusField) {
        statusField.innerHTML = statusText;
      }
    }
  </script>
</head>
<body onload="pageDidLoad()">

<h1>Native Client Module Ruby</h1>
<p>
  <!-- Load the published .nexe.  This includes the 'nacl' attribute which
  shows how to load multi-architecture modules.  Each entry in the "nexes"
  object in the .nmf manifest file is a key-value pair: the key is the
  instruction set architecture ('x86-32', 'x86-64', etc.); the value is a URL
  for the desired NaCl module.
  To load the debug versions of your .nexes, set the 'nacl' attribute to the
  _dbg.nmf version of the manifest file.

  Note: Since this NaCl module does not use any real-estate in the browser,
  it's width and height are set to 0.

  Note: The <EMBED> element is wrapped inside a <DIV>, which has both a 'load'
  and a 'message' event listener attached.  This wrapping method is used
  instead of attaching the event listeners directly to the <EMBED> element to
  ensure that the listeners are active before the NaCl module 'load' event
  fires.  This also allows you to use PPB_Messaging.PostMessage() (in C) or
  pp::Instance.PostMessage() (in C++) from within the initialization code in
  your NaCl module.
  -->
  <div id="listener">
    <script type="text/javascript">
      var listener = document.getElementById('listener');
      listener.addEventListener('load', moduleDidLoad, true);
      listener.addEventListener('message', handleMessage, true);
    </script>

    <embed name="nacl_module"
       id="ruby"
       width="0" height="0"
       src="ruby.nmf"
       type="application/x-nacl" />
    <form id="source-form" action="#" method="post" style="display:none"
      onsubmit="evalSource(); return false">
      <table>
        <tbody>
          <tr>
            <th>Source</th>
            <td>
              <textarea rows="10" cols="80" id="source"></textarea>
              <input type="submit" />
            </td>
          </tr>
          <tr>
            <th>Result</th>
            <td>
              <textarea rows="10" cols="80" id="result"></textarea>
            </td>
          </tr>
        </tbody>
      </table>
    </form>
  </div>
</p>

<h2>Status</h2>
<div id="status_field">NO-STATUS</div>
</body>
</html>