Adding an Icon with your XSLT File

Introduction

We will be using the same XSLT files that we created last week, so if you have not read last week’s post you may wish to do that first.

We added a menu item to the Dockers menu for our new custom .NET docker, each new item added gets a default icon assigned to it as shown in the following screenshot:

This icon is boring and if you have a long list of custom dockers they all start to blur together. An easy way to fix this is to define an icon in our XSLT file. Today I will show one example of how you can do this.

Creating a Custom Icon

To create our custom icon we are going to use the built in icon editor. First we want a temporary place to store our icon, so let’s create a new toolbar. You can do this by going to the menu and selecting: Tools | Customize | Customization | Command Bars, on the right side click the New button and a command bar named New Toolbar 1 should be created. Now, we need a command so that we can draw an icon, from the left side click on Commands, just below Command bars. From the dropdown list select Macros, you should get a list of macros and notice they all have the same icon. You can grab whichever one you would like, as we are only using the toolbar as a place holder, and drag it over to the New Toolbar 1. After you have dropped it, the icon should now show on the toolbar. Click on the icon to make sure it selected and then click the Appearance tab in the options dialog. It should look something like this:

Using the editor we can now draw our new icon. The editor takes a bit to get used to, but it has the advantage that your icon will be the correct size, and limited to the correct colors. You may also use the import drop down to show a list of common icons to start from, you may even import an icon.

Note: If you import an icon, the colors may change; this is because you are limited to the color palette you see in the editor.

Once your done click OK, and you should now have your New Toolbar 1 with your icon on it.

Export Workspaces

Now that we have our icon we need to convert it so that it is usable in our XSLT file, they easiest way to do this is simply to export our workspace. To do this, right click on the New Toolbar 1 | Customize | Workspace | Export Workspaces… So that you do not have tons of code to dig through we are only going to export the New Toolbar 1 we created, click the plus icon next to Toolbars and find it in the list and check it, click Save. Notice it now wants to save a XSLT file, yeah! Name it whatever you wish and click save.

Using a Text Editor, open the XSLT file you just created. The icon will be very easy to spot as it is the large block of letters enclosed in the <userSmallBitamp></userSmallBitamp> tags. Copy the tags and everything in between.

Modifying our XSLT File

Open the AppUI.xslt file you created in last week’s example and find the section with the comment:

<!-- Define the button which shows the docker -->

The next line should begin with <itemData guid…, we need to go the end of this line and change the /> to just a > hit your enter key and type </itemData> Now inbetween these two paste the text from the workspace file. When you are done you should have something like this. (I used the template file you should have your values for <<GUID A>> and such.)

Results

Fire up CorelDRAW with your newly modified XSLT file and hopefully we have good results. You may have to press F8 to reset the workspace to pick up the changes if you are modifying a docker you have already installed.

Conclusion

By exporting the workspace we are able to convert our icon to XML so that we may use it in our XSLT file, now we have a custom icon to go with our custom .NET Docker entry on the Dockers menu. One note, that this will not add an icon to the docker tab itself, currently it is not possible to add an icon to the tab.

Coming up Next…

How to create an installer for your custom dockers or macros...