forked from GitHub/gf-core
236 lines
8.5 KiB
HTML
236 lines
8.5 KiB
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>
|