Back to XUL: The Interface - The main content window
(Page 4 of 4 )
Finally, we come to the main content window. Compared with the rest of the elements, the code needed is extremely minimal:
<editor id="mainContent" editortype="text" type="content-
primary"/>
</window>
The editor element has more functionality than most of the rest of the application added together, yet it takes the least amount of code. Many XUL elements have a good deal of functionality built into them, which from a developer’s point of view is excellent because it cuts down dramatically on the size of the application and the time it takes to program.
The editortype can be either HTML or text; for this project, this is of course set to text. The type is set to content-primary to make it the default window; this is needed for closing the current editor window easily (which is discussed later in this series, in article four). Before you can use the editor as an editor, a point to remember is that it must be made editable first.
For reference, the entire keyset at the top of the code should now appear thus:
<keyset>
<key id="openKey" modifiers="control" key="O"/>
<key id="closeKey" modifiers="control" key="X"/>
<key id="saveKey" modifiers="control" key="S"/>
<key id="exitKey" modifiers="control" keycode="F"/>
<key id="copyKey" modifiers="control" key="C"/>
<key id="pasteKey" modifiers="control" key="V"/>
<key id="cutKey" modifiers="control" keycode="VK_DELETE"/>
<key id="contentsKey" modifiers="control" key="H"/>
<key id="aboutKey" modifiers="control" key="A"/>
</keyset>
The cut keyboard shortcut is declared using a non-letter reference, which is usually a VK_ prefix, followed by the full name of the key you want to use.
So this is all of the code we need to describe our application in full. Don’t expect it to do anything within Mozilla at this stage -- in fact, don’t even expect it to load. You need to create the DTD file containing the entity references before the file will even get parsed properly. Once this has been done, you can at least view the interface, but you still need to create the RDF file, register the new chrome in the chrome registry, and write the JavaScript logic before it will work.
In all honesty, we’ve taken some shortcuts here; most application developers would spend a lot more time in the planning phase. Those of you educated to degree level will probably have heard of JSP or Jackson Structured Programming (among other things). This is a method of programming whereby the logic of each of the many processes that occur within the application are mapped out visually using flow-chart style icons. Personally, I don’t think that level of detail is required for such a small program written in such an intuitive language. At the very least however, I’m sure that in a production environment the functions would first be written in pseudo-code. I left this out also because this is a tutorial and I’m basically telling you what to do.
It has been fairly easy so far to create an attractive interface, not unlike creating a simple web page. The next article will go on to show you how to get the interface registered with chrome, how to create the descriptive RDF file and where to put the DTD to generate all of the display text.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
