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,
37then click the button to call that function in the NaCl module.  After every
38function 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>
103