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