DTX Development Video - Creating a Toolbar with The Eclipse Plug-in

The easiest way to create a DTX toolbar is by using the DTX Eclipse plugin. Once you have installed the DTX plugin, start your Eclipse and create a new project. You will see a new Project type: Toolbar Project.

Select it and click on ‘Next’ button. The New Project wizard appears. Provide any meaningful name to your project. There you may also choose an alternative location for your project files.

Then click on ‘Next’ button again. This will take you to the Project options page:

The Toolbar title is the name that browsers show for your toolbar. This name may appear in different locations in the browser's UI.

A unique namespace is required for your toolbar. This namespace should also be used in your JavaScript. All your global functions and variables should be inside this namespace. Make sure your namespace is unique among all your projects. Two different toolbars having the same namespace may conflict in some browsers. This namespace is also used in your chrome URLs so it must be all lower-case.

Company Name, Project Description, Homepage URL and Access Key may also appear in the Add-ons user interface for some browsers.

You can specify a URL for updates. This is for the process of a silent update. The Update interval is the number of minutes elapsed before the toolbar checks for a new update.

At this point you may press ‘Finish’ button. The Plug-in will create the skeleton of your toolbar and display it as a traditional Eclipse project:

A few files have been created for you in the root folder for the Project. You don't need to work with them necessarily, but it helps to know what they are:

Chrome.manifest and install.rdf are required for the toolbar's registration in Firefox.

• Dtx.dll and dtband.dll are used only for IE.
• Manifest.XML contains information about the toolbar for the DTX runtime.
• DTX.XSD is an XML schema for the DTX markup.
• Targets.xml contains Ant targets to register and unregister the toolbar in IE (for Firefox you will need other steps).
• The plugin has also created one folder: chrome. Whatever is inside this folder will be accessible using the chrome:// protocol. To refer to a resource within this folder later, you can compose a URL by appending the toolbar's namespace to the chrome protocol: chrome://mytoolbar/. This URL point to the toolbar's chrome folder after it is installed.
• Another two folders within chrome are created: content and skin. It is a good idea to split your code from your graphic resources, so content will store JavaScript and XML files and skin will have the images and other visual resources.
• The plugin also created a file named toolbar.xml. This file contains the markup for your toolbar. Bring the file into the XML editor:

In the XML for the toolbar you will see a list of <import> nodes. This brings the specified classes into the toolbar code. Class names are the same as the tag names. So, for you to be able to have a button in the toolbar, you will need to have an <import> node for the button's tag.

You can see a <link> node for a custom CSS file. You can have CSS rules applied to elements in the XML, and it is a good idea to have them in a separate file inside the skin folder.

There is also a <script> tag, which loads a JavaScript file into the toolbar code.

And then there is a <toolbarbutton> tag, which defines the only button this default toolbar will show. This is the area in the XML where you should declare the other elements that will be in your toolbar.

The plugin created another file for you: mytoolbar.js. This is inside the “chrome\content” folder.

Here you can extend the JavaScript namespace for your project. For instance, if you want to add a new function you should do:

mytoolbar.testFunction = function() {
// add function code here
}

To have this called from the toolbar, you need to set up an event handler in one element, for instance:

<toolbarbutton
label="My Toolbar"
oncommand="mytoolbar.testFunction()"
image="chrome://mytoolbar/skin/dtxlogo.png" />

Whenever the users press the button, the oncommand event will be fired and your function will be called to react to it.

To test the toolbar you need to register it to a browser. DTX supports IE and Firefox. The steps are different depending on the browser.

In IE, you can use an Ant target the plugin has created for you. Locate the targets.xml file in the Project's root and drag it into an Eclipse Ant view. You will see something like this:

Double click on the target labelled “Register Toolbar in Internet Explorer”. You should get a message box saying the DTX DLL was successfully registered.

Now, every time you open IE, your toolbar should be there. If you modify any of the toolbar source files and save, the plugin will rebuild the toolbar in the background. You don't need to do anything else to see the effects of your changes.

To run the toolbar in Firefox, you need to go to the Firefox User Profile folder. This is usually in the Application Data folder, under Mozilla\Firefox\Profiles. This is the location of  the profile you want to use for testing the toolbar and open its Extensions folder. To this folder you need to add a text file with no extension. The name for the file must be a GUID that the plugin has generated for your toolbar. You can find it in the Install.RDF file required by Mozilla. For instance: {118a3cf4-0008-455c-b7cb-85489566a167}. Inside this text file, paste the path to your toolbar project folder and save. Next time you open Firefox in that profile, the toolbar should appear.