This is a mirror of official site: http://jasper-net.blogspot.com/

How to Create a Toolbar with XUL

| Monday, June 13, 2011
The first time that I was asked to make a toolbar for Firefox my first thought was, "sounds like fun!"  However, I didn’t have a clue about where to start and how to find the information about it.  I wrote this post to share my experience and help anybody who finds himself in a similar situation

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"?>
  <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,

Read more: closerisbetter

Posted via email from Jasper-net

0 comments: