gf-3.2.9: src/runtime/javascript/minibar/minibar-api.html
<!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 web app consists of the following objects:
<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 object implements 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 described below, 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,translations,options)</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, but
other apps might of course use the entered text for other purposes.
The following methods will be called:
<ul>
<li><code>translations.clear()</code> is called when there no entered
text.
<li><code>translations.translateFrom({from:<var>conc</var>,input:<var>string</var>})</code>
is called when the user has entered some text. The <code>from</code>
property is the name of the concrete syntax and the <code>input</code>
property is the entered text.
</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: Sun Aug 21 19:11:35 CEST 2011 <!-- hhmts end -->
</small>
</div>
<address>
<a href="Http://www.cse.chalmers.se/~hallgren/">TH</a>
</address>