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,
-
- Open Firefox
- 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)
- 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> - After you paste the source on the XUL Editor it will show you the preview, which will look like this,
- 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://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
- Extract the xulrunner-sdk.zip and add Xulrunner-SDK/Gecko-SDK to the system path.
- Generate the GUID http://www.guidgen.com/ or http://mozilla.pettay.fi/cgi-bin/mozuuid.pl
- Create the VC++ Project:
-
- Start an empty Win32 project in Visual Studio, selecting the “Dynamic Linked Library (DLL)” option.
- Create the interface file inside Header Files folder in the Visual Studio project with name IMyComponent.idl.
- 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”
-
- Go to the path of your project and run xpidl twice on the IDL file, with:
-
- xpidl -I < xulrunner-sdk/idl path> -m header “<youridl>” outputs IMyComponent.h.
- xpidl -I < xulrunner-sdk/idl path> -m typelib “<youridl>” outputs IMyComponent.xpt.
-
- Add the generated IMyComponent.h file to the visual studio project. Right click on headers -> add Existing item