Before starting this tutorial, it is strongly suggested that you read Custom Add-ons in CorelDRAW, Corel DESIGNER and Corel PHOTO-PAINT.
Using HTML to define user interface adds flexibility and since many people have some experience on it, it can be relatively easier to create add-ons with. To make the tutorial simple, we created a template web docker to start with.
If everything was done right, CorelDRAW should have the new docker and menu item available. If not, you can always go back and fix the error and re-launch the application holding down F8 to reset the workspace (make sure you backup your workspace before doing so, as described in Custom Add-ons in CorelDRAW, Corel DESIGNER and Corel PHOTO-PAINT).
You can find the new menu item under Window > Dockers.
Now, you can try the docker out by going to Window > Dockers > MyWebDocker. The docker should look similar to the following image, depending on what name you gave it (in this tutorial, we name it MyWebDocker).
The docker should now look like:
Open MyWebDocker.html and make note of the meta tag.
<meta http-equiv="MSThemeCompatible" content="yes"/>
This line tells the HTML control to theme buttons and other controls. If this tag was not set, the controls would look like they do in Windows 2000 and 95. The next things to note are:
window.external.RegisterEventListener( "SelectionChange", "OnSelectionChange()" );
and
window.external.UnregisterEventListener( "SelectionChange" );
These lines register and unregister an event listener respectively. After calling RegisterEventListener, a selection change in the application will result in the javascript function OnSelectionChange being called. The unregister isn't really necessary for this docker since we always want to listen for the even while the docker is open. The event listener is unregistered automatically when the docker is closed.
There are many other events that can be listened to, such as:
In most cases, you can guess what these events do by their names.
The object model for the applications can be accessed through
window.external.Application
For example, in the selection docker you will find the line:
numSelected.value = window.external.Application.ActiveSelection.Shapes.Count;
If you are familiar with VBA in CorelDRAW, part of this probably looks familiar. In VBA, ActiveSelection.Shapes.Count is a property which returns the number of shapes in the active selection. Any object model function available in VBA can be run in javascript by placing "window.external.Application" in front of it. For example, if you wanted to call the function that shows the docker:
window.external.Application.GMSManager.RunMacro( "MyWebDocker", "Macros.ShowMyWebDocker" );
It is important to be aware of the functions you expose via the GMS files. For example, you may want to parse subdirectories or write files (like saving presets). Via a Microsoft ActiveX control, you can get a fileSystemObject in javascript, but this brings up a message box that says that the HTML is not safe. The wrong way around this message would be to write a function in your GMS to retrieve the fileSystemObject to use in javascript.
You may know your docker is offline, and therefore safe to do whatever you want, but another docker may be online. If a hacker manages to hack an online docker, and they assume your add-on is also installed, they would have complete access to the computer's file system.
The right way is to do as much work as possible in VBA when doing stuff javascript doesn't support. Avoid passing parameters to the function that would give access to locations that are not part of your add-on. For example, if you wanted to get a list of subfolders in your add-on's folder, instead of using the fileSystemObject in javascript, write a function in VBA that parses the directory.
You may try out the TablePresetDocker.zip as an example.