src/native_client_sdk/src/examples/api/var_dictionary/index.html

   1 <!DOCTYPE html>
   2 <html>
   3   <!--
   4   Copyright (c) 2013 The Chromium Authors. All rights reserved.
   5   Use of this source code is governed by a BSD-style license that can be
   6   found in the LICENSE file.
   7   -->
   8 <head>
   9   <meta http-equiv="Pragma" content="no-cache">
  10   <meta http-equiv="Expires" content="-1">
  11   <title>{{title}}</title>
  12   <script type="text/javascript" src="common.js"></script>
  13   <script type ="text/javascript" src="example.js"></script>
  14   <style>
  15     .columns {
  16       display: -webkit-flex;
  17       width: 100%;
  18       height: 100%;
  19       position: absolute;
  20       -webkit-flex-direction: row;
  21     }
  22     .column {
  23       -webkit-flex: 1;
  24       border-left: 1px solid #ccc;
  25       padding: 0 8px;
  26     }
  27   </style>
  28 </head>
  29 <body {{attrs}} data-width="0" data-height="0">
  30   <h1>{{title}}</h1>
  31   <h2>Status: <code id="statusField">NO-STATUS</code></h2>
  32   <p>
  33     This example shows how to use the pp::VarDictionary var type.
  34   </p>
  35   <p>
  36     Click the radio buttons below to choose a function, input some parameters,
  37 then click the button to call that function in the NaCl module.  After every
  38 function call, the NaCl module's dictionary will be displayed on the right.
  39   </p>
  40   <div class="columns">
  41     <div class="column">
  42       <div>
  43         <span>
  44           <input type="radio" id="radioget" name="group" checked="checked">Get
  45           <input type="radio" id="radioset" name="group">Set
  46           <input type="radio" id="radiodelete" name="group">Delete
  47           <input type="radio" id="radiohaskey" name="group">HasKey
  48           <input type="radio" id="radiogetkeys" name="group">GetKeys
  49         </span>
  50       </div>
  51       <div class="function" id="get">
  52         <span>
  53           Key:<input type="text" id="getKey" value="array">
  54           <button>Get</button>
  55         </span>
  56       </div>
  57       <div class="function" id="set" hidden>
  58         <span>
  59           Key:<input type="text" id="setKey" value="baz">
  60           Value:<input type="text" id="setValue" value="[1, 2, 3]">
  61           <button>Set</button>
  62           <p>
  63             <em>hint: type value as <a href="http://json.org">JSON</a>.
  64                 e.g.:</em>
  65             <ul>
  66               <li>4245</li>
  67               <li>4245.65</li>
  68               <li>"foobar"</li>
  69               <li>[1, 2, 3, "foo"]</li>
  70               <li>{"foo": "bar", "baz": 3}</li>
  71             </ul>
  72           </p>
  73         </span>
  74       </div>
  75       <div class="function" id="delete" hidden>
  76         <span>
  77           Key:<input type="text" id="deleteKey" value="foo">
  78           <button>Delete</button>
  79         </span>
  80       </div>
  81       <div class="function" id="haskey" hidden>
  82         <span>
  83           Key:<input type="text" id="haskeyKey" value="key1">
  84           <button>HasKey</button>
  85         </span>
  86       </div>
  87       <div class="function" id="getkeys" hidden>
  88         <span>
  89           <button>GetKeys</button>
  90         </span>
  91       </div>
  92       <p><b>Log:</b></p>
  93       <pre id="log" style="font-weight: bold"></pre>
  94       <div id="listener"></div>
  95     </div>
  96     <div class="column" id="dictColumn">
  97       <span>Dictionary:</span>
  98       <pre id="dict"></pre>
  99     </div>
 100   </div>
 101 </body>
 102 </html>