XUL viewer creation tutorial

In this tutorial, we will create a very basic Java viewer allowing to show the content of a XUL script.

To keep it simple, we won't do anything fancy with closable tabs and so on . We will:

• Show a file chooser to selecte the XUL file at start
• Open the selected XUL file in a JFrame

General structure of the application

Our application will use only one class which will be a subclass of JFrame. We will have the following structure:

      public class BasicXULSample extends JFrame {

         public BasicXULSample(File file) {
          super("XUL SampleChoice");
          this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
          init(file);
        }

        private void init(File file) {
          // do all the javaXUL stuff here
        }

        public static final void main(String[] args) {
          // select the file
          BasicXULSample sample = new BasicXULSample(<the file>);
          sample.setVisible(true);
        }
      }      

Add the file chooser

Again it is not related to javaXUL and there is nothing special here:

      public class BasicXULSample extends JFrame {

         public BasicXULSample(File file) {
          super("XUL SampleChoice");
          this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
          init(file);
        }

        private void init(File file) {
          // do all the javaXUL stuff here
        }

        public static final void main(String[] args) {
          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) {
            BasicXULSample sample = new BasicXULSample(chooser.getSelectedFile());
            sample.setVisible(true);
          }
        }
      }      

Open the XUL file and add the result to the frame

All the management of the parsing of the XUL file and the associated runtime behavior is managed by the ScriptManager, which has a default implementation called DefaultScriptManager.

We need to:

• Create the ScriptManager
• Add the XUL file to the manager
• "Install" the content of the manager in the frame content. This will put the XUL content as a child of the JFrame, and ensure that the toobar and menubar are also added to the JFrame
• "Activate" the manager: this is only after the manager has been set as active that the events are handled by the scripts

This is done with the very simple code below:

      private void init(File file) {
        DefaultScriptManager manager = new DefaultScriptManager();

        manager.addXULScript(file);
        manager.install(this);
        manager.setActive(true);
      }

This is done. Now let's start our application and open a XUL script (you can use one of the examples in the samples directory). You should have the following result:

Improving the viewer

Make the XUL content scrollable

To have a scrollable content is simple. Just change:

      manager.install(this);

by:

      // the boolean value is set to true to specify that we want to put the content in a scroll pane
      manager.install(this, true);

Now we have the following result:

Handle errors and logs

We want to catch the errors in the scripts and show the print message in a integrated logger rather than on the System default output stream. We can perform:

      private void init(File file) {
        DefaultScriptManager manager = new DefaultScriptManager();
        manager.validateXULSchema(true);
        manager.setParserErrorReporter(new SwingParserErrorReporter());
        // we specify that we wil use a Swing exception listener to catch exceptions and show them in a specific error window
        manager.setScriptExceptionListener(new SwingExceptionListener());
        // we specify the script logger as the default script logger.      
        manager.setScriptLogger(new DefaultSwingScriptLogger());

        manager.addXULScript(file);
        // the first boolean value is set to true to specify that we want to put the content in a scroll pane 
        // the second boolean value is set to true to specify that we want to add a log area at the bottom of the window    
        // the last int value defines the number of lines of the logger        
        manager.install(this, true, true, 10);
        this.pack();
        manager.setActive(true);
      }

Now we have the following result: