Home arrow XML arrow Page 4 - 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: Save
(Page 4 of 4 )

Next is the very similar save file dialog, which is basically a different implantation of the same underlying structure used in the open file dialog.  Generating an instance of the save file dialog is almost identical to the open dialog. All that is different is the string displayed in the dialog's title bar and the interface mode:

function saveDialog() {
  const CC = Components.classes, CI = Components.interfaces;
  var fp = CC["@mozilla.org/filepicker;1"].createInstance(CI.nsIFilePicker);
  fp.init(window, "Pick a location to save to",
  fp.appendFilters(CI.nsIFilePicker.filterAll | CI.nsIFilePicker.filterText | CI.nsIFilePicker.filterXUL |
CI.nsIFilePicker.filterXML | CI.nsIFilePicker.filterHTML);
  var rv = fp.show();

We still encase the remainder of the function in an if loop so that it is executed on the OK button click, and we still get the file from fp.file.  This however is where the similarities end:

if (rv == CI.nsIFilePicker.returnOK) {
    var file = fp.file;
    var foStream = CC["@mozilla.org/network/file-output-

This time, we implement the NSIFileOutputStream interface from the ["@mozilla.org/network/fileOutputStream;1"] component.  In order to save data to a file, you need to create an output stream and pass the data to be saved into it.  Once we have set the interface to a variable, we call the initialize method:

foStream.init(file, 0x02 | 0x08, 0664, null);

The first parameter is what we want to initialize, in this case the file.  The next parameter states that the file should be in write mode, or if it does not exist, it should be created.  The third parameter deals with permissions, and the final parameter is always set to null as it is not yet supported.

Next, we want to get the content of our editor. To do this, you first need to get the editor itself, then the contents of the editor:

    var text = document.getElementById('mainContent');
    var text = data.contentDocument.body.textContent;

The text in your editor is actually HTML, so to get the actual words that are typed to save correctly, you need to get them from the <body> element, which the second line above will do.

All you need to do now is write the data and close the output stream:

    foStream.write(text, text.length);

You now have a way of opening files, displaying (and modifying) their content, and saving files.  Our File menu is now completely scripted with all of the required behaviors, although there is still more work to be done. We still need to code the Edit menuitems, again using XPCOM to handle the clipboard actions, and we still need to create our help window and script the calls to open it.  All of this and more will be discussed in the next article.   

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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