667
edits
Changes
no edit summary
overlay chrome://browser/content/browser.xul chrome://firstxpcomchrome/content/firefoxOverlay.xul
This says to overlay the XUL found in '''firefoxOverlay.xul''' with [http://lxr.mozilla.org/seamonkey/source/browser/base/content/browser.xul browser.xul]--the XUL file defining the browser's UI. In '''firefoxOverlay.xul''' we find the following overlay (emphasis added):
<pre>
</stringbundleset>
<menuitem id="firstxpcomchrome-hello" label="&firstxpcomchrome.label;"
oncommand="firstxpcomchrome.onMenuItemCommand(event);"/>
</menupopup>'''
</overlay>
</pre>
<pre>
<menuitem id="firstxpcomchrome-hello" label="&firstxpcomchrome.label;"
</pre>
this.firstxpcom = Components.classes["@senecac.on.ca/firstxpcom;1"]
var alertsService = Components.classes["@mozilla.org/alerts-service;1"]
In the former case we use '''createInstance''', which gives us a new unique instance. In the latter we use '''getService''', which returns a shared instance of an existing component (i.e., a Singleton). Unlike IFirstXpcom, which can be created many times by different callers, the nsIAlertsService is a shared component, because only one pop-up message at a time can be shown to the user.
== Creating the dialog ==
Now let's focus on the code to create and use the dialog box. We've seen XUL files a number of times used to define overlays. However, we haven't done any UI work with them yet. XUL does for chrome what HTML does for content, namely, it allows the developer to use a declarative XML syntax in order to define a UI, and then add functionality with JavaScript.
XUL is [http://developer.mozilla.org/en/docs/XUL well documented elsewhere], so we won't attempt to cover it here. Instead, we'll jump into creating a simple dialog using a handful of XUL widgets. Experimenting with XUL is greatly simplified by using Mark Finkle's [http://starkravingfinkle.org/blog/xul-explorer/ XUL Explorer] application (itself written in XUL and running on XULRunner). In all, we'll use the following XUL:
* [http://developer.mozilla.org/en/docs/XUL:dialog dialog]
* [http://developer.mozilla.org/en/docs/XUL:grid grid]
* http://developer.mozilla.org/en/docs/XUL:columns columns] and [http://developer.mozilla.org/en/docs/XUL:column column]
* [http://developer.mozilla.org/en/docs/XUL:row row]
* [http://developer.mozilla.org/en/docs/XUL:label label]
* [http://developer.mozilla.org/en/docs/XUL:textbox textbox]
Together they can be used to create '''firstxpcomchrome/content/firstxpcomdialog.xul''':
<pre>
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<dialog
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
id="firstXpcomDialog"
title="FirstXpcom Dialog"
buttons="accept,cancel"
buttonlabelaccept="OK"
buttonlabelcancel="Cancel">
<grid>
<columns><column/><column/></columns>
<rows>
<row align="center"><label value="Name:"/><textbox id="name"/></row>
<row align="center"><label value="Increase Value By:"/><textbox id="increase"/></row>
</rows>
</grid>
</dialog>
</pre>
This is a simple dialog, and creating a more elaborate one is left to the reader as an exercise. Now that the dialog's structure is complete, we need to add JavaScript to make it work with the rest of our extension.
== Coding the dialog ==
Let's return to the code we skipped in '''onMenuCommand''' related to the dialog:
onMenuItemCommand: function(e) {
result = this.showDialog();
// see if user clicked Cancel or OK
if (!result)
return;
this.total = this.firstxpcom.add(this.total, result.value);
this.firstxpcom.name = result.name;
...
},
showDialog: function() {
var params = {inn: {name:this.firstxpcom.name}, out: null};
window.openDialog("chrome://firstxpcomchrome/content/firstxpcomdialog.xul", "",
"chrome, dialog, modal, resizable=yes", params).focus();
return params.out
},
<pre>
<?xml version="1.0"?>
</dialog>
</pre>