OLD | NEW |
1 {{+bindTo:partials.standard_nacl_article}} | 1 {{+bindTo:partials.standard_nacl_article}} |
2 | 2 |
3 <section id="application-structure"> | 3 <section id="application-structure"> |
4 <span id="devcycle-application-structure"></span><h1 id="application-structure">
<span id="devcycle-application-structure"></span>Application Structure</h1> | 4 <span id="devcycle-application-structure"></span><h1 id="application-structure">
<span id="devcycle-application-structure"></span>Application Structure</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><a class="reference internal" href="#application-components" id="id1">Applic
ation components</a></li> | 7 <li><a class="reference internal" href="#application-components" id="id1">Applic
ation components</a></li> |
8 <li><a class="reference internal" href="#html-file-and-the-embed-element" id="id
2">HTML file and the <embed> element</a></li> | 8 <li><a class="reference internal" href="#html-file-and-the-embed-element" id="id
2">HTML file and the <embed> element</a></li> |
9 <li><a class="reference internal" href="#manifest-files" id="id3">Manifest Files
</a></li> | 9 <li><a class="reference internal" href="#manifest-files" id="id3">Manifest Files
</a></li> |
10 <li><a class="reference internal" href="#modules-and-instances" id="id4">Modules
and instances</a></li> | 10 <li><a class="reference internal" href="#modules-and-instances" id="id4">Modules
and instances</a></li> |
11 <li><a class="reference internal" href="#native-client-modules-a-closer-look" id
="id5">Native Client modules: A closer look</a></li> | 11 <li><a class="reference internal" href="#native-client-modules-a-closer-look" id
="id5">Native Client modules: A closer look</a></li> |
12 </ul> | 12 </ul> |
13 | 13 |
14 </div><p>This chapter of the Developer’s Guide describes the general struc
ture of a | 14 </div><p>This chapter of the Developer’s Guide describes the general struc
ture of a |
15 Native Client application. The chapter assumes you are familiar with the | 15 Native Client application. The chapter assumes you are familiar with the |
16 material presented in the <a class="reference internal" href="/native-client/ove
rview.html"><em>Technical Overview</em></a>.</p> | 16 material presented in the <a class="reference internal" href="/native-client/ove
rview.html"><em>Technical Overview</em></a>.</p> |
17 <aside class="note"> | 17 <aside class="note"> |
18 The “Hello, World” example is used here to illustrate basic | 18 The “Hello, World” example is used here to illustrate basic |
19 Native Client programming techniques. You can find this code in the | 19 Native Client programming techniques. You can find this code in the |
20 <em>/getting_started/part1</em> directory in the Native Client SDK download. | 20 <em>/getting_started/part1</em> directory in the Native Client SDK download. |
21 </aside> | 21 </aside> |
22 <section id="application-components"> | |
23 <h2 id="application-components">Application components</h2> | 22 <h2 id="application-components">Application components</h2> |
24 <p>A Native Client application typically contains the following components:</p> | 23 <p>A Native Client application typically contains the following components:</p> |
25 <ul class="small-gap"> | 24 <ul class="small-gap"> |
26 <li>an HTML file;</li> | 25 <li>an HTML file;</li> |
27 <li>JavaScript code, which can be included in the HTML file or contained in one
or | 26 <li>JavaScript code, which can be included in the HTML file or contained in one
or |
28 more separate .js files;</li> | 27 more separate .js files;</li> |
29 <li>CSS styles, which can be included in the HTML file or contained in one or mo
re | 28 <li>CSS styles, which can be included in the HTML file or contained in one or mo
re |
30 separate .css files;</li> | 29 separate .css files;</li> |
31 <li>a Native Client manifest file (with a .nmf extension) that specifies how to | 30 <li>a Native Client manifest file (with a .nmf extension) that specifies how to |
32 load a Native Client module for different processors; and</li> | 31 load a Native Client module for different processors; and</li> |
33 <li>a Native Client module, written in C or C++, and compiled into a portable | 32 <li>a Native Client module, written in C or C++, and compiled into a portable |
34 executable file (with a .pexe extension) or (if using the Chrome Web Store), | 33 executable file (with a .pexe extension) or (if using the Chrome Web Store), |
35 architecture-specific executable files (with .nexe extensions).</li> | 34 architecture-specific executable files (with .nexe extensions).</li> |
36 </ul> | 35 </ul> |
37 <p>Applications that are published in the <a class="reference external" href="ht
tps://chrome.google.com/webstore/search?q=%22Native+Client%22+OR+NativeClient+OR
+NaCl">Chrome Web Store</a> | 36 <p>Applications that are published in the <a class="reference external" href="ht
tps://chrome.google.com/webstore/search?q=%22Native+Client%22+OR+NativeClient+OR
+NaCl">Chrome Web Store</a> |
38 also include a Chrome | 37 also include a Chrome |
39 Web Store manifest file <code>(manifest.json)</code> and one or more icon files.
</p> | 38 Web Store manifest file <code>(manifest.json)</code> and one or more icon files.
</p> |
40 </section><section id="html-file-and-the-embed-element"> | 39 <h2 id="html-file-and-the-embed-element"><span id="html-file"></span>HTML file a
nd the <embed> element</h2> |
41 <span id="html-file"></span><h2 id="html-file-and-the-embed-element"><span id="h
tml-file"></span>HTML file and the <embed> element</h2> | |
42 <p>The <code><embed></code> element in an HTML file triggers the loading o
f a Native Client | 40 <p>The <code><embed></code> element in an HTML file triggers the loading o
f a Native Client |
43 module and specifies the rectangle on the web page that is managed by the | 41 module and specifies the rectangle on the web page that is managed by the |
44 module. Here is the <embed> element from the “Hello, World” ap
plication:</p> | 42 module. Here is the <embed> element from the “Hello, World” ap
plication:</p> |
45 <pre class="prettyprint"> | 43 <pre class="prettyprint"> |
46 <embed id="hello_tutorial" | 44 <embed id="hello_tutorial" |
47 width=0 height=0 | 45 width=0 height=0 |
48 src="hello_tutorial.nmf" | 46 src="hello_tutorial.nmf" |
49 type="application/x-pnacl" /> | 47 type="application/x-pnacl" /> |
50 </pre> | 48 </pre> |
51 <p>In the <code><embed></code> element:</p> | 49 <p>In the <code><embed></code> element:</p> |
52 <dl class="docutils"> | 50 <dl class="docutils"> |
53 <dt>name</dt> | 51 <dt>name</dt> |
54 <dd>is the DOM name attribute for the Native Client module | 52 <dd>is the DOM name attribute for the Native Client module |
55 (“nacl_module” is often used as a convention)</dd> | 53 (“nacl_module” is often used as a convention)</dd> |
56 <dt>id</dt> | 54 <dt>id</dt> |
57 <dd>specifies the DOM ID for the Native Client module</dd> | 55 <dd>specifies the DOM ID for the Native Client module</dd> |
58 <dt>width, height</dt> | 56 <dt>width, height</dt> |
59 <dd>specify the size in pixels of the rectangle on the web page that is | 57 <dd>specify the size in pixels of the rectangle on the web page that is |
60 managed by the Native Client module (if the module does not have a | 58 managed by the Native Client module (if the module does not have a |
61 visible area, these values can be 0)</dd> | 59 visible area, these values can be 0)</dd> |
62 <dt>src</dt> | 60 <dt>src</dt> |
63 <dd>refers to the Native Client manifest file that is used to determine | 61 <dd>refers to the Native Client manifest file that is used to determine |
64 which version of a module to load based on the architecture of the | 62 which version of a module to load based on the architecture of the |
65 user’s computer (see the following section for more information)</dd> | 63 user’s computer (see the following section for more information)</dd> |
66 <dt>type</dt> | 64 <dt>type</dt> |
67 <dd>specifies the MIME type of the embedded content; for Portable Native Client | 65 <dd>specifies the MIME type of the embedded content; for Portable Native Client |
68 modules the type must be “application/x-pnacl”. For architecture-spe
cific | 66 modules the type must be “application/x-pnacl”. For architecture-spe
cific |
69 Native Client modules the type must be “application/x-nacl”</dd> | 67 Native Client modules the type must be “application/x-nacl”</dd> |
70 </dl> | 68 </dl> |
71 </section><section id="manifest-files"> | 69 <h2 id="manifest-files"><span id="manifest-file"></span>Manifest Files</h2> |
72 <span id="manifest-file"></span><h2 id="manifest-files"><span id="manifest-file"
></span>Manifest Files</h2> | |
73 <p>Native Client applications have two types of manifest files: a Chrome Web Sto
re | 70 <p>Native Client applications have two types of manifest files: a Chrome Web Sto
re |
74 manifest file and a Native Client manifest file.</p> | 71 manifest file and a Native Client manifest file.</p> |
75 <p>A <strong>Chrome Web Store manifest file</strong> is a file with information
about a web | 72 <p>A <strong>Chrome Web Store manifest file</strong> is a file with information
about a web |
76 application that is published in the Chrome Web Store. This file, named | 73 application that is published in the Chrome Web Store. This file, named |
77 <code>manifest.json</code>, is required for applications that are published in t
he | 74 <code>manifest.json</code>, is required for applications that are published in t
he |
78 Chrome Web Store. For more information about this file see <a class="reference i
nternal" href="/native-client/devguide/distributing.html"><em>Distributing | 75 Chrome Web Store. For more information about this file see <a class="reference i
nternal" href="/native-client/devguide/distributing.html"><em>Distributing |
79 Your Application</em></a>. and the <a class="reference external" href="/extensi
ons/manifest">Chrome Web Store manifest file | 76 Your Application</em></a>. and the <a class="reference external" href="/extensi
ons/manifest">Chrome Web Store manifest file |
80 format</a>.</p> | 77 format</a>.</p> |
81 <p>A <strong>Native Client manifest file</strong> is a file that specifies which
Native Client | 78 <p>A <strong>Native Client manifest file</strong> is a file that specifies which
Native Client |
82 module (executable) to load. For PNaCl it specifies a single portable | 79 module (executable) to load. For PNaCl it specifies a single portable |
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
125 shared libraries that the applications use. This is discussed in detail in | 122 shared libraries that the applications use. This is discussed in detail in |
126 <a class="reference internal" href="/native-client/devguide/devcycle/dynamic-loa
ding.html"><em>Dynamic Linking and Loading with glibc</em></a>. To | 123 <a class="reference internal" href="/native-client/devguide/devcycle/dynamic-loa
ding.html"><em>Dynamic Linking and Loading with glibc</em></a>. To |
127 see some example manifest files, build some of the example applications in the | 124 see some example manifest files, build some of the example applications in the |
128 SDK (run <code>make</code> in the example subdirectories) and look at the genera
ted | 125 SDK (run <code>make</code> in the example subdirectories) and look at the genera
ted |
129 manifest files.</p> | 126 manifest files.</p> |
130 <p>In most cases, you can simply use the Python script provided with the SDK, | 127 <p>In most cases, you can simply use the Python script provided with the SDK, |
131 <code>create_nmf.py</code>, to create a manifest file for your application as pa
rt of the | 128 <code>create_nmf.py</code>, to create a manifest file for your application as pa
rt of the |
132 compilation step (see the Makefile in any of the SDK examples for an | 129 compilation step (see the Makefile in any of the SDK examples for an |
133 illustration of how to do so). The manifest file format is also | 130 illustration of how to do so). The manifest file format is also |
134 <a class="reference internal" href="/native-client/reference/nacl-manifest-forma
t.html"><em>documented</em></a>.</p> | 131 <a class="reference internal" href="/native-client/reference/nacl-manifest-forma
t.html"><em>documented</em></a>.</p> |
135 </section><section id="modules-and-instances"> | |
136 <h2 id="modules-and-instances">Modules and instances</h2> | 132 <h2 id="modules-and-instances">Modules and instances</h2> |
137 <p>A Native Client <strong>module</strong> is C or C++ code compiled into a PNaC
l .pexe file or | 133 <p>A Native Client <strong>module</strong> is C or C++ code compiled into a PNaC
l .pexe file or |
138 a NaCl .nexe file.</p> | 134 a NaCl .nexe file.</p> |
139 <p>An <strong>instance</strong> is a rectangle on a web page that is managed by
a module. An | 135 <p>An <strong>instance</strong> is a rectangle on a web page that is managed by
a module. An |
140 instance may have a dimension of width=0 and height=0, meaning that the instance | 136 instance may have a dimension of width=0 and height=0, meaning that the instance |
141 does not have any visible component on the web page. An instance is created by | 137 does not have any visible component on the web page. An instance is created by |
142 including an <code><embed></code> element in a web page. The <code><emb
ed></code> element | 138 including an <code><embed></code> element in a web page. The <code><emb
ed></code> element |
143 references a Native Client manifest file that loads the appropriate version of | 139 references a Native Client manifest file that loads the appropriate version of |
144 the module (either portable, or specific to the end-user’s architecture).
A | 140 the module (either portable, or specific to the end-user’s architecture).
A |
145 module may be included in a web page multiple times by using multiple | 141 module may be included in a web page multiple times by using multiple |
146 <code><embed></code> elements that refer to the module; in this case the N
ative Client | 142 <code><embed></code> elements that refer to the module; in this case the N
ative Client |
147 runtime system loads the module once and creates multiple instances that are | 143 runtime system loads the module once and creates multiple instances that are |
148 managed by the module.</p> | 144 managed by the module.</p> |
149 </section><section id="native-client-modules-a-closer-look"> | |
150 <h2 id="native-client-modules-a-closer-look">Native Client modules: A closer loo
k</h2> | 145 <h2 id="native-client-modules-a-closer-look">Native Client modules: A closer loo
k</h2> |
151 <p>A Native Client module must include three components:</p> | 146 <p>A Native Client module must include three components:</p> |
152 <ul class="small-gap"> | 147 <ul class="small-gap"> |
153 <li>a factory function called <code>CreateModule()</code></li> | 148 <li>a factory function called <code>CreateModule()</code></li> |
154 <li>a Module class (derived from the <code>pp::Module</code> class)</li> | 149 <li>a Module class (derived from the <code>pp::Module</code> class)</li> |
155 <li>an Instance class (derived from the <code>pp:Instance</code> class)</li> | 150 <li>an Instance class (derived from the <code>pp:Instance</code> class)</li> |
156 </ul> | 151 </ul> |
157 <p>In the “Hello tutorial” example (in the <code>getting_started/par
t1</code> directory of | 152 <p>In the “Hello tutorial” example (in the <code>getting_started/par
t1</code> directory of |
158 the NaCl SDK), these three components are specified in the file | 153 the NaCl SDK), these three components are specified in the file |
159 <code>hello_tutorial.cc</code>. Here is the factory function:</p> | 154 <code>hello_tutorial.cc</code>. Here is the factory function:</p> |
(...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
205 calling the <code>exit()</code> function. NaCl modules will be shut down when th
e user | 200 calling the <code>exit()</code> function. NaCl modules will be shut down when th
e user |
206 leaves the web page, or the NaCl module’s <code><embed></code> is ot
herwise destroyed. | 201 leaves the web page, or the NaCl module’s <code><embed></code> is ot
herwise destroyed. |
207 If the NaCl module does call the <code>exit()</code> function, the instance will | 202 If the NaCl module does call the <code>exit()</code> function, the instance will |
208 issue a <code>crash</code> event | 203 issue a <code>crash</code> event |
209 <a class="reference internal" href="/native-client/devguide/coding/progress-even
ts.html"><em>which can be handled in Javascript</em></a>.</p> | 204 <a class="reference internal" href="/native-client/devguide/coding/progress-even
ts.html"><em>which can be handled in Javascript</em></a>.</p> |
210 <p>While the <code>CreateModule()</code> factory function, the <code>Module</cod
e> class, and the | 205 <p>While the <code>CreateModule()</code> factory function, the <code>Module</cod
e> class, and the |
211 <code>Instance</code> class are required for a Native Client application, the co
de | 206 <code>Instance</code> class are required for a Native Client application, the co
de |
212 samples shown above don’t actually do anything. Subsequent chapters in the | 207 samples shown above don’t actually do anything. Subsequent chapters in the |
213 Developer’s Guide build on these code samples and add more interesting | 208 Developer’s Guide build on these code samples and add more interesting |
214 functionality.</p> | 209 functionality.</p> |
215 </section></section> | 210 </section> |
216 | 211 |
217 {{/partials.standard_nacl_article}} | 212 {{/partials.standard_nacl_article}} |
OLD | NEW |