CODEWITHSUNDEEP
javascriptfirefoxxulxpcom
Real Dreams
Real Dreams

Reputation: 18030

How can I change label of OK/Cancel buttons of a dialog window?

How can I change/tranlate label of OK/Cancel buttons of a dialog window of XPCOM? You can see a list of such buttons here.

Indeed I want localize Zotero Firefox add-on. A portion of code that display such dialog is here:

var regenerate = promptService.confirmEx(
    window, 
    Zotero.getString('integration.revert.title'),
    Zotero.getString('integration.revert.body'),
    promptService.STD_OK_CANCEL_BUTTONS + promptService.BUTTON_POS_1_DEFAULT,
    null, null, null, null, out
);​

Upvotes: 2

Views: 1218

Answers (3)

Jared Farrish
Jared Farrish

Reputation: 49218

Well, first, if you want to learn XUL, I would highly recommend getting the XUL Explorer, which is an interactive tool you can use to build snippets and preview what you are designing.

This will come in handy if you've never worked in XUL before, as though it looks a lot 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:

https://developer.mozilla.org/en-US/docs/tag/tools

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 source, and here's some of the XUL files. Which happens to include a dialogs directory, and a message.xul:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/"?>
<?xml-stylesheet href="chrome://web-developer/content/dialogs/style-sheets/message.css"?>
<!DOCTYPE dialog SYSTEM "chrome://web-developer/locale/dialogs/message.dtd">
<dialog buttons="accept" id="web-developer-message-dialog" onload="WebDeveloper.Message.initialize()" title="&webdeveloper.message.title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <script src="chrome://web-developer/content/common/common.js"/>
    <script src="chrome://web-developer/content/dialogs/javascript/message.js"/>

    <vbox id="web-developer-message-details">
        <description id="web-developer-message"/>
        <description id="web-developer-more-information" value="&webdeveloper.more.information;" onclick="WebDeveloper.Message.moreInformation()" class="url"/>
    </vbox>
</dialog>​

So you can use a Dialog for this, which let's you create different types of prompts. For instance, I made the following going through a tutorial some time ago:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<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();">
  <script>
  function doSave(){
      //doSomething()
      return true;
  }
  function doCancel(){
      return true;
  }
  </script>
  <dialogheader title="My dialog" description="Example dialog"/>
  <groupbox flex="1">
    <caption label="Select favorite fruit"/>
    <radiogroup>
      <radio id="1" label="Oranges because they are fruity"/>
      <radio id="2" selected="true" label="Strawberries because of color"/>
      <radio id="3" label="Bananna because it pre packaged"/>
    </radiogroup>
  </groupbox>
</dialog>

Which looks like:

enter image description here

So you really have a lot of options, even, if you want, nsIPromptService...

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);

There's also something called PopupNotifications.jsm. 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 Zotero source, too.

Upvotes: 3

Wladimir Palant
Wladimir Palant

Reputation: 57681

If you need custom labels then you just shouldn't use default buttons:

promptService.confirmEx(
    window, 
    Zotero.getString('integration.revert.title'),
    Zotero.getString('integration.revert.body'),
    promptService.BUTTON_POS_0 * BUTTON_POS_0_DEFAULT,
    Zotero.getString('integration.revert.OK'),
    Zotero.getString('integration.revert.cancel'),
    null, null, out
);​

This declares the first button as the default, other than that no flags need to be specified - two labels have been specified so two buttons will show up.

Upvotes: 1

Korvin Szanto
Korvin Szanto

Reputation: 4511

The only way to do this while supporting every browser is to create it with a dialog library, jQueryUI is a bit at the end of it's life as a trendy library, but is still really fully featured.

Upvotes: 0

Related Questions