1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
|
<!DOCTYPE html>
<html>
<head>
<title>GF web services API examples</title>
<meta charset="UTF-8">
<style type="text/css">
body { background: #eee; }
h1, h2, h3, small, th { font-family: sans-serif; }
th { text-align: left; }
h1,h2 { border-bottom: 2px solid black }
dt { background: #cef; }
code { background: #ffc; }
dt.js { background: white; margin-bottom: 1ex; }
dt.js em { color: #36f; }
dd { background: #ffc; margin-top: 1ex; margin-bottom: 1ex; }
dl.apiexamples>dt, dl.apiexamples>dd { font-family: monospace; }
dl.apiexamples>dd { white-space: pre; }
table.border { border-collapse: collapse; margin-top: 1ex; margin-bottom: 1ex; }
table.border td, table.border th { border: 1px solid black; background: #fcfcfc; }
div.modtime { float: right; }
.modtime { color: #666; white-space: nowrap; }
</style>
<body>
<h1>Minibar API</h1>
The minibar is structured as three object:
<ul>
<li><a href="#Minibar">Minibar</a>
<li><a href="#Input">Input</a>
<li><a href="#Translations">Translations</a>
</ul>
They are described below.
<h2 id=Minibar>The Minibar object</h2>
<p>
This is the complete Minibar web app. It is defined in
<a href="minibar.js">minibar.js</a>. It also uses the <code>Input</code>
and <code>Translations</code> objects, and some auxiliary functions defined
in <a href="minibar_support.js">minibar_support.js</a>
and <a href="support.js">support.js</a>, so to use it in an
HTML file, you would normally include at least the following:
<blockquote><pre>
<script type="text/JavaScript" src="minibar.js"></script>
<script type="text/JavaScript" src="minibar_input.js"></script>
<script type="text/JavaScript" src="minibar_translations.js"></script>
<script type="text/JavaScript" src="minibar_support.js"></script>
<script type="text/JavaScript" src="support.js"></script>
</pre></blockquote>
<p>
For an example, see <a href="minibar.html">minibar.html</a>.
<h3>Constructor</h3>
<code>var minibar=new Minibar(server,options,target)</code>
<ul>
<li><code>server</code> is the PGF service object.
<li><code>options</code> is an object where the following properties
can be set to override various default options:
<table class=border>
<tr><th>Option<th>Default<th>Description
<tr><td>show_abstract<td>false<td rowspan=3>See Translations,
not used directly by Minibar
<tr><td>show_trees<td>false
<tr><td>show_grouped_translations<td>true
<tr><td>delete_button_text<td>"⌫"<td rowspan=3>See Input,
not used directly by Minibar
<tr><td>default_source_language<td>null
<tr><td>random_button<td>true
<tr><td>try_google<td>true<td>Include a button to try the current
sentence in Google Translate
<tr><td>feedback_url<td>null<td>Include a button to open a feedback
form. The HTTP server must be configured to handle form submissions
for this to work.
<tr><td>help_url<td>null<td>Include a button to open a help text.
</table>
<li><code>target</code> is the <code>id</code> of the HTML element inside
which the minibar user interface is created. It can be omitted if
the <code>id</code> is <code>minibar</code>. The HTML document should
contain something like this:
<blockquote><code><div id="minibar"></div></code></blockquote>
</ul>
<h3>Methods</h3>
There are several internal methods, but since this is a self-contained
web app, there is usually no need to call any methods from outside.
<h2 id=Input>The Input object</h2>
This object handles user input. Text can be entered by typing or by clicking
on the "refrigerator magnets".
<p>
It is defined in
<a href="minibar_input.js">minibar_input.js</a>.
It also uses some auxiliary functions defined
in <a href="minibar_support.js">minibar_support.js</a>
and <a href="support.js">support.js</a>, so to use it in an
HTML file, you would normally include at least the following:
<blockquote><pre>
<script type="text/JavaScript" src="minibar_input.js"></script>
<script type="text/JavaScript" src="minibar_support.js"></script>
<script type="text/JavaScript" src="support.js"></script>
</pre></blockquote>
<h3>Constructor</h3>
<code>var input=new Input(server,options,translations)</code>
<ul>
<li><code>server</code> is the PGF service object
<li><code>options</code> is an object where the following properties
can be set to override various default options:
<table class=border>
<tr><th>Option<th>Default<th>Description
<tr><td>delete_button_text<td>"⌫"<td>the label for the button that deletes the last word
<tr><td>default_source_language<td>null<td>the concrete language to
use for input in case the user's browers doesn't supply a suitable
default. If none is provided the first language in alphabetical
order will be used.
<tr><td>random_button<td>true<td>include a button to generate a
random sentence
</table>
<li><code>translations</code> is the object that is notified when the input
has changed. In the minibar, this is the object that display translations.
The following methods will be called:
<ul>
<li><code>translations.clear()</code>
<li><code>translations.translateFrom({from:<var>conc</var>,input:<var>string</code>})</code>
</ul>
</ul>
<h3>Properties and user interface</h3>
The <code>input</code> object created by the <code>Input</code>constructor
contains two field that the caller should add to the user interface:
<ul>
<li><code>input.main</code> is the main user interface where the current
input and the refrigerator magnets are displayed.
<li><code>input.menus</code> contains the menu for selecting input language,
and buttons for deleting the last word, clearing the input and generating
a random sentence (if enabled in the options)
</ul>
<h3>Methods</h3>
<ul>
<li><code>input.change_grammar(grammar_info)</code> should be called
after a different grammar is selected in the <code>server</code> object. It
will clear away old input and magnets, and update the input language menu
with the languages available in the new grammar.
</ul>
<h2 id=Translations>The Translations object</h2>
This object display translations. It is defined in
<a href="minibar_translations.js">minibar_translations.js</a>.
It also uses some auxiliary functions defined
in <a href="minibar_support.js">minibar_support.js</a>
and <a href="support.js">support.js</a>, so to use it in an
HTML file, you would normally include at least the following:
<blockquote><pre>
<script type="text/JavaScript" src="minibar_input.js"></script>
<script type="text/JavaScript" src="minibar_support.js"></script>
<script type="text/JavaScript" src="support.js"></script>
</pre></blockquote>
<h3>Constructor</h3>
<code>var translations=new Translations(server,options)</code>
<ul>
<li><code>server</code> is the PGF service object.
<li><p><code>options</code> is an object where the following properties
can be set to override various default options:
<table class=border>
<tr><th>Option<th>Default<th>Description
<tr><td>show_abstract<td>false<td>show the abstract syntax in addition
to the concrete syntax for the translations
<tr><td>show_trees<td>false<td>add buttons to display syntax trees
next to translations.
<tr><td>show_grouped_translations<td>true<td>in case there are
multiple translations, group them by concrete language
</table>
</ul>
<h3>Properties and user interface</h3>
The <code>translations</code> object created by the
<code>Translations</code> constructor contains two field that the caller
should add to the user interface:
<ul>
<li><code>input.main</code> is the main user interface where the current
translations are displayed.
<li><code>input.menus</code> contains the menu for selecting target language.
</ul>
<h3>Methods</h3>
<ul>
<li><code>translations.change_grammar(grammar_info)</code> should be called
after a different grammar is selected in the <code>server</code> object. It
will clear away old translations and update the target language menu
with the languages available in the new grammar.
</ul>
<hr>
<div class=modtime>
<small class=modtime>
HTML <!-- hhmts start --> Last modified: Tue Aug 9 17:55:19 CEST 2011 <!-- hhmts end -->
</small>
</div>
<address>
<a href="Http://www.cse.chalmers.se/~hallgren/">TH</a>
</address>
|
