Home arrow XML arrow Back to XUL: JavaScript Logic

Back to XUL: JavaScript Logic

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.

Author Info:
By: Dan Wellman
Rating: 4 stars4 stars4 stars4 stars4 stars / 6
February 06, 2006
  1. · Back to XUL: JavaScript Logic
  2. · Scripting the Menubar: Close, Exit and New
  3. · Scripting the Menubar: Open
  4. · Scripting the Menubar: Save

print this article

Back to XUL: JavaScript Logic
(Page 1 of 4 )

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');

Then in the opening window element of the interface.xul file, add this event handler:


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.

blog comments powered by Disqus

- Open XML Finally Supported by MS Office
- XML Features Added to Two Systems
- Using Regions with XSL Formatting Objects
- Using XSL Formatting Objects
- More Schematron Features
- Schematron Patterns and Validation
- Using Schematron
- Datatypes and More in RELAX NG
- Providing Options in RELAX NG
- An Introduction to RELAX NG
- Path, Predicates, and XQuery
- Using Predicates with XQuery
- Navigating Input Documents Using Paths
- XML Basics
- Introduction to XPath

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials