Creating dialogsFrom MozillaZine Knowledge Base(Difference between revisions)
Revision as of 19:52, 5 December 2004
Dialogs in MozillaWhenever you want to create a dialog in your application, use <dialog> (instead of usual <window>) as root element in the XUL file. This will:
Simple dialog codeThe following XUL code defines a simple dialog with two buttons, OK and Cancel (buttons="accept,cancel" attribute on dialog). <?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="..." title="..." buttons="accept,cancel" ondialogaccept="return onAccept();" ondialogcancel="return onCancel();"> <script src="chrome://..."/> <!-- Content --> </dialog> You need to implement onAccept and onCancel functions in your script. If they return anything but false, the dialog will be closed. Buttons in <dialog>PredefinedThere are six button types you can use in the buttons attribute of dialog. They are:
For each of these buttons you can set their label, accesskey and oncommand handler by adding buttonlabel<buttonname>, buttonaccesskey<buttonname> and ondialog<buttonname> attributes to the dialog element. For example, to add an an Apply button to your dialog, use the following code: <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="..." buttons="accept,cancel,extra1" ondialogaccept="onAccept();" ondialogextra1="onApply();" buttonlabelextra1="Apply" buttonaccesskeyextra1="A"> <!-- Content --> </dialog> You can even get the element object for any of predefined buttons with gDialog.getButton(dlgtype);, where gDialog is the <dialog> element and dlgtype is one of the six button types listed above. ExplicitIf you are not satisfied with the layout of predefined buttons in dialog, you can put explicit button elements in your XUL file and add a dlgtype attribute to them. Valid values for dlgtype are the six button types listed above. Be sure to use ondialog* attributes on dialog element instead of putting oncommand on the button with dlgtype, because button's oncommand is executed only when the button is pressed, and ondialog* handlers are executed for keyboard and other events too. Example: <?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" ondialogaccept="alert("ok!");"> <hbox> <label value="Hey!"/> <spacer flex="1"/> <vbox> <button dlgtype="accept"/> <button dlgtype="cancel"/> </vbox> </hbox> </dialog> Using <dialogheader>You can use the dialogheader element to add "headers" to windows. To get an idea of what it looks like, open Options (or Preferences) dialog in Firefox or Thunderbird. The header to the right of the sections buttons is made with <dialogheader>: <dialogheader title="General" description="whatever"/> Note, that you should only use this element in a <dialog>, because otherwise it may be not styled properly. (Although it seems to work in <window> as well). Links
|