Application tutorial

In this tutorial, we will create a simple application with:

• A "File" menu with three options:
• "Open" to open a text file
• "Save" to save a text file
• "Exit" to exit the application
• An editable textbox allowing to edit the text of the last opened file

Create the viewer

Contrary to the first viewer creation tutorial, we will override the AbstractXULViewer class to create our viewer. The code will be very simple:

      public class MyViewer extends AbstractXULViewer {

        public MyViewer() {
          super("XUL Viewer");
        }

        public static final void main(String[] args) {
          // not specific code to get the XUL file
          JFileChooser chooser = new JFileChooser("Select XUL file");
          chooser.setFileSelectionMode(JFileChooser.FILES_ONLY);
          chooser.setDialogType(JFileChooser.OPEN_DIALOG);
          chooser.setCurrentDirectory(new File(System.getProperty("user.dir")));
          int ret = chooser.showOpenDialog(null);
      
          if (ret == JFileChooser.OPEN_DIALOG) {
            MyViewer viewer = new MyViewer();
            // this set the script and install the manager in the current frame   
            viewer.setXULScript(chooser.getSelectedFile());
            viewer.setVisible(true);
            viewer.pack();
            // this will set the underlying SQcriptManager as active
            viewer.setActive(true);
          }
        }
      }      

In this case, we also want to have an "Exit" option to exit the application. To be able to do this in our script, we will need to set the value of the ALLOW_EXIT property to true or the scripts won't be able to trigger a System.exit(0). This is very easy to do:

      public MyViewer() {
        super("XUL Viewer");
        manager.setProperty(ScriptManagerProperties.ALLOW_EXIT, true);
      }      

Create the widgets tree

The GUI contains:

• The "File" menu is a menubar widget
• The editable textbox is is a textbox widget

We have the following widgets tree:

      <window title="XUL Application" width="400" height="400" resizable="false"
      xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
         <menubar>      
            <menu label="File">
               <menupopup>
                  <menuitem id="open" label="Open"/>
                  <menuitem id="save" label="Save"/>
                  <menuitem id="exit" label="Exit"/>
               </menupopup>
            </menu>
         </menubar>        
         <textbox id="text" multiline="true" value="" cols="30" rows="20"/>  
      </window>      

Notice that we added the resizable="false" attribute to our window to prevent the application window to be resized in this case.

The GUI is now complete, but clicking on the options won't do anything for the moment.

Add the actions

We will add oncommand actions for our options, and implement each of the action with an alert.

      <window title="XUL Application" width="400" height="400" resizable="false" 
      xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
         <script>
      function open() {
        alert("Open");
      }
      function save() {
        alert("Save");    
      }     
      
      function exit() {
        alert("Exit");
      } 
         </script>
         <menubar>      
            <menu label="File">
               <menupopup>
                  <menuitem id="open" label="Open" oncommand="open()"/>
                  <menuitem id="save" label="Save" oncommand="save()"/>
                  <menuitem id="exit" label="Exit" oncommand="exit()"/>
               </menupopup>
            </menu>
         </menubar>        
         <textbox id="text" multiline="true" value="" cols="30" rows="20"/>  
      </window>      

Now if we click on an option, an alert popup appear:

Implement the actions

Implement the Exit action

The "Exit" action is the most simple to implement (See Calling dispose and exit). Just do:

      function exit() {
        helper.exit();
      }       

Implement the Open action

To implement the "Open" action, we need to:

• Open a File picker to allow the user to select an existing file
• Get the text content of the file
• Set the value of the textbox with this text content

We have the following code:

      function open() {
         // create a FilePicker
        var filepicker = new FilePicker();
        var parent = document.getElementById("open");      
        filepicker.init(parent, "Select File", "modeOpen");
        // show the FilePicker
        var ret = filepicker.show();
        if (ret == filepicker.returnOK) { 
          // get the file associated text
          var text = helper.getText(filepicker.file);
          // use the text to set the value of the textbox
          var textbox = document.getElementById("text");
          textbox.value = text;
        }
      }      

Implement the Save action

To implement the "Save" action, we need to:

• Open a File picker to allow the user to select a File
• Get the text value of the textbox
• Write the file content with this text value

We have the following code:

      function save() {
         // create a FilePicker      
        var filepicker = helper.createFilePicker();
        var parent = document.getElementById("save");
        filepicker.appendFilters("The XUL files", "*.xul");
        filepicker.init(parent, "Select File", "modeSave"); 
        // show the FilePicker      
        var ret = filepicker.show();
        if (ret == filepicker.returnOK) { 
          // get the value of the textbox
          var textbox = document.getElementById("text");            
          var text = textbox.value;
          // use the value to write the file
          helper.setText(filepicker.file, text);
        }      
      }