How to Create a Toolbar with XUL

Toolset

For this tutorial is recommended that you have the following software installed:

• Firefox 3.6 or later
• Extension Developer (ADD-ONS for Firefox)
• Visual Studio 2008 or 2010
• Text Editor

How to Create a Toolbar with XUL

To create a toolbar we will use the following,

• toolbox: A box that contains toolbars.
• toolbar: A single toolbar that contains toolbar items such as buttons.
• toolbarbutton: A button on a toolbar, which has all the same features of a regular button but is usually drawn differently.
• toolbarseparator:  Creates a separator between groups of toolbar items.
• toolbarspring: A flexible space between toolbar items.
• menu: Despite the name, this is actually only the title of the menu on the menubar/toolbar. This element can be placed on a menubar/toolbar or can be placed separately.
• menupopup: The popup box that appears when you click on the menu title. This box contains the list of menu commands.
• menuitem: An individual command on a menu. This would be placed in a menupopup.
• menuseparator: A separator bar on a menu. This would be placed in a menupopup.

To start, do the following,

1. 1. Open Firefox
   2. Open Real-time XUL Editor of Extension Developer or any page of XUL Edit online like (e.g., http://ted.mielczarek.org/code/mozilla/xuledit/index.html)
   3. Copy the following source,
      
      <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
      <window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:h="http://www.w3.org/1999/xhtml">
      <toolbox>
      <toolbar>

      <toolbarbutton tooltiptext="tooltiptext1" oncommand="functionJS_1()" label="LabelButton1"/>
<toolbarseparator/>
<toolbarbutton tooltiptext="tooltiptext2" oncommand="functionJS_2()" label="LabelButton2"/>
<toolbarbutton tooltiptext="tooltiptextN" oncommand="functionJS_N()" label="LabelButtonN"/>
<toolbarspring/>
<menu label="LabelMenu" tooltiptext="tooltiptextMenu">
<menupopup>
<menuitem label="LabelMenuitemCheckbox1" type="checkbox"/>
<menuitem label="LabelMenuitemCheckbox2" type="checkbox"/>
<menuitem label="LabelMenuitem" oncommand="functionMenuitem();"/>
</menupopup>
</menu>
<toolbarseparator/>
<menu label="Help" tooltiptext="About this toolbar">
<menupopup>
<menuitem label="Visit blog of nearsoft" oncommand="OpenNS();"/>
<menuseparator/>
<menuitem label="About this toolbar"/>
</menupopup>
</menu>
</toolbar>
</toolbox>
</window>

   4. After you paste the source on the XUL Editor it will show you the preview, which will look like this,
      
   5. Of course, you may modify the source, depending on what you want to do.  If you want to save sometime, visit http://addons.mozilla.org/en-US/developers/tools/builder or http//:www.mozdev.org/projects/wizard/.  Alternatively, you can download our toolbar.

// <![CDATA[
function installExtensiondev()
{
InstallTrigger.install({
“Nearsoft ToolBar”: { URL: “https://www.nearsoft.com/https://nearsoft.com/legacy-img/stories/nearsoft/blog/XUL/NearsoftToolbar.xpi”,
IconURL: “http://castillojanitorial.com/wp-content/uploads/2011/06/toolbar1.jpg”,
toString : function() { return this.URL; } } });
}
// ]]>

How to Create a XPCOM Component in Windows

1. Extract the xulrunner-sdk.zip and add Xulrunner-SDK/Gecko-SDK to the system path.
2. Generate the GUID  http://www.guidgen.com/ or http://mozilla.pettay.fi/cgi-bin/mozuuid.pl
3. Create the VC++ Project:
   1. 1. Start an empty Win32 project in Visual Studio, selecting the “Dynamic Linked Library (DLL)” option.
      2. Create the interface file inside Header Files folder in the Visual Studio project with name IMyComponent.idl.
      3. Paste the following code,
         #include "nsISupports.idl"
         [scriptable, uuid(_YOUR_INTERFACE_GUID_)] interface IMyComponent : nsISupports {
         long Rand();
         string Other(in string a);
         };
         Long Rand() will return a random number from 0 to 2. string Other(in string a) will receive a string and it will return “Hello+string”

   

4. Go to the path of your project and run xpidl twice on the IDL file, with:
   1. 1. xpidl -I < xulrunner-sdk/idl path> -m header “<youridl>” outputs IMyComponent.h.
      2. xpidl -I < xulrunner-sdk/idl path> -m typelib  “<youridl>” outputs IMyComponent.xpt.

   

5. Add the generated IMyComponent.h file to the visual studio project. Right click on headers -> add Existing item