In this example, we will add a new icon to the toolbar, right next to the "Zoom" icons. The action associated with this icon will be a warning dialog box.

Reviewing Dependencies

The customization of the toolbar requires one INT module that is part of the INTViewer platform:

• IntviewerCore

See the list of INTViewer modules to load the INTViewer platform and for a description of each module.

Creating your module template using NetBeans wizard

• Click File -> New Project
• In the New Project wizard select NetBeans Modules from the Categories list and Module from the Projects list and click Next >

• For Project Name, specify mydemotoolbaritemmodule
• Select option Standalone Module and make sure to specify the INTViewer platform in the NetBeans Platform field.

• Click Next > and specify com.mycompany.myviewer.mydemotoolbaritem for the Code Name Baseand MyDemoToolbarItemModule for the Module Display Name.
• Check Generate XML Layer (if this option is not present, check the Registering the layer.xml file article)
• Click on Finish

• In the Projects tree view, you should see your project which includes a number of files that have been created for you

Configuring your Module

• In the Projects tree, right click on the module MyDemoToolbarItemModule and select Properties from the list.
• Under Categories, select Libraries.
• Select Java plaform JDK1.7 . If you don't see this option, you will need to install jdk1.7 and load it into NetBeans using optionTools->Java Platforms
• Click on the Add button next to Module Dependencies
• In the list, select IntviewerCore and click OK.
• Click OK in Project Properties Dialog

Adding Icons

You need to create two PNG icons, one with a width and height of 16, and another one with a width and height of 24. The 16x16 icon is your base icon, the 24x24 icon is your derived icon.

On Windows, you can use Paint to create these two icons quickly. You can use the Image -> Attributes dialog box of Paint to control the width and height of your icons.

The name of the derived icon should be identical to the name of your base icon, except for the number 24 added before the .PNG extension of your derived icon.

• Drag and drop these two icons from your file system to your module's source package.

Creating an Action class

• In the Projects tree, right click on the module MyDemoToolbarItemModule and select New -> Java Class... from the list.
• Enter DemoMenuItemAction as Class Name and select com.mycompany.myviewer.mydemotoolbaritem as Package.

• Automatically add an import for ActionListener

• Automatically create the skeleton of required methods for this class

• Customize the actionPerformed method

This requires the import of com.interactive.intviewerapi.util.DialogManager. You can download the DemoMenuItemAction.java file from the attachments at the bottom this page.

More details about dialog boxes are available.

Customizing the layer.xml file

Modify the layer.xml file as follow:

In this layer.xml file:

• <folder name="Actions"> indicates the start of the list of actions available in the module (do not change this line)
• <folder name="ZoomActions"> indicates the list of actions in the Zoom toolbar (the name ZoomActions is arbitrary)
• <file name="com-mycompany-myviewer-mydemotoolbaritem-DemoToolbarItemAction.instance"> indicates a unique name for the icon
• <attr name="delegate" newvalue="com.mycompany.myviewer.mydemotoolbaritem.DemoToolbarItemAction"/> specifies the action class associated with the icon
• <attr name="displayName" stringvalue="DemoToolbarItemDisplayName"/> indicates the name of the icon, as see by the end-user
• <attr name="instanceCreate" methodvalue="org.openide.awt.Actions.alwaysEnabled"/> specifies the class controlling the visibility of the menu item. In this case, it's always visible
• <attr name="noIconInMenu" boolvalue="false"/> indicates that no other icon is added
• <folder name="Toolbars"> indicates the start of the list of toolbars customized in the module (do not change this line)
• <folder name="Zoom"> indicates the name of the toolbar being customized
• <file name="com-mycompany-myviewer-mydemotoolbaritem-DemoToolbarItemAction.shadow"> indicates a unique name for the icon
• <attr name="originalFile" stringvalue="Actions/ZoomActions/com-mycompany-myviewer-mydemotoolbaritem-DemoToolbarItemAction.instance"/> indicates the name hierarchy of the icon being added
• <attr name="position" intvalue="0" /> indicates the position of that icon within its set

You can download the layer.xml file from the attachments at the bottom this page.

Viewing your icon

Click the green arrow in the Netbeans toolbar to run your customized INTViewer. Your icon should be immediately visible. In this example, the 24x24 icon is displayed:

You can switch to the smaller icon using the View/Toolbars menu:

Here is the same toolbar using the 16x16 icon:

When clicked, this icon should display this dialog box:

Adding separations

To separate your icon from other icons, just change the name of your "folder" in layer.xml to a folder name that is unused.

Click the green arrow in the Netbeans toolbar to run your customized INTViewer. Our icon has been moved and a separator has been added. Move your toolbar to the desired location to automatically adjust the position number.

The layer.xml file is automatically updated, a position attribute has been added.

Here is the updated toolbar, with our icon on the far right: