The find files dialog so far looks quite good. We haven't cleaned it up much but we have created a simple user interface easily. However, there is one main thing that the find files dialog is missing. It doesn't DO anything.
To make the find files dialog functional, we need to add some scripts which will execute when various things happen. We would want to add a script to handle the Find button, the Cancel button and to handle each menu command. We write this using JavaScript functions much in the same way as HTML.
If you know HTML, you may be able to guess how we make the buttons and other XUL elements respond to events. We can just add handlers such as onclick on the elements. Then we provide a script which executes the function.
You can use the script tag from HTML to include scripts in XUL files. You can embed the script code directly in the XUL file in between the opening and closing script tag but it is much better to include code in a separate file. Your XUL window will load faster. It's also better as XUL (and XML) would otherwise try to parse the script as if it was part of the XUL itself. Characters such as less-than (<) would cause problems.
Instead, we use the src attribute to link in an external script file.
Let's add a script to the find file dialog. Although it does not matter what the script file is called, usually it would be the same as the XUL file with a js extension. In this case, findfile.js will be used. Add the line below just after the opening window tag and before any elements.
<script src="findfile.js"/> |
We'll create the script file later when we know what we want to put it in it. We'll define some functions in the file and we can call them in event handlers.
Event handlers in XUL are done much in the same way as they are in HTML. The same event handlers are available plus some additional ones. To handle an event, simple add one of the attributes in the table below to an element. There are a number of other ones you can add also but we'll see those in later sections.
| onclick | Called when the mouse is pressed and released on an element. You would use this event to respond to when the user clicks on buttons. You can use it on any element however. | ||
| onmousedown | Called when a mouse button is pressed down on an element. The event handler will be called as soon as a mouse button is pressed, even if it hasn't been released yet. | ||
| onmouseup | Called when a mouse button is released on an element | ||
| onmouseover | Called when the mouse pointer is moved onto an element. You could use this to highlight the element, however CSS provides a way to do this automatically so you shouldn't do it with an event. You might, however, want to display some help text on a status bar. | ||
| onmousemove | Called when the mouse pointer is moved while over an element. The event will be called many times if the user moves the mouse so you should try to avoid using this handler if you can. | ||
| onmouseout | Called when the mouse pointer is moved off of an element. You might then unhighlight the element or remove status text. | ||
| oncommand | This event is called when a menu item is selected. Add this handler to the menuitem element. You should use this handler for menus rather than handling the mouse yourself as the user might select the menu item with the mouse or by pressing the access key or keyboard shortcut. | ||
| onkeypress | Called when a key is pressed and released when an element has the focus. You might use this to add extra shortcut key handling or to check for allowed characters in a field. We'll see how to create keyboard shortcuts in a later section. | ||
| onkeydown | Called when a key is pressed down while an element has the focus. Note that the event will be called as soon as the key is pressed, even if it hasn't been released. You probably won't use this event very often as the other key events are more suitable. | ||
| onkeyup | Called when a key is released while an element has the focus. | ||
| onfocus | Called when an element receives the focus either by clicking with the mouse or by using the TAB key. You might use this event to highlight the element or display some help text. | ||
| onblur | Called when an element loses the focus either by a user clicking on another element or by pressing TAB. You might you this to verify information or close popups. It is better to verify fields when the OK button is clicked however. | ||
| onload | Called on a window when it first opens. You would usually add this event handler to a window tag in order to initialize a window. This would allow fields could be set to certain values for the user. | ||
| onunload | Called when the window is closing. You would usually add this to the window tag to record information before the window closes. | ||
The onclick handler works in the same way as its HTML counterpart. You can put code here which is executed when the user clicks on the element. This is typically used for buttons but can be used on almost any element.
An onclick handler can be placed on the Find and Cancel buttons in the file files dialog. Clicking the Find button should start the search. Since we aren't going to implement this part, we'll leave it out. However, clicking the Cancel button should close the window. The code below shows how to do this. While we're at it, let's add the same code to the Close menu item.
<menuitem value="Close" accesskey="c" oncommand="window.close();"/>
...
<button id="cancel-button" class="dialog" value="Cancel"
style="width: 8ex" onclick="window.close();"/>
|
Two handlers have been added here. The oncommand handler was added to the Close menu item. By using this handler, the user will be able to close the window by clicking the menu item or by selecting it with the keyboard. The onclick was added to the Cancel button. This was pretty simple and would be exactly how we would do this in HTML.
Similarly, we can respond to other mouse events and keyboard presses using the mouse and key event handlers. If you do not specify an event handler for a particular event, the element will handle it itself. This is usually what you want to have happen. Most XUL elements will have their own responses to mouse and keyboard events. For example, menuitems will respond to their access keys and popups will appear at the right time.
You do not have to put the event handler on the element that you want to respond to the event. You can also put on any parent element above the element. For example, instead of putting the event handler on the menuitem, you could put the handler on the menu element.
Whenever an event such as a mouse click occurs, the event is passed first to the element the event occurs to, and, if that element does not handle the event, it 'bubbles' up to the parent element. If the parent does not handle it, the event bubbles up to the next higher parent. Eventually, the window is reached. If nothing handles the event, default processing is performed.
You can handle an event by putting an event handler such as onclick or onkeydown on an element. The handler should return true if the event has been handled or false if the event has not been handled. By returning false, you can do something but still have the default processing occur. This process is similar to how HTML events are handled.
You can get the element that the event was originally passed to, by getting the target property of the event object. For example, if you add the following event handler to a window, an alert box will appear whenever you click on an element in the window. The alert will display which element was clicked on.
<window
onclick="alert(event.target.tagName); return false;"
.
.
.
>
|
(Next) Next, we'll look at using the Document Object Model with XUL elements.