[NaCl SDK Docs] Only generate one top-level <section> element.
This fixes the right-side table-of-contents on the documentation page, so it is collapsible and only shows h2 headings by default. NOTRY because it is a documentation-only change. BUG=374811 R=sbc@chromium.org NOTRY=true Review URL: https://codereview.chromium.org/438403003 git-svn-id: svn://svn.chromium.org/chrome/trunk/src@287804 0039d316-1c4b-4281-b951-d872f2087c98
This commit is contained in:
native_client_sdk
doc_generated
community
security-contest
devguide
coding
3D-graphics.htmlapplication-structure.htmlaudio.htmlfile-io.htmlmessage-system.htmlnacl_io.htmlnative-client-modules.htmlprogress-events.htmlurl-loading.htmlview-focus-input-events.html
devcycle
distributing.htmltutorial
pepper_beta
pepper_dev
pepper_stable
publications-and-presentations.htmlreference
design-docs.htmlnacl-manifest-format.htmlpnacl-bitcode-abi.htmlpnacl-c-cpp-language-support.htmlpnacl-undefined-behavior.html
rest-devsite-examples.htmlsandbox_internals
sdk
src
doc
_sphinxext
@@ -13,7 +13,6 @@ with issues directly related to programming in the Native Client
|
||||
environment. To learn more about OpenGL ES 2.0 itself, see the <a class="reference external" href="http://opengles-book.com/">OpenGL ES 2.0
|
||||
Programming Guide</a>.
|
||||
</aside>
|
||||
<section id="validating-the-client-graphics-platform">
|
||||
<h2 id="validating-the-client-graphics-platform">Validating the client graphics platform</h2>
|
||||
<p>Native Client is a software technology that lets you code an application once
|
||||
and run it on multiple platforms without worrying about the implementation
|
||||
@@ -25,7 +24,6 @@ to have vulnerabilities that can be exploited.</p>
|
||||
<p>Even if the GPU driver is safe to use, your program should perform a validation
|
||||
check before you launch your application to ensure that the driver supports all
|
||||
the features you need.</p>
|
||||
<section id="vetting-the-driver-in-javascript">
|
||||
<h3 id="vetting-the-driver-in-javascript">Vetting the driver in JavaScript</h3>
|
||||
<p>At startup, the application should perform a few additional tests that can be
|
||||
implemented in JavaScript on its hosting web page. The script that performs
|
||||
@@ -36,9 +34,7 @@ can, use the context to confirm the existence of any required OpenGL ES 2.0
|
||||
extensions. You may want to refer to the <a class="reference external" href="http://www.khronos.org/registry/webgl/extensions/">extension registry</a> and include <a class="reference external" href="https://developer.mozilla.org/en-US/docs/WebGL/Using_Extensions">vendor
|
||||
prefixes</a>
|
||||
when checking for extensions.</p>
|
||||
</section><section id="vetting-the-driver-in-native-client">
|
||||
<h3 id="vetting-the-driver-in-native-client">Vetting the driver in Native Client</h3>
|
||||
<section id="create-a-context">
|
||||
<h4 id="create-a-context">Create a context</h4>
|
||||
<p>Once you’ve passed the JavaScript validation tests, it’s safe to add a Native
|
||||
Client embed tag to the hosting web page and load the module. As part of the
|
||||
@@ -50,7 +46,6 @@ the context, try creating a simpler version to see if you’re asking for an
|
||||
unsupported feature or exceeding a driver resource limit. Your production code
|
||||
should always check that the context was created and fail gracefully if that’s
|
||||
not the case.</p>
|
||||
</section><section id="check-for-extensions-and-capabilities">
|
||||
<h4 id="check-for-extensions-and-capabilities">Check for extensions and capabilities</h4>
|
||||
<p>Not every GPU supports every extension or has the same amount of texture units,
|
||||
vertex attributes, etc. On startup, call <code>glGetString(GL_EXTENSIONS)</code> and
|
||||
@@ -92,7 +87,6 @@ as well as texture and vertex data accordingly:</p>
|
||||
<code>glGetIntegerv(GL_MAX_TEXTURE_IMAGE_UNITS, ...)</code> returns a value greater
|
||||
than or equal to the number of simultaneous textures you need.</li>
|
||||
</ul>
|
||||
</section></section><section id="vetting-the-driver-in-the-chrome-web-store">
|
||||
<h3 id="vetting-the-driver-in-the-chrome-web-store">Vetting the driver in the Chrome Web Store</h3>
|
||||
<p>If you choose to place your application in the <a class="reference external" href="/webstore">Chrome Web Store</a>,
|
||||
its Web Store <a class="reference external" href="/extensions/manifest">manifest file</a> can include the <code>webgl</code>
|
||||
@@ -120,7 +114,6 @@ been disabled.”</p>
|
||||
<p>The manifest-based check applies only to downloads directly from the Chrome Web
|
||||
Store. It is not performed when an application is loaded via <a class="reference external" href="/webstore/inline_installation">inline
|
||||
installation</a>.</p>
|
||||
</section><section id="what-to-do-when-there-are-problems">
|
||||
<h3 id="what-to-do-when-there-are-problems">What to do when there are problems</h3>
|
||||
<p>Using the vetting procedure described above, you should be able to detect the
|
||||
most common problems before your application runs. If there are problems, your
|
||||
@@ -131,7 +124,6 @@ might want to linke to the Chrome page that describes <a class="reference extern
|
||||
<p>If a user can’t update the driver, or their problem persists, be sure to gather
|
||||
information about their graphics environment. Ask for the contents of the Chrome
|
||||
<code>about:gpu</code> page.</p>
|
||||
</section><section id="document-unreliable-drivers">
|
||||
<h3 id="document-unreliable-drivers">Document unreliable drivers</h3>
|
||||
<p>It can be helpful to include information about known dubious drivers in your
|
||||
user documentation. This might help identify if a rogue driver is the cause of a
|
||||
@@ -140,7 +132,6 @@ found at the <a class="reference external" href="http://src.chromium.org/viewvc/
|
||||
and <a class="reference external" href="http://www.khronos.org/webgl/wiki/BlacklistsAndWhitelists">Khronos</a>. You
|
||||
can use these lists to include information in your documentation that warns
|
||||
users about dangerous drivers.</p>
|
||||
</section><section id="test-your-defenses">
|
||||
<h3 id="test-your-defenses">Test your defenses</h3>
|
||||
<p>You can test your driver validation code by running Chrome with the following
|
||||
flags (all at once) and watching how your application responds:</p>
|
||||
@@ -151,10 +142,8 @@ flags (all at once) and watching how your application responds:</p>
|
||||
<li><code>--disable-accelerated-compositing</code></li>
|
||||
<li><code>--disable-accelerated-2d-canvas</code></li>
|
||||
</ul>
|
||||
</section></section><section id="calling-opengl-es-2-0-commands">
|
||||
<h2 id="calling-opengl-es-2-0-commands">Calling OpenGL ES 2.0 commands</h2>
|
||||
<p>There are three ways to write OpenGL ES 2.0 calls in Native Client.</p>
|
||||
<section id="use-pure-opengl-es-2-0-function-calls">
|
||||
<h3 id="use-pure-opengl-es-2-0-function-calls">Use “pure” OpenGL ES 2.0 function calls</h3>
|
||||
<p>You can make OpenGL ES 2.0 calls through a Pepper extension library. The SDK
|
||||
example <code>examples/api/graphics_3d</code> works this way. In the file
|
||||
@@ -200,7 +189,6 @@ bool InitGL(int32_t new_width, int32_t new_height) {
|
||||
necessary: upon application launch (when the graphics context is NULL) and
|
||||
whenever the module’s View changes size.</li>
|
||||
</ul>
|
||||
</section><section id="use-regal">
|
||||
<h3 id="use-regal">Use Regal</h3>
|
||||
<p>If you are porting an OpenGL ES 2.0 application, or are comfortable writing in
|
||||
OpenGL ES 2.0, you should stick with the Pepper APIs or pure OpenGL ES 2.0 calls
|
||||
@@ -211,7 +199,6 @@ Client. Regal forwards most OpenGL calls directly to the underlying graphics
|
||||
library, but it can also emulate other calls that are not included (when
|
||||
hardware support exists). See <a class="reference external" href="http://www.altdevblogaday.com/2012/09/04/bringing-regal-opengl-to-native-client/">libregal</a>
|
||||
for more info.</p>
|
||||
</section><section id="use-the-pepper-api">
|
||||
<h3 id="use-the-pepper-api">Use the Pepper API</h3>
|
||||
<p>Your code can call the Pepper PPB_OpenGLES2 API directly, as with any Pepper
|
||||
interface. When you write in this way, each invocation of an OpenGL ES 2.0
|
||||
@@ -224,13 +211,11 @@ ppb_g3d_interface->CompileShader(graphicsContext, shader);
|
||||
<p>This approach specifically targets the Pepper APIs. Each call corresponds to a
|
||||
OpenGL ES 2.0 function, but the syntax is unique to Native Client, so the source
|
||||
file is not portable.</p>
|
||||
</section></section><section id="implementing-a-rendering-loop">
|
||||
<h2 id="implementing-a-rendering-loop">Implementing a rendering loop</h2>
|
||||
<p>Graphics applications require a continuous frame render-and-redraw cycle that
|
||||
runs at a high frequency. To achieve the best frame rate, is important to
|
||||
understand how the OpenGL ES 2.0 code in a Native Client module interacts with
|
||||
Chrome.</p>
|
||||
<section id="the-chrome-and-native-client-processes">
|
||||
<h3 id="the-chrome-and-native-client-processes">The Chrome and Native Client processes</h3>
|
||||
<p>Chrome is a multi-process browser. Each Chrome tab is a separate process that is
|
||||
running an application with its own main thread (we’ll call it the Chrome main
|
||||
@@ -246,7 +231,6 @@ a standstill.</p>
|
||||
<p>Native Client uses callback functions to synchronize the main threads of the
|
||||
two processes. Only certain Pepper functions use callbacks; <a class="reference external" href="/native-client/pepper_stable/c/struct_p_p_b___graphics3_d__1__0#a293c6941c0da084267ffba3954793497">SwapBuffers</a>
|
||||
is one.</p>
|
||||
</section><section id="swapbuffers-and-its-callback-function">
|
||||
<h3 id="swapbuffers-and-its-callback-function"><code>SwapBuffers</code> and its callback function</h3>
|
||||
<p><code>SwapBuffers</code> is non-blocking; it is called from the Native Client thread and
|
||||
returns immediately. When <code>SwapBuffers</code> is called, it runs asynchronously on
|
||||
@@ -271,7 +255,6 @@ from the main thread to Native Client, green up-arrows are non-blocking
|
||||
<code>SwapBuffers</code> calls from Native Client to the main thread. All OpenGL ES 2.0
|
||||
calls are made from <code>Draw</code> in the Native Client thread.</p>
|
||||
<img alt="/native-client/images/3d-graphics-render-loop.png" src="/native-client/images/3d-graphics-render-loop.png" />
|
||||
</section><section id="sdk-example-graphics-3d">
|
||||
<h3 id="sdk-example-graphics-3d">SDK example <code>graphics_3d</code></h3>
|
||||
<p>The SDK example <code>graphics_3d</code> uses the function <code>MainLoop</code> (in
|
||||
<code>hello_world.cc</code>) to create a rendering loop as described above. <code>MainLoop</code>
|
||||
@@ -293,7 +276,6 @@ void MainLoop(void* foo, int bar) {
|
||||
}
|
||||
}
|
||||
</pre>
|
||||
</section></section><section id="managing-the-opengl-es-2-0-pipeline">
|
||||
<h2 id="managing-the-opengl-es-2-0-pipeline">Managing the OpenGL ES 2.0 pipeline</h2>
|
||||
<p>OpenGL ES 2.0 commands do not run in the Chrome or Native Client processes. They
|
||||
are passed into a FIFO queue in shared memory which is best understood as a <a class="reference external" href="http://www.chromium.org/developers/design-documents/gpu-command-buffer">GPU
|
||||
@@ -324,7 +306,6 @@ commands. For example, issue a flush before you begin any multithreaded particle
|
||||
work, so that the command buffer will be clear when you start doing OpenGL ES
|
||||
2.0 calls again. Determining where and how often to call <code>glFlush</code> can be
|
||||
tricky, you will need to experiment to find the sweet spot.</p>
|
||||
</section><section id="rendering-and-inactive-tabs">
|
||||
<h2 id="rendering-and-inactive-tabs">Rendering and inactive tabs</h2>
|
||||
<p>Users will often switch between tabs in a multi-tab browser. A well-behaved
|
||||
application that’s performing 3D rendering should pause any real-time processing
|
||||
@@ -347,7 +328,6 @@ main thread every 30 msec or so. This provides time to update features that
|
||||
should still run in the background, like audio. It may also be helpful to call
|
||||
<code>sched_yield</code> or <code>usleep</code> on any worker threads to release resources and
|
||||
cede cycles to the OS.</p>
|
||||
<section id="handling-tab-activation-from-the-main-thread">
|
||||
<h3 id="handling-tab-activation-from-the-main-thread">Handling tab activation from the main thread</h3>
|
||||
<p>You can detect and respond to the activation or deactivation of a tab with
|
||||
JavaScript on your hosting page. Add an EventListener for <code>visibilitychange</code>
|
||||
@@ -364,7 +344,6 @@ document.addEventListener('visibilitychange', function(){
|
||||
|
||||
}, false);
|
||||
</pre>
|
||||
</section><section id="handling-tab-activation-from-the-native-client-thread">
|
||||
<h3 id="handling-tab-activation-from-the-native-client-thread">Handling tab activation from the Native Client thread</h3>
|
||||
<p>You can also detect and respond to the activation or deactivation of a tab
|
||||
directly from your Native Client module by including code in the function
|
||||
@@ -372,11 +351,9 @@ directly from your Native Client module by including code in the function
|
||||
module’s view occurs. The code can call <code>ppb::View::IsPageVisible</code> to
|
||||
determine if the page is visible or not. The most common cause of invisible
|
||||
pages is that the page is in a background tab.</p>
|
||||
</section></section><section id="tips-and-best-practices">
|
||||
<h2 id="tips-and-best-practices">Tips and best practices</h2>
|
||||
<p>Here are some suggestions for writing safe code and getting the maximum
|
||||
performance with the Pepper 3D API.</p>
|
||||
<section id="do-s">
|
||||
<h3 id="do-s">Do’s</h3>
|
||||
<ul class="small-gap">
|
||||
<li><p class="first"><strong>Make sure to enable attrib 0.</strong> OpenGL requires that you enable attrib 0,
|
||||
@@ -408,7 +385,6 @@ transforms, avoid matrix-to-matrix conversions. For instance, upres a vec3 to
|
||||
a vec4 before transforming it by a mat4, rather than converting the mat4 to a
|
||||
mat3.</li>
|
||||
</ul>
|
||||
</section><section id="don-ts">
|
||||
<h3 id="don-ts">Don’ts</h3>
|
||||
<ul class="small-gap">
|
||||
<li><strong>Don’t use client side buffers.</strong> OpenGL ES 2.0 can use client side data with
|
||||
@@ -436,6 +412,6 @@ avoid this problem, keep static and dynamic data in different buffers.</li>
|
||||
error. Each time it is called, an error messages will appear in Chrome’s
|
||||
<code>about:gpu</code> tab.</li>
|
||||
</ul>
|
||||
</section></section></section>
|
||||
</section>
|
||||
|
||||
{{/partials.standard_nacl_article}}
|
||||
|
@@ -19,7 +19,6 @@ The “Hello, World” example is used here to illustrate basic
|
||||
Native Client programming techniques. You can find this code in the
|
||||
<em>/getting_started/part1</em> directory in the Native Client SDK download.
|
||||
</aside>
|
||||
<section id="application-components">
|
||||
<h2 id="application-components">Application components</h2>
|
||||
<p>A Native Client application typically contains the following components:</p>
|
||||
<ul class="small-gap">
|
||||
@@ -37,8 +36,7 @@ architecture-specific executable files (with .nexe extensions).</li>
|
||||
<p>Applications that are published in the <a class="reference external" href="https://chrome.google.com/webstore/search?q=%22Native+Client%22+OR+NativeClient+OR+NaCl">Chrome Web Store</a>
|
||||
also include a Chrome
|
||||
Web Store manifest file <code>(manifest.json)</code> and one or more icon files.</p>
|
||||
</section><section id="html-file-and-the-embed-element">
|
||||
<span id="html-file"></span><h2 id="html-file-and-the-embed-element"><span id="html-file"></span>HTML file and the <embed> element</h2>
|
||||
<h2 id="html-file-and-the-embed-element"><span id="html-file"></span>HTML file and the <embed> element</h2>
|
||||
<p>The <code><embed></code> element in an HTML file triggers the loading of a Native Client
|
||||
module and specifies the rectangle on the web page that is managed by the
|
||||
module. Here is the <embed> element from the “Hello, World” application:</p>
|
||||
@@ -68,8 +66,7 @@ user’s computer (see the following section for more information)</dd>
|
||||
modules the type must be “application/x-pnacl”. For architecture-specific
|
||||
Native Client modules the type must be “application/x-nacl”</dd>
|
||||
</dl>
|
||||
</section><section id="manifest-files">
|
||||
<span id="manifest-file"></span><h2 id="manifest-files"><span id="manifest-file"></span>Manifest Files</h2>
|
||||
<h2 id="manifest-files"><span id="manifest-file"></span>Manifest Files</h2>
|
||||
<p>Native Client applications have two types of manifest files: a Chrome Web Store
|
||||
manifest file and a Native Client manifest file.</p>
|
||||
<p>A <strong>Chrome Web Store manifest file</strong> is a file with information about a web
|
||||
@@ -132,7 +129,6 @@ manifest files.</p>
|
||||
compilation step (see the Makefile in any of the SDK examples for an
|
||||
illustration of how to do so). The manifest file format is also
|
||||
<a class="reference internal" href="/native-client/reference/nacl-manifest-format.html"><em>documented</em></a>.</p>
|
||||
</section><section id="modules-and-instances">
|
||||
<h2 id="modules-and-instances">Modules and instances</h2>
|
||||
<p>A Native Client <strong>module</strong> is C or C++ code compiled into a PNaCl .pexe file or
|
||||
a NaCl .nexe file.</p>
|
||||
@@ -146,7 +142,6 @@ module may be included in a web page multiple times by using multiple
|
||||
<code><embed></code> elements that refer to the module; in this case the Native Client
|
||||
runtime system loads the module once and creates multiple instances that are
|
||||
managed by the module.</p>
|
||||
</section><section id="native-client-modules-a-closer-look">
|
||||
<h2 id="native-client-modules-a-closer-look">Native Client modules: A closer look</h2>
|
||||
<p>A Native Client module must include three components:</p>
|
||||
<ul class="small-gap">
|
||||
@@ -212,6 +207,6 @@ issue a <code>crash</code> event
|
||||
samples shown above don’t actually do anything. Subsequent chapters in the
|
||||
Developer’s Guide build on these code samples and add more interesting
|
||||
functionality.</p>
|
||||
</section></section>
|
||||
</section>
|
||||
|
||||
{{/partials.standard_nacl_article}}
|
||||
|
@@ -38,7 +38,6 @@ starts playing the audio samples as soon as it is loaded into the browser. For a
|
||||
slightly more sophisticated example, see the <code>audio</code> example (source code in
|
||||
the SDK directory <code>examples/api/audio</code>), which lets users specify a frequency
|
||||
for the sine wave and click buttons to start and stop audio playback.</p>
|
||||
<section id="reference-information">
|
||||
<h2 id="reference-information">Reference information</h2>
|
||||
<p>For reference information related to the Pepper audio API, see the following
|
||||
documentation:</p>
|
||||
@@ -49,7 +48,6 @@ documentation:</p>
|
||||
<li><a class="reference external" href="/native-client/pepper_stable/cpp/audio_8h">audio.h</a></li>
|
||||
<li><a class="reference external" href="/native-client/pepper_stable/c/group___enums#gaee750c350655f2fb0fe04c04029e0ff8">PP_AudioSampleRate</a></li>
|
||||
</ul>
|
||||
</section><section id="about-the-pepper-audio-api">
|
||||
<h2 id="about-the-pepper-audio-api">About the Pepper audio API</h2>
|
||||
<p>The Pepper audio API lets Native Client modules play audio streams in a
|
||||
browser. To play an audio stream, a module generates audio samples and writes
|
||||
@@ -81,7 +79,6 @@ audio buffer.</li>
|
||||
<p>This basic interaction is illustrated below, and described in detail in the
|
||||
sections that follow.</p>
|
||||
<img alt="/native-client/images/pepper-audio-api.png" src="/native-client/images/pepper-audio-api.png" />
|
||||
</section><section id="digital-audio-concepts">
|
||||
<h2 id="digital-audio-concepts">Digital audio concepts</h2>
|
||||
<p>Before you use the Pepper audio API, it’s helpful to understand a few concepts
|
||||
that are fundamental to how digital audio is recorded and played back:</p>
|
||||
@@ -110,7 +107,6 @@ with the following configurations:</p>
|
||||
<li><strong>bit depth</strong>: 16</li>
|
||||
<li><strong>channels</strong>: 2 (stereo)</li>
|
||||
</ul>
|
||||
</section><section id="setting-up-the-module">
|
||||
<h2 id="setting-up-the-module">Setting up the module</h2>
|
||||
<p>The code examples below describe a simple Native Client module that generates
|
||||
audio samples using a sine wave with a frequency of 440 Hz. The module starts
|
||||
@@ -153,9 +149,7 @@ class SineSynthModule : public pp::Module {
|
||||
}
|
||||
};
|
||||
</pre>
|
||||
</section><section id="creating-an-audio-configuration-resource">
|
||||
<h2 id="creating-an-audio-configuration-resource">Creating an audio configuration resource</h2>
|
||||
<section id="resources">
|
||||
<h3 id="resources">Resources</h3>
|
||||
<p>Before the module can play an audio stream, it must create two resources: an
|
||||
audio configuration resource and an audio resource. Resources are handles to
|
||||
@@ -166,7 +160,6 @@ when the samples in the stream’s buffer run out. An audio configuration re
|
||||
is an object that stores configuration data for an audio resource, including the
|
||||
sampling frequency of the audio samples, and the number of samples that the
|
||||
callback function must provide when the browser invokes it.</p>
|
||||
</section><section id="sample-frame-count">
|
||||
<h3 id="sample-frame-count">Sample frame count</h3>
|
||||
<p>Prior to creating an audio configuration resource, the module should call
|
||||
<code>RecommendSampleFrameCount</code> to obtain a <em>sample frame count</em> from the
|
||||
@@ -192,7 +185,6 @@ the browser must invoke the callback function frequently to refill the audio
|
||||
buffer. Conversely, a large sample frame count results in higher latency but
|
||||
lower CPU usage. You should request a large sample frame count if your module
|
||||
will play long, uninterrupted audio segments.</p>
|
||||
</section><section id="supported-audio-configurations">
|
||||
<h3 id="supported-audio-configurations">Supported audio configurations</h3>
|
||||
<p>After the module obtains a sample frame count, it can create an audio
|
||||
configuration resource. Currently the Pepper audio API supports audio streams
|
||||
@@ -225,14 +217,12 @@ bool SineSynthInstance::Init(uint32_t argc,
|
||||
return audio_.StartPlayback();
|
||||
}
|
||||
</pre>
|
||||
</section></section><section id="creating-an-audio-resource">
|
||||
<h2 id="creating-an-audio-resource">Creating an audio resource</h2>
|
||||
<p>Once the module has created an audio configuration resource, it can create an
|
||||
audio resource. To do so, it instantiates a <code>pp::Audio</code> object, passing in a
|
||||
pointer to the module instance, the audio configuration resource, a callback
|
||||
function, and a pointer to user data (data that is used in the callback
|
||||
function). See the example above.</p>
|
||||
</section><section id="implementing-a-callback-function">
|
||||
<h2 id="implementing-a-callback-function">Implementing a callback function</h2>
|
||||
<p>The browser calls the callback function associated with an audio resource every
|
||||
time it needs more samples to play. The callback function can generate new
|
||||
@@ -293,7 +283,6 @@ class SineSynthInstance : public pp::Instance {
|
||||
...
|
||||
};
|
||||
</pre>
|
||||
<section id="application-threads-and-real-time-requirements">
|
||||
<h3 id="application-threads-and-real-time-requirements">Application threads and real-time requirements</h3>
|
||||
<p>The callback function runs in a background application thread. This allows audio
|
||||
processing to continue even when the application is busy doing something
|
||||
@@ -325,7 +314,6 @@ callback function may not be called immediately after the call to
|
||||
another thread so that the audio stream starts playing simultaneously with
|
||||
another action in your application, you must handle such synchronization
|
||||
manually.</p>
|
||||
</section></section><section id="starting-and-stopping-playback">
|
||||
<h2 id="starting-and-stopping-playback">Starting and stopping playback</h2>
|
||||
<p>To start and stop audio playback, the module simply reacts to JavaScript
|
||||
messages.</p>
|
||||
@@ -347,6 +335,6 @@ void SineSynthInstance::HandleMessage(const pp::Var& var_message) {
|
||||
}
|
||||
}
|
||||
</pre>
|
||||
</section></section>
|
||||
</section>
|
||||
|
||||
{{/partials.standard_nacl_article}}
|
||||
|
@@ -35,8 +35,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div><section id="introduction">
|
||||
<h2 id="introduction">Introduction</h2>
|
||||
</div><h2 id="introduction">Introduction</h2>
|
||||
<p>This chapter describes how to use the <a class="reference external" href="/native-client/pepper_stable/cpp/classpp_1_1_file_i_o">FileIO API</a> to read and write
|
||||
files using a local secure data store.</p>
|
||||
<p>You might use the File IO API with the URL Loading APIs to create an overall
|
||||
@@ -53,7 +52,6 @@ application.</li>
|
||||
</ol>
|
||||
<p>The example discussed in this chapter is included in the SDK in the directory
|
||||
<code>examples/api/file_io</code>.</p>
|
||||
</section><section id="reference-information">
|
||||
<h2 id="reference-information">Reference information</h2>
|
||||
<p>For reference information related to FileIO, see the following documentation:</p>
|
||||
<ul class="small-gap">
|
||||
@@ -64,7 +62,6 @@ a file reference or “weak pointer” to a file in a file system</li>
|
||||
<li><a class="reference external" href="/native-client/pepper_stable/cpp/file__system_8h">file_system.h</a> - API to
|
||||
create a file system associated with a file</li>
|
||||
</ul>
|
||||
</section><section id="local-file-i-o">
|
||||
<h2 id="local-file-i-o">Local file I/O</h2>
|
||||
<p>Chrome provides an obfuscated, restricted area on disk to which a web app can
|
||||
safely <a class="reference external" href="https://developers.google.com/chrome/whitepapers/storage#persistent">read and write files</a>. The
|
||||
@@ -74,8 +71,7 @@ files and manage caching yourself. The data is persistent between launches of
|
||||
Chrome, and is not removed unless your application deletes it or the user
|
||||
manually deletes it. There is no limit to the amount of local data you can
|
||||
use, other than the actual space available on the local drive.</p>
|
||||
<section id="enabling-local-file-i-o">
|
||||
<span id="enabling-file-access"></span><span id="quota-management"></span><h3 id="enabling-local-file-i-o"><span id="enabling-file-access"></span><span id="quota-management"></span>Enabling local file I/O</h3>
|
||||
<h3 id="enabling-local-file-i-o"><span id="enabling-file-access"></span><span id="quota-management"></span>Enabling local file I/O</h3>
|
||||
<p>The easiest way to enable the writing of persistent local data is to include
|
||||
the <a class="reference external" href="/extensions/declare_permissions#unlimitedStorage">unlimitedStorage permission</a> in your Chrome Web Store
|
||||
manifest file. With this permission you can use the Pepper FileIO API without
|
||||
@@ -86,7 +82,6 @@ JavaScript code that calls the <a class="reference external" href="http://update
|
||||
explicitly request local disk space before using the FileIO API. In this case
|
||||
Chrome will prompt the user to accept a requestQuota call every time one is
|
||||
made.</p>
|
||||
</section><section id="testing-local-file-i-o">
|
||||
<h3 id="testing-local-file-i-o">Testing local file I/O</h3>
|
||||
<p>You should be aware that using the <code>unlimitedStorage</code> manifest permission
|
||||
constrains the way you can test your app. Three of the four techniques
|
||||
@@ -97,7 +92,6 @@ If you want to test the file IO portion of your app with a simple local server,
|
||||
you need to include JavaScript code that calls the HTML5 Quota Management API.
|
||||
When you deliver your application you can replace this code with the
|
||||
<code>unlimitedStorage</code> manifest permission.</p>
|
||||
</section></section><section id="the-file-io-example">
|
||||
<h2 id="the-file-io-example">The <code>file_io</code> example</h2>
|
||||
<p>The Native Client SDK includes an example, <code>file_io</code>, that demonstrates how
|
||||
to read and write a local disk file. Since you will probably run the example
|
||||
@@ -115,7 +109,6 @@ Native Client module.</li>
|
||||
</ul>
|
||||
<p>The remainder of this section covers the code in the <code>file_io.cc</code> file for
|
||||
reading and writing files.</p>
|
||||
<section id="file-i-o-overview">
|
||||
<h3 id="file-i-o-overview">File I/O overview</h3>
|
||||
<p>Like many Pepper APIs, the File IO API includes a set of methods that execute
|
||||
asynchronously and that invoke callback functions in your Native Client module.
|
||||
@@ -129,7 +122,6 @@ your worker thread, so you can use the stack and standard control flow
|
||||
structures normally.</p>
|
||||
<p>The high-level flow for the <code>file_io</code> example is described below. Note that
|
||||
methods in the namespace <code>pp</code> are part of the Pepper C++ API.</p>
|
||||
</section><section id="creating-and-writing-a-file">
|
||||
<h3 id="creating-and-writing-a-file">Creating and writing a file</h3>
|
||||
<p>Following are the high-level steps involved in creating and writing to a
|
||||
file:</p>
|
||||
@@ -142,7 +134,6 @@ blocked until the call to <code>Write</code> completes. If there is more data to
|
||||
write, <code>Write</code> is called again.</li>
|
||||
<li>When there is no more data to write, call <code>pp::FileIO::Flush</code>.</li>
|
||||
</ol>
|
||||
</section><section id="opening-and-reading-a-file">
|
||||
<h3 id="opening-and-reading-a-file">Opening and reading a file</h3>
|
||||
<p>Following are the high-level steps involved in opening and reading a file:</p>
|
||||
<ol class="arabic simple">
|
||||
@@ -155,15 +146,12 @@ its file size. The thread is blocked until <code>Query</code> completes.</li>
|
||||
until <code>Read</code> completes. If there is more data to read, <code>Read</code> is called
|
||||
again.</li>
|
||||
</ol>
|
||||
</section><section id="deleting-a-file">
|
||||
<h3 id="deleting-a-file">Deleting a file</h3>
|
||||
<p>Deleting a file is straightforward: call <code>pp::FileRef::Delete</code>. The thread is
|
||||
blocked until <code>Delete</code> completes.</p>
|
||||
</section><section id="making-a-directory">
|
||||
<h3 id="making-a-directory">Making a directory</h3>
|
||||
<p>Making a directory is also straightforward: call <code>pp::File::MakeDirectory</code>.
|
||||
The thread is blocked until <code>MakeDirectory</code> completes.</p>
|
||||
</section><section id="listing-the-contents-of-a-directory">
|
||||
<h3 id="listing-the-contents-of-a-directory">Listing the contents of a directory</h3>
|
||||
<p>Following are the high-level steps involved in listing a directory:</p>
|
||||
<ol class="arabic simple">
|
||||
@@ -175,7 +163,6 @@ its callback, so it must be specified.</li>
|
||||
<code>ListCallback</code> which packages up the results into a string message, and
|
||||
sends it to JavaScript.</li>
|
||||
</ol>
|
||||
</section></section><section id="file-io-deep-dive">
|
||||
<h2 id="file-io-deep-dive"><code>file_io</code> deep dive</h2>
|
||||
<p>The <code>file_io</code> example displays a user interface with a couple of fields and
|
||||
several buttons. Following is a screenshot of the <code>file_io</code> example:</p>
|
||||
@@ -185,7 +172,6 @@ default values for filenames. Try typing a message in the large input box and
|
||||
clicking <code>Save</code>, then switching to the <code>Load File</code> operation, and
|
||||
clicking <code>Load</code>.</p>
|
||||
<p>Let’s take a look at what is going on under the hood.</p>
|
||||
<section id="opening-a-file-system-and-preparing-for-file-i-o">
|
||||
<h3 id="opening-a-file-system-and-preparing-for-file-i-o">Opening a file system and preparing for file I/O</h3>
|
||||
<p><code>pp::Instance::Init</code> is called when an instance of a module is created. In
|
||||
this example, <code>Init</code> starts a new thread (via the <code>pp::SimpleThread</code>
|
||||
@@ -226,7 +212,6 @@ void OpenFileSystem(int32_t /*result*/) {
|
||||
}
|
||||
}
|
||||
</pre>
|
||||
</section><section id="handling-messages-from-javascript">
|
||||
<h3 id="handling-messages-from-javascript">Handling messages from JavaScript</h3>
|
||||
<p>When you click the <code>Save</code> button, JavaScript posts a message to the NaCl
|
||||
module with the file operation to perform sent as a string (See <a class="reference internal" href="/native-client/devguide/coding/message-system.html"><em>Messaging
|
||||
@@ -260,7 +245,6 @@ virtual void HandleMessage(const pp::Var& var_message) {
|
||||
}
|
||||
}
|
||||
</pre>
|
||||
</section><section id="saving-a-file">
|
||||
<h3 id="saving-a-file">Saving a file</h3>
|
||||
<p><code>FileIoInstance::Save</code> is called when the <code>Save</code> button is pressed. First,
|
||||
it checks to see that the FileSystem has been successfully opened:</p>
|
||||
@@ -324,7 +308,6 @@ if (flush_result != PP_OK) {
|
||||
return;
|
||||
}
|
||||
</pre>
|
||||
</section><section id="loading-a-file">
|
||||
<h3 id="loading-a-file">Loading a file</h3>
|
||||
<p><code>FileIoInstance::Load</code> is called when the <code>Load</code> button is pressed. Like
|
||||
the <code>Save</code> function, <code>Load</code> first checks to see if the FileSystem has been
|
||||
@@ -394,7 +377,6 @@ std::string string_data(data.begin(), data.end());
|
||||
PostMessage("DISP|" + string_data);
|
||||
ShowStatusMessage("Load success");
|
||||
</pre>
|
||||
</section><section id="id1">
|
||||
<h3 id="id1">Deleting a file</h3>
|
||||
<p><code>FileIoInstance::Delete</code> is called when the <code>Delete</code> button is pressed.
|
||||
First, it checks whether the FileSystem has been opened, and creates a new
|
||||
@@ -420,7 +402,6 @@ if (result == PP_ERROR_FILENOTFOUND) {
|
||||
return;
|
||||
}
|
||||
</pre>
|
||||
</section><section id="listing-files-in-a-directory">
|
||||
<h3 id="listing-files-in-a-directory">Listing files in a directory</h3>
|
||||
<p><code>FileIoInstance::List</code> is called when the <code>List Directory</code> button is
|
||||
pressed. Like all other operations, it checks whether the FileSystem has been
|
||||
@@ -470,7 +451,6 @@ void ListCallback(int32_t result,
|
||||
ShowStatusMessage("List success");
|
||||
}
|
||||
</pre>
|
||||
</section><section id="making-a-new-directory">
|
||||
<h3 id="making-a-new-directory">Making a new directory</h3>
|
||||
<p><code>FileIoInstance::MakeDir</code> is called when the <code>Make Directory</code> button is
|
||||
pressed. Like all other operations, it checks whether the FileSystem has been
|
||||
@@ -492,6 +472,6 @@ if (result != PP_OK) {
|
||||
}
|
||||
ShowStatusMessage("Make directory success");
|
||||
</pre>
|
||||
</section></section></section>
|
||||
</section>
|
||||
|
||||
{{/partials.standard_nacl_article}}
|
||||
|
@@ -43,7 +43,6 @@ The “Hello, World” example for getting started with NaCl is used her
|
||||
illustrate basic programming techniques. You can find this code in
|
||||
the <code>/getting_started/part2</code> directory in the Native Client SDK download.
|
||||
</aside>
|
||||
<section id="reference-information">
|
||||
<h2 id="reference-information">Reference information</h2>
|
||||
<p>For reference information related to the Pepper messaging API, see the
|
||||
following documentation:</p>
|
||||
@@ -53,7 +52,6 @@ HandleMessage(), PostMessage())</li>
|
||||
<li><a class="reference external" href="/native-client/pepper_stable/cpp/classpp_1_1_module">pp::Module class</a></li>
|
||||
<li><a class="reference external" href="/native-client/pepper_stable/cpp/classpp_1_1_var">pp::Var class</a></li>
|
||||
</ul>
|
||||
</section><section id="introduction-to-the-messaging-system">
|
||||
<h2 id="introduction-to-the-messaging-system">Introduction to the messaging system</h2>
|
||||
<p>Native Client modules and JavaScript communicate by sending messages to each
|
||||
other. The most basic form of a message is a string. Messages support many
|
||||
@@ -81,7 +79,6 @@ messages are:</p>
|
||||
</ul>
|
||||
<p>If you want to receive messages from JavaScript, you need to implement the
|
||||
<code>pp::Instance::HandleMessage()</code> function in your Native Client module.</p>
|
||||
<section id="design-of-the-messaging-system">
|
||||
<h3 id="design-of-the-messaging-system">Design of the messaging system</h3>
|
||||
<p>The Native Client messaging system is analogous to the system used by
|
||||
the browser to allow web workers to communicate (see the <a class="reference external" href="http://www.w3.org/TR/workers">W3 web
|
||||
@@ -103,12 +100,10 @@ avoiding the following problems:</p>
|
||||
than a few moments.</li>
|
||||
<li>The application hangs while waiting for an unresponsive Native Client module.</li>
|
||||
</ul>
|
||||
</section></section><section id="communication-tasks-in-the-hello-world-example">
|
||||
<h2 id="communication-tasks-in-the-hello-world-example">Communication tasks in the “Hello, World” example</h2>
|
||||
<p>The following sections describe how the “Hello, World” example posts
|
||||
and handles messages on both the JavaScript side and the Native Client
|
||||
side of the application.</p>
|
||||
<section id="javascript-code">
|
||||
<h3 id="javascript-code">JavaScript code</h3>
|
||||
<p>The JavaScript code and HTML in the “Hello, World” example can be
|
||||
found in the <code>example.js</code>, <code>common.js</code>, and <code>index.html</code> files.
|
||||
@@ -121,7 +116,6 @@ incoming <code>message</code> events.</li>
|
||||
<li>Calls <code>postMessage()</code> to communicate with the NaCl module,
|
||||
after the page loads.</li>
|
||||
</ol>
|
||||
<section id="step-1-from-common-js">
|
||||
<h4 id="step-1-from-common-js">Step 1: From common.js</h4>
|
||||
<pre class="prettyprint">
|
||||
function attachDefaultListeners() {
|
||||
@@ -134,7 +128,6 @@ function attachDefaultListeners() {
|
||||
// ...
|
||||
}
|
||||
</pre>
|
||||
</section><section id="step-2-from-example-js">
|
||||
<h4 id="step-2-from-example-js">Step 2: From example.js</h4>
|
||||
<pre class="prettyprint">
|
||||
// This function is called by common.js when a message is received from the
|
||||
@@ -152,7 +145,6 @@ function handleMessage(message) {
|
||||
<div id="log"></div>
|
||||
</body>
|
||||
</pre>
|
||||
</section><section id="step-3-from-example-js">
|
||||
<h4 id="step-3-from-example-js">Step 3: From example.js</h4>
|
||||
<pre class="prettyprint">
|
||||
// From example.js, Step 3:
|
||||
@@ -164,7 +156,6 @@ function moduleDidLoad() {
|
||||
common.naclModule.postMessage('hello');
|
||||
}
|
||||
</pre>
|
||||
</section></section><section id="native-client-module">
|
||||
<h3 id="native-client-module">Native Client module</h3>
|
||||
<p>The C++ code in the Native Client module of the “Hello, World” example:</p>
|
||||
<ol class="arabic simple">
|
||||
@@ -201,16 +192,13 @@ class HelloTutorialInstance : public pp::Instance {
|
||||
}
|
||||
};
|
||||
</pre>
|
||||
</section></section><section id="messaging-in-javascript-code-more-details">
|
||||
<h2 id="messaging-in-javascript-code-more-details">Messaging in JavaScript code: More details.</h2>
|
||||
<p>This section describes in more detail the messaging system code in the
|
||||
JavaScript portion of the “Hello, World” example.</p>
|
||||
<section id="setting-up-an-event-listener-and-handler">
|
||||
<h3 id="setting-up-an-event-listener-and-handler">Setting up an event listener and handler</h3>
|
||||
<p>The following JavaScript code sets up an event listener for messages
|
||||
posted by the Native Client module. It then defines a message handler
|
||||
that simply logs the content of messages received from the module.</p>
|
||||
<section id="setting-up-the-message-handler-on-load">
|
||||
<h4 id="setting-up-the-message-handler-on-load">Setting up the ‘message’ handler on load</h4>
|
||||
<pre class="prettyprint">
|
||||
// From common.js
|
||||
@@ -244,7 +232,6 @@ function attachDefaultListeners() {
|
||||
// ...
|
||||
}
|
||||
</pre>
|
||||
</section><section id="implementing-the-handler">
|
||||
<h4 id="implementing-the-handler">Implementing the handler</h4>
|
||||
<pre class="prettyprint">
|
||||
// From example.js
|
||||
@@ -256,11 +243,9 @@ function handleMessage(message) {
|
||||
<p>Note that the <code>handleMessage()</code> function is handed a message_event
|
||||
containing <code>data</code> that you can display or manipulate in JavaScript. The
|
||||
“Hello, World” application simply logs this data to the <code>log</code> div.</p>
|
||||
</section></section></section><section id="messaging-in-the-native-client-module-more-details">
|
||||
<h2 id="messaging-in-the-native-client-module-more-details">Messaging in the Native Client module: More details.</h2>
|
||||
<p>This section describes in more detail the messaging system code in
|
||||
the Native Client module portion of the “Hello, World” example.</p>
|
||||
<section id="implementing-handlemessage">
|
||||
<h3 id="implementing-handlemessage">Implementing HandleMessage()</h3>
|
||||
<p>If you want the Native Client module to receive and handle messages
|
||||
from JavaScript, you need to implement a <code>HandleMessage()</code> function
|
||||
@@ -301,7 +286,6 @@ class HelloTutorialInstance : public pp::Instance {
|
||||
}
|
||||
};
|
||||
</pre>
|
||||
</section><section id="implementing-application-specific-functions">
|
||||
<h3 id="implementing-application-specific-functions">Implementing application-specific functions</h3>
|
||||
<p>While the “Hello, World” example is very simple, your Native Client
|
||||
module will likely include application-specific functions to perform
|
||||
@@ -316,7 +300,6 @@ character to determine which command to execute. If the command is
|
||||
command is “uncompress”, then data to process is an already-compressed
|
||||
string. After processing the data asynchronously, the application then
|
||||
returns the result to JavaScript.</p>
|
||||
</section><section id="sending-messages-back-to-the-javascript-code">
|
||||
<h3 id="sending-messages-back-to-the-javascript-code">Sending messages back to the JavaScript code</h3>
|
||||
<p>The Native Client module sends messages back to the JavaScript code
|
||||
using <code>PostMessage()</code>. The Native Client module always returns
|
||||
@@ -326,7 +309,6 @@ end of the Native Client module’s <code>HandleMessage()</code> function:</
|
||||
<pre class="prettyprint">
|
||||
PostMessage(var_reply);
|
||||
</pre>
|
||||
</section><section id="sending-and-receiving-other-pp-var-types">
|
||||
<h3 id="sending-and-receiving-other-pp-var-types">Sending and receiving other <code>pp::Var</code> types</h3>
|
||||
<p>Besides strings, <code>pp::Var</code> can represent other types of JavaScript
|
||||
objects. For example, messages can be JavaScript objects. These
|
||||
@@ -370,6 +352,6 @@ virtual void HandleMessage(const pp::Var& var) {
|
||||
}
|
||||
}
|
||||
</pre>
|
||||
</section></section></section>
|
||||
</section>
|
||||
|
||||
{{/partials.standard_nacl_article}}
|
||||
|
@@ -15,8 +15,7 @@
|
||||
<li><a class="reference internal" href="#reference-information" id="id6">Reference information</a></li>
|
||||
</ul>
|
||||
|
||||
</div><section id="introduction">
|
||||
<h2 id="introduction">Introduction</h2>
|
||||
</div><h2 id="introduction">Introduction</h2>
|
||||
<p><code>nacl_io</code> is a utility library that provides implementations of standard
|
||||
C APIs such as POSIX I/O (<code>stdio.h</code>) and BSD sockets (<code>sys/socket.h</code>).
|
||||
Its primary function is to allow code that uses these standard APIs to be
|
||||
@@ -58,7 +57,6 @@ types which are described in the table below:</p>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section><section id="using-nacl-io">
|
||||
<h2 id="using-nacl-io">Using nacl_io</h2>
|
||||
<p>Using nacl_io is mostly just a matter of using the standard POSIX C library
|
||||
functions. However, there are some steps required to initialize the library
|
||||
@@ -79,9 +77,7 @@ options are explained in the <a class="reference internal" href="/native-client/
|
||||
thread. This is because the main Pepper thread does not support the blocking
|
||||
behavior needed by the POSIX I/O operations.</li>
|
||||
</ol>
|
||||
</section><section id="the-nacl-io-demo">
|
||||
<h2 id="the-nacl-io-demo">The nacl_io demo</h2>
|
||||
<section id="building-and-running-the-demo">
|
||||
<h3 id="building-and-running-the-demo">Building and running the demo</h3>
|
||||
<p>The demo application launches a Native Client module that mounts three file
|
||||
systems and displays a set of controls that let you work with them:</p>
|
||||
@@ -116,10 +112,8 @@ in the menu, and press the fclose button</li>
|
||||
<li>select the fread command, be sure the file /persistent/test is selected in
|
||||
the menu, enter a byte count, and press the fread button</li>
|
||||
</ol>
|
||||
</section><section id="a-look-at-the-code">
|
||||
<h3 id="a-look-at-the-code">A look at the code</h3>
|
||||
<p>The demo is written C and comprises three files.</p>
|
||||
<section id="nacl-io-demo-c">
|
||||
<h4 id="nacl-io-demo-c">nacl_io_demo.c</h4>
|
||||
<p>This is the demo’s main file. The code here creates and initializes the Native
|
||||
Client module instance. The Pepper function <code>Instance_DidCreate</code> initializes
|
||||
@@ -164,14 +158,12 @@ function domContentLoaded(name, tc, config, width, height) {
|
||||
messages sent from the html page and performs the specified file system
|
||||
operations. The logic for the worker thread is encoded in the other two files,
|
||||
described below.</p>
|
||||
</section><section id="queue-c">
|
||||
<h4 id="queue-c">queue.c</h4>
|
||||
<p>This file implements a circular queue that is used to receive messages from the
|
||||
browser UI to the Native Client module. The file system commands in the
|
||||
enqueued messages are executed on the worker thread. This keeps blocking calls
|
||||
(like fread) off the main Native Client thread, which is a good thing. The
|
||||
queue is initialized in nacl_io_demo.c <code>Instance_DidCreate</code>.</p>
|
||||
</section><section id="handlers-c">
|
||||
<h4 id="handlers-c">handlers.c</h4>
|
||||
<p>This file implements the stdio calls associated with the commands sent from the
|
||||
browser. There is a separate <code>Handle*</code> function for each command: fopen,
|
||||
@@ -211,7 +203,6 @@ int HandleFwrite(int num_params, char** params, char** output) {
|
||||
return 0;
|
||||
}
|
||||
</pre>
|
||||
</section></section></section><section id="reference-information">
|
||||
<h2 id="reference-information">Reference information</h2>
|
||||
<p>The example discussed here is included in the SDK in the directory
|
||||
<code>examples/demo/nacl_io_demo</code>.</p>
|
||||
@@ -220,6 +211,6 @@ Pepper API. For reference information related to the nacl_io interface see
|
||||
its header file in the SDK directory, located at
|
||||
<code>include/nacl_io/nacl_io.h</code>.</p>
|
||||
<p>For more about the HTML5 file system read the <a class="reference external" href="http://dev.w3.org/2009/dap/file-system/pub/FileSystem/">specification</a>.</p>
|
||||
</section></section>
|
||||
</section>
|
||||
|
||||
{{/partials.standard_nacl_article}}
|
||||
|
@@ -13,14 +13,12 @@ but depend on whether the module is written in C or C++.</p>
|
||||
<li><a class="reference internal" href="#id1" id="id4">Writing modules in C++</a></li>
|
||||
</ul>
|
||||
|
||||
</div><section id="introduction">
|
||||
<h2 id="introduction">Introduction</h2>
|
||||
</div><h2 id="introduction">Introduction</h2>
|
||||
<p>Native Client modules do not have a <code>main()</code> function. When a module loads,
|
||||
the Native Client runtime calls the code in the module to create an instance and
|
||||
initialize the interfaces for the APIs the module uses. This initialization
|
||||
sequence depends on whether the module is written in C or C++ and requires that
|
||||
you implement specific functions in each case.</p>
|
||||
</section><section id="writing-modules-in-c">
|
||||
<h2 id="writing-modules-in-c">Writing modules in C</h2>
|
||||
<p>The C API uses a prefix convention to show whether an interface is implemented
|
||||
in the browser or in a module. Interfaces starting with <code>PPB_</code> (which can be
|
||||
@@ -111,7 +109,6 @@ PP_EXPORT int32_t PPP_InitializeModule(PP_Module a_module_id, PPB_GetInterface g
|
||||
return PP_OK;
|
||||
}
|
||||
</pre>
|
||||
</section><section id="id1">
|
||||
<h2 id="id1">Writing modules in C++</h2>
|
||||
<p>When you implement a Native Client module in C++ you must include these components:</p>
|
||||
<ul class="small-gap">
|
||||
@@ -173,6 +170,6 @@ how to send messages between JavaScript code and Native Client modules.</p>
|
||||
samples shown above don’t actually do anything. Subsequent documents in the
|
||||
Developer’s Guide build on these code samples and add more interesting
|
||||
functionality.</p>
|
||||
</section></section>
|
||||
</section>
|
||||
|
||||
{{/partials.standard_nacl_article}}
|
||||
|
@@ -23,7 +23,6 @@ The load_progress example illustrates progress event handling. You can find
|
||||
this code in the <code>/examples/tutorial/load_progress/</code> directory in the Native
|
||||
Client SDK download.
|
||||
</aside>
|
||||
<section id="module-loading-and-progress-events">
|
||||
<h2 id="module-loading-and-progress-events">Module loading and progress events</h2>
|
||||
<p>The Native Client runtime reports a set of state changes during the module
|
||||
loading process by means of DOM progress events. This set of events is a direct
|
||||
@@ -257,7 +256,6 @@ illegal.</td>
|
||||
</table>
|
||||
<p>Errors that occur during loading are logged to the JavaScript console in Google
|
||||
Chrome (select the menu icon <img alt="menu-icon" src="/native-client/images/menu-icon.png" /> > Tools > JavaScript console).</p>
|
||||
</section><section id="handling-progress-events">
|
||||
<h2 id="handling-progress-events">Handling progress events</h2>
|
||||
<p>You should add event listeners in a <code><script></code> element to listen for these
|
||||
events before the <code><embed></code> element is parsed. For example, the following code
|
||||
@@ -299,7 +297,6 @@ listeners on outer elements (including the <code><body></code> element) to
|
||||
from inner elements. For more information, see the W3 specifications for <a class="reference external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture">event
|
||||
flow capture</a> and
|
||||
<a class="reference external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-registration">event listener registration</a>.</p>
|
||||
</section><section id="displaying-load-status">
|
||||
<h2 id="displaying-load-status">Displaying load status</h2>
|
||||
<p>One common response to progress events is to display the percentage of the
|
||||
module that has been loaded. In the load_progress example, when the <code>progress</code>
|
||||
@@ -323,7 +320,6 @@ function moduleLoadProgress(event) {
|
||||
}
|
||||
}
|
||||
</pre>
|
||||
</section><section id="the-lasterror-attribute">
|
||||
<h2 id="the-lasterror-attribute">The <code>lastError</code> attribute</h2>
|
||||
<p>The <code><embed></code> element has a <code>lastError</code> attribute that is set to an
|
||||
informative string whenever a load failure (an <code>error</code> or <code>abort</code> event)
|
||||
@@ -346,7 +342,6 @@ function moduleLoadError() {
|
||||
common.logMessage('error: ' + common.naclModule.lastError);
|
||||
}
|
||||
</pre>
|
||||
</section><section id="the-readystate-attribute">
|
||||
<h2 id="the-readystate-attribute">The <code>readyState</code> attribute</h2>
|
||||
<p>You can use the <code>readyState</code> attribute to monitor the loading process. This
|
||||
attribute is particularly useful if you don’t care about the details of
|
||||
@@ -413,7 +408,6 @@ the progress events are generated.</p>
|
||||
</body>
|
||||
</html>
|
||||
</pre>
|
||||
</section><section id="the-exitstatus-attribute">
|
||||
<h2 id="the-exitstatus-attribute">The <code>exitStatus</code> attribute</h2>
|
||||
<p>This read-only attribute is set if the application calls <code>exit(n)</code>,
|
||||
<code>abort()</code>, or crashes. Since NaCl modules are event handlers, there is no
|
||||
@@ -429,6 +423,6 @@ target architecture, and may change in the future. Applications should not
|
||||
rely on the <code>exitStatus</code> value being stable in these cases, but the value
|
||||
may nevertheless be useful for temporary debugging.</li>
|
||||
</ul>
|
||||
</section></section>
|
||||
</section>
|
||||
|
||||
{{/partials.standard_nacl_api}}
|
||||
|
@@ -21,13 +21,11 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div><section id="introduction">
|
||||
<h2 id="introduction">Introduction</h2>
|
||||
</div><h2 id="introduction">Introduction</h2>
|
||||
<p>This chapter describes how to use the <a class="reference external" href="/native-client/pepper_stable/cpp/classpp_1_1_u_r_l_loader">URLLoader API</a> to load resources
|
||||
such as images and sound files from a server into your application.</p>
|
||||
<p>The example discussed in this chapter is included in the SDK in the directory
|
||||
<code>examples/api/url_loader</code>.</p>
|
||||
</section><section id="reference-information">
|
||||
<h2 id="reference-information">Reference information</h2>
|
||||
<p>For reference information related to loading data from URLs, see the
|
||||
following documentation:</p>
|
||||
@@ -39,7 +37,6 @@ following documentation:</p>
|
||||
<li><a class="reference external" href="/native-client/pepper_stable/cpp/url__response__info_8h">url_response_info.h</a> - Contains
|
||||
<code>URLResponse</code> class for examaning URL responses</li>
|
||||
</ul>
|
||||
</section><section id="background">
|
||||
<h2 id="background">Background</h2>
|
||||
<p>When a user launches your Native Client web application, Chrome downloads and
|
||||
caches your application’s HTML file, manifest file (.nmf), and Native Client
|
||||
@@ -51,7 +48,6 @@ application.</p>
|
||||
assets. To avoid being at the whim of the Chrome cache, however, you may want
|
||||
to use the <a class="reference external" href="/native-client/pepper_stable/cpp/classpp_1_1_file_i_o">Pepper FileIO API</a> to write those assets
|
||||
to a persistent, sandboxed location on the user’s file system.</p>
|
||||
</section><section id="the-url-loader-example">
|
||||
<h2 id="the-url-loader-example">The <code>url_loader</code> example</h2>
|
||||
<p>The SDK includes an example called <code>url_loader</code> demonstrating downloading
|
||||
files from a server. This example has these primary files:</p>
|
||||
@@ -70,7 +66,6 @@ bulk of the work is done).</li>
|
||||
</ul>
|
||||
<p>The remainder of this document covers the code in the <code>url_loader.cc</code> and
|
||||
<code>url_loader_handler.cc</code> files.</p>
|
||||
<section id="url-loading-overview">
|
||||
<h3 id="url-loading-overview">URL loading overview</h3>
|
||||
<p>Like many Pepper APIs, the <code>URLLoader</code> API includes a set of methods that
|
||||
execute asynchronously and that invoke callback functions in your Native Client
|
||||
@@ -96,9 +91,7 @@ files and fast connections).</li>
|
||||
</ol>
|
||||
<p>The remainder of this document demonstrates how the previous steps are
|
||||
implemented in the <code>url_loader</code> example.</p>
|
||||
</section></section><section id="url-loader-deep-dive">
|
||||
<h2 id="url-loader-deep-dive"><code>url_loader</code> deep dive</h2>
|
||||
<section id="setting-up-the-request">
|
||||
<h3 id="setting-up-the-request">Setting up the request</h3>
|
||||
<p><code>HandleMessage</code> in <code>url_loader.cc</code> creates a <code>URLLoaderHandler</code> instance
|
||||
and passes it the URL of the asset to be retrieved. Then <code>HandleMessage</code>
|
||||
@@ -146,7 +139,6 @@ URLLoaderHandler::URLLoaderHandler(pp::Instance* instance,
|
||||
url_request_.SetRecordDownloadProgress(true);
|
||||
}
|
||||
</pre>
|
||||
</section><section id="downloading-the-data">
|
||||
<h3 id="downloading-the-data">Downloading the data</h3>
|
||||
<p><code>Start</code> in <code>url_loader_handler.cc</code> creates a callback (<code>cc</code>) using a
|
||||
<code>CompletionCallbackFactory</code>. The callback is passed to <code>Open</code> to be called
|
||||
@@ -219,12 +211,11 @@ in <code>PP_OK</code> or 0), all the bytes have been read for what has been
|
||||
downloaded, but more is to be downloaded (<code>PP_OK_COMPLETIONPENDING</code> or -1),
|
||||
or there is an error (less than -1). <code>OnRead</code> is called in the event of an
|
||||
error or <code>PP_OK</code>.</p>
|
||||
</section><section id="displaying-a-result">
|
||||
<h3 id="displaying-a-result">Displaying a result</h3>
|
||||
<p>OnRead calls <code>ReportResultAndDie</code> when either an error or <code>PP_OK</code> is
|
||||
returned to indicate streaming of file is complete. <code>ReportResultAndDie</code> then
|
||||
calls <code>ReportResult,</code> which calls <code>PostMessage</code> to send the result back to
|
||||
the HTML page.</p>
|
||||
</section></section></section>
|
||||
</section>
|
||||
|
||||
{{/partials.standard_nacl_article}}
|
||||
|
@@ -34,7 +34,6 @@ ppapi_simple library that can be used to to implement most of the
|
||||
boiler plate. The <code>pi_generator</code> example in
|
||||
<code>/examples/demo/pi_generator</code> uses ppapi_simple to manage view
|
||||
change events and 2D graphics.</p>
|
||||
<section id="overview">
|
||||
<h2 id="overview">Overview</h2>
|
||||
<p>When a user interacts with the web page using a keyboard, mouse or some other
|
||||
input device, the browser generates input events. In a traditional web
|
||||
@@ -156,9 +155,7 @@ branches accordingly.</td>
|
||||
</table>
|
||||
<p>These interfaces are found in the <a class="reference external" href="/native-client/pepper_stable/cpp/classpp_1_1_instance">pp::Instance class</a>. The sections below
|
||||
provide examples of how to handle these events.</p>
|
||||
</section><section id="handling-browser-events">
|
||||
<h2 id="handling-browser-events">Handling browser events</h2>
|
||||
<section id="didchangeview">
|
||||
<h3 id="didchangeview">DidChangeView()</h3>
|
||||
<p>In the <code>mouse_lock</code> example, <code>DidChangeView()</code> checks the previous size
|
||||
of instance’s rectangle versus the new size. It also compares
|
||||
@@ -195,7 +192,6 @@ void MouseLockInstance::DidChangeView(const pp::View& view) {
|
||||
<li><a class="reference external" href="/native-client/pepper_stable/cpp/classpp_1_1_image_data">pp::ImageData class</a></li>
|
||||
<li><a class="reference external" href="/native-client/pepper_stable/cpp/classpp_1_1_graphics2_d">pp::Graphics2D class</a></li>
|
||||
</ul>
|
||||
</section><section id="didchangefocus">
|
||||
<h3 id="didchangefocus">DidChangeFocus()</h3>
|
||||
<p><code>DidChangeFocus()</code> is called when you click inside or outside of a
|
||||
module’s instance in the web page. When the instance goes out
|
||||
@@ -208,13 +204,11 @@ void DidChangeFocus(bool focus) {
|
||||
// the instance.
|
||||
}
|
||||
</pre>
|
||||
</section></section><section id="handling-input-events">
|
||||
<h2 id="handling-input-events">Handling input events</h2>
|
||||
<p>Input events are events that occur when the user interacts with a
|
||||
module instance using the mouse, keyboard, or other input device
|
||||
(e.g., touch screen). This section describes how the <code>input_events</code>
|
||||
example handles input events.</p>
|
||||
<section id="registering-a-module-to-accept-input-events">
|
||||
<h3 id="registering-a-module-to-accept-input-events">Registering a module to accept input events</h3>
|
||||
<p>Before your module can handle these events, you must register your
|
||||
module to accept input events using <code>RequestInputEvents()</code> for mouse
|
||||
@@ -238,7 +232,6 @@ combination of flags that identify the class of events that the instance is
|
||||
requesting to receive. Input event classes are defined in the
|
||||
<a class="reference external" href="/native-client/pepper_stable/c/group___enums.html#gafe68e3c1031daa4a6496845ff47649cd">PP_InputEvent_Class</a>
|
||||
enumeration in <a class="reference external" href="/native-client/pepper_stable/c/ppb__input__event_8h">ppb_input_event.h</a>.</p>
|
||||
</section><section id="determining-and-branching-on-event-types">
|
||||
<h3 id="determining-and-branching-on-event-types">Determining and branching on event types</h3>
|
||||
<p>In a typical implementation, the <code>HandleInputEvent()</code> function determines the
|
||||
type of each event using the <code>GetType()</code> function found in the <code>InputEvent</code>
|
||||
@@ -330,7 +323,6 @@ following documentation:</p>
|
||||
<li><a class="reference external" href="/native-client/pepper_stable/c/classpp_1_1_wheel_input_event">pp::WheelInputEvent class</a></li>
|
||||
<li><a class="reference external" href="/native-client/pepper_stable/c/classpp_1_1_keyboard_input_event">pp::KeyboardInputEvent class</a></li>
|
||||
</ul>
|
||||
</section><section id="threading-and-blocking">
|
||||
<h3 id="threading-and-blocking">Threading and blocking</h3>
|
||||
<p><code>HandleInputEvent()</code> in this example runs on the main module thread.
|
||||
However, the bulk of the work happens on a separate worker thread (see
|
||||
@@ -338,6 +330,6 @@ However, the bulk of the work happens on a separate worker thread (see
|
||||
the <code>event_queue_</code> and the worker thread takes events from the
|
||||
<code>event_queue_</code>. This processing happens independently of the main
|
||||
thread, so as not to slow down the browser.</p>
|
||||
</section></section></section>
|
||||
</section>
|
||||
|
||||
{{/partials.standard_nacl_api}}
|
||||
|
Reference in New Issue
Block a user