Home arrow XML arrow Page 5 - Back to XUL: Completing the JavaScript Logic

Back to XUL: Completing the JavaScript Logic

The previous article saw us complete the File menu, making use of XPCOM to handle some of the more complex behaviors. This article will go on to discuss adding behavior to the two remaining menus, the Edit and Help menus.

Author Info:
By: Dan Wellman
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
February 13, 2006
  1. · Back to XUL: Completing the JavaScript Logic
  2. · Defining a Function
  3. · The Help Menu
  4. · The About Window
  5. · Making the Toolbar Work
  6. · Finishing up the Functions

print this article

Back to XUL: Completing the JavaScript Logic - Making the Toolbar Work
(Page 5 of 6 )

For some of the buttons that will simply mean adding a call to functions that we have already defined.  The Open and Save buttons can be enabled in this way. Just add oncommand handlers to the buttonOpen and buttonSave toolbarbuttons:

<toolbarbutton id="buttonOpen" image="open.gif"
tooltiptext="&openLabel;" oncommand="openFileDialog()"/>

<toolbarbutton id="buttonSave" image="save.gif"
tooltiptext="&saveLabel;" oncommand="saveFileDialog()"/>

Next is the New file button; for this, we simply call the closeFile() function that we have already defined.

Now for the buttons that add the XUL elements onto the document.  A simple document.write() call will not work in the context of an editor. What you need to do is get the editor (returned in the nsIPlaintextEditor interface) and call the insertText() method on it. 

You also need to consider the number of strings that you want to insert into the document.  We have a total of thirteen elements that we are able to insert using the editor button bar, so the simplest way we could achieve it would be to add thirteen functions, that each inserted one element.  This would mean rather a lot of code, however, and it can be cut down using parameter passing; with each menuitem of the button bar passing a parameter into one main function, and then using an if statement to decide which string to insert, based on the parameter passed in. 

Due to possibly a quirk of XPCOM or XUL, you cannot pass parameters to functions in the normal JavaScript way.  When you do this, the function expects a BarProp object instead of a normal string.  This is a special type of object used by Gecko to expose the visibility states of interface items.  There are only six BarProps defined (well, there are seven actually, but for some unknown reason one cannot be used) at this point, so our insert() function is only going to be able to take one of six different parameters passed by the menuitems.  In total then, we need three functions to handle our thirteen strings:

function insert(str) {

You first define the function and the parameter it is going to accept.  Next, define the text strings to be inserted into the document:

  var str1 = '<menubar id="">  </menubar>';
  var str2 = '<toolbar id="">  </toolbar>';
  var str3 = '<toolbarbutton id="">  </toolbarbutton>';
  var str4 = '<menuseparator/>';
  var str5 = '<textbox id=""/>';
  var str6 = '<listbox id="">  <listitem label=""/>  </listbox>';

We now get the Editor element in the required interface:

  var editor = document.getElementById('mainContent');
  editor = editor.getEditor(editor.contentWindow).QueryInterface

Finally, set up the if statement that inserts the text string based on the parameter and close the function:

  if (str == menubar) {
  } else if (str == toolbar) {
  } else if (str == directories) {
  } else if (str == locationbar) {
  } else if (str == statusbar) {
  } else if (str == scrollbars) {


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-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials