Tutorials > " . "XUL Tutorial"; $pagetitle="2.1 - Creating a Window"; $customsidebar = "xultu-sidebar.php"; include "header.php"; ?>
We're going to be creating a simple find files utility throughout this tutorial. First, however, we should look at the basic syntax of a XUL file.
A XUL file can be given any name but it really should have a .xul extension. The simplest XUL file has the following structure:
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="Find Files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> ... </window>
This window will not do anything since it doesn't contain any UI elements. Those will be added in the next section. Here is a line by line breakdown of the code above:
In order to open a XUL window, there are several methods that can be used. If you are only in the development stage, you can just type the URL (whether a chrome:, file: or other URL type) into the location bar in a Mozilla browser window. You should also be able to double-click the file in your file manager, assuming that XUL files are associated with Mozilla. The XUL window will appear in the browser window as opposed to a new window, but this is often sufficient during the early stages of development.
where the flags contains the flag "chrome".
window.open("chrome://navigator/content/navigator.xul", "bmarks", "chrome,width=600,height=300");
Let's begin by creating the basic file for the find file dialog. Create a file called findfile.xul and put it in a new directory somewhere. It doesn't matter where you put it, but the chrome/findfile/content/findfile directory is a suitable place. Add the XUL template shown at the top of this page to the file and save it.
You can use the command-line parameter '-chrome' to specify the XUL file to open when Mozilla starts. If this is not specified, the default window open will open. (Usually the browser window.) For example, we could open the find files dialog with either of the following:
mozilla -chrome chrome://findfile/content/findfile.xul
mozilla -chrome resource:/chrome/findfile/content/findfile/findfile.xul
If you run this command from a command-line (assuming you have one on your platform), the find files dialog will open by default instead of the Mozilla browser window. Of course, because we haven't put anything in the window, nothing will appear to have happened.
To see the effect though, the following will open the bookmarks window:
mozilla -chrome chrome://communicator/content/bookmarks/bookmarksManager.xul
The '-chrome' argument doesn't give the file any additional privileges. Instead, it causes the specified file to open as a top-level window without any browser chrome, such as the address field or menu. Only chrome URLs have additional privileges.
(Next) In the next section, we will add some buttons to the window.