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

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: 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>
(...skipping 10 matching lines...) Expand all
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><section id="overview"> 25 </div><section id="overview">
26 <h2 id="overview">Overview</h2> 26 <h2 id="overview">Overview</h2>
27 <p>This tutorial shows how to build and run a web application using Portable Nat ive 27 <p>This tutorial shows how to build and run a web application using Portable Nat ive
28 Client (PNaCl). This is a client-side application that uses HTML, JavaScript and 28 Client (PNaCl). This is a client-side application that uses HTML, JavaScript and
29 a Native Client module written in C++. The PNaCl toolchain is used to enable 29 a Native Client module written in C++. The PNaCl toolchain is used to enable
30 running the Native Client module directly from a web page.</p> 30 running the Native Client module directly from a web page.</p>
31 <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> 31 <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>
32 <section id="what-the-application-in-this-tutorial-does"> 32 <section id="what-the-application-in-this-tutorial-does">
33 <h3 id="what-the-application-in-this-tutorial-does">What the application in this tutorial does</h3> 33 <h3 id="what-the-application-in-this-tutorial-does">What the application in this tutorial does</h3>
34 <p>The application in this tutorial shows how to load a Native Client module in a 34 <p>The application in this tutorial shows how to load a Native Client module in a
35 web page, and how to send messages between JavaScript and the C++ code in the 35 web page, and how to send messages between JavaScript and the Native Client
36 Native Client module. In this simple application, the JavaScript code in the web 36 module. In this simple application, the JavaScript sends a <code>'hello'</code> message
37 page sends a <code>'hello'</code> message to the Native Client module. When the Native 37 to the Native Client module. When the Native Client module receives a message,
38 Client module receives a message, it checks whether the message is equal to the 38 it checks whether the message is equal to the string <code>'hello'</code>. If it is, the
39 string <code>'hello'</code>. If it is, the Native Client module returns a messag e saying 39 Native Client module returns a message saying <code>'hello from NaCl'</code>. A
40 <code>'hello from NaCl'</code>. A JavaScript alert panel displays the message re ceived 40 JavaScript alert panel displays the message received from the Native Client
41 from the Native Client module.</p> 41 module.</p>
42 </section><section id="communication-between-javascript-and-native-client-module s"> 42 </section><section id="communication-between-javascript-and-native-client-module s">
43 <h3 id="communication-between-javascript-and-native-client-modules">Communicatio n between JavaScript and Native Client modules</h3> 43 <h3 id="communication-between-javascript-and-native-client-modules">Communicatio n between JavaScript and Native Client modules</h3>
44 <p>The Native Client programming model supports bidirectional communication betw een 44 <p>The Native Client programming model supports bidirectional communication betw een
45 JavaScript and the Native Client module (C/C++ code). Both sides can initiate 45 JavaScript and the Native Client module. Both sides can initiate
46 and respond to messages. In all cases, the communication is asynchronous: The 46 and respond to messages. In all cases, the communication is asynchronous: The
47 caller (JavaScript or the Native Client module) sends a message, but the caller 47 caller (JavaScript or the Native Client module) sends a message, but the caller
48 does not wait for, or may not even expect, a response. This behavior is 48 does not wait for, or may not even expect, a response. This behavior is
49 analogous to client/server communication on the web, where the client posts a 49 analogous to client/server communication on the web, where the client posts a
50 message to the server and returns immediately. The Native Client messaging 50 message to the server and returns immediately. The Native Client messaging
51 system is part of the Pepper API, and is described in detail in 51 system is part of the Pepper API, and is described in detail in
52 <a class="reference internal" href="/native-client/devguide/coding/message-syste m.html"><em>Developer&#8217;s Guide: Messaging System</em></a>. 52 <a class="reference internal" href="/native-client/devguide/coding/message-syste m.html"><em>Developer&#8217;s Guide: Messaging System</em></a>.
53 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 53 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
54 JavaScript.</p> 54 JavaScript.</p>
55 </section></section><section id="step-1-download-and-install-the-native-client-s dk"> 55 </section></section><section id="step-1-download-and-install-the-native-client-s dk">
56 <h2 id="step-1-download-and-install-the-native-client-sdk">Step 1: Download and install the Native Client SDK</h2> 56 <h2 id="step-1-download-and-install-the-native-client-sdk">Step 1: Download and install the Native Client SDK</h2>
57 <p>Follow the instructions on the <a class="reference internal" href="/native-cl ient/sdk/download.html"><em>Download</em></a> page to 57 <p>Follow the instructions on the <a class="reference internal" href="/native-cl ient/sdk/download.html"><em>Download</em></a> page to
58 download and install the Native Client SDK.</p> 58 download and install the Native Client SDK.</p>
59 </section><section id="step-2-start-a-local-server"> 59 </section><section id="step-2-start-a-local-server">
60 <span id="tutorial-step-2"></span><h2 id="step-2-start-a-local-server"><span id= "tutorial-step-2"></span>Step 2: Start a local server</h2> 60 <span id="tutorial-step-2"></span><h2 id="step-2-start-a-local-server"><span id= "tutorial-step-2"></span>Step 2: Start a local server</h2>
61 <p>To simulate a production environment, the SDK provides a simple web server th at 61 <p>To simulate a production environment, the SDK provides a simple web server th at
62 can be used to serve the application on <code>localhost</code>. A convenience Ma kefile 62 can be used to serve the application on <code>localhost</code>. A convenience Ma kefile
63 rule called <code>serve</code> is the easiest way to invoke it:</p> 63 rule called <code>serve</code> is the easiest way to invoke it:</p>
64 <pre> 64 <pre>
65 $ cd pepper_$(VERSION)/getting_started 65 $ cd pepper_$(VERSION)/getting_started
66 $ make serve 66 $ make serve
67 </pre> 67 </pre>
68 <aside class="note"> 68 <aside class="note">
69 The SDK may consist of several &#8220;bundles&#8221;, one per Chrome/Pepper vers ion (see 69 The SDK may consist of several &#8220;bundles&#8221;, one per Chrome/Pepper vers ion (see
70 <a class="reference internal" href="/native-client/version.html"><em>versioning information</em></a>). In the sample invocation above 70 <a class="reference internal" href="/native-client/version.html"><em>versioning information</em></a>). In the sample invocation above
71 <code>pepper_$(VERSION)</code> refers to the specific version you want to use. F or 71 <code>pepper_$(VERSION)</code> refers to the specific version you want to use. F or
72 example, <code>pepper_31</code>. If you don&#8217;t know which version you need, use the 72 example, <code>pepper_31</code>. If you don&#8217;t know which version you need, use the
73 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 73 one labeled <code>(stable)</code> by the <code>naclsdk list</code> command. See
74 Client SDK</em></a> for more details. 74 <a class="reference internal" href="/native-client/sdk/download.html"><em>Downlo ad the Native Client SDK</em></a> for more details.
75 </aside> 75 </aside>
76 <p>If no port number is specified, the server defaults to port 5103, and can be 76 <p>If no port number is specified, the server defaults to port 5103, and can be
77 accessed at <code>http://localhost:5103</code>.</p> 77 accessed at <code>http://localhost:5103</code>.</p>
78 <p>Any server can be used for the purpose of development. The one provided with the 78 <p>Any server can be used for the purpose of development. The one provided with the
79 SDK is just a convenience, not a requirement.</p> 79 SDK is just a convenience, not a requirement.</p>
80 </section><section id="step-3-set-up-the-chrome-browser"> 80 </section><section id="step-3-set-up-the-chrome-browser">
81 <span id="tutorial-step-3"></span><h2 id="step-3-set-up-the-chrome-browser"><spa n id="tutorial-step-3"></span>Step 3: Set up the Chrome browser</h2> 81 <span id="tutorial-step-3"></span><h2 id="step-3-set-up-the-chrome-browser"><spa n id="tutorial-step-3"></span>Step 3: Set up the Chrome browser</h2>
82 <p>PNaCl is enabled by default in Chrome version 31 and later. Please make sure 82 <p>PNaCl is enabled by default in Chrome version 31 and later. Please make sure
83 that you have a suitable version to work through this tutorial. It&#8217;s also 83 that you have a suitable version to work through this tutorial. It&#8217;s also
84 important to use a Chrome version that&#8217;s the same or newer than the SDK bu ndle 84 important to use a Chrome version that&#8217;s the same or newer than the SDK bu ndle
(...skipping 135 matching lines...) Expand 10 before | Expand all | Expand 10 after
220 <p>There&#8217;s more information about troubleshooting in the documentation:</p > 220 <p>There&#8217;s more information about troubleshooting in the documentation:</p >
221 <ul class="small-gap"> 221 <ul class="small-gap">
222 <li><a class="reference internal" href="/native-client/faq.html#faq-troubleshoot ing"><em>FAQ Troubleshooting</em></a>.</li> 222 <li><a class="reference internal" href="/native-client/faq.html#faq-troubleshoot ing"><em>FAQ Troubleshooting</em></a>.</li>
223 <li>The <a class="reference internal" href="/native-client/devguide/coding/progr ess-events.html"><em>Progress Events</em></a> document 223 <li>The <a class="reference internal" href="/native-client/devguide/coding/progr ess-events.html"><em>Progress Events</em></a> document
224 contains some useful information about handling error events.</li> 224 contains some useful information about handling error events.</li>
225 </ul> 225 </ul>
226 </section><section id="next-steps"> 226 </section><section id="next-steps">
227 <h2 id="next-steps">Next steps</h2> 227 <h2 id="next-steps">Next steps</h2>
228 <ul class="small-gap"> 228 <ul class="small-gap">
229 <li>See the <a class="reference internal" href="/native-client/devguide/coding/a pplication-structure.html"><em>Application Structure</em></a> 229 <li>See the <a class="reference internal" href="/native-client/devguide/coding/a pplication-structure.html"><em>Application Structure</em></a>
230 chapter in the Developer&#8217;s Guide for information about how to structure a 230 section in the Developer&#8217;s Guide for information about how to structure a
231 Native Client module.</li> 231 Native Client module.</li>
232 <li>Check the <a class="reference external" href="/native-client/pepper_stable/c pp">C++ Reference</a> for details 232 <li>Check the <a class="reference external" href="/native-client/pepper_stable/c pp">C++ Reference</a> for details
233 about how to use the Pepper APIs.</li> 233 about how to use the Pepper APIs.</li>
234 <li>Browse through the source code of the SDK examples (in the <code>examples</c ode> 234 <li>Browse through the source code of the SDK examples (in the <code>examples</c ode>
235 directory) to learn additional techniques for writing Native Client 235 directory) to learn additional techniques for writing Native Client
236 applications and using the Pepper APIs.</li> 236 applications and using the Pepper APIs.</li>
237 <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 237 <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
238 debug Native Client applications.</li> 238 debug Native Client applications.</li>
239 <li>Check the <a class="reference external" href="http://code.google.com/p/naclp orts/">naclports</a> project to see 239 <li>Check the <a class="reference external" href="http://code.google.com/p/naclp orts/">naclports</a> project to see
240 what libraries have been ported for use with Native Client. If you port an 240 what libraries have been ported for use with Native Client. If you port an
241 open-source library for your own use, we recommend adding it to naclports 241 open-source library for your own use, we recommend adding it to naclports
242 (see <a class="reference external" href="http://code.google.com/p/naclports/wiki /HowTo_Checkin">How to check code into naclports</a>).</li> 242 (see <a class="reference external" href="http://code.google.com/p/naclports/wiki /HowTo_Checkin">How to check code into naclports</a>).</li>
243 </ul> 243 </ul>
244 </section></section> 244 </section></section>
245 245
246 {{/partials.standard_nacl_article}} 246 {{/partials.standard_nacl_article}}
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698