Search completed in 1.13 seconds.
oncommand - Archive of obsolete content
« xul reference home
oncommand type: script code this event handler is called when the command is activated.
... example 1: in-line code <button label="click me"
oncommand="alert('hi')"/> example 2: function with source argument <button label="click me"
oncommand="dosomeprocessing(event.target)"/> and here is the definition of the function: function dosomeprocessing(source) { alert("source: " + source); return true; } see also command element ...
Adding Event Handlers - Archive of obsolete content
for example, the corresponding attribute for the 'command' event is '
oncommand'.
...an example of responding to a button being pressed: example 1 : source view <button label="ok"
oncommand="alert('button was pressed!');"/> since the command event will bubble, it is also possible to place the event listener on an enclosing element.
... example 2 : source view <vbox
oncommand="alert(event.target.tagname);"> <button label="ok"/> <checkbox label="show images"/> </vbox> in this example, the command event will bubble up from the button or checkbox to the vbox, where it is handled.
...And 5 more matches
Modifying a XUL Interface - Archive of obsolete content
for example, the following will add a button to a xul window: example 1 : source view <script> function addbutton(){ var abox = document.getelementbyid("abox"); var button = document.createelement("button"); button.setattribute("label","a new button"); abox.appendchild(button); } </script> <box id="abox" width="200"> <button label="add"
oncommand="addbutton();"/> </box> this example has two parts a box container element in xul.
... the button element has two attributes "label" and "
oncommand" a javascript function named "addbutton()" this script first gets a reference to the box with getelementbyid(), which is the container to add a new button to.
... the function getelementbyid() does not know that the box it is looking for happens to be containing the tag that has the
oncommand attribute that referenced it.
...And 5 more matches
Adding Events and Commands - Archive of obsolete content
these are some notable events you should keep in mind:
oncommand.
...use
oncommand instead.
...for example: <button label="&xulschoolhello.defaultgreeting.label;"
oncommand="xulschoolchrome.browseroverlay.changegreeting(event);" /> then on the javascript code you would have something like this: changegreeting : function(aevent) { // more stuff aevent.target.setattribute("label", somenewgreeting); } the target in this example is the button element, so clicking on it will change its text.
...And 4 more matches
Adding menus and submenus - Archive of obsolete content
the toolbox should be positioned near the top of the xul document, and the code should be similar to this: <toolbox> <menubar id="xulschoolhello-menubar"> <menu id="xulschoolhello-greeting-menu" label="&xulschoolhello.greeting.label;"> <menupopup> <menuitem label="&xulschoolhello.greet.short.label;"
oncommand="xulschoolchrome.greetingdialog.greetingshort(event);" /> <menuitem label="&xulschoolhello.greet.medium.label;"
oncommand="xulschoolchrome.greetingdialog.greetingmedium(event);" /> <menuitem label="&xulschoolhello.greet.long.label;"
oncommand="xulschoolchrome.greetingdialog.greetinglong(event);" /> <menuseparator /> <menuitem label="&xulschoolhe...
...llo.greet.custom.label;"
oncommand="xulschoolchrome.greetingdialog.greetingcustom(event);" /> </menupopup> </menu> </menubar> </toolbox> this code displays a simple menu with options for 3 different types of greetings, a menuseparator, and finally an option to show a custom greeting.
...enu in order to have multiple nesting levels: <toolbox> <menubar id="xulschoolhello-menubar"> <menu id="xulschoolhello-greeting-menu" label="&xulschoolhello.greeting.label;"> <menupopup> <menu id="xulschoolhello-greeting-sizes-menu" label="&xulschoolhello.greetingsizes.label;"> <menupopup> <menuitem label="&xulschoolhello.greet.short.label;"
oncommand="xulschoolchrome.greetingdialog.greetingshort(event);" /> <menuitem label="&xulschoolhello.greet.medium.label;"
oncommand="xulschoolchrome.greetingdialog.greetingmedium(event);" /> <menuitem label="&xulschoolhello.greet.long.label;"
oncommand="xulschoolchrome.greetingdialog.greetinglong(event);" /> </menupopup> </menu> ...
...And 3 more matches
Updating Commands - Archive of obsolete content
invoking commands if a command has an
oncommand attribute, you can invoke it just by using the docommand method of the command or an element which links to it.
...<script src="chrome://global/content/globaloverlay.js"/> <command id="cmd_paste"
oncommand="godocommand('cmd_paste');"/> <button label="paste" command="cmd_paste"/> the example above will implement a paste button.
...a simple command updater looks like this: <commandset id="updatepasteitem" commandupdater="true" events="focus"
oncommandupdate="goupdatecommand('cmd_paste');"/> a command updater is indicated by using the commandupdater attribute, which should be set to true.
...And 3 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
xul can also use these event handlers, but xul also offers the
oncommand special event handler to deal with actions that often have specific meanings, such as selection by a left-click (or right-click on systems set up as left-handed) on the mouse or selection by the enter key.
... listing 10 shows an example of the
oncommand event handler in use.
... <menuitem label="open project page"
oncommand="loaduri(this.value)" value="http://mozilla.org/"/> listing 10: the
oncommand event handler because the gecko engine implements dom level 2 event handlers, you can define dynamic event listeners such as the one in listing 11.
...And 2 more matches
XUL Event Propagation - Archive of obsolete content
the availability of event listeners is also somewhat pre-determined, though xul provide generalized event listeners (i.e.,
oncommand event listeners) for most of the elements in the widget hierarchy.
... the widget hierarchy consider the following xul file: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="events" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
oncommand="alert('window handler')"> <vbox> <vbox style="background-color: lightgrey;"
oncommand="alert('box handler')"> <menu class="menu" label="file"
oncommand="alert('menu handler')"> <menupopup> <menuitem
oncommand="alert('new item alert')" label="new" /> <menuitem label="open" /> <menuitem
oncommand="alert('close handler')" label="close" /> </menupopup> </menu> ...
... <menu class="menu" label="edit"> <menupopup> <menuitem
oncommand="alert('edit source handler')" label="edit source" /> <menuitem label="reload" /> <menuitem label="view source" /> </menupopup> </menu> </vbox> <spring flex="1" /> </vbox> </window> in this file, the lowest-down, or "leaf" elements are the menuitems.
...And 2 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
listing 3: additional content for overlay.xul <?xml version="1.0"?> <overlay id="helloworldoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menupopup id="menu_toolspopup"> <menuitem id="helloworldmenuitem" label="hello, world!" insertbefore="sanitizeseparator"
oncommand="window.opendialog('chrome://helloworld/content/clock.xul','clock','chrome,centerscreen,modal');"/> </menupopup> </overlay> phase 2: adding a function to display the time in phase 2, we will make it so that selecting the hello world menu item we created in phase 1 will display a window with the time (figure 6).
... listing 11: revisions to overlay.xul <?xml version="1.0"?> <overlay id="helloworldoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <commandset id="maincommandset"> <command id="helloworldcommand"
oncommand="window.opendialog( 'chrome://helloworld/content/clock.xul', 'clock','chrome,centerscreen,modal');" /> </commandset> <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="helloworldbutton" label="hello, world!" class="toolbarbutton-1" command="helloworldcommand" /> </toolbarpalette> <menupopup id="menu_toolspopup"> <menuitem id="helloworldmenuitem" label="hel...
... listing 16: revisions to overlay.xul <menupopup onpopupshowing="gsessionstore.createmenu(event);"
oncommand="gsessionstore.restore(event);"> <menuitem label="save session"
oncommand="gsessionstore.save(event);" /> <menuseparator /> <!-- dynamically generated menu items go here --> <menuseparator /> <menuitem label="clear sessions"
oncommand="gsessionstore.clear(event);" /> </menupopup> implementing methods now we’re going to actually implement the methods we defined in the gsessionstor...
...in line 3, you see the block that prevents the bubbling that would result in this being called by the
oncommand handler in the menupop element, which is the parent of the menuitem element.
The Essentials of an Extension - Archive of obsolete content
e most important part of the content: <menubar id="main-menubar"> <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.hellomenu.accesskey;" insertafter="helpmenu"> <menupopup> <menuitem id="xulschoolhello-hello-menu-item" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloitem.accesskey;"
oncommand="xulschoolchrome.browseroverlay.sayhello(event);" /> </menupopup> </menu> </menubar> <vbox id="appmenusecondarypane"> <menu id="xulschoolhello-hello-menu-2" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.hellomenu.accesskey;" insertafter="appmenu_addons"> <menupopup> <menuitem id="xulschoolhello-hello-menu-item-2" label="&xulschoolhello.hello.la...
...bel;" accesskey="&xulschoolhello.helloitem.accesskey;"
oncommand="xulschoolchrome.browseroverlay.sayhello(event);" /> </menupopup> </menu> </vbox> this is the code that adds the hello world menu to the browser window.
...look like this: <menupopup id="menu_toolspopup"> <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.hellomenu.accesskey;" insertbefore="devtoolsendseparator"> <menupopup> <menuitem id="xulschoolhello-hello-menu-item" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloitem.accesskey;"
oncommand="xulschoolchrome.browseroverlay.sayhello(event);" /> </menupopup> </menu> </menupopup> we're overlaying the menu that is deeper into the xul tree, but it doesn't matter because all we need is the id of the element we want to overlay.
... now let's look at the actual code:
oncommand="xulschoolchrome.browseroverlay.sayhello(event);" this attribute defines an event handler.
Adding Methods to XBL-defined Elements - Archive of obsolete content
xul: <box id="num" class="labeledbutton" title="number of things:" value="52"/> <button label="show"
oncommand="document.getelementbyid('num').showtitle(true)"/> <button label="hide"
oncommand="document.getelementbyid('num').showtitle(false)"/> xbl: <binding id="labeledbutton"> <content> <xul:label xbl:inherits="value=title"/> <xul:label xbl:inherits="value"/> </content> <implementation> <method name="showtitle"> <parameter name="state"/> <body> if (state) { ...
... document.getanonymousnodes(this)[0].setattribute("style", "visibility: visible"); } else { document.getanonymousnodes(this)[0].setattribute("style", "visibility: collapse"); } </body> </method> </implementation> </binding> two buttons added to the xul have
oncommand handlers which are used to change the visibility of the label.
...for example, we could move the show and hide buttons into the xbl file and do the following: example 1: source <binding id="labeledbutton"> <content> <xul:label xbl:inherits="value=title"/> <xul:label xbl:inherits="value"/> <xul:button label="show"
oncommand="document.getbindingparent(this).showtitle(true);"/> <xul:button label="hide"
oncommand="document.getbindingparent(this).showtitle(false);"/> </content> <implementation> <method name="showtitle"> <parameter name="state"/> <body> if (state) { document.getanonymousnodes(this)[0].setattribute("style","visibility: visible"); } else { documen...
...t.getanonymousnodes(this)[0].setattribute("style","visibility: collapse"); } </body> </method> </implementation> </binding> the
oncommand handlers here first get a reference to their parent bound element.
Box Objects - Archive of obsolete content
example 1 : source view <button label="click me"
oncommand="alert('the width is ' + this.boxobject.width);"/> you can use the width and height attributes of the element to specify the element's width and height, respectively.
...example 2 : source view <script> function showpositionandsize() { var labelbox = document.getelementbyid('thelabel').boxobject; alert("position is (" + labelbox.x + "," + labelbox.y + ") and size is (" + labelbox.width + "," + labelbox.height + ")"); } </script> <button label="hide"
oncommand="document.getelementbyid('thelabel').hidden = true;"/> <button label="show"
oncommand="document.getelementbyid('thelabel').hidden = false;"/> <button label="collapse"
oncommand="document.getelementbyid('thelabel').collapsed = true;"/> <button label="uncollapse"
oncommand="document.getelementbyid('thelabel').collapsed = false;"/> <button label="show position/size" o...
...example 3 : source view <hbox> <button label="button 1"
oncommand="alert('next is: ' + this.boxobject.nextsibling.label);"/> <button label="button 2" hidden="true"/> <button label="button 3"
oncommand="alert('next is: ' + this.boxobject.nextsibling.label);"/> <button label="button 4" collapsed="true"/> </hbox> box ordering attributes when a xul box is laid out on a window, the elements are ordered according to a number of properties, for instan...
...example 4 : source view <hbox> <button label="one"
oncommand="this.ordinal++;"/> <button label="two"
oncommand="this.ordinal++;"/> <button label="three"
oncommand="this.ordinal++;"/> </hbox> if you press the first button, its ordinal will increase by one, from 1 to 2.
Commands - Archive of obsolete content
a simple way of using commands is as follows: example: simple command example 1 : source view <command id="cmd_openhelp"
oncommand="alert('help!');"/> <button label="help" command="cmd_openhelp"/> in this example, instead of placing the
oncommand attribute on the button, we instead place it on a command element.
... example: toggling command disabled example 2 : source view <command id="cmd_openhelp"
oncommand="alert('help');"/> <button label="help" command="cmd_openhelp"/> <button label="more help" command="cmd_openhelp"/> <button label="disable"
oncommand="document.getelementbyid('cmd_openhelp').setattribute('disabled','true');"/> <button label="enable"
oncommand="document.getelementbyid('cmd_openhelp').removeattribute('disabled');"/> in this example, both buttons use the same comm...
... it is normal to put a group of commands inside a commandset element, together near the top of the xul file, as in the following: <commandset> <command id="cmd_open"
oncommand="alert('open!');"/> <command id="cmd_help"
oncommand="alert('help!');"/> </commandset> a command is invoked when the user activates the button or other element attached to the command.
... command dispatching you can also use commands without using command elements, or at least, without adding a
oncommand attribute to the command.
Manipulating Lists - Archive of obsolete content
here is an example: example 1 : source view <script> function additem(){ document.getelementbyid('thelist').appenditem("thursday", "thu"); } </script> <listbox id="thelist"/> <button label="add"
oncommand="additem();"/> the appenditem() takes two arguments, the label, in this case 'thursday', and a value 'thu'.
... example 3 : source view <script> function doselect(){ var val = document.getelementbyid('number').value; val = number(val); if (val != null) document.getelementbyid('level').selectedindex = val - 1; } </script> <hbox align="center"> <label value="enter a number from 1 to 3:"/> <textbox id="number"/> <button label="select"
oncommand="doselect();"/> </hbox> <radiogroup id="level"> <radio label="excellent"/> <radio label="good"/> <radio label="poor"/> </radiogroup> listboxes also support multiple selection and the functions of the nsidomxulmultiselectcontrolelement interface.
... deleting selected items the following example shows a method of deleting the selected items properly: example 4 : source view <script> function deleteselection(){ var list = document.getelementbyid('thelist'); var count = list.selectedcount; while (count--){ var item = list.selecteditems[0]; list.removeitemat(list.getindexofitem(item)); } } </script> <button label="delete"
oncommand="deleteselection();"/> <listbox id="thelist" seltype="multiple"> <listitem label="cheddar"/> <listitem label="cheshire"/> <listitem label="edam"/> <listitem label="gouda"/> <listitem label="havartie"/> </listbox> inside the while loop we first get the selecteditem at index 0.
...compare the effect of both functions at different scroll positions in this example: example 5 : source view <button label="scrolltoindex"
oncommand="document.getelementbyid('thelist').scrolltoindex(4);"/> <button label="ensureindexisvisible"
oncommand="document.getelementbyid('thelist').ensureindexisvisible(4);"/> <listbox id="thelist" rows="5"> <listitem label="1"/> <listitem label="2"/> <listitem label="3"/> <listitem label="4"/> <listitem label="5"/> <listitem label="6"/> <listitem label="7"/> <listitem label="...
Windows and menus in XULRunner - Archive of obsolete content
asicapp/skin/main.css" type="text/css"?> <!doctype window system "chrome://basicapp/locale/main.dtd"> <window id="main" title="&title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="main.js"/> <toolbox> <menubar id="menubar"> <menu id="file-menu" label="&file;"> <menupopup id="file-popup"> <menuitem label="&file.new;"
oncommand="dofilenew();"/> <menuitem label="&file.open;"
oncommand="dofileopen();"/> <menuitem label="&file.save;"
oncommand="dofilesave();"/> <menuseparator/> <menuitem label="&file.exit;"
oncommand="dofileexit();"/> </menupopup> </menu> <menu id="edit-menu" label="&edit;"> <menupopup id="edit-popup"> <menuitem label="&edit.undo...
...;"
oncommand="doeditundo();"/> <menuitem label="&edit.redo;"
oncommand="doeditredo();"/> </menupopup> </menu> </menubar> <toolbar id="main-toolbar"> <toolbarbutton id="open" label="&file.open;"
oncommand="dofileopen();"/> <toolbarbutton id="save" label="&file.save;"
oncommand="dofilesave();"/> </toolbar> </toolbox> ...
...the
oncommand event is hooked up to javascript, just like an onclick in html.
...you can add a <commandset> and <command> elements like this: <commandset> <command id="cmd_open" label="&file.open;"
oncommand="dofileopen();"/> <command id="cmd_save" label="&file.save;"
oncommand="dofilesave();"/> </commandset> ...
Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
<menuitem id="mymenu"
oncommand="executesomething(); executesomethingelse();"/> <label id="mylabel" onclick="executesomething(); executesomethingelse();"/> add-on authors commonly use eval to trigger the handlers.
... // do not use eval(document.getelementbyid("mymenu").getattribute("
oncommand")); eval(document.getelementbyid("mylabel").getattribute("onclick")); alternative: dispatch real events dispatching real events has the added bonus that all other event listeners for that element (and the corresponding bubbling/capturing chain) will fire as well, so this method will have the closed resemblance to a real user event.
... document.getelementbyid("mybutton").click(); alternative: element.docommand() xul elements that have a command (
oncommand or command attribute) assigned will also have a working docommand method.
Index - Archive of obsolete content
968
oncommand xul attributes, xul reference no summary!
... 969
oncommandupdate xul attributes, xul reference no summary!
...you attach the code to the command using the
oncommand attribute.
A XUL Bestiary - Archive of obsolete content
in the example above, the chrome is simply a skin file to be loaded into the xul file, but the chrome can also be used to load whole chromes, as when a <menuitem> in one window brings up a new chrome: <menuitem value="mozilla help"
oncommand="window.opendialog('chrome://help/content/help.xul', '_blank', 'chrome,all,dialog=no')" /> in this example, the chrome url is being used to point to a chrome within the package hierarchy of the mozilla application.
... <menu id="file" label="file"> <menupopup> <menuitem label="new"
oncommand="createnewdoc()" /> <menuitem label="open"
oncommand="opendoc()" /> <menuitem label="close"
oncommand="closedoc()" /> </menupopup> </menu> element names the item, the widget, while attributes describes features of that element, such as its name, its style, and so on.
...xul buttons have "
oncommand" event listeners.
Index - Archive of obsolete content
221
oncommand xul attributes, xul reference no summary!
... 222
oncommandupdate xul attributes, xul reference no summary!
...you attach the code to the command using the
oncommand attribute.
MenuItems - Archive of obsolete content
<menuitem label="show toolbar" accesskey="t" type="checkbox"
oncommand="changetoolbarstate();"/> in this example, we show the toolbar when the menuitem is checked and hide the toolbar otherwise.
...<menuitem label="show toolbar" accesskey="t" type="checkbox" autocheck="false"
oncommand="changetoolbarstate();"/> this version of the changetoolbarstate function changes the checked attribute itself.
... <command id="cmd_delete" disabled="true"
oncommand="alert('deleted!');"/> <menuitem label="delete" accesskey="f" command="cmd_deleted"/> as the menuitem is attached to the command, it's automatically disabled when the command is disabled.
Menus - Archive of obsolete content
in this example, a command event listener is attached to the item using the
oncommand attribute.
... <menuitem label="open" accesskey="o"
oncommand="alert('open a file!');"/> another way to associate an action with a menu item is to use a command element.
... <command id="cmd_open"
oncommand="alert('open a file!');"/> ...
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
just add code like this to your overlay: <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="myextension-button" class="toolbarbutton-1" label="&toolbarbutton.label;" tooltiptext="&toolbarbutton.tooltip;"
oncommand="myextension.ontoolbarbutt
oncommand(event);"/> </toolbarpalette> notes: the id of the palette (browsertoolbarpalette in the example) depends on the window (the parent window of the toolbar you wish to insert a button).
... set the command to be executed when the button is clicked in the
oncommand attribute.
... if you need to handle middle-click, add this line after the
oncommand line.
Keyboard Shortcuts - Archive of obsolete content
an example is shown below: <keyset> <key id="copy-key" modifiers="accel" key="c"
oncommand="docopy();"/> </keyset> the function docopy will be called when the user presses the keys specified by the key element, which in this example, are the keys for copying to the clipboard (such as control + c).
... example 2 : source view <keyset> <key id="paste-key" modifiers="accel" key="v"
oncommand="alert('paste invoked')"/> </keyset> <menubar id="sample-menubar"> <menu id="edit-menu" label="edit" accesskey="e"> <menupopup id="edit-popup"> <menuitem id="paste-command" accesskey="p" key="paste-key" label="paste"
oncommand="alert('paste invoked')"/> </menupopup> </menu> </menubar> the menuitem's key attribute, which here is paste-key is equal to the id o...
... <?xml version="1.0" encoding="utf-8"?> <window xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <keyset> <key id="cut_cmd" modifiers="accel" key="x"/> <key id="copy_cmd" modifiers="accel" key="c"/> <key id="paste_cmd" modifiers="accel" key="v"/> <key id="close_cmd" keycode="vk_escape"
oncommand="window.close();"/> </keyset> <vbox flex="1"> <toolbox> <menubar id="findfiles-menubar"> <menu id="file-menu" label="file" accesskey="f"> <menupopup id="file-popup"> <menuitem label="open search..." accesskey="o"/> <menuitem label="save search..." accesskey="s"/> <menuseparator/> <menuitem label="close" accesskey="c" key="close_cmd"
oncommand="windo...
Localization - Archive of obsolete content
opycmd.accesskey;"/> <menuitem label="&pastecmd.label;" accesskey="&pastecmd.accesskey;" disabled="true"/> </menupopup> </popupset> <keyset> <key id="cut_cmd" modifiers="accel" key="&cutcmd.commandkey;"/> <key id="copy_cmd" modifiers="accel" key="©cmd.commandkey;"/> <key id="paste_cmd" modifiers="accel" key="&pastecmd.commandkey;"/> <key id="close_cmd" keycode="vk_escape"
oncommand="window.close();"/> </keyset> <vbox flex="1"> <toolbox> <menubar id="findfiles-menubar"> <menu id="file-menu" label="&filemenu.label;" accesskey="&filemenu.accesskey;"> <menupopup id="file-popup"> <menuitem label="&opencmd.label;" accesskey="&opencmd.accesskey;"/> <menuitem label="&savecmd.label;" accesskey="&savecmd.acce...
...sskey;"/> <menuseparator/> <menuitem label="&closecmd.label;" accesskey="&closecmd.accesskey;" key="close_cmd"
oncommand="window.close();"/> </menupopup> </menu> <menu id="edit-menu" label="&editmenu.label;" accesskey="&editmenu.accesskey;"> <menupopup id="edit-popup"> <menuitem label="&cutcmd.label;" accesskey="&cutcmd.accesskey;" key="cut_cmd"/> <menuitem label="©cmd.label;" accesskey="©cmd.accesskey;" key="copy_cmd"/> <menuitem label="&pastecmd.label;" accesskey="&pastecmd.accesskey;" key="paste_cmd" disabled="true"/> </menupopup> </menu> </menubar> <toolbar id="findfiles-toolbar"> <toolbarbutton id="opensearch" label="&opencmdto...
...usr/local"/> <treecell label="&bytes.before;2520&bytes.after;"/> </treerow> </treeitem> </treechildren> </tree> <splitter id="splitbar" resizeafter="grow" style="display: none;"/> <spacer class="titlespace"/> <hbox> <progressmeter id="progmeter" value="50%" style="display: none;"/> <spacer flex="1"/> <button id="find-button" label="&button.find;"
oncommand="dofind()"/> <button id="cancel-button" label="&button.cancel;"
oncommand="window.close();"/> </hbox> </vbox> </window> each text string has been replaced by an entity reference.
XBL Example - Archive of obsolete content
an
oncommand handler will need to be added to the previous and next buttons so that the page is changed when the buttons are pressed.
... conveniently, we can change the page using the custom 'page' property that was just added: <xul:button xbl:inherits="label=previoustext"
oncommand="parentnode.parentnode.parentnode.page--;"/> <xul:description flex="1"/> <xul:button xbl:inherits="label=nexttext"
oncommand="parentnode.parentnode.parentnode.page++;"/> because the 'page' property is only on the outer xul element, we need to to use the parentnode property to get to it.
... the final code the final code is as follows: example 2 : source <binding id="slideshow"> <content> <xul:vbox flex="1"> <xul:deck xbl:inherits="selectedindex" selectedindex="0" flex="1"> <children/> </xul:deck> <xul:hbox> <xul:button xbl:inherits="label=previoustext"
oncommand="parentnode.parentnode.parentnode.page--;"/> <xul:description flex="1"/> <xul:button xbl:inherits="label=nexttext"
oncommand="parentnode.parentnode.parentnode.page++;"/> </xul:hbox> </xul:vbox> </content> <implementation> <constructor> var totalpages=this.childnodes.length; document.getanonymousnodes(this)[0].childnodes[1].childn...
command - Archive of obsolete content
you attach the code to the command using the
oncommand attribute.
...see also: command attribute, commandset element attributes disabled, label,
oncommand,reserved examples the following code will send a paste command (cmd_paste) to the currently focused element: // first include chrome://global/content/globaloverlay.js godocommand("cmd_paste"); example with two buttons <commandset><command id="cmd_openhelp"
oncommand="alert('help');"/></commandset> <button label="help" command="cmd_openhelp"/> <button label="more help" command="cmd_openhelp...
...
oncommand type: script code this event handler is called when the command is activated.
key - Archive of obsolete content
for the shortcut defined using the key element to work, you must specify a command attribute (or an
oncommand handler) on the key element.
... attributes command, disabled, key, keycode, keytext, modifiers,
oncommand, phase examples (example needed) attributes command type: id set to the id of a command element that is being observed by the element.
...
oncommand type: script code this event handler is called when the command is activated.
Building the WebLock UI
<separator class="thin"/> <hbox align="center"> <textbox id="url.input" flex="1"/> <button label="add this url"
oncommand="addthissite();"/> </hbox> this snippet introduces a couple of new general layout widgets in xul.
... manager" style="width: 30em;" persist="screenx screeny" screenx="24" screeny="24"> <script src="chrome://weblock/content/weblock.js"/> <hbox> <separator orient="vertical" class="thin"/> <vbox flex="1"> <separator class="thin"/> <hbox align="center"> <textbox id="dialog.input" flex="1"/> <button label="add this url"
oncommand="addthissite();"/> </hbox> <hbox align="center"> <radiogroup onchange="togglelock();"> <radio label="lock"/> <radio label="unlock"/> </radiogroup> <spacer flex="1"/> </hbox> </vbox> </hbox> </dialog> overlaying new user interface into mozilla you've got a dialog that will interact with the weblock component, but how do you in...
..."?> <overlay id="weblockoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://weblock/content/weblock.js"/> <statusbar id="status-bar"> <statusbarpanel class="statusbarpanel-iconic" id="weblock-status" insertbefore="offline-status"
oncommand="loadweblock();" status="none"/> </statusbar> </overlay> note that the root element for this file is not a <window/> but an <overlay/>.
Working with windows in chrome code
setprogress(window.arguments[0].progress); setstatus(window.arguments[0].status); } } function setprogress(value) { gprogressmeter.value = 100 * value / maxprogress; } function setstatus(text) { gstatus.value = "status: " + text + "..."; } ]]></script> <label id="status" value="(no status)" /> <hbox> <progressmeter id="progressmeter" mode="determined" /> <button label="cancel"
oncommand="close();" /> </hbox> </window> example 2: interacting with the opener sometimes an opened window needs to interact with its opener; for example, it might do so in order to give notice that the user has made changes in the window.
... if we're sure the window that opened the progress dialog declares the canceloperation function, we can use window.opener.canceloperation() to notify it, like this: <button label="cancel"
oncommand="opener.canceloperation(); close();" /> using a callback function.
... window.opendialog( "chrome://test/content/progress.xul", "myprogress", "chrome,centerscreen", {status: "reading remote data", maxprogress: 50, progress: 10}, oncancel ); the progress dialog can then run the callback like this: <button label="cancel"
oncommand="window.arguments[1](); close();" /> example 3: using nsiwindowmediator when opener is not enough the window.opener property is very easy to use, but it's only useful when you're sure that your window was opened from one of a few well-known places.
Dialogs and Prompts - Archive of obsolete content
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.
... 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.
Custom XUL Elements with XBL - Archive of obsolete content
<content> <xul:hbox> <xul:image class="xulshoolhello-person-image" xbl:inherits="src=image" /> <xul:vbox flex="1"> <xul:label xbl:inherits="value=name" /> <xul:description xbl:inherits="value=greeting" /> </xul:vbox> <xul:vbox> <xul:button label="&xulshoolhello.remove.label;" accesskey="&xulshoolhello.remove.accesskey;"
oncommand="document.getbindingparent(this).remove(event);" /> </xul:vbox> </xul:hbox> </content> our element is very simple, displaying an image, a couple of text lines and a button.
... the
oncommand attribute of the button has some code you've probably never seen before: document.getbindingparent(this).
Adding preferences to an extension - Archive of obsolete content
all we need to do is add a popupset describing the menu to the statusbar, as follows: <popupset> <menupopup id="stockmenu"> <menuitem label="refresh now" default="true"
oncommand="stockwatcher.refreshinformation()"/> <menuseparator/> <menuitem label="apple (aapl)"
oncommand="stockwatcher.watchstock('aapl')"/> <menuitem label="google (goog)"
oncommand="stockwatcher.watchstock('goog')"/> <menuitem label="microsoft (msft)"
oncommand="stockwatcher.watchstock('msft')"/> <menuitem label="yahoo!
... (yhoo)"
oncommand="stockwatcher.watchstock('yhoo')"/> </menupopup> </popupset> each item in the menu has a label property, which specifies the text displayed in the menu, as well as an
oncommand property, which indicates the javascript code to execute when the user selects that item.
XUL user interfaces - Archive of obsolete content
-1" value="xul demonstration"/> <vbox> <groupbox class="demo-group"> <caption label="day of week calculator"/> <grid> <columns> <column/> <column/> </columns> <rows> <row> <label class="text-prompt" value="date:" accesskey="d" control="date-text"/> <textbox id="date-text" type="timed" timeout="750"
oncommand="refresh();"/> </row> <row> <label value="day:"/> <hbox id="day-box"> <label class="day" value="sunday" disabled="true"/> <label class="day" value="monday" disabled="true"/> <label class="day" value="tuesday" disabled="true"/> <label class="day" value="wednesday" disabled="true"/> <label class="day" ...
...value="thursday" disabled="true"/> <label class="day" value="friday" disabled="true"/> <label class="day" value="saturday" disabled="true"/> </hbox> </row> </rows> </grid> <hbox class="buttons"> <button id="clear" label="clear" accesskey="c"
oncommand="cleardate();"/> <button id="today" label="today" accesskey="t"
oncommand="settoday();"/> </hbox> </groupbox> <statusbar> <statusbarpanel id="status"/> </statusbar> </vbox> </window> make a new css file, style7.css.
label - Archive of obsolete content
see also treeitem.label, <label> element examples in javascript <label value="whaw" id="the-big-label" command="the-big-button"/> <button id="the-big-button" label="click me"
oncommand="alert(document.getelementbyid('the-big-label').value)"/> <label id="mylabel" value="my label"/> <button label="click me"
oncommand="document.getelementbyid('mylabel').setattribute('value','value changed');" /> <checkbox label="my checkbox" id="mycheckbox"/> <button label="another click"
oncommand="document.getelementbyid('mycheckbox').setattribute('label','still not checked');"/> <button lab...
...el="show label of checkbox"
oncommand="alert( document.getelementbyid('mycheckbox').getattribute('label') )"/> ...
XUL Events - Archive of obsolete content
attribute:
oncommand commandupdate this event occurs when a command update occurs on a <commandset> element.
... attribute:
oncommandupdate contextmenu this event is sent to an element when the user requests to open the context menu for the element.
Extensions - Archive of obsolete content
<popup id="contentareacontextmenu"> <menuitem id="thumbnail-show" label="view thumbnail"
oncommand="thumbnails.view();"/> </popup> note that the popup element is used rather than the menupopup element as this is the element that firefox uses.
...for example, the following may be used to insert a command just after the 'select all' command: <popup id="contentareacontextmenu"> <menuitem label="select links"
oncommand="thumbnails.selectalllinks();" insertafter="context-selectall"/> </popup> see firefox context menu for a list of the ids of the items found on the firefox context menu.
Panels - Archive of obsolete content
for instance, using the search panel example above, we could add a button which closes the panel when pressed: <script> function dosearch() { document.getelementbyid("search-panel").hidepopup(); } </script> <toolbarbutton label="search" type="panel"> <panel id="search-panel" position="after_start"> <textbox id="search"/> <button label="search"
oncommand="dosearch();"/> </panel> </toolbarbutton> in this example, the dosearch() function is called when the "search" button is pressed.
... <panel id="search-panel" noautohide="true"> <textbox id="search"/> <button label="search"
oncommand="dosearch();"/> <button label="cancel"
oncommand="this.parentnode.hidepopup();"/> </panel> because the panel can no longer be closed by clicking elsewhere, the panel should always provide a means to close the panel itself.
PopupEvents - Archive of obsolete content
opupshown", filemenuopened, false); var openmenu = document.getelementbyid("open-menu"); openmenu.open = true; } </script> <menu id="file-menu" label="file"> <menupopup id="file-menupopup"> <menu id="open-menu" label="open"> <menupopup> <menuitem label="file..."/> <menuitem label="page"/> </menupopup> </menu> </menupopup> </menu> <button label="open"
oncommand="openfilemenu();"/> when the button is pressed, the openfilemenu function is called.
...<panel onpopuphiding="document.getelementbyid('search').value = '';"> <textbox id="search"/> <button label="search"
oncommand="dosearch();"/> </panel> you can prevent a popup from hiding by calling the event's preventdefault method.
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
position="15"/> </hbox> <!-- composer --> <toolbar id="edittoolbar"> <toolbarbutton id="custom-button-1" position="18"/> </toolbar> <!-- chat --> <menubar id="mainmenu"> <menu id="custom-menu" position="4" label="custom" accesskey="c"> <menupopup> <menuitem id="custom-item-1" label="custom item 1" accesskey="1" tooltiptext="my custom menu item"
oncommand="custombutton[1]()" /> </menupopup> </menu> </menubar> <!-- calendar --> <toolbar id="calendar-bar"> <toolbarbutton id="custom-button-1" position="10"/> </toolbar> <!-- button details --> <toolbarbutton id="custom-button-1" label="custom" tooltiptext="my custom toolbar button"
oncommand="custombutton[1]()" class="toolbarbutton-1 custombutton" /> </overlay> ...
...in the id and
oncommand attributes, change 1 to 2.
Custom toolbar button - Archive of obsolete content
barpalette> <!-- thunderbird address book --> <toolbarpalette id="addressbooktoolbarpalette"> <toolbarbutton id="custom-button-1"/> </toolbarpalette> <!-- sunbird --> <toolbarpalette id="calendartoolbarpalette"> <toolbarbutton id="custom-button-1"/> </toolbarpalette> <!-- button details --> <toolbarbutton id="custom-button-1" label="custom" tooltiptext="my custom toolbar button"
oncommand="custombutton[1]()" class="toolbarbutton-1 chromeclass-toolbar-additional custombutton" /> </overlay> optionally customize the file by changing the label and tooltiptext in the last section.
...in the id and
oncommand attributes, change 1 to 2.
Adding Properties to XBL-defined Elements - Archive of obsolete content
most of the work here is done in the
oncommand handlers.
...xul: <box id="random-box" class="randomizer"/> <button label="generate"
oncommand="document.getelementbyid('random-box').number=math.random();"/> <button label="show"
oncommand="alert(document.getelementbyid('random-box').number)"/> xbl: <binding id="randomizer"> <implementation> <field name="number"/> </implementation> </binding> a number field has been defined in the binding, which stores the random number.
Broadcasters and Observers - Archive of obsolete content
example 3 : source view <broadcasterset> <broadcaster id="colorchanger" style="color: black"/> </broadcasterset> <button label="test"> <observes element="colorchanger" attribute="style" onbroadcast="alert('color changed');"/> </button> <button label="observer"
oncommand="document.getelementbyid('colorchanger').setattribute('style','color: red');" /> two buttons have been created, one labeled test and the other labeled observer.
... what happens is the
oncommand handler on the second button is called when the user presses on it.
Document Object Model - Archive of obsolete content
an
oncommand handler will also be added to the find button.
...<button id="find-button" label="find"
oncommand="dofind();"/> now, create another file called findfile.js in the same directory as findfile.xul.
Using Remote XUL - Archive of obsolete content
we add an id attribute to the iframe element so we can reference it from our function, and we add an
oncommand event listener to the menubar element that calls the function every time the user clicks a button or selects a menu item.
... the
oncommand event listener is a generic listener that fires whenever the user manipulates an element in some conclusive way.
commandset - Archive of obsolete content
attributes commandupdater, events,
oncommandupdate, targets example <commandset> <command id="cmd_open"
oncommand="alert('open!');"/> <command id="cmd_help"
oncommand="alert('help!');"/> </commandset> attributes commandupdater type: boolean if true, the commandset is used for updating commands.
...
oncommandupdate type: script code this event occurs when a command update occurs.
menulist - Archive of obsolete content
attributes accesskey, crop, disableautoselect, disabled, editable, focused, image, label,
oncommand, open, preference, readonly, sizetopopup, tabindex, value properties accessibletype, crop, description, disableautoselect, disabled, editable, editor, image, inputfield, itemcount, label, menuboxobject, menupopup, open, selectedindex, selecteditem, tabindex, value methods appenditem, contains, getindexofitem, getitematindex, insertitemat, removeallitems, removeitemat, select examples ...
...
oncommand type: script code this event handler is called when the command is activated.
tab - Archive of obsolete content
attributes accesskey, afterselected, beforeselected, command, crop, disabled, first-tab, image, label, last-tab, linkedpanel,
oncommand, pending, pinned, selected, tabindex, unread, validate, value properties accesskey, accessibletype, command, control, crop, disabled, image, label, linkedpanel, selected, tabindex, value examples (example needed) attributes accesskey type: character this should be set to a character that is used as a shortcut key.
...
oncommand type: script code this event handler is called when the command is activated.
toolbarbutton - Archive of obsolete content
attributes accesskey, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label,
oncommand, open, orient, tabindex, title, type, validate properties accesskey, accessibletype, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, open, orient, tabindex, type examples <toolbar id="test-toolbar"> <toolbarbutton accesskey="p" label="plain"/> <toolbarbutton accesskey="c" label="checkbox" type="checkbox"/> <toolbarbutton accesskey="b...
...
oncommand type: script code this event handler is called when the command is activated.
CustomizableUI.jsm
customizableui.createwidget({ id: 'id_of_my_widget_within_customizableui_and_dom', defaultarea: customizableui.area_navbar, label: 'my widget', // type: 'button', //we don't need to type this, the default type is button tooltiptext: 'this is my widget created with cui.jsm',
oncommand: function(aevent) { var thisdomwindow = aevent.target.ownerdocument.defaultview; //this is the browser (xul) window var thiswindowsselectedtabswindow = thisdomwindow.gbrowser.selectedtab.linkedbrowser.contentwindow; //this is the html window of the currently selected tab thiswindowsselectedtabswindow.alert('alert from html window of selected tab'); thisdomwindow.al...
...t - use customizableui.jsm to create the widget cu.import('resource:///modules/customizableui.jsm'); customizableui.createwidget({ id: 'id_of_my_widget_within_customizableui_and_dom', defaultarea: customizableui.area_navbar, label: 'my widget', // type: 'button', //we don't need to type this, the default type is button tooltiptext: 'this is my widget created with cui.jsm',
oncommand: function(aevent) { var thisdomwindow = aevent.target.ownerdocument.defaultview; //this is the browser (xul) window var thiswindowsselectedtabswindow = thisdomwindow.gbrowser.selectedtab.linkedbrowser.contentwindow; //this is the html window of the currently selected tab thiswindowsselectedtabswindow.alert('alert from html window of selected tab'); thisdomwindow.al...
Using third-party modules (jpm) - Archive of obsolete content
open "index.js" and replace it with this: var menuitems = require("menuitem"); var menuitem = menuitems.menuitem({ id: "clickme", menuid: "menu_toolspopup", label: "click me!",
oncommand: function() { console.log("clicked"); }, insertbefore: "menu_pageinfo" }); now run the add-on: jpm run -b nightly you should see a new menu item in the tools menu labeled "click me!".
Inline options - Archive of obsolete content
ored as a boolean) --> <setting pref="extensions.myaddon.options2" type="radio" title="options 2"> <radiogroup> <radio value="false" label="disabled"/> <radio value="true" label="enabled"/> </radiogroup> </setting> <!-- button example - not tied to a preference, but attached to a command --> <setting title="do something" type="control"> <button id="myaddon-button" label="click me"
oncommand="alert('thank you!');"/> </setting> setting element changed notifications most of the setting elements (it might be all i havent really looked), support oninputchanged attribute.
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
<overlay id="xulschoolhello-browser-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="xulschoolhello-hello-world-button" class="toolbarbutton-1 chromeclass-toolbar-additional" label="&xulschoolhello.helloworld.label;" tooltiptext="&xulschoolhello.helloworld.tooltip;"
oncommand="xulschoolchrome.browseroverlay.dosomething(event);" /> <!-- more buttons here.
Adding sidebars - Archive of obsolete content
<menupopup id="viewsidebarmenu"> <menuitem id="xulschoolhello-sidebar" label="&xulschoolhello.sidebar.title;" accesskey="&xulschoolhello.sidebar.accesskey;" type="checkbox" autocheck="false" group="sidebar" sidebarurl="chrome://xulschoolhello/content/sidebar.xul" sidebartitle="&xulschoolhello.sidebar.title;"
oncommand="togglesidebar('xulschoolhello-sidebar');" /> </menupopup> the example in the mdc page includes a shortcut key combination to toggle the new sidebar.
Tabbed browser - Archive of obsolete content
xul: <menuitem
oncommand="myextension.foo(event)" onclick="checkformiddleclick(this, event)" label="click me"/> js: var myextension = { foo: function(event) { openuilink("http://www.example.com", event, false, true); } } opening a url in an on demand tab cu.import("resource://gre/modules/xpcomutils.jsm"); xpcomutils.definelazyservicegetter(this, "gsessionstore", "@mozilla.
Localizing an extension - Archive of obsolete content
for example, in stockwatcher2.xul, we change this line: <menuitem label="refresh now"
oncommand="stockwatcher.refreshinformation()"/> to <menuitem label="&menu_refresh_now.label;"
oncommand="stockwatcher.refreshinformation()"/> do this for every string used in each xul file.
Creating a Firefox sidebar extension - Archive of obsolete content
rskey;" /> </keyset> <broadcasterset id="mainbroadcasterset"> <broadcaster id="viewemptysidebar" label="&emptysidebar.title;" autocheck="false" type="checkbox" group="sidebar" sidebarurl="chrome://emptysidebar/content/emptysidebar.xul" sidebartitle="&emptysidebar.title;"
oncommand="togglesidebar('viewemptysidebar');" /> </broadcasterset> </overlay> the overlay file consists of three entries, the menu definition, shortcut keys and the broadcaster.
Creating XPI Installer Modules - Archive of obsolete content
xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul" width="175" height="375" x="20" y="20" persist="width height x y" orient="vertical" autostretch="always"> <script src="barley.js"/> <image src="barley.gif" /> <box orient="horizontal" autostretch="never"> <button label="barley corn" /> <button label="show aphids"
oncommand="bar();" /> </box> </window> the other files that the window imports are defined in dark blue.
command - Archive of obsolete content
example <command id="cmd_openhelp"
oncommand="alert('help');"/> <button label="help" command="cmd_openhelp"/> <button label="more help" command="cmd_openhelp"/> see also command element,
oncommand and commandset ...
id - Archive of obsolete content
example <button id="foo" label="click me"
oncommand="dosomething()"/> <script> function dosomething(){ var mybutton = document.getelementbyid('foo'); mybutton.setattribute('label','the button was pressed'); } </script> a more abstract version of the above would be a <button id="foo" label="click me"
oncommand="setwidgetlabel(this, 'i was pressed')"/> <script> function setwidgetlabel(idname, newcaption){ document.getelementbyid( idname.id ).setattribute('label',newcaption) } </script> not specifying the id attribute for a window or a prefwindow...
reserved - Archive of obsolete content
example here, the command to open a new browser window is reserved: <command id="cmd_newnavigator"
oncommand="openbrowserwindow()" reserved="true"/> if the keyboard shortcut for that is accel-t, then this code will not work as expected, as compared to when it is run from web content: document.addeventlistener("keydown", handlekey, true); function handlekey(event) { // listen for the "new tab" shortcut if (event.metakey && (event.key == "t")) { // log a message console.log("intercepted...
Attribute (XUL) - Archive of obsolete content
last-tab left linkedpanel max maxheight maxlength maxpos maxrows maxwidth member menu menuactive min minheight minresultsforpopup minwidth mode modifiers mousethrough movetoclick multiline multiple name negate newlines next noautofocus noautohide noinitialfocus nomatch norestorefocus object observes onbeforeaccept onbookmarkgroup onchange onclick onclosetab
oncommand oncommandupdate ondialogaccept ondialogcancel ondialogclosure ondialogextra1 ondialogextra2 ondialoghelp onerror onerrorcommand onextra1 onextra2 oninput onload onnewtab onpageadvanced onpagehide onpagerewound onpageshow onpaneload onpopuphidden onpopuphiding onpopupshowing onpopupshown onsearchcomplete onselect ontextcommand ontextentered ontextrevert ontextreverted ...
How to Quit a XUL Application - Archive of obsolete content
components.interfaces.nsiappstartup.eattemptquit; appstartup.quit(quitseverity); } </script> calling this function if there is an uncaught exception, to force the application to quit: <script> try { dosomething(); } catch (e) { quit(true); } </script> the "quit" menuitem should typically prompt the user if there is unsaved data: <menuitem label="quit"
oncommand="quit(false);"/> ...
onFindAgainCommand - Archive of obsolete content
you should specify true as the input parameter to perform a "find previous" operation, or false to perform a "find next." example typically, you'll simply bind this method to your "find next" and "find previous" commands, like this: <command name="cmd_find_previous"
oncommand="gfindbar.onfindagaincommand(true);"/> <command name="cmd_find_next"
oncommand="gfindbar.onfindagaincommand(false);"/> ...
startFind - Archive of obsolete content
example typically, you'll simply bind this method to your "find" command, like this: <command name="cmd_find"
oncommand="gfindbar.startfind(gfindbar.find_normal);"/> ...
appendItem - Archive of obsolete content
example <script language="javascript"> function additemstolist(){ var list = document.getelementbyid('mymenulist'); // add item with just the label list.appenditem('one'); // add item with label and value list.appenditem('two', 999); // select the first item list.selectedindex = 0; } </script> <button label="add items"
oncommand="additemstolist()"/> <menulist id="mymenulist"> <menupopup/> </menulist> see also insertitemat() removeitemat() ...
insertItemAt - Archive of obsolete content
var newindex = mylistbox.getrowcount() -1 }else{ // item was selected so insert at the selected item var newindex = mylistbox.selectedindex; mylistbox.insertitemat(newindex, somedate.tolocaletimestring(), somedate.gettime()); } // select the newly created item mylistbox.selectedindex = newindex; } </script> <button label="insert item at selected"
oncommand="insertitemtolist()"/> <listbox id="mylistbox"> <listitem label="foo"/> </listbox> see also appenditem() removeitemat() ...
removeItemAt - Archive of obsolete content
if(mylistbox.selectedindex == -1){ return; // no item selected so return }else{ mylistbox.removeitemat(mylistbox.selectedindex); } } function removeallitems(){ var mylistbox = document.getelementbyid('mylistbox'); var count = mylistbox.itemcount; while(count-- > 0){ mylistbox.removeitemat(0); } } </script> <button label="remove selected item"
oncommand="removeselecteditem()"/> <button label="remove all items"
oncommand="removeallitems()"/> <listbox id="mylistbox"> <listitem label="alpha"/> <listitem label="beta"/> <listitem label="oscar"/> <listitem label="foxtrot"/> </listbox> see also removeallitems() insertitemat() ...
MenuButtons - Archive of obsolete content
<toolbarbutton type="menu-button" label="save"
oncommand="alert('save');"> <menupopup> <menuitem label="save this document"/> <menuitem label="save all"
oncommand="alert('save all'); event.stoppropagation();"/> </menupopup> </toolbarbutton> here, the 'save' button has a type of 'menu-button', so a small arrow button will appear which will open the menu when pressed.
MenuModification - Archive of obsolete content
<script> function addtomenu() { var menu = document.getelementbyid("edit-menu"); menu.appenditem("insert", "insert"); } </script> <menu id="edit-menu"/> <button label="add"
oncommand="addtomenu()"/> in this example, the addtomenu function is called when the button is pressed.
OpenClose - Archive of obsolete content
here is a complete example which uses a button to open a menu: <button label="open menu"
oncommand="document.getelementbyid('editmenu').open = true;"/> <menu id="editmenu" label="edit"> <menupopup> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </menu> this technique may be used for both menupopups that use the menu tag, the button tag and the toolbarbutton tag.
Special per-platform menu considerations - Archive of obsolete content
here is an example: <menubar> <menu label="tools"> <menupopup> <menuitem label="spell check"/> <menuitem id="menu_preferences" label="preferences"
oncommand="window.opendialog('options.xul', '_new', 'chrome');"/> </menupopup> </menu> </menubar> this menu item will be placed on the application menu on the macintosh but left in the tools menu on other platforms.
Sorting and filtering a custom tree view - Archive of obsolete content
doctype window> <window title="sorting a custom tree view example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="init()"> <script type="application/javascript" src="sort.js"/> <hbox align="center" id="search-box"> <label accesskey="f" control="filter">filter</label> <textbox id="filter" oninput="inputfilter(event)" flex="1"/> <button id="clearfilter"
oncommand="clearfilter()" label="clear" accesskey="c" disabled="true"/> </hbox> <tree id="tree" flex="1" persist="sortdirection sortresource" sortdirection="ascending" sortresource="description"> <treecols> <treecol id="name" label="name" flex="1" persist="width ordinal hidden" onclick="sort(this)" class="sortdirectionindicator" sortdirection="ascending"/> <splitter class="tree-splitter"/> <t...
Building Menus With Templates - Archive of obsolete content
here is an example using an xml source: <button type="menu" datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"/> <action> <menupopup> <menuitem uri="?" label="?name"/> </menupopup> </action> </template> </button> <button label="children"
oncommand="alert(this.previoussibling.childnodes.length);"/> in this example, the datasources attribute has been placed on a menu-type button.
Static Content - Archive of obsolete content
<menulist datasources="template-guide-photos4.rdf" ref="http://www.daml.org/2001/09/countries/country-ont#country"
oncommand="applyfilter(event.target.value);"> <menupopup> <menuitem label="all"/> </menupopup> <template> <query> <content uri="?start"/> <triple subject="?country" predicate="http://www.w3.org/1999/02/22-rdf-syntax-ns#type" object="?start"/> <triple subject="?country" predicate="http://purl.org/dc/elements/1.1/title" o...
Focus and Selection - Archive of obsolete content
the following example demonstrates this: example 5 : source view <textbox id="addr"/> <button label="focus"
oncommand="document.getelementbyid('addr').focus()"/> or, you can use the methods advancefocus and rewindfocus on the command dispatcher.
More Event Handlers - Archive of obsolete content
example 1 : source view <vbox
oncommand="alert(event.currenttarget.tagname);"> <button label="ok"/> <checkbox label="show images"/> </vbox> stop event propagation once you handle an event, regardless of where in the propagation the event is, you will likely want to stop the event from being sent to further elements, essentially stopping the capturing or bubbling phases from continuing.
Tree Box Objects - Archive of obsolete content
<treeitem label="row 1"/> <treeitem label="row 2"/> <treeitem label="row 3"/> <treeitem label="row 4"/> <treeitem label="row 5"/> <treeitem label="row 6"/> <treeitem label="row 7"/> <treeitem label="row 8"/> <treeitem label="row 9"/> </treechildren> </tree> <hbox align="center"> <label value="scroll to row:"/> <textbox id="tbox"/> <button label="scroll"
oncommand="doscroll();"/> </hbox> note that we use the rows attribute on the tree to specify that only four rows are displayed at a time.
XPCOM Examples - Archive of obsolete content
the example below shows how we might do this: <toolbox> <menubar id="windowlist-menubar"> <menu label="window"
oncommand="switchfocus(event.target);"> <menupopup id="window-menu" datasources="rdf:window-mediator" ref="nc:windowmediatorroot"> <template> <rule> <menuitem uri="rdf:*" label="rdf:http://home.netscape.com/nc-rdf#name"/> </rule> </template> </menupopup> </menu> </menubar> </toolbox> <script> function switchfocus(elem) { var mediator = components.classes["@mozilla.org/rd...
button - Archive of obsolete content
attributes accesskey, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, icon, image, label, open, orient, tabindex, type properties accesskey, accessibletype, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, open, orient, tabindex, type examples <button label="press me"
oncommand="alert('you pressed me!');"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
iframe - Archive of obsolete content
attributes showcaret, src, type, transparent properties accessibletype, contentdocument, contentwindow, docshell, webnavigation examples <iframe src="table.php" flex="2" id="browsertable" name="table_frame"/> selecting an url from a menu <menulist
oncommand="donav(this);"> <menupopup> <menuitem label="mozilla" value="http://mozilla.org" /> <menuitem label="slashdot" value="http://slashdot.org"/> <menuitem label="sourceforge" value="http://sf.net" /> <menuitem label="freshmeat" value="http://freshmeat.net"/> </menupopup> </menulist> <iframe id="myframe" flex="1"/> <script> function donav(obj) { var url = obj.selecteditem.valu...
splitter - Archive of obsolete content
the vbox is used to hold the .png image that a user clicks on to resize the search bar.--> <splitter tooltiptext="resize the search box"
oncommand="alert('the splitter was dragged')"> <vbox id="example_vbox" /> </splitter> attributes collapse type: one of the values below determines which side of the splitter is collapsed when its grippy is clicked.
titlebar - Archive of obsolete content
<?xml version="1.0"?> <window title="movable hud window" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" width="300" height="200" style="background: transparent; -moz-appearance: none;"> <titlebar flex="1"
oncommand="close()" style="background: rgba(30, 30, 30, 0.9); -moz-border-radius: 10px; -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); margin: 8px 12px 16px;"/> </window> it can be opened from the error console like this: open("file:///users/markus/sites/hudwindow.xul", "", "chrome=1, titlebar=0") attributes inherited from xul elem...
toolbarpalette - Archive of obsolete content
examples <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="toolbarpalette-button" class="toolbarbutton-class" label="&mylabel;" tooltiptext="&mytiptext;"
oncommand="somefunction()"/> </toolbarpalette> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, or...
tree - Archive of obsolete content
xul for the tree: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="file://c:/main.css" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <row><button label="getrowvalues"
oncommand="getrowcellvalues();"/></row> <tree flex="1" editable="true" id="mytree"> <treecols> <treecol label="active" type="checkbox" editable="true" /> <treecol label="name" flex="1" id="name"/> </treecols> <treechildren> <treeitem> <treerow> <treecell value="false"/> <treecell label="alice"/> </treerow> </treeitem> <treeitem> <treerow> ...
window - Archive of obsolete content
nformation"/> <radiogroup> <vbox> <hbox> <label control="your-fname" value="enter first name:"/> <textbox id="your-fname" value="johan"/> </hbox> <hbox> <label control="your-lname" value="enter last name:"/> <textbox id="your-lname" value="hernandez"/> </hbox> <hbox> <button
oncommand="alert('save!')"> <description>save</description> </button> </hbox> </vbox> </radiogroup> </groupbox> </vbox> </window> attributes accelerated type: booleanset this attribute to true to allow hardware layer managers to accelerate the window.
Getting started with XULRunner - Archive of obsolete content
main.xul: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="main" title="my app" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://myapp/content/main.js"/> <caption label="hello world"/> <separator/> <button label="more >>"
oncommand="showmore();"/> <separator/> <description id="more-text" hidden="true">this is a simple xulrunner application.
How to enable locale switching in a XULRunner application - Archive of obsolete content
here is a code snippet showing how this is done: the definition of the xul control: <listbox id="locale-listbox"> <!-- generated list items go in here --> </listbox> <button label="&switchlocale.button;"
oncommand="changelocale()"/> the javascript code to populate the control: try { // query available and selected locales var chromeregservice = components.classes["@mozilla.org/chrome/chrome-registry;1"].getservice(); var xulchromereg = chromeregservice.queryinterface(components.interfaces.nsixulchromeregistry); var toolkitchromereg = chromeregservice.queryinterface(components.interfaces.nsitoolkitch...
XULRunner tips - Archive of obsolete content
ar tmpnamespace = {}; var sl = components.classes["@mozilla.org/moz/jssubscript-loader;1"] .createinstance(components.interfaces.mozijssubscriptloader); sl.loadsubscript("chrome://inspector/content/hooks.js", tmpnamespace); tmpnamespace.inspectdomdocument(document); } now create a hook in your application window to start dom inspector, like this one: <button label="start inpector"
oncommand="startdomi()"/> start your application and dom inspector will be installed.
API-provided widgets
oncommand(aevt) only useful for button widgets; a function that will be invoked when the user activates the button.
Add Option to Context Menu
for thunderbird 2 <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menupopup id="messagepanecontext"> <menuitem id="my_option" label="my option concise and cool label"
oncommand="alert('hi')"/> </menupopup> </overlay> for thunderbird 3 <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <popup id="mailcontext"> <menuitem id="my_option" label="my option concise and cool label"
oncommand="alert('hi')"/> </popup> </overlay> for thunderbird 2 and 3...
Add Toolbar Button
l-stylesheet href="chrome://demo/skin/overlay.css" type="text/css" ?> <overlay id="messengerwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/x-javascript" src="overlay.js" /> <toolbarpalette id="mailtoolbarpalette"> <toolbarbutton id="demo-button" class="demo-button toolbarbutton-1" label="demo" type="button"
oncommand="demo.load();" /> </toolbarpalette> </overlay> add this to the css file you referenced in your xul file: #demo-button, [place="palette"] > #demo-button { list-style-image: url("chrome://demo/skin/icon.png") !important; } ...
Event.explicitOriginalTarget - Web APIs
function mycommand(ev) { alert(ev.explicitoriginaltarget.nodename); // returns 'menuitem' } <xul:command id="my-cmd-anaction"
oncommand="mycommand(event);"/> <xul:menulist> <xul:menupopup> <xul:menuitem label="get my element name!" command="my-cmd-anaction"/> </xul:menupopup> </menulist> specifications this is a mozilla-specific property.