Back to XUL: Completing the JavaScript Logic - Making the Toolbar Work
(Page 5 of 6 )
For some of the buttons that will simply mean adding a call to functions that we have already defined. The Open and Save buttons can be enabled in this way. Just add oncommand handlers to the buttonOpen and buttonSave toolbarbuttons:
<toolbarbutton id="buttonOpen" image="open.gif"
tooltiptext="&openLabel;" oncommand="openFileDialog()"/>
<toolbarbutton id="buttonSave" image="save.gif"
tooltiptext="&saveLabel;" oncommand="saveFileDialog()"/>
Next is the New file button; for this, we simply call the closeFile() function that we have already defined.
Now for the buttons that add the XUL elements onto the document. A simple document.write() call will not work in the context of an editor. What you need to do is get the editor (returned in the nsIPlaintextEditor interface) and call the insertText() method on it.
You also need to consider the number of strings that you want to insert into the document. We have a total of thirteen elements that we are able to insert using the editor button bar, so the simplest way we could achieve it would be to add thirteen functions, that each inserted one element. This would mean rather a lot of code, however, and it can be cut down using parameter passing; with each menuitem of the button bar passing a parameter into one main function, and then using an if statement to decide which string to insert, based on the parameter passed in.
Due to possibly a quirk of XPCOM or XUL, you cannot pass parameters to functions in the normal JavaScript way. When you do this, the function expects a BarProp object instead of a normal string. This is a special type of object used by Gecko to expose the visibility states of interface items. There are only six BarProps defined (well, there are seven actually, but for some unknown reason one cannot be used) at this point, so our insert() function is only going to be able to take one of six different parameters passed by the menuitems. In total then, we need three functions to handle our thirteen strings:
function insert(str) {
You first define the function and the parameter it is going to accept. Next, define the text strings to be inserted into the document:
var str1 = '<menubar id=""> </menubar>';
var str2 = '<toolbar id=""> </toolbar>';
var str3 = '<toolbarbutton id=""> </toolbarbutton>';
var str4 = '<menuseparator/>';
var str5 = '<textbox id=""/>';
var str6 = '<listbox id=""> <listitem label=""/> </listbox>';
We now get the Editor element in the required interface:
var editor = document.getElementById('mainContent');
editor = editor.getEditor(editor.contentWindow).QueryInterface
(Components.interfaces.nsIPlaintextEditor);
Finally, set up the if statement that inserts the text string based on the parameter and close the function:
if (str == menubar) {
editor.insertText(str1);
} else if (str == toolbar) {
editor.insertText(str2);
} else if (str == directories) {
editor.insertText(str3);
} else if (str == locationbar) {
editor.insertText(str4);
} else if (str == statusbar) {
editor.insertText(str5);
} else if (str == scrollbars) {
editor.insertText(str6);
}
}
Next: Finishing up the Functions >>
More XML Articles
More By Dan Wellman
