| <!DOCTYPE html> |
| <html> |
| <!-- |
| Copyright (c) 2013 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. |
| --> |
| <head> |
| <meta http-equiv="Pragma" content="no-cache"> |
| <meta http-equiv="Expires" content="-1"> |
| <title>{{title}}</title> |
| <script type="text/javascript" src="common.js"></script> |
| <script type ="text/javascript" src="example.js"></script> |
| <style> |
| .columns { |
| display: -webkit-flex; |
| width: 100%; |
| height: 100%; |
| position: absolute; |
| -webkit-flex-direction: row; |
| } |
| .column { |
| -webkit-flex: 1; |
| border-left: 1px solid #ccc; |
| padding: 0 8px; |
| } |
| </style> |
| </head> |
| <body {{attrs}} data-width="0" data-height="0"> |
| <h1>{{title}}</h1> |
| <h2>Status: <code id="statusField">NO-STATUS</code></h2> |
| <p> |
| This example shows how to use the pp::VarDictionary var type. |
| </p> |
| <p> |
| Click the radio buttons below to choose a function, input some parameters, |
| then click the button to call that function in the NaCl module. After every |
| function call, the NaCl module's dictionary will be displayed on the right. |
| </p> |
| <div class="columns"> |
| <div class="column"> |
| <div> |
| <span> |
| <input type="radio" id="radioget" name="group" checked="checked">Get |
| <input type="radio" id="radioset" name="group">Set |
| <input type="radio" id="radiodelete" name="group">Delete |
| <input type="radio" id="radiohaskey" name="group">HasKey |
| <input type="radio" id="radiogetkeys" name="group">GetKeys |
| </span> |
| </div> |
| <div class="function" id="get"> |
| <span> |
| Key:<input type="text" id="getKey" value="array"> |
| <button>Get</button> |
| </span> |
| </div> |
| <div class="function" id="set" hidden> |
| <span> |
| Key:<input type="text" id="setKey" value="baz"> |
| Value:<input type="text" id="setValue" value="[1, 2, 3]"> |
| <button>Set</button> |
| <p> |
| <em>hint: type value as <a href="http://json.org">JSON</a>. |
| e.g.:</em> |
| <ul> |
| <li>4245</li> |
| <li>4245.65</li> |
| <li>"foobar"</li> |
| <li>[1, 2, 3, "foo"]</li> |
| <li>{"foo": "bar", "baz": 3}</li> |
| </ul> |
| </p> |
| </span> |
| </div> |
| <div class="function" id="delete" hidden> |
| <span> |
| Key:<input type="text" id="deleteKey" value="foo"> |
| <button>Delete</button> |
| </span> |
| </div> |
| <div class="function" id="haskey" hidden> |
| <span> |
| Key:<input type="text" id="haskeyKey" value="key1"> |
| <button>HasKey</button> |
| </span> |
| </div> |
| <div class="function" id="getkeys" hidden> |
| <span> |
| <button>GetKeys</button> |
| </span> |
| </div> |
| <p><b>Log:</b></p> |
| <pre id="log" style="font-weight: bold"></pre> |
| <div id="listener"></div> |
| </div> |
| <div class="column" id="dictColumn"> |
| <span>Dictionary:</span> |
| <pre id="dict"></pre> |
| </div> |
| </div> |
| </body> |
| </html> |
