Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(253)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: examples/hello_world/hello_world.html

Issue 7029032: Port hello_world (C++) to use postMessage. (Closed) Base URL: http://nativeclient-sdk.googlecode.com/svn/trunk/src/
Patch Set: Created 9 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« examples/hello_world/hello_world.cc ('K') | « examples/hello_world/hello_world.cc ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <!-- 3 <!--
4 Copyright (c) 2011 The Native Client Authors. All rights reserved. 4 Copyright (c) 2011 The Native Client Authors. All rights reserved.
5 Use of this source code is governed by a BSD-style license that can be 5 Use of this source code is governed by a BSD-style license that can be
6 found in the LICENSE file. 6 found in the LICENSE file.
7 --> 7 -->
8 <head> 8 <head>
9 <title>Hello, World!</title> 9 <title>Hello, World!</title>
10 10
11 <script type="text/javascript"> 11 <script type="text/javascript">
12 helloWorldModule = null; // Global application object. 12 helloWorldModule = null; // Global application object.
13 statusText = 'NO-STATUS'; 13 statusText = 'NO-STATUS';
14 14
15 // When the NaCl module has loaded, hook up an event listener to handle
16 // message coming from it, and then indicate success.
15 function moduleDidLoad() { 17 function moduleDidLoad() {
16 helloWorldModule = document.getElementById('hello_world'); 18 helloWorldModule = document.getElementById('hello_world');
19 // Add a message handler that accespts messages coming from the NaCl
Matt Ball 2011/05/18 16:12:22 accespts -> accepts
David Springer 2011/05/18 18:01:42 Done.
20 // module.
21 helloWorldModule.addEventListener('message', handleMessage, false);
17 updateStatus('SUCCESS'); 22 updateStatus('SUCCESS');
18 } 23 }
19 24
25 // Handle a message coming from the NaCl module.
26 function handleMessage(message_event) {
27 alert(message_event.data);
28 }
29
20 // If the page loads before the Native Client module loads, then set the 30 // If the page loads before the Native Client module loads, then set the
21 // status message indicating that the module is still loading. Otherwise, 31 // status message indicating that the module is still loading. Otherwise,
22 // do not change the status message. 32 // do not change the status message.
23 function pageDidLoad() { 33 function pageDidLoad() {
24 // Set the focus on the text input box. Doing this means you can press 34 // Set the focus on the text input box. Doing this means you can press
25 // return as soon as the page loads, and it will fire the reversetText() 35 // return as soon as the page loads, and it will fire the reversetText()
26 // function. 36 // function.
27 document.forms.helloForm.inputBox.focus(); 37 document.forms.helloForm.inputBox.focus();
28 if (helloWorldModule == null) { 38 if (helloWorldModule == null) {
29 updateStatus('LOADING...'); 39 updateStatus('LOADING...');
30 } else { 40 } else {
31 // It's possible that the Native Client module onload event fired 41 // It's possible that the Native Client module onload event fired
32 // before the page's onload event. In this case, the status message 42 // before the page's onload event. In this case, the status message
33 // will reflect 'SUCCESS', but won't be displayed. This call will 43 // will reflect 'SUCCESS', but won't be displayed. This call will
34 // display the current message. 44 // display the current message.
35 updateStatus(); 45 updateStatus();
36 } 46 }
37 } 47 }
38 48
39 function fortyTwo() { 49 function fortyTwo() {
40 try { 50 try {
41 alert(helloWorldModule.fortyTwo()); 51 helloWorldModule.postMessage('fortyTwo');
42 } catch(e) { 52 } catch(e) {
43 alert(e.message); 53 alert(e.message);
44 } 54 }
45 } 55 }
46 56
47 function reverseText() { 57 function reverseText() {
48 try { 58 try {
49 // Grab the text from the text box, pass it into reverseText() 59 // Grab the text from the text box, pass it into reverseText()
50 var inputBox = document.forms.helloForm.inputBox; 60 var inputBox = document.forms.helloForm.inputBox;
51 alert(helloWorldModule.reverseText(inputBox.value)); 61 helloWorldModule.postMessage('reverseText:' + inputBox.value);
52 } catch(e) { 62 } catch(e) {
53 alert(e.message); 63 alert(e.message);
54 } 64 }
55 // Note: a |false| return tells the <form> tag to cancel the GET action 65 // Note: a |false| return tells the <form> tag to cancel the GET action
56 // when submitting the form. 66 // when submitting the form.
57 return false; 67 return false;
58 } 68 }
59 69
60 // Set the global status message. If the element with id 'statusField' 70 // Set the global status message. If the element with id 'statusField'
61 // exists, then set its HTML to the status message as well. 71 // exists, then set its HTML to the status message as well.
(...skipping 21 matching lines...) Expand all
83 <input type="text" id="inputBox" name="inputBox" value="Hello world" /><p> 93 <input type="text" id="inputBox" name="inputBox" value="Hello world" /><p>
84 <input type="button" value="Call fortyTwo()" onclick="fortyTwo()" /> 94 <input type="button" value="Call fortyTwo()" onclick="fortyTwo()" />
85 <input type="submit" value="Call reverseText()" /> 95 <input type="submit" value="Call reverseText()" />
86 </form> 96 </form>
87 <!-- Load the published .nexe. This includes the 'src' attribute which 97 <!-- Load the published .nexe. This includes the 'src' attribute which
88 shows how to load multi-architecture modules. Each entry in the "nexes" 98 shows how to load multi-architecture modules. Each entry in the "nexes"
89 object in the .nmf manifest file is a key-value pair: the key is the runtime 99 object in the .nmf manifest file is a key-value pair: the key is the runtime
90 ('x86-32', 'x86-64', etc.); the value is a URL for the desired NaCl module. 100 ('x86-32', 'x86-64', etc.); the value is a URL for the desired NaCl module.
91 To load the debug versions of your .nexes, set the 'src' attribute to the 101 To load the debug versions of your .nexes, set the 'src' attribute to the
92 _dbg.nmf version of the manifest file. 102 _dbg.nmf version of the manifest file.
103
104 Note that the <EMBED> element is wrapped inside a <DIV>, which has a 'load'
105 event listener attached. This method is used instead of attaching the 'load'
106 event listener directly to the <EMBED> element to ensure that the listener
107 is active before the NaCl module 'load' even fires.
93 --> 108 -->
94 <div id="listener"> 109 <div id="listener">
95 <script type="text/javascript"> 110 <script type="text/javascript">
96 document.getElementById('listener') 111 document.getElementById('listener')
97 .addEventListener('load', moduleDidLoad, true); 112 .addEventListener('load', moduleDidLoad, true);
98 </script> 113 </script>
99 114
100 <embed name="nacl_module" 115 <embed name="nacl_module"
101 id="hello_world" 116 id="hello_world"
102 width=0 height=0 117 width=0 height=0
103 src="hello_world.nmf" 118 src="hello_world.nmf"
104 type="application/x-nacl" /> 119 type="application/x-nacl" />
105 </div> 120 </div>
106 121
107 </p> 122 </p>
108 123
109 <p>If the module is working correctly, a click on the "Call fortyTwo()" button 124 <p>If the module is working correctly, a click on the "Call fortyTwo()" button
110 should open a popup dialog containing <b>42</b> as its value.</p> 125 should open a popup dialog containing <b>42</b> as its value.</p>
111 126
112 <p> Clicking on the "Call reverseText()" button 127 <p> Clicking on the "Call reverseText()" button
113 should open a popup dialog containing the textbox contents and its reverse 128 should open a popup dialog containing the textbox contents and its reverse
114 as its value.</p> 129 as its value.</p>
115 130
116 <h2>Status</h2> 131 <h2>Status</h2>
117 <div id="statusField">NO-STATUS</div> 132 <div id="statusField">NO-STATUS</div>
118 </body> 133 </body>
119 </html> 134 </html>
OLDNEW
« examples/hello_world/hello_world.cc ('K') | « examples/hello_world/hello_world.cc ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698