Javascript and JWL in Joost Widgets
Here you will learn how to use Javascript in your widget so that it can feature dynamic interaction; without Javascript your widget will be static.
You'll also learn how to use JWL elements to make forms that are consistent with the rest of the Joost user interface.
Before you begin this tutorial you should know about the error console: that's where all the errors are listed, and it's very useful when you need to know what is going wrong in your widget. To open the error console press Ctrl+Shift+D.
Using Javascript in your widgets
In a web page, to use Javascript you add a script element. At heart, a widget is basically a web page and thus adding Javascript works in the exact same manner.
You can place your script element wherever you want, though you may prefer to place it
inside the xhtml:head element.
Here is a widget that uses Javascript loaded from an external file in the JODA archive:
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:jwl='http://joost.com/ns/jewel#'>
<head>
<title>Hello World!</title>
<jwl:window width='300px' height='100px' align='right' pinbutton='visible'
autohide='false'/>
</head>
<body>
<span>Hello world</span>
<script src="hello.js"/>
</body>
</html>
Now next to the main file create a file named hello.js and put whatever javascript code you want to in there - it wil get executed upon load.
In your widget you can use all the objects you use in Web page (document, window) although some things might work somewhat differently due to the fact that a widget is somewhat different from a Web page. The reason why most will work is due to the fact that Joost is built on top of a Web browser component (Mozilla Gecko). For example if you do:
document.getElementsByTagName('span')[0].innerHTML = 'FOO BAR BAZ'
You'll see that the span element's content changed.
Similarly, typical Javascript event handling attributes (e.g. onclick)
will work as expected. Try replacing:
<span>
with
<span onmouseover="this.innerHTML = 'mouse is over the span'">
The setTimeout function you are familiar with works in Joost as well.
You can download the JODA archive of this example widget here
Making forms using JWL elements
You can use xhtml forms in Joost Widgets, ad style them with css as you wish. However there are some problems with the display of these currently, and so while we fix this, we have provided some 'JWL' elements that you can use which have some default styling.
JWL adds some elements which you can use in your widget. One such element is
jwl:textbox. To test it start a new widget and put
<span id="span">Some text</span> <jwl:textbox id="box" value="Some text"/>
You will get a JWL textbox (the style of which can be tweaked with CSS)
A JWL textbox is a very much like an HTML input textbox. Its
value attribute is the default text that it contains and you can inspect its
value in Javascript with textbox.value. The main difference from its HTML
peer is that it provides look and feel that is consistent with the rest of the Joost
platform.
One issue of note with JWL elements is that due to a long-standing defect in Mozilla
Gecko it is impossible to get to them using getElementById. Joost will
incorporate a fix for that bug as soon as it is available, in the meantime you can use a
function akin to the following:
function getJWLByNameId (name, id) {
var eltArray = document.getElementsByTagNameNS('http://joost.com/ns/jewel#', name);
for (var i = 0; i < eltArray.length; i++) {
var elt = eltArray[i];
if (elt.getAttributeNS(null, 'id') == id) return elt;
}
return null;
}
Another option is to use XPath.
A script like this will make it easy to get the text value of the form:
function getJWLByNameId (name, id) {
var eltArray = document.getElementsByTagNameNS('http://joost.com/ns/jewel#', name);
for (var i = 0; i < eltArray.length; i++) {
var elt = eltArray[i];
if (elt.getAttributeNS(null, 'id') == id) return elt;
}
return null;
}
document.getElementById('span').innerHTML = getJWLByNameId('textbox', 'box').value;
There are two other JWL elements worth looking into: checkbox and
button.
A checkbox is used and looks like:
<jwl:checkbox id="id" checked="checked"/>
Its id will be used to retrieve that specific checkbox.
checked is the initial status of the textbox, "checked" meaning that it will
be checked by default, and any other value making it unchecked.
To retrieve the state of the checkbox you should use checkbox.checked
which is a boolean value used to indicate the checkbox's state.
A button is written as follows:
<jwl:button id="id" label="Click here" onclick="some javascript"/>
id is the same as above; label is the text that will be
displayed inside the button, and onclick is a Javascript event handler that will
be fired when the button will be clicked.
Making a question widget
Now we will make a widget that asks the user a question.
Firstly you will need to style your widget, so let's make the text white using CSS
inside a style element as shown below:
<style type="text/css">
* {
color:white;
}
</style>
Simple isn't it? You can put that element wherever you want though for clarity you
might want to place it in the head of your widget's xhtml file.
The layout is pretty simple: you'll need a textbox, a button, and an HTML span in which to place the answer, and of course the question (in this instance, "What is The Answer to The Ultimate Question Of Life, the Universe, and Everything?").
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:jwl='http://joost.com/ns/jewel#'>
<head>
<title>Quizzzzzz!!!!</title>
<jwl:window width='300px' height='300px' align='right' pinbutton='visible'
autohide='false'/>
<style type="text/css">
* {
color: white;
}
</style>
</head>
<body>
<span>What is The Answer to The Ultimate Question Of Life, the Universe and Everything ?</span><br/>
<span id="RoF"></span><br/>
<jwl:textbox id="answer"/><jwl:button onclick="check()" label="Check!"/>
<script>
var title = document.getElementsByTagNameNS('http://joost.com/ns/jewel#', 'title')[0];
if (title) title.parentNode.removeChild(title);
function getJWLByNameId (name, id){
var eltArray = document.getElementsByTagNameNS('http://joost.com/ns/jewel#', name);
for (var i = 0; eltArray.length > i; i++) {
var elt = eltArray[i];
if (elt.getAttribute('id') == id) return elt;
}
return null;
}
function check () {
if (getJWLByNameId('textbox', 'answer').value == '42') {
document.getElementById('RoF').innerHTML = 'right';
}
else {
document.getElementById('RoF').innerHTML = 'wrong';
}
}
</script>
</body>
</html>
It will look like this:
You can download the JODA archive of that widget here
Next Steps
After making a minimalist widget you now know how to use JWL elements to make form controls and you also know how to script your widgets using Javascript. In next part you'll learn about the Engine and using XMLHttpRequest.
Start | Back | Next
TV Anywhere, anytime
