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:

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:

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

Oncommand="openDialog()"

Next: Scripting the Menubar: Save >>
 

More XML Articles
More By Dan Wellman

Comments On: Back to XUL: JavaScript Logic

· Hi everyone,This article is where things start to get interesting because it...   >>> Post your comment now!