Using KeymanWeb: An Example
To use KeymanWeb on a web page, four steps are required:
- Designate a DIV element as the KeymanWeb controller by giving it the id KeymanWebControl. This step is only necessary for User Interfaces which are not attached to the currently active input element, such as the 'toolbar' or 'button' interfaces.
- Insert the KeymanWeb engine script, loading it either from the Tavultesoft server or a local copy according to your license.
- Initialize the KeymanWeb object.
- Add a keyboard script reference for each keyboard that is to be available for users. If the keyboard (javascript) source file name is specified with no path, the keyboard will be loaded from the default Tavultesoft keyboard repository, otherwise it will be loaded from a path relative to the current document or local server root.
These steps are illustrated in the following code for a sample HTML page using KeymanWeb:
<body>
<h2>KeymanWeb - Example Using Toggle User Interface</h2>
<div id='sampleFrame'>
<!-- The following 'div' is a placeholder for the KeymanWeb object -->
<div id='KeymanWebControl'></div>
<!-- input fields -->
<div id='inputArea'>
<h3>Type in your language in this text area:</h3>
<textarea rows='6' class='multilingual'></textarea>
<h3>or in this input field:</h3>
<input class='multilingual' value=' '/>
</div>
</div>
<!-- The following scripts should be inserted at the end of the page
after visible elements but before the closing 'body' tag. -->
<!-- Insert the (local or remotely downloaded) KeymanWeb object. -->
<script type="text/javascript" src="kmw-release.js"></script>
<!-- If a custom user interface is used, its script should be inserted here. -->
<!--
KeymanWeb initialization script, to initialize KeymanWeb
and specify parameters for its use:
'key': subscription license key (required parameter).
'ui': the type of user interface to be installed, if downloaded automatically
from the KeymanWeb server. If omitted, 'ui' will default to 'float' and
install the 'Floating User Interface'.
'root': URL from which to download the ui and keyboard objects.
Set to an empty string to load them from the same folder as the page source,
or omit to load them directly from the KeymanWeb server.
-->
<script>
tavultesoft.keymanweb.init({
key: '1234567890',
ui:'toggle',
root:''
});
</script>
<!-- ...end of initialization script -->
<!--
Keyboard 'stubs' specifying the name and language code
for each keyboard that is to be available for users.
The actual keyboard object will be downloaded asynchronously when first selected for use.
Any number of keyboards may be specified. If the same keyboard is used for several
languages, it will only be loaded once, but a 'stub' must be included for each supported
language. If two (or more) keyboards are available for a given language, both can be made
available by including the appropriate stubs.
For a keyboard to be available and correctly listed with all (standard) user interfaces,
each 'stub' should specify the keyboard name, its internal name, the language, the ISO
language code, the region, the (two letter) region code, and the keyboard's file name.
(Not all arguments are used by all user interfaces.)
-->
<script type="text/javascript">
KeymanWeb.KRS({KN:'European Latin',KI:'Keyboard_european',KL:'French',KLC:'fra',
KR:'Europe',KRC:'eu',KF:'european.js'});
KeymanWeb.KRS({KN:'Korean RR',KI:'Keyboard_korean_rr',KL:'Korean',KLC:'kor',
KR:'Asia',KRC:'as',KF:'korean_rr.js'});
KeymanWeb.KRS({KN:'Bangla - Joy-Unicode',KI:'Keyboard_joy_unicode',KL:'Bangla',KLC:'ban',
KR:'Asia',KRC:'as',KF:'bangla_joy_kab.js'});
KeymanWeb.KRS({KN:'Lao 2008 Basic',KI:'Keyboard_lao_2008_basic',KL:'Lao',KLC:'lao',
KR:'Asia',KRC:'as',KF:'lao_2008_basic.js'});
KeymanWeb.KRS({KN:'European Latin',KI:'Keyboard_european',KL:'German',KLC:'deu',
KR:'Europe',KRC:'eu',KF:'european.js'});
KeymanWeb.KRS({KN:'French',KI:'Keyboard_french',KL:'French',KLC:'fra',
KR:'Europe',KRC:'eu',KF:'french.js'});
</script>
</body>
