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

Side by Side Diff: native_client_sdk/doc_generated/devguide/tutorial/tutorial-part1.html

Issue 476793002: Per P0 reqs add launch pts + make download obvious. Also misc cpy edits. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: CL synced with master. Created 6 years, 4 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
OLDNEW
1 {{+bindTo:partials.standard_nacl_article}} 1 {{+bindTo:partials.standard_nacl_article}}
2 2
3 <section id="c-tutorial-getting-started-part-1"> 3 <section id="c-tutorial-getting-started-part-1">
4 <span id="tutorial"></span><h1 id="c-tutorial-getting-started-part-1"><span id=" tutorial"></span>C++ Tutorial: Getting Started (Part 1)</h1> 4 <span id="tutorial"></span><h1 id="c-tutorial-getting-started-part-1"><span id=" tutorial"></span>C++ Tutorial: Getting Started (Part 1)</h1>
5 <div class="contents local" id="contents" style="display: none"> 5 <div class="contents local" id="contents" style="display: none">
6 <ul class="small-gap"> 6 <ul class="small-gap">
7 <li><p class="first"><a class="reference internal" href="#overview" id="id1">Ove rview</a></p> 7 <li><p class="first"><a class="reference internal" href="#overview" id="id1">Ove rview</a></p>
8 <ul class="small-gap"> 8 <ul class="small-gap">
9 <li><a class="reference internal" href="#what-the-application-in-this-tutorial-d oes" id="id2">What the application in this tutorial does</a></li> 9 <li><a class="reference internal" href="#what-the-application-in-this-tutorial-d oes" id="id2">What the application in this tutorial does</a></li>
10 <li><a class="reference internal" href="#communication-between-javascript-and-na tive-client-modules" id="id3">Communication between JavaScript and Native Client modules</a></li> 10 <li><a class="reference internal" href="#communication-between-javascript-and-na tive-client-modules" id="id3">Communication between JavaScript and Native Client modules</a></li>
11 </ul> 11 </ul>
12 </li> 12 </li>
13 <li><a class="reference internal" href="#step-1-download-and-install-the-native- client-sdk" id="id4">Step 1: Download and install the Native Client SDK</a></li> 13 <li><a class="reference internal" href="#step-1-download-and-install-the-native- client-sdk" id="id4">Step 1: Download and install the Native Client SDK</a></li>
14 <li><a class="reference internal" href="#step-2-start-a-local-server" id="id5">S tep 2: Start a local server</a></li> 14 <li><a class="reference internal" href="#step-2-start-a-local-server" id="id5">S tep 2: Start a local server</a></li>
15 <li><a class="reference internal" href="#step-3-set-up-the-chrome-browser" id="i d6">Step 3: Set up the Chrome browser</a></li> 15 <li><a class="reference internal" href="#step-3-set-up-the-chrome-browser" id="i d6">Step 3: Set up the Chrome browser</a></li>
16 <li><a class="reference internal" href="#step-4-stub-code-for-the-tutorial" id=" id7">Step 4: Stub code for the tutorial</a></li> 16 <li><a class="reference internal" href="#step-4-stub-code-for-the-tutorial" id=" id7">Step 4: Stub code for the tutorial</a></li>
17 <li><a class="reference internal" href="#step-5-compile-the-native-client-module -and-run-the-stub-application" id="id8">Step 5: Compile the Native Client module and run the stub application</a></li> 17 <li><a class="reference internal" href="#step-5-compile-the-native-client-module -and-run-the-stub-application" id="id8">Step 5: Compile the Native Client module and run the stub application</a></li>
18 <li><a class="reference internal" href="#step-6-modify-the-javascript-code-to-se nd-a-message-to-the-native-client-module" id="id9">Step 6: Modify the JavaScript code to send a message to the Native Client module</a></li> 18 <li><a class="reference internal" href="#step-6-modify-the-javascript-code-to-se nd-a-message-to-the-native-client-module" id="id9">Step 6: Modify the JavaScript code to send a message to the Native Client module</a></li>
19 <li><a class="reference internal" href="#step-7-implement-a-message-handler-in-t he-native-client-module" id="id10">Step 7: Implement a message handler in the Na tive Client module</a></li> 19 <li><a class="reference internal" href="#step-7-implement-a-message-handler-in-t he-native-client-module" id="id10">Step 7: Implement a message handler in the Na tive Client module</a></li>
20 <li><a class="reference internal" href="#step-8-compile-the-native-client-module -and-run-the-application-again" id="id11">Step 8: Compile the Native Client modu le and run the application again</a></li> 20 <li><a class="reference internal" href="#step-8-compile-the-native-client-module -and-run-the-application-again" id="id11">Step 8: Compile the Native Client modu le and run the application again</a></li>
21 <li><a class="reference internal" href="#troubleshooting" id="id12">Troubleshoot ing</a></li> 21 <li><a class="reference internal" href="#troubleshooting" id="id12">Troubleshoot ing</a></li>
22 <li><a class="reference internal" href="#next-steps" id="id13">Next steps</a></l i> 22 <li><a class="reference internal" href="#next-steps" id="id13">Next steps</a></l i>
23 </ul> 23 </ul>
24 24
25 </div><h2 id="overview">Overview</h2> 25 </div><h2 id="overview">Overview</h2>
26 <p>This tutorial shows how to build and run a web application using Portable Nat ive 26 <p>This tutorial shows how to build and run a web application using Portable Nat ive
27 Client (PNaCl). This is a client-side application that uses HTML, JavaScript and 27 Client (PNaCl). This is a client-side application that uses HTML, JavaScript and
28 a Native Client module written in C++. The PNaCl toolchain is used to enable 28 a Native Client module written in C++. The PNaCl toolchain is used to enable
29 running the Native Client module directly from a web page.</p> 29 running the Native Client module directly from a web page.</p>
30 <p>It&#8217;s recommended to read the <a class="reference internal" href="/nativ e-client/overview.html"><em>Native Client Technical Overview</em></a> prior to g oing through this tutorial.</p> 30 <p>It&#8217;s recommended that you read the <a class="reference internal" href=" /native-client/overview.html"><em>Native Client Technical Overview</em></a> prio r to going through this tutorial.</p>
31 <h3 id="what-the-application-in-this-tutorial-does">What the application in this tutorial does</h3> 31 <h3 id="what-the-application-in-this-tutorial-does">What the application in this tutorial does</h3>
32 <p>The application in this tutorial shows how to load a Native Client module in a 32 <p>The application in this tutorial shows how to load a Native Client module in a
33 web page, and how to send messages between JavaScript and the C++ code in the 33 web page, and how to send messages between JavaScript and the Native Client
34 Native Client module. In this simple application, the JavaScript code in the web 34 module. In this simple application, the JavaScript sends a <code>'hello'</code> message
35 page sends a <code>'hello'</code> message to the Native Client module. When the Native 35 to the Native Client module. When the Native Client module receives a message,
36 Client module receives a message, it checks whether the message is equal to the 36 it checks whether the message is equal to the string <code>'hello'</code>. If it is, the
37 string <code>'hello'</code>. If it is, the Native Client module returns a messag e saying 37 Native Client module returns a message saying <code>'hello from NaCl'</code>. A
38 <code>'hello from NaCl'</code>. A JavaScript alert panel displays the message re ceived 38 JavaScript alert panel displays the message received from the Native Client
39 from the Native Client module.</p> 39 module.</p>
40 <h3 id="communication-between-javascript-and-native-client-modules">Communicatio n between JavaScript and Native Client modules</h3> 40 <h3 id="communication-between-javascript-and-native-client-modules">Communicatio n between JavaScript and Native Client modules</h3>
41 <p>The Native Client programming model supports bidirectional communication betw een 41 <p>The Native Client programming model supports bidirectional communication betw een
42 JavaScript and the Native Client module (C/C++ code). Both sides can initiate 42 JavaScript and the Native Client module. Both sides can initiate
43 and respond to messages. In all cases, the communication is asynchronous: The 43 and respond to messages. In all cases, the communication is asynchronous: The
44 caller (JavaScript or the Native Client module) sends a message, but the caller 44 caller (JavaScript or the Native Client module) sends a message, but the caller
45 does not wait for, or may not even expect, a response. This behavior is 45 does not wait for, or may not even expect, a response. This behavior is
46 analogous to client/server communication on the web, where the client posts a 46 analogous to client/server communication on the web, where the client posts a
47 message to the server and returns immediately. The Native Client messaging 47 message to the server and returns immediately. The Native Client messaging
48 system is part of the Pepper API, and is described in detail in 48 system is part of the Pepper API, and is described in detail in
49 <a class="reference internal" href="/native-client/devguide/coding/message-syste m.html"><em>Developer&#8217;s Guide: Messaging System</em></a>. 49 <a class="reference internal" href="/native-client/devguide/coding/message-syste m.html"><em>Developer&#8217;s Guide: Messaging System</em></a>.
50 It is also similar to the way <a class="reference external" href="http://en.wiki pedia.org/wiki/Web_worker">web workers</a> interact with the main document in 50 It is also similar to the way <a class="reference external" href="http://en.wiki pedia.org/wiki/Web_worker">web workers</a> interact with the main document in
51 JavaScript.</p> 51 JavaScript.</p>
52 <h2 id="step-1-download-and-install-the-native-client-sdk">Step 1: Download and install the Native Client SDK</h2> 52 <h2 id="step-1-download-and-install-the-native-client-sdk">Step 1: Download and install the Native Client SDK</h2>
53 <p>Follow the instructions on the <a class="reference internal" href="/native-cl ient/sdk/download.html"><em>Download</em></a> page to 53 <p>Follow the instructions on the <a class="reference internal" href="/native-cl ient/sdk/download.html"><em>Download</em></a> page to
54 download and install the Native Client SDK.</p> 54 download and install the Native Client SDK.</p>
55 <h2 id="step-2-start-a-local-server"><span id="tutorial-step-2"></span>Step 2: S tart a local server</h2> 55 <h2 id="step-2-start-a-local-server"><span id="tutorial-step-2"></span>Step 2: S tart a local server</h2>
56 <p>To simulate a production environment, the SDK provides a simple web server th at 56 <p>To simulate a production environment, the SDK provides a simple web server th at
57 can be used to serve the application on <code>localhost</code>. A convenience Ma kefile 57 can be used to serve the application on <code>localhost</code>. A convenience Ma kefile
58 rule called <code>serve</code> is the easiest way to invoke it:</p> 58 rule called <code>serve</code> is the easiest way to invoke it:</p>
59 <pre> 59 <pre>
60 $ cd pepper_$(VERSION)/getting_started 60 $ cd pepper_$(VERSION)/getting_started
61 $ make serve 61 $ make serve
62 </pre> 62 </pre>
63 <aside class="note"> 63 <aside class="note">
64 The SDK may consist of several &#8220;bundles&#8221;, one per Chrome/Pepper vers ion (see 64 The SDK may consist of several &#8220;bundles&#8221;, one per Chrome/Pepper vers ion (see
65 <a class="reference internal" href="/native-client/version.html"><em>versioning information</em></a>). In the sample invocation above 65 <a class="reference internal" href="/native-client/version.html"><em>versioning information</em></a>). In the sample invocation above
66 <code>pepper_$(VERSION)</code> refers to the specific version you want to use. F or 66 <code>pepper_$(VERSION)</code> refers to the specific version you want to use. F or
67 example, <code>pepper_31</code>. If you don&#8217;t know which version you need, use the 67 example, <code>pepper_31</code>. If you don&#8217;t know which version you need, use the
68 one labeled <code>(stable)</code> by <code>naclsdk list</code>. See <a class="re ference internal" href="/native-client/sdk/download.html"><em>Download the Nativ e 68 one labeled <code>(stable)</code> by the <code>naclsdk list</code> command. See
69 Client SDK</em></a> for more details. 69 <a class="reference internal" href="/native-client/sdk/download.html"><em>Downlo ad the Native Client SDK</em></a> for more details.
70 </aside> 70 </aside>
71 <p>If no port number is specified, the server defaults to port 5103, and can be 71 <p>If no port number is specified, the server defaults to port 5103, and can be
72 accessed at <code>http://localhost:5103</code>.</p> 72 accessed at <code>http://localhost:5103</code>.</p>
73 <p>Any server can be used for the purpose of development. The one provided with the 73 <p>Any server can be used for the purpose of development. The one provided with the
74 SDK is just a convenience, not a requirement.</p> 74 SDK is just a convenience, not a requirement.</p>
75 <h2 id="step-3-set-up-the-chrome-browser"><span id="tutorial-step-3"></span>Step 3: Set up the Chrome browser</h2> 75 <h2 id="step-3-set-up-the-chrome-browser"><span id="tutorial-step-3"></span>Step 3: Set up the Chrome browser</h2>
76 <p>PNaCl is enabled by default in Chrome version 31 and later. Please make sure 76 <p>PNaCl is enabled by default in Chrome version 31 and later. Please make sure
77 that you have a suitable version to work through this tutorial. It&#8217;s also 77 that you have a suitable version to work through this tutorial. It&#8217;s also
78 important to use a Chrome version that&#8217;s the same or newer than the SDK bu ndle 78 important to use a Chrome version that&#8217;s the same or newer than the SDK bu ndle
79 used to build the Native Client modules.</p> 79 used to build the Native Client modules.</p>
(...skipping 127 matching lines...) Expand 10 before | Expand all | Expand 10 after
207 possibility that the Native Client module has a bug; <a class="reference interna l" href="/native-client/devguide/devcycle/debugging.html"><em>debugging</em></a> may be required.</p> 207 possibility that the Native Client module has a bug; <a class="reference interna l" href="/native-client/devguide/devcycle/debugging.html"><em>debugging</em></a> may be required.</p>
208 <p>There&#8217;s more information about troubleshooting in the documentation:</p > 208 <p>There&#8217;s more information about troubleshooting in the documentation:</p >
209 <ul class="small-gap"> 209 <ul class="small-gap">
210 <li><a class="reference internal" href="/native-client/faq.html#faq-troubleshoot ing"><em>FAQ Troubleshooting</em></a>.</li> 210 <li><a class="reference internal" href="/native-client/faq.html#faq-troubleshoot ing"><em>FAQ Troubleshooting</em></a>.</li>
211 <li>The <a class="reference internal" href="/native-client/devguide/coding/progr ess-events.html"><em>Progress Events</em></a> document 211 <li>The <a class="reference internal" href="/native-client/devguide/coding/progr ess-events.html"><em>Progress Events</em></a> document
212 contains some useful information about handling error events.</li> 212 contains some useful information about handling error events.</li>
213 </ul> 213 </ul>
214 <h2 id="next-steps">Next steps</h2> 214 <h2 id="next-steps">Next steps</h2>
215 <ul class="small-gap"> 215 <ul class="small-gap">
216 <li>See the <a class="reference internal" href="/native-client/devguide/coding/a pplication-structure.html"><em>Application Structure</em></a> 216 <li>See the <a class="reference internal" href="/native-client/devguide/coding/a pplication-structure.html"><em>Application Structure</em></a>
217 chapter in the Developer&#8217;s Guide for information about how to structure a 217 section in the Developer&#8217;s Guide for information about how to structure a
218 Native Client module.</li> 218 Native Client module.</li>
219 <li>Check the <a class="reference external" href="/native-client/pepper_stable/c pp">C++ Reference</a> for details 219 <li>Check the <a class="reference external" href="/native-client/pepper_stable/c pp">C++ Reference</a> for details
220 about how to use the Pepper APIs.</li> 220 about how to use the Pepper APIs.</li>
221 <li>Browse through the source code of the SDK examples (in the <code>examples</c ode> 221 <li>Browse through the source code of the SDK examples (in the <code>examples</c ode>
222 directory) to learn additional techniques for writing Native Client 222 directory) to learn additional techniques for writing Native Client
223 applications and using the Pepper APIs.</li> 223 applications and using the Pepper APIs.</li>
224 <li>See the <a class="reference internal" href="/native-client/devguide/devcycle /building.html"><em>Building</em></a>, <a class="reference internal" href="/nati ve-client/devguide/devcycle/running.html"><em>Running</em></a>, and <a class="re ference internal" href="/native-client/devguide/devcycle/debugging.html"><em>Deb ugging pages</em></a> for information about how to build, run, and 224 <li>See the <a class="reference internal" href="/native-client/devguide/devcycle /building.html"><em>Building</em></a>, <a class="reference internal" href="/nati ve-client/devguide/devcycle/running.html"><em>Running</em></a>, and <a class="re ference internal" href="/native-client/devguide/devcycle/debugging.html"><em>Deb ugging pages</em></a> for information about how to build, run, and
225 debug Native Client applications.</li> 225 debug Native Client applications.</li>
226 <li>Check the <a class="reference external" href="http://code.google.com/p/naclp orts/">naclports</a> project to see 226 <li>Check the <a class="reference external" href="http://code.google.com/p/naclp orts/">naclports</a> project to see
227 what libraries have been ported for use with Native Client. If you port an 227 what libraries have been ported for use with Native Client. If you port an
228 open-source library for your own use, we recommend adding it to naclports 228 open-source library for your own use, we recommend adding it to naclports
229 (see <a class="reference external" href="http://code.google.com/p/naclports/wiki /HowTo_Checkin">How to check code into naclports</a>).</li> 229 (see <a class="reference external" href="http://code.google.com/p/naclports/wiki /HowTo_Checkin">How to check code into naclports</a>).</li>
230 </ul> 230 </ul>
231 </section> 231 </section>
232 232
233 {{/partials.standard_nacl_article}} 233 {{/partials.standard_nacl_article}}
OLDNEW
« no previous file with comments | « native_client_sdk/doc_generated/devguide/devcycle/running.html ('k') | native_client_sdk/doc_generated/glossary.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698