Back to XUL: JavaScript Logic
(Page 1 of 4 )
Welcome to the fourth article in our "Back to XUL" series. In this article, you will learn how to take the application you have been building and add program logic. By the time you finish reading, you will have a way to open files, display and modify their content, and save files.
So far, we have written the main interface XUL file, the accompanying DTD containing our English text strings, and registered them in the chrome registry through the use of descriptive RDF files. You may also have created your own icons or you may have used the ones I provided. For reference, your application should look a little like this:
Now it is time to bring the application to life with the program logic. You are going to create a JavaScript file called interface.js, which will reside in the main content folder along with the main interface file. To link the XUL and JS files, you just use the web-standard script element, which should follow the opening window element:
<script type="application/x-javascript" src="interface.js"/>
Our first task is to make the main editor window editable. This can be done on the onload event handler of the main window, making the application open in a "ready" state. At the top of a blank file, in your text editor of choice, enter the following function:
function makeEditable() {
var editor = document.getElementById('mainContent');
editor.makeEditable('html',false);
}
Then in the opening window element of the interface.xul file, add this event handler:
onload="makeEditable()"
This is not a JavaScript tutorial so I won’t explain everything in minute detail, however, I will give a brief explanation of everything. In the above function, we get the element that we want to affect, in this case the main editor window, and then call the makeEditable method on it. The HTML parameter is set to false, as not doing this will cause your editor to not be an editor, basically.
Next: Scripting the Menubar: Close, Exit and New >>
More XML Articles
More By Dan Wellman
