Button and Javascript

We will create an example of button for our interface and will assign event handlers to it so that it answers actions of user.

The button tag

XUL has a component to draw a button, it is the button tag. And we display a text in this button as we already saw, with the tag description:

<button>
    <description value="Submit" />
</button>

Main attributes of button

label: to display a text on the button, one can also use simply the label attribute:

<button label="Submit" />

image: in the same manner a text is assigned, one can assign the URL of an image to be displayed on the button:

<button image= "save.gif"/>

type: by default, if no type is specified, it is an ordinary button. But it is possible to create other types, such as checkbox to add a check box or radio to add a rounded radio button, and others again.

oncommand: It is an event handler which makes it possible to assign the action which must be executed when one clicks on the button.

Using Javascript

One can assign a JavaScript command with the attribute onCommand:

onCommand="alert('click');"

Note that inside the assigned string, one uses simple quotes, since double quotes are already used to delimit the string.

One can also use a JavaScript function:

<window>
<script>
function clicking(txt)
{
   alert(txt)
}
</script>
<button onCommand="clicking('click');" />
</window>

One thus saw all that is necessary to know to be able to add buttons to our graphic interface.

• Demo code.zip.