| Index: native_client_sdk/src/examples/index_staging.html
|
| ===================================================================
|
| --- native_client_sdk/src/examples/index_staging.html (revision 120871)
|
| +++ native_client_sdk/src/examples/index_staging.html (working copy)
|
| @@ -16,7 +16,7 @@
|
| }
|
| dd {
|
| margin-bottom: 12pt;
|
| - width: 600px;
|
| + width: 800px;
|
| }
|
| </style>
|
| <link href="http://code.google.com/css/codesite.css" rel="stylesheet"
|
| @@ -24,25 +24,71 @@
|
| <title>Native Client Examples</title>
|
| </head>
|
| <body>
|
| -<h2>Native Client Examples</h2>
|
| -<p>This page lists all of the examples available in the most recent Native Client SDK bundle. Each example is designed to teach a few specific Native Client programming concepts.</p>
|
| +<h1>Native Client Examples</h1>
|
| +<dd><p>This page lists all of the examples available in the most recent Native
|
| + Client SDK bundle. Each example is designed to teach a few specific Native
|
| + Client programming concepts. You will need to setup the build environment
|
| + including a path to 'make' which can be found in the 'tools' directory for
|
| + Windows, and the variable NACL_SDK_ROOT which points to one of the pepper
|
| + bundles found under the SDK install location. Calling make from the examples
|
| + directory will build all the projects, while calling make from and individual
|
| + example directory will build only that example.
|
| + </p>
|
| +</dd>
|
| +<h3>Using the Tools</h3>
|
| +<dd><p>The following "hello_world" examples, show the basic outline of a Native
|
| +Client application. The make files in each of the examples bellow show a
|
| +simple way to build a NaCl application using
|
| +<a href="http://www.gnu.org/software/make/manual/make.html">GNU Make</a>.
|
| +See the link for further information.
|
| +</p></dd>
|
| <dl>
|
| - <dt><a href="hello_world_c/hello_world_c.html">Hello World in C</a></dt>
|
| - <dd>The Hello World In C example demonstrates the basic structure of all Native Client applications. This example loads a Native Client module and responds to button click events by showing alert panels.
|
| -
|
| - <p>Teaching focus: Basic HTML, JavaScript, and module architecture; Messaging API.</p>
|
| + <dt><a href="hello_world_newlib/hello_world.html">
|
| + Hello World (NEWLIB)</a></dt>
|
| + <dd>The Hello World In C example demonstrates the basic structure of all
|
| + Native Client applications. This example loads a Native Client module. The
|
| + page tracks the status of the module as it load. On a successful load, the
|
| + module will post a message containing the string "Hello World" back to
|
| + JavaScript which will display it as an alert.
|
| + <p>Teaching focus: Basic HTML, JavaScript, and module architecture.</p>
|
| </dd>
|
| - <dt><a href="hello_world/hello_world.html">Hello World in C++</a></dt>
|
| - <dd>The Hello World C++ example demonstrates the basic structure of all Native Client applications. This example loads a Native Client module and responds to button click events by showing alert panels.
|
| + <dt><a href="hello_world_glibc/hello_world.html">
|
| + Hello World (GLIBC)</a></dt>
|
| + <dd>The Hello World (GLIBC) example is identical to the one above, with the
|
| + exception that it used the GLIBC toolchain which uses Shared Objects. The use
|
| + of Shared Objects means a more complicated manifest file (NMF) which is needed
|
| + to allow the application to find the libraries. The NMF is automatically
|
| + generated as part of the build process, by scanning the application for
|
| + dependencies.
|
| + <p>Teaching focus: Basic HTML, JavaScript, Shared Objects, and module
|
| + architecture.</p>
|
| + </dd>
|
| + <dt><a href="hello_world_interactive/hello_world.html">
|
| + Interactive Hello World in C++</a></dt>
|
| + <dd>The Interactive Hello World C++ example demonstrates the basic structure
|
| + of all Native Client applications. This example loads a Native Client module
|
| + which uses two way interaction with JavaScript whenever a button is clicked.
|
| + The NaCl module will respond with the number 42 or the reversed version of the
|
| + string in the text box when the appropriate button is clicked.
|
| + <p>Teaching focus: Basic HTML, JavaScript, C++ PPAPI, and module
|
| + architecture; Messaging API.</p>
|
| + </dd>
|
|
|
| - <p>Teaching focus: Basic HTML, JavaScript, and module architecture; Messaging API.</p>
|
| +<h3>Common APIs</h3>
|
| +<dd><p>The following set of examples illustrate various Pepper APIs including
|
| +audio, 2D, 3D, input and urls.</p></dd>
|
| +<dt><a href="sine_synth/sine_synth.html">Sine Wave Synthesizer</a></dt>
|
| + <dd> The Sine Wave Synthesizer example demonstrates playing sound (a sine
|
| + wave). Enter the desired frequency and hit play to start, stop to end. The
|
| + frequency box will display "Loading, please wait." while the module loads.
|
| + <p>Teaching focus: Audio.</p>
|
| </dd>
|
| -<dt><a href="load_progress/load_progress.html">Load Progress</a></dt>
|
| - <dd> The Load Progress example demonstrates how to listen for and handle events that occur while a
|
| - NaCl module loads. This example listens for different load event types and dispatches different events to their respective handler. This example also checks for valid browser
|
| - version and shows how to calculate and display loading progress.
|
| +<dt><a href="input_events/input_events.html">Input Events</a></dt>
|
| + <dd> The Input Events example demonstrates how to handle events triggered by the user. This example allows a user
|
| + to interact with a square representing a module instance. Events are displayed on the screen as the user clicks, scrolls, types, inside or outside
|
| + of the square.
|
|
|
| - <p>Teaching focus: Progress event handling.</p>
|
| + <p>Teaching focus: Keyboard and mouse input, view change, and focus events.</p>
|
| </dd>
|
| <dt><a href="pi_generator/pi_generator.html">Pi Generator</a></dt>
|
| <dd> The Pi Generator example demonstrates creating a helper thread that estimate pi using the Monte Carlo
|
| @@ -51,18 +97,40 @@
|
|
|
| <p>Teaching focus: Thread creation, 2D graphics, view change events.</p>
|
| </dd>
|
| -<dt><a href="input_events/input_events.html">Input Events</a></dt>
|
| - <dd> The Input Events example demonstrates how to handle events triggered by the user. This example allows a user
|
| - to interact with a square representing a module instance. Events are displayed on the screen as the user clicks, scrolls, types, inside or outside
|
| - of the square.
|
| + <dt><a href="tumbler/tumbler.html">Tumbler</a></dt>
|
| + <dd> The Tumbler example demonstrates how to create a 3D cube that you can rotate with your mouse while pressing the
|
| + left mouse button. This example creates a 3D context and draws to it using
|
| + OpenGL ES. The JavaScript implements a virtual trackball interface to
|
| + map mouse movements into 3D rotations using simple 3D vector math and
|
| + quaternions.
|
|
|
| - <p>Teaching focus: Keyboard and mouse input, view change, and focus events.</p>
|
| + <p>Teaching focus: 3D graphics</p>
|
| </dd>
|
| -<dt><a href="sine_synth/sine_synth.html">Sine Wave Synthesizer</a></dt>
|
| - <dd> The Sine Wave Synthesizer example demonstrates playing sound (a sine wave).
|
| + <dt><a href="geturl/geturl.html">Get URL</a></dt>
|
| + <dd> The Get URL example demonstrates fetching an URL and then displaying its contents.
|
|
|
| - <p>Teaching focus: Audio.</p>
|
| + <p>Teaching focus: URL loading.</p>
|
| </dd>
|
| +
|
| +<h3>Common Concepts</h3>
|
| +<dd><p>The following set of examples illustrate various common concepts such as
|
| +showing load progress, using Shared Objects (dynamic libraries),
|
| +mulithreading...</p></dd>
|
| +<dt><a href="dlopen/dlopen.html">Shared Object Loading (GLIBC)</a></dt>
|
| + <dd> The Load Progress example demonstrates how to listen for and handle
|
| + events that occur while a NaCl module loads. This example listens for
|
| + different load event types and dispatches different events to their
|
| + respective handler. This example also checks for valid browser version and
|
| + shows how to calculate and display loading progress.
|
| + <p>Teaching focus: Using shared objects.</p>
|
| + </dd>
|
| +<dt><a href="load_progress/load_progress.html">Load Progress</a></dt>
|
| + <dd> The Load Progress example demonstrates how to listen for and handle events that occur while a
|
| + NaCl module loads. This example listens for different load event types and dispatches different events to their respective handler. This example also checks for valid browser
|
| + version and shows how to calculate and display loading progress.
|
| +
|
| + <p>Teaching focus: Progress event handling.</p>
|
| + </dd>
|
| <dt><a href="pong/pong.html">Pong</a></dt>
|
| <dd> The Pong example demonstrates how to create a basic 2D video game and how to store application
|
| information in a local persistent file. This game uses up and
|
| @@ -70,11 +138,6 @@
|
|
|
| <p>Teaching focus: File I/O, 2D graphics, input events.</p>
|
| </dd>
|
| - <dt><a href="geturl/geturl.html">Get URL</a></dt>
|
| - <dd> The Get URL example demonstrates fetching an URL and then displaying its contents.
|
| -
|
| - <p>Teaching focus: URL loading.</p>
|
| - </dd>
|
| <dt><a href="multithreaded_input_events/mt_input_events.html">Multi-threaded Input Events</a></dt>
|
| <dd>The Multithreaded Input Events example combines HTML, Javascript,
|
| and C++ (the C++ is compiled to create a .nexe file).
|
| @@ -83,22 +146,13 @@
|
| a queue. The worker thread pulls them off of the queue, converts them to a
|
| string, and then uses CallOnMainThread so that PostMessage can be send the
|
| result of the worker thread to the browser.
|
| + <p>Teaching focus: Multithreaded event handling.</p>
|
| </dd>
|
| - <dt><a href="tumbler/tumbler.html">Tumbler</a></dt>
|
| - <dd> The Tumbler example demonstrates how to create a 3D cube that you can rotate with your mouse while pressing the
|
| - left mouse button. This example creates a 3D context and draws to it using
|
| - OpenGL ES. The JavaScript implements a virtual trackball interface to
|
| - map mouse movements into 3D rotations using simple 3D vector math and
|
| - quaternions.
|
| -
|
| - <p>Teaching focus: 3D graphics</p>
|
| - </dd>
|
| <dt><a href="fullscreen_tumbler/fullscreen_tumbler.html">Full-screen Tumbler</a></dt>
|
| - <dd> This is a modified version of the Tumbler example above that supports
|
| - full-screen display. It is in every way identical to Tumbler in
|
| - functionality, except that it adds the ability to switch to/from
|
| - full-screen display by pressing the Enter key.
|
| -
|
| + <dd>This is a modified version of the Tumbler example above that supports
|
| + full-screen display. It is in every way identical to Tumbler in
|
| + functionality, except that it adds the ability to switch to/from
|
| + full-screen display by pressing the Enter key.
|
| <p>Teaching focus: Full-screen</p>
|
| </dd>
|
| <dt><a href="mouselock/mouselock.html">Mouse Locker</a></dt>
|
|
|
Chromium Code Reviews
