Graphical User Interface

Note

The GUI code is new and still in flux. There may be changes to it.

Like any editor, Mozile can present the available editing commands as icons for the user to click and as keyboard shortcuts. It isn't necessary to include a GUI for Mozile, but in most cases a GUI will be useful. Mozile 0.8 is designed to easily allow different GUI modules to be used, presenting different ways for the user to interact with the editor. At this point, however, only one GUI has been implemented: the HTML Toolbar interface mozile.gui.htmlToolbar.

Because Mozile is restricted to the web page that it is loaded in, any graphical interface that it presents must be part of the web page. The HTML Toolbar interface uses CSS and XHTML to display a small toolbar, and keep it positioned above the page contents at the top of the browser's document window. It provides buttons and menus, like most toolbars.

The HTML Toolbar is an instance of the abstract mozile.gui.Factory class. The mozile.event.handle() function passes events to the mozile.gui.update() function, which calls the update() method of whichever GUI Factory is assigned to mozile.gui.factory. You can change the GUI factory by calling destroy() on the current factory, and then setting mozile.gui.factory to the new factory.

Note

As of the writing of this document, the destroy() method hasn't been implemented.

The update() method takes the event and does whatever is needed to update the interface. It has access to the event object, which includes information about the target node. It can use the target node to lookup the appropriate RNG element, and discover its commands.

In the case of the HTML Toolbar interface, a new button is created for each command or command group. Command groups are rendered as menus, with menu items which may themselves be menus. The buttons are built using HTML elements, and are stored with the commands. The buttons are added and removed from the toolbar element as they are needed. CSS is used to display the toolbar at the top of the window.

The HTML Toolbar is designed to show only those commands which belong to the target node's RNG element, and some global commands like Undo and Redo. Another interface, with more space to display information, could display commands belonging to the ancestors of the target node as well.