Home arrow XML arrow Page 3 - 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 - Scripting the Menubar: Open
(Page 3 of 4 )

So now the File menu is fully coded except for the open and save actions.  As I said before, these actions will need to make use of XPCOM (the cross-platform component object model) in order to function correctly.  We are going to conjure up from nowhere an instance of the Windows OS specific file open or file save dialog box and allow the user to either pick a file for opening, or choose a location for saving files.  XPCOM consists of a series of Mozilla components, and each of these components use a variety of interfaces to perform certain functions.  We are going to need to generate instances of several interfaces to execute the desired function, and so will need to first implement the required components.

We begin by opening the function definition and creating two constants:

function openDialog()  {
  const CC = Components.classes, CI = Components.interfaces;

Creating these constants is just a shortcut to save on typing and the size of the function.   Next, you need to set a variable to hold the component and interface instance:

  var fp = CC["@mozilla.org/filepicker;1"].createInstance(CI.nsIFilePicker);

The fp is short for filepicker by the way.  We then call the init method to initialize the dialog box and provide some parameters that control its appearance:

  fp.init(window, "Pick a file to open", CI.nsIFilePicker.modeOpen);

Filters can be used to tell the dialog which file types to use in the Files of Type listbox inherent in the dialog:

  fp.appendFilters(CI.nsIFilePicker.filterAll | CI.nsIFilePicker.filterText | CI.nsIFilePicker.filterXUL | CI.nsIFilePicker.filterXML | CI.nsIFilePicker.filterHTML);

To actually display the dialog on screen, you simply set a new variable and call the show(); method:

  var rv = fp.show();

This will render the open file dialog box.  We encase the next section within an if loop to ensure that the rest of the function is only executed if the user clicks OK in the open dialog:

  if (rv == CI.nsIFilePicker.returnOK) {

The file that a user selects is held in the file function and is set to a variable simply called file:

  var file = fp.file;

To handle the file that is selected, we now need to implement another of Mozilla’s components, the io-service component:

  var ios = CC["@mozilla.org/network/io-service;1"].getService(CI.nsIIOService);

The ios variable will now hold the required component and interface, however, we will also need another interface to open a file: the nsIFileProtocolHandler.  This interface provides the method that we need to convert the file that was selected into a URL string, which is used to open the file within the application.  We can get this using the QueryInterface method, specifying which interface we want:

  var fileHandler = ios.getProtocolHandler("file").QueryInterface(CI.nsIFileProtocolHandler);

To get the URL, call the getURLSpecFromFile method on the variable holding the file:

  var URLSpec = fileHandler.getURLSpecFromFile(file);

We now need to specify where we are going to put the file in this case, it is into the editor:

  var editor = document.getElementById("mainContent");

Finally, we use the loadURI method to open the file and close the if statement and function:

  editor.webNavigation.loadURI(URLSpec, 0, null, null, null);

The webNavigation function provides the method we need and is available to all interfaces.  Add the caller to the Open  menuitem:


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