667
edits
Changes
no edit summary
[[Dive into Mozilla]] > [[Dive into Mozilla Day 5]] > Adding Chrome to FirstXpcom Lab
'''IN PROGRESS...'''
=Introduction=
== firefoxOverlay.xul ==
<pre>
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://firstxpcomchrome/skin/overlay.css" type="text/css"?>
<!DOCTYPE overlay SYSTEM "chrome://firstxpcomchrome/locale/firstxpcomchrome.dtd">
<overlay id="firstxpcomchrome-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script src="overlay.js"/>
<stringbundleset id="stringbundleset">
<stringbundle id="firstxpcomchrome-strings" src="chrome://firstxpcomchrome/locale/firstxpcomchrome.properties"/>
</stringbundleset>
<menupopup id="menu_ToolsPopup">
<menuitem id="firstxpcomchrome-hello" label="&firstxpcomchrome.label;"
oncommand="firstxpcomchrome.onMenuItemCommand(event);"/>
</menupopup>
</overlay>
</pre>
== overlay.js ==
<pre>
var firstxpcomchrome = {
total: 0,
firstxpcom: null,
onLoad: function(e) {
// initialization code
this.initialized = true;
this.strings = document.getElementById("firstxpcomchrome-strings");
this.firstxpcom = Components.classes["@senecac.on.ca/firstxpcom;1"]
.createInstance(Components.interfaces.IFirstXpcom);
this.firstxpcom.name = "First XPCOM";
},
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
},
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;
// Use the Alerts Service to display the results to the user.
var alertsService = Components.classes["@mozilla.org/alerts-service;1"]
.getService(Components.interfaces.nsIAlertsService);
alertsService.showAlertNotification(null, this.firstxpcom.name, this.total,
false, "", null);
},
};
window.addEventListener("load", function(e) { firstxpcomchrome.onLoad(e); }, false);
</pre>
== 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"
ondialogaccept="return onOK();"
onload="onLoad();">
<script>
function onLoad() {
// Get the values passed in via params.inn
document.getElementById("name").value = window.arguments[0].inn.name;
document.getElementById("increase").focus();
}
function onOK() {
// These variables aren't strictly necessary, but are included for
// improved readability. They hold the textbox values.
var nameValue = document.getElementById("name").value
var increaseValue = document.getElementById("increase").value
// Package-up the two "return" values so they can be accessed via params.out
window.arguments[0].out = {name:nameValue, value:increaseValue};
return true;
}
</script>
<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>
== chrome.manifest ==
content firstxpcomchrome content/
locale firstxpcomchrome en-US locale/en-US/
skin firstxpcomchrome classic/1.0 skin/
overlay chrome://browser/content/browser.xul chrome://firstxpcomchrome/content/firefoxOverlay.xul
=Reflections=
=Resources=
* [http://developer.mozilla.org/en/docs/Extensions Extensions on MDC]
* [http://kb.mozillazine.org/Extension_development Extension Development on Mozillazine]
* [http://developer.mozilla.org/en/docs/XUL_Event_Propagation XUL Event Propagation]
'''IN PROGRESS...'''
=Introduction=
== firefoxOverlay.xul ==
<pre>
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://firstxpcomchrome/skin/overlay.css" type="text/css"?>
<!DOCTYPE overlay SYSTEM "chrome://firstxpcomchrome/locale/firstxpcomchrome.dtd">
<overlay id="firstxpcomchrome-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script src="overlay.js"/>
<stringbundleset id="stringbundleset">
<stringbundle id="firstxpcomchrome-strings" src="chrome://firstxpcomchrome/locale/firstxpcomchrome.properties"/>
</stringbundleset>
<menupopup id="menu_ToolsPopup">
<menuitem id="firstxpcomchrome-hello" label="&firstxpcomchrome.label;"
oncommand="firstxpcomchrome.onMenuItemCommand(event);"/>
</menupopup>
</overlay>
</pre>
== overlay.js ==
<pre>
var firstxpcomchrome = {
total: 0,
firstxpcom: null,
onLoad: function(e) {
// initialization code
this.initialized = true;
this.strings = document.getElementById("firstxpcomchrome-strings");
this.firstxpcom = Components.classes["@senecac.on.ca/firstxpcom;1"]
.createInstance(Components.interfaces.IFirstXpcom);
this.firstxpcom.name = "First XPCOM";
},
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
},
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;
// Use the Alerts Service to display the results to the user.
var alertsService = Components.classes["@mozilla.org/alerts-service;1"]
.getService(Components.interfaces.nsIAlertsService);
alertsService.showAlertNotification(null, this.firstxpcom.name, this.total,
false, "", null);
},
};
window.addEventListener("load", function(e) { firstxpcomchrome.onLoad(e); }, false);
</pre>
== 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"
ondialogaccept="return onOK();"
onload="onLoad();">
<script>
function onLoad() {
// Get the values passed in via params.inn
document.getElementById("name").value = window.arguments[0].inn.name;
document.getElementById("increase").focus();
}
function onOK() {
// These variables aren't strictly necessary, but are included for
// improved readability. They hold the textbox values.
var nameValue = document.getElementById("name").value
var increaseValue = document.getElementById("increase").value
// Package-up the two "return" values so they can be accessed via params.out
window.arguments[0].out = {name:nameValue, value:increaseValue};
return true;
}
</script>
<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>
== chrome.manifest ==
content firstxpcomchrome content/
locale firstxpcomchrome en-US locale/en-US/
skin firstxpcomchrome classic/1.0 skin/
overlay chrome://browser/content/browser.xul chrome://firstxpcomchrome/content/firefoxOverlay.xul
=Reflections=
=Resources=
* [http://developer.mozilla.org/en/docs/Extensions Extensions on MDC]
* [http://kb.mozillazine.org/Extension_development Extension Development on Mozillazine]
* [http://developer.mozilla.org/en/docs/XUL_Event_Propagation XUL Event Propagation]