CorelDRAW, Corel DESIGNER and Corel PHOTO-PAINT are very extensible and customizable applications. This tutorial will explain how to create an add-on and customize the user interface. This is a technical tutorial and examples will include markup and code in XML, XSLT, VBA, HTML and JavaScript. Although the tutorial is designed to allow you to tweak the examples without a full understanding of the languages, some knowledge will be helpful. You will also need a GUID generator, such as http://www.guidgenerator.com/.
The Addons folder can be found at <install folder>\Programs\Addons for 32-bit versions of the applications, or <install folder>\Programs64\Addons for 64-bit versions of the applications.
Under the folder for the add-on, you may create three empty files Coreldrw.addon, CorelPP.addon or Designer.addon to indicate which applications shall load the add-on. For example, if you want to load the add-on in CorelDRAW and PHOTO-PAINT but not in DESIGNER, then you create two empty files Coreldrw.addon and CorelPP.addon in the folder for the add-on.
To start with something simple, we will create an addon which adds a menu item to the "Tools" menu. The new menu item will run the Calendar Wizard macro, which comes with the CorelDRAW Graphics Suite.
The user interfaces of CorelDRAW, DESIGNER and PHOTO-PAINT are store in XML files. To add a custom user interface, we create two XSLT files. An XSLT file is a file that transforms an XML file. For our purposes, the XSLT simply copies all of the existing user interface and inserts the new user interface into the application's main XML file. AppUI.xslt defines new buttons, menu items, menu flyouts and dockers.
<?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:frmwrk="Corel Framework Data"> <xsl:output method="xml" encoding="UTF-8" indent="yes"/> <frmwrk:uiconfig> <!-- 'applicationinfo' should always be the topmost frmwrk element --> <frmwrk:applicationInfo userConfiguration="true" /> </frmwrk:uiconfig> <!-- Copy all of the existing user interface --> <xsl:template match="node()|@*"> <xsl:copy> <xsl:apply-templates select="node()|@*"/> </xsl:copy> </xsl:template> <!-- Add the custom user interface items --> <xsl:template match="uiConfig/items"> <xsl:copy> <xsl:apply-templates select="node()|@*"/> <itemData guid="886e8a11-c69c-30be-4d7f-f33a704645e9" dynamicCommand="CalendarWizard.Wizard.CreateCalendar" dynamicCategory="2cc24a3e-fe24-4708-9a74-9c75406eebcd" bmpCol="0" bmpRow="0" userCaption="Create Calendar"/> </xsl:copy> </xsl:template> </xsl:stylesheet>
Towards the end of the file, you can see the new button (or item) that we have defined. The GUID for this item is 886e8a11-c69c-30be-4d7f-f33a704645e9. When you create a new addon, you should always generate your own GUIDs to ensure that you add-on does not conflict with other add-ons. For the purposes of this tutorial, it is safe to use the GUIDs given in the examples.
dynamicCommand="CalendarWizard.Wizard.CreateCalendar" tells the item which VBA function to run.
dynamicCategory="2cc24a3e-fe24-4708-9a74-9c75406eebcd" tells the item to add itself to customization and the GUID that follows it refers to the VBA customization list.
bmpCol="0" and bmpRow="0" defines the icon to use. bmpCol should be a value between 0 and 9, while bmpRow can go above a thousand. It is possible to define custom icons, however this is out of the scope of this article.
Now that the button is defined, we can add the item to the application user interface. As an example, we will place the button in the "Tools" menu, right after "Scripts."
<?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:frmwrk="Corel Framework Data"> <xsl:output method="xml" encoding="UTF-8" indent="yes"/> <frmwrk:uiconfig> <!-- 'applicationinfo' should always be the topmost frmwrk element --> <frmwrk:applicationInfo userConfiguration="true" /> <frmwrk:compositeNode xPath="/uiConfig/commandBars/commandBarData[@guid='6f114d89-1b8c-4877-a4af-a3624ddd95f6']"/> <frmwrk:compositeNode xPath="/uiConfig/frame"/> </frmwrk:uiconfig> <!-- Copy all of the existing user interface --> <xsl:template match="node()|@*"> <xsl:copy> <xsl:apply-templates select="node()|@*"/> </xsl:copy> </xsl:template> <!-- Add the button to the Tools menu --> <!-- This is the GUID for the Tools menu This is the GUID for the Macros button --> <xsl:template match="uiConfig/commandBars/commandBarData[@guid='6f114d89-1b8c-4877-a4af-a3624ddd95f6']/menu/item[@guidRef='da5c7096-bd08-4fdb-a932-1db4ff3259bd']"> <xsl:copy> <xsl:apply-templates select="node()|@*"/> </xsl:copy> <item guidRef="266435b4-6e53-460f-9fa7-f45be187d400"/> <!-- add a separator --> <item guidRef="886e8a11-c69c-30be-4d7f-f33a704645e9"/> <!-- add the calendar wizard button --> </xsl:template> </xsl:stylesheet>
Finally, we need to specify which applications to load this addon.
This will tell CorelDRAW to load the addon, however Corel PHOTO-PAINT and DESIGNER will not load that addon. If you launch CorelDRAW, you should now see a new menu item called "Create Calendar" under the "Tools" menu.
Keep in mind that if you make more changes to UserUI.xslt, you will need to hold F8 when you launch CorelDRAW, DESIGNER or PHOTO-PAINT. This will reset your workspace and you will lose any customization that you have made to your workspace, so it is recommended that you take a backup of your workspace before doing this. To back up your workspaces, go to %AppData%\Corel\CorelDRAW Graphics Suite 2022 or %AppData%\Corel\CorelDRAW Technical Suite 2022 (depending on which box you purchased) and copy the Workspace folder under \Draw or \Designer.
You may try out the MyAddon.zip as an example.