Oct 26 2008
Passing parameters into a created dialog, and retrieving them on exit
This is going to be a pretty short tutorial today to help explain how to pass information to an window when opening it. The following is taken from PirateQuesting.
First, here is the function for entering the code when PirateQuest asks the user for verification.
function enterCode(url,imgsrc, func) {
var params = {in:imgsrc, out:null};
window.openDialog("chrome://piratequesting/content/codeDialog.xul", "",
"chrome, dialog, modal, resizable=no, status=no,
height=250, width=400", params).focus();
if (params.out) {
piratequesting.Code.submit(url,params.out,imgsrc,func);
}
else {
// User clicked cancel. stop here
}
}
So, as we can see in the first line the params variable stores a hash. A has is useful here as it allows us to easily pass more than one variable in without goign to the work of creating an object. There are actually much more significant differences between a hash and an object but, for this tutorial, know that it stores values in name:value pairs separated by commas and all of it enclosed by curly braces. The last element must not be followed by a comma.
Next, when we use openDialog we pass params into the dialog.
After the user has clicked OK, the value of params.out is checked. The condition will be true unless the value is still null or by some strange miracle taken on a value like ‘false’.
Now, let’s look at the code behind the dialog itself
function codeDialogOnLoad() {
// Use the arguments passed to us by the caller
document.getElementById("codeImage").setAttribute('src',
window.arguments[0].in);
}
// Called once if and only if the user clicks OK
function onOK() {
window.arguments[0].out = document.getElementById("codeValue").value;
return true;
}
Ok, so what do we have here? well, when the dialog first loads we call codeDialogOnLoad which then sets the image source on the dialog based on the value passed in params.in. Note that it is now referred to as window.arguments[0].in.
When the user presses OK, the value of an input box, codeValue, is assigned to params.out (a.k.a. window.arguments[0].out).
Last thing to look at is the codeDialog.xul
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="codeDialog" title="Enter the Code" ondialogaccept="return onOK();" buttonlabelaccept="Submit" onload="codeDialogOnLoad();" persist="screenX screenY width height"> <script type="application/x-javascript" src="chrome://piratequesting/content/codeDialog.js"/> <vbox> <label value="Enter the code shown below" /> <image id="codeImage" /> <textbox width="50" id="codeValue" /> </vbox> </dialog>
As you can see, codeDialog.xul is very simple and contains only three elements inside a vbox. This is really one of the simplest examples you could use and was chosen to illustrate how to simply and easily pass information into and out of a dialog