My quest to build a basic desktop application using XUL continues. Last time I installed XULRunner and built a very simple, bare-bones test application. This time I want to add some of the things common to a desktop application UI:
- Windows and Dialogs
- Menus and Toolbars
- OS Common Dialogs
- Controls or Widgets
Windows
Each window or dialog should be created in it’s own XUL file. The XUL file may also contain other top-level declarations for CSS and DTD, which I will discuss in a moment.
...
Notice the references to CSS and DTD files. The CSS is used to apply formatting to elements, just as it would in HTML. The DTD is used to create entity references so strings for titles and labels are not stored directly in the XUL file. The window title is done this way in the above example. Also notice the element which is used to include the window's Javascript into the XUL file. Keeping CSS, DTD and Javascript out of the XUL file is considered a best practice. These references have more information on windows.
When you launch your XUL application, you'll notice that XULRunner gives your windows a default icon (top left corner on Windows). You'll most likely want to specify your own icons. Here is how to do it.
Menus and Toolbars
Most desktop applications are complex enough to require some sort of menu and/or toolbar to structure the application's available commands. XUL provides elements to support both menus and toolbars. Building on the simple window code, here is what XUL menus and toolbars look like:
...
Notice that I used entity-references for the menu and toolbar labels. The oncommand event is hooked up to Javascript, just like an onclick in HTML. The Javascript is contained in the main.js file. XUL has a way to centralize commands and event handlers for menus and toolbars that do the same thing, like open and save in the above example. You can add a
...
...
We can add images to the toolbar buttons through the CSS file. We could hard-code the images in the XUL file itself, but CSS is a better practice. Here's the CSS file:
/* global skin --------------------------------------------------- */
@import url(chrome://global/skin/);
/* toolbar ------------------------------------------------------- */
#open {
list-style-image: url(chrome://basicapp/skin/open.png);
-moz-box-orient: vertical;
}
#save {
list-style-image: url(chrome://basicapp/skin/save.png);
-moz-box-orient: vertical;
}
Of course, you need to make sure the PNG files are included in the application.
There is quite a bit of things XUL offers for application UI. More than I can fit into a single post, so I will wrap this post up and will continue looking at UI basics in the next one.
2 Replies to “Mozilla Platform – UI Basics [Part 1]”
Comments are closed.