blob: 516a9958903f98c211d4011089911a7cf92103c2 [file] [log] [blame]
<!DOCTYPE html>
Copyright (c) 2011 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
<title>Hello, World!</title>
<script type="text/javascript">
helloWorldModule = null; // Global application object.
statusText = 'NO-STATUS';
// Indicate success when the NaCl module has loaded.
function moduleDidLoad() {
helloWorldModule = document.getElementById('hello_world');
// Handle a message coming from the NaCl module.
function handleMessage(message_event) {
// If the page loads before the Native Client module loads, then set the
// status message indicating that the module is still loading. Otherwise,
// do not change the status message.
function pageDidLoad() {
// Set the focus on the text input box. Doing this means you can press
// return as soon as the page loads, and it will fire the reversetText()
// function.
if (helloWorldModule == null) {
} else {
// It's possible that the Native Client module onload event fired
// before the page's onload event. In this case, the status message
// will reflect 'SUCCESS', but won't be displayed. This call will
// display the current message.
function fortyTwo() {
function reverseText() {
// Grab the text from the text box, pass it into reverseText()
var inputBox = document.forms.helloForm.inputBox;
helloWorldModule.postMessage('reverseText:' + inputBox.value);
// Note: a |false| return tells the <form> tag to cancel the GET action
// when submitting the form.
return false;
// Set the global status message. If the element with id 'statusField'
// exists, then set its HTML to the status message as well.
// opt_message The message test. If this is null or undefined, then
// attempt to set the element with id 'statusField' to the value of
// |statusText|.
function updateStatus(opt_message) {
if (opt_message)
statusText = opt_message;
var statusField = document.getElementById('statusField');
if (statusField) {
statusField.innerHTML = statusText;
<body onload="pageDidLoad()">
<h1>Native Client Simple Module</h1>
<form name="helloForm"
onsubmit="return reverseText()">
<input type="text" id="inputBox" name="inputBox" value="Hello world" /><p/>
<input type="button" value="Call fortyTwo()" onclick="fortyTwo()" />
<input type="submit" value="Call reverseText()" />
<!-- Load the published .nexe. This includes the 'src' attribute which
shows how to load multi-architecture modules. Each entry in the "nexes"
object in the .nmf manifest file is a key-value pair: the key is the runtime
('x86-32', 'x86-64', etc.); the value is a URL for the desired NaCl module.
To load the debug versions of your .nexes, set the 'src' attribute to the
_dbg.nmf version of the manifest file.
Note: The <EMBED> element is wrapped inside a <DIV>, which has both a 'load'
and a 'message' event listener attached. This wrapping method is used
instead of attaching the event listeners directly to the <EMBED> element to
ensure that the listeners are active before the NaCl module 'load' event
fires. This also allows you to use PPB_Messaging.PostMessage() (in C) or
pp::Instance.PostMessage() (in C++) from within the initialization code in
your NaCl module.
<div id="listener">
<script type="text/javascript">
var listener = document.getElementById('listener')
listener.addEventListener('load', moduleDidLoad, true);
listener.addEventListener('message', handleMessage, true);
<embed name="nacl_module"
width=200 height=200
type="application/x-nacl" />
<p>If the module is working correctly, a click on the "Call fortyTwo()" button
should open a popup dialog containing <b>42</b> as its value.</p>
<p> Clicking on the "Call reverseText()" button
should open a popup dialog containing the textbox contents and its reverse
as its value.</p>
<div id="statusField">NO-STATUS</div>