Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Well, first, if you want to learn XUL, I would highly recommend getting the <a href="https://developer.mozilla.org/en-US/docs/XUL_Explorer" rel="nofollow noreferrer">XUL Explorer</a>, which is an interactive tool you can use to build snippets and preview what you are designing.</p> <p>This will come in handy if you've never worked in XUL before, as though it looks a <em>lot</em> like HTML, it's not the same lineup of elements and approaches. It really lives a bit above where HTML does, in that it's used to build desktop apps, which can be used to build things such as:</p> <p><a href="https://developer.mozilla.org/en-US/docs/tag/tools" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/tag/tools</a></p> <p>The majority of those programs you can download the source for and look through it just like you would a list of documents. You'll also notice several extensions, such as the Firefox Web Developer add-on. Here's the <a href="https://github.com/chrispederick/web-developer/tree/master/source" rel="nofollow noreferrer">source</a>, and here's <a href="https://github.com/chrispederick/web-developer/tree/master/source/firefox/xul" rel="nofollow noreferrer">some of the XUL files</a>. Which happens to include a <code>dialogs</code> directory, and a <a href="https://github.com/chrispederick/web-developer/blob/master/source/firefox/xul/dialogs/message.xul" rel="nofollow noreferrer"><code>message.xul</code></a>:</p> <pre><code>&lt;?xml version="1.0"?&gt; &lt;?xml-stylesheet href="chrome://global/skin/"?&gt; &lt;?xml-stylesheet href="chrome://web-developer/content/dialogs/style-sheets/message.css"?&gt; &lt;!DOCTYPE dialog SYSTEM "chrome://web-developer/locale/dialogs/message.dtd"&gt; &lt;dialog buttons="accept" id="web-developer-message-dialog" onload="WebDeveloper.Message.initialize()" title="&amp;webdeveloper.message.title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt; &lt;script src="chrome://web-developer/content/common/common.js"/&gt; &lt;script src="chrome://web-developer/content/dialogs/javascript/message.js"/&gt; &lt;vbox id="web-developer-message-details"&gt; &lt;description id="web-developer-message"/&gt; &lt;description id="web-developer-more-information" value="&amp;webdeveloper.more.information;" onclick="WebDeveloper.Message.moreInformation()" class="url"/&gt; &lt;/vbox&gt; &lt;/dialog&gt;​ </code></pre> <p><a href="https://developer.mozilla.org/en-US/docs/XUL/dialog" rel="nofollow noreferrer">So you can use a <code>Dialog</code> for this</a>, which let's you create different types of prompts. For instance, I made the following going through a tutorial some time ago:</p> <pre><code>&lt;?xml version="1.0"?&gt; &lt;?xml-stylesheet href="chrome://global/skin/" type="text/css"?&gt; &lt;dialog id="myDialog" title="My Dialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="window.sizeToContent();" buttons="accept,cancel" buttonlabelaccept="Set Favorite" buttonaccesskeyaccept="S" ondialogaccept="return doSave();" buttonlabelcancel="Cancel" buttonaccesskeycancel="n" ondialogcancel="return doCancel();"&gt; &lt;script&gt; function doSave(){ //doSomething() return true; } function doCancel(){ return true; } &lt;/script&gt; &lt;dialogheader title="My dialog" description="Example dialog"/&gt; &lt;groupbox flex="1"&gt; &lt;caption label="Select favorite fruit"/&gt; &lt;radiogroup&gt; &lt;radio id="1" label="Oranges because they are fruity"/&gt; &lt;radio id="2" selected="true" label="Strawberries because of color"/&gt; &lt;radio id="3" label="Bananna because it pre packaged"/&gt; &lt;/radiogroup&gt; &lt;/groupbox&gt; &lt;/dialog&gt; </code></pre> <p>Which looks like:</p> <p><img src="https://i.stack.imgur.com/rsrhg.png" alt="enter image description here"></p> <p>So you really have a lot of options, even, if you want, <a href="https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsIPromptService" rel="nofollow noreferrer"><code>nsIPromptService</code></a>...</p> <pre><code>var prompts = Components.classes["@mozilla.org/embedcomp/prompt-service;1"] .getService(Components.interfaces.nsIPromptService); var check = {value: false}; // default the checkbox to false var flags = prompts.BUTTON_POS_0 * prompts.BUTTON_TITLE_SAVE + prompts.BUTTON_POS_1 * prompts.BUTTON_TITLE_IS_STRING + prompts.BUTTON_POS_2 * prompts.BUTTON_TITLE_CANCEL; // This value of flags will create 3 buttons. The first will be "Save", the // second will be the value of aButtonTitle1, and the third will be "Cancel" var button = prompts.confirmEx(null, "Title of this Dialog", "What do you want to do?", flags, "", "Button 1", "", null, check); </code></pre> <p>There's also something called <a href="https://developer.mozilla.org/en-US/docs/JavaScript_code_modules/PopupNotifications.jsm" rel="nofollow noreferrer"><code>PopupNotifications.jsm</code></a>. There's a lot there, so I'm sure there's something you can find for what you're looking to do. There's also the <a href="https://github.com/zotero/zotero/blob/master/chrome/content/zotero/ingester/selectitems.xul" rel="nofollow noreferrer">Zotero source</a>, too.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload