Criando uma barra de comandos para CorelDraw com suas Macros
Guia para desenvolvedores VBA. Com uso do sistema de addons do CorelDraw Visual Studio e minhas ferramentas personalizadas
Publicado: Modificado:
Objetivos:
-Criação de uma barra de ferramentas com atalhos para Macros.
-Criação de um instalador para essa barra.
Introdução:
Este modelo aplicasse para o CorelDraw, em suas versões 17.1 ou superior até o momento 24.1.
Este modelo irá se utilizar do sistema de Addons do CorelDraw, com a utilização da IDE Visual
Studio 2019 Community Edition da Microsoft.
Ao final deste guia teremos um instalador distribuível, este instalador requer .NET Framework 4.0
ou superior na máquina do cliente, este por sua vez, é geralmente instalado pelo CorelDraw em sua
instalação.
Todo o processo pode ser feito também de forma manual, assim como descrito na documentação
oficial para desenvolvedores da Corel. CorelDRAW Community
Porém neste momento utilizaremos algumas ferramentas.
Preparando o ambiente de trabalho.
Como foi mencionado, utilizaremos o Visual Studio 2019, então antes de tudo precisamos baixá-lo
e instalá-lo. O Visual Studio está disponível no site da Microsoft, Agradecemos por baixar o Visual
Studio - Visual Studio (microsoft.com) .
Após as primeiras telas, será pedido para selecionar a carga de trabalho, não é recomendado marcar
tudo, pois a instalação pode passar de 50 gigas, selecione apenas “.NET desktop development”.
Figura 1: Selecionando a carga de trabalho
Mais detalhes no link Instalar o Visual Studio | Microsoft Docs
Agora baixe e instale as seguintes extensões para o Visual Studio
CorelDraw Addons Templates - Visual Studio Marketplace
CorelDraw Addons Packer - Visual Studio Marketplace
Para facilitar a consulta pelos Guids do CorelDraw, é possível utilizar este addon.Veremos mais
sobre este assunto logo.
DrawUI Explorer CorelDraw Addon (bonus630.com.br)
Criando o Projeto
Abra seu Visual Studio como administrador, clique no botão, “Criar um novo projeto”
Figura 2: Novo Projeto
Selecione “C#” no primeiro combobox e “CorelDraw Addons” no último, e clique no “CorelDraw
Menu Item Addon”
Digite um nome para seu Projeto, é recomendado não utilizar caracteres especiais e nem iniciar o nome com
números, assim como na nomeação de variáveis em VBA.
No Próximo formulário será pedido as versões de CorelDraw que serão suportadas pelo seu projeto,
afim de testes será necessário ter instaladas as versões na máquina de desenvolvimento.
Entendendo o Projeto
Após a criação de seu projeto você terá algo similar a está tela, na figura abaixo:
O Visual Studio é bem similar ao editor integrado de VBA do CorelDraw, temos na figura, o editor
de texto e o explorador de arquivos.
Os arquivos
• AppUI.xslt: este é um arquivo tipo xml, uma folha de estilos para xml, neste arquivo
criaremos todos nossos controles e nossa barra de comando.
• UserUI.xslt: este, tem sua estrutura como xml, assim como o anterior, porém a
responsabilidade dele é adicionar nossos controles a interface do usuário.
• Config.xml: é responsável pelo mapeamento dos recursos,(imagens, textos), utilizados nos
controles
• CorelDrw.Addon: é um arquivo vazio.
• Resources.rct: é o arquivo de recursos, onde alocaremos nossos ícones e textos .
Não entraremos em detalhes dos arquivos restantes.
Editando o Projeto
Primeiramente, vamos copiar todas as macros que desejamos disponibilizar para a pasta do projeto,
para localizar a pasta do projeto, basta dar um clique com o botão direito do mouse em cima do
projeto no “Explorador de Soluções” e clicar para abrir no “Explorador de arquivos”.
Cole seus arquivos .gms nessa pasta.
De volta ao “Explorador de Solução” no Visual Studio, você deve marcar o botão mostrar todos os
arquivos, em seguida no botão atualizar, com isso seus arquivos .gms ficaram visíveis no
“Explorador de Solução”
Próximo passo, devesse clicar com o botão direito em cada um de seus arquivos .gms, e clicar em
“Incluir no Projeto”
Logo em seguida clique novamente no mesmo arquivo com o botão direito do mouse, e clique em
“Propriedades”
Selecione “Copiar sempre” no combo box
Criando os Botões e a Barra de Comandos
Após fazer esses passos para todos os arquivos .gms, com um duplo clique no arquivo AppUI.xslt
file abra-o, vamos criar nossa barra de comando com um botão e ligá-los ao comando da macro no
arquivo .gms. Apague os textos marcados da imagem.
Seu arquivo deve ficar assim.
Não altere o valor do guid, este é sempre diferente em cada projeto.
Adicione os seguintes atributos a tag itemData
dynamicCommand="Projeto1.Modulo1.Macro1"
dynamicCategory="2cc24a3e-fe24-4708-9a74-9c75406eebcd"
O valor do atributo “dynamicCommand” deve ser adquirido de acordo com a macro que você irá
chamar, seguindo o modelo de Projeto.Modulo.Macro, para melhor entendimento observe a
nomenclatura no “Gerenciador de Macros”/”Scripts” no CorelDraw
Copie o valor do atributo guid para o atributo icon adicionando guid:// ao inicio do valor
icon="guid://e88c668a-b6a9-493b-8267-09bbaf9c3763".
Este é nosso botão, por enquanto ele não será adicionado ao CorelDraw, agora vamos adicionar a
tag para a criação da barra de comandos.
<itemData guid="e88c668a-b6a9-493b-8267-09bbaf9c3763" dynamicCommand="Projeto1.Modulo1.Macro1" dynamicCategory="2cc24a3e-fe24-4708-9a74-9c75406eebcd" caption="Valor" icon="guid://e88c668a-b6a9-493b-8267-09bbaf9c3763" enable="true"/>
Nota: Para cada macro, devesse adicionar um novo trecho do código acima sempre alterando
o guid.
Abaixo dessas linhas
Adicione
<commandBarData guid="" nonLocalizableName="Seu texto" userCaption="Seu texto" locked="true" type="toolbar"> <toolbar> <item guidRef="e88c668a-b6a9-493b-8267-09bbaf9c3763" dock="top"/> </toolbar> </commandBarData>
Nota: Para cada macro, devesse adicionar uma nova tag item dentro da tag toolbar com seu
respectivo guid
Vamos criar um guid para a tag commandBarData
Para entender melhor tags, atributos e valores em um arquivo xml
Introdução a XML e Regras de sintaxe (devmedia.com.br)
Para gerar a guid para a tag commandBarData, vá
até o menu ferramentas e multi guid gen no
Visual Studio.
Copie um guid e adicione o valor no atributo “guid” da tag “commandBarData” , não fecho o
“Multi Guid Gen”, e lembresse do guid copiado.
Vamos adicionar mais um botão a nossa barra, você deve adicionar a quantidade necessária para
rodar todas suas Macros que pretende incluir na barra.
Para isso duplique a tag
<itemData guid="e88c668a-b6a9-493b-8267-09bbaf9c3763" dynamicCommand="Projeto1.Modulo1.Macro1" dynamicCategory="2cc24a3e-fe24-4708-9a74-9c75406eebcd" caption="Valor" icon="guid://e88c668a-b6a9-493b-8267-09bbaf9c3763" enable="true"/>
Copie um guid do “Multi Guid Gen”, esse guid não pode ser o mesmo da tag “commandBraData” e
nem da tag que foi copiada.
Altere o valor do atributo dynamicCommand="Projeto2.Modulo1.Macro1"
O valor deve indicar a “Macro ” que será executada, lembrando de seguir o padrão
Projeto.Modulo.Macro descrito acima, você pode altera o valor do “caption” e altere o valor do
“icon” substituindo o guid pelo recém gerado.
Com isto criamos mais um botão, agora adicionamos ele a nossa “Command Bar”, vá ate o
<commandBarData guid="" nonLocalizableName="Seu texto" userCaption="Seu texto" locked="true" type="toolbar"> <toolbar> <item guidRef="e88c668a-b6a9-493b-8267-09bbaf9c3763" dock="top"/> </toolbar> </commandBarData>
Duplique a linha
<item dock="top" guidref="e88c668a-b6a9-493b-8267-09bbaf9c3763">
Altere o valor do “guidRef” para o valor utilizado acima.
Note que esta linha é uma Referência para o nosso botão dentro de nossa barra de comando.
Ao final você terá parte do arquivo semelhante a este, mas com guid diferentes, dificilmente irá
acontecer de ser gerado um guid repetido.
Adicionando os Icones
De um duplo clique no arquivo “resources.rct” no “Explorador de Solução”
Em resources.rct clique com o botão direito do mouse e clique em “Adicionar Recursos”
Na próxima janela clique no botão “Importar” e selecione seus icones.
Agora com o direito novamente em qualquer um dos itens clique em “Simbolos do Recurso”.
Memorize esse valor ou volte nessa janela para futuras consultas, feche a janela e salve o arquivo.
Abra o arquivo “config.xml”
Note que temos está linha
<resEntry id="e88c668a-b6a9-493b-8267-09bbaf9c3763" string="10223" icon="104"/>
Essa linha tem um id, este id faz referência ao nosso botão pois possuem o mesmo guid, mas ele
está utilizando um icone demostrativo do “Modelo de Projeto” do Visual Studio, para alterar para
um de nosso icones modifique o valor “icon” para um de nossos icones, esses valores são os vistos
acima no “Simbolos do Recurso”
<resentry icon="108" id="e88c668a-b6a9-493b-8267-09bbaf9c3763" string="10223">
Duplique essa linha e altere o “id” para o guid do nosso segundo botão e o valor “icon” para o
respectivo icone.
<resentry icon="109" id="3cc3a10a-e5ee-4950-976c-fae1a891acf8" string="10223">
No meu caso ficou assim. Repita esse passo para a quantidade de botões criados.
Salve o arquivo “config.xml”
Com todos os botões criados e adicionados a barra e customizados com seus icones, vamos para o
passo final, que é adicionar tudo na “Interface do usuário”. Mas antes disso vamos dar uma olhada
na estrutura do arquivo que define a interface do usuário.
O Arquivo DrawUI.xml
Este arquivo encontrasse na pasta “(coreldraw)/Draw/UIConfig”, onde coreldraw é a pasta de
instalação da sua versão de CorelDraw.
Ele é responsável pela criação da interface de usuário sem customizações, ele se uni ao arquivo de
“Area de Trabalho” para gerar a interface final.
Para uma visualização mais amigável vamos utilizar o Addon para CorelDraw, DrawUI Explorer,
não é necessário já que você pode abri-lo com um editor de texto qualquer.
Com o Drawui Explorer aberto clique no botão “DrawUI” e selecione o arquivo “DrawUI.xml”
O DrawUI Explorer irá mostrar o arquivo xml em forma de “Arvore”.
Nossos botões criados no arquivo “Appui.xslt” irão se incorporar na tag “items” e nossa barra de
comando irá se incorporar na tag “commandBars”.
Explore a tag “commandBars” e note a semelhança com a nossa barra.
<commandBarData guid="" nonLocalizableName="Teste" userCaption="Teste" locked="true" type="toolbar"> <toolbar> <item guidRef="/> <item guidRef="/> </toolbar> </commandBarData>
Clicando sobre uma das tags temos informações importantes, como os atributos e o “Xpath”, o
“Xpath” é muito importante para a próxima etapa.
Nota: o “Xpath” não vem definido no arquivo xml, para consegui-lo de forma manual devesse
seguir toda a hierarquia do xml, mais informações sobre xpath: XPath Tutorial (w3schools.com)
Adicionando nossos controles a UI
O arquivo responsável por fazer esse processo é o “UserUi.xslt”, esse parte do processo é a mais
complexa e delicada, primeiro demos pensar onde adicionaremos nossos controles, segundo que
qualquer minimo erro pode ocasionar no não aparecimento de nosso controle, e terceiro lugar, uma
vez que o arquivo “UserUI.xslt” é carregado no CorelDraw, todas as alterações posteriores vão
requerer a exclusão da “Area de Trabalho” do CorelDraw. (F8).
Onde adicionar?
Neste caso como criamos uma barra de comando nada mais lógico que adicionar junto a outras
barras de comando.
A tag “copy” do xslt copiará trechos de xml informados pelo xpath no atributo “match” da tag
“template”.
Primeiro vamos copiar todos nosso botões para nossa barra de comandos.
Abra o arquivo “UserUI.xslt”, apague o texto da linha 48 a 67;
Para visualizar o número de linha no Visual Studio, vá em ferramentas → opções → editor de texto
→ Todas as linguagens → marque “Número de linhas”.
Adicione o seguinte texto na linha 48
<xsl:template match="commandBarData[@guid='1c2b607b-791a-4d77-a51e-73d1c976bee2']/toolbar"> <xsl:copy> <xsl:apply-templates select="node()|@*"/> <xsl:if test="not(./item[@guidRef='e88c668a-b6a9-493b-8267-09bbaf9c3763'])"> <item guidRef="e88c668a-b6a9-493b-8267-09bbaf9c3763"/> </xsl:if> <xsl:if test="not(./item[@guidRef='3cc3a10a-e5ee-4950-976c-fae1a891acf8'])"> <item guidRef="3cc3a10a-e5ee-4950-976c-fae1a891acf8"/> </xsl:if> </xsl:copy> </xsl:template>
É necessários utilizar os mesmo guids que no arquivo “AppUI.xslt”, veja na imagem a relação.
Para cada botão devesse repetir o texto
<xsl:if test="not(./item[@guidRef='3cc3a10a-e5ee-4950-976c-fae1a891acf8'])"> <item guidRef="3cc3a10a-e5ee-4950-976c-fae1a891acf8"/> </xsl:if>
Alterando o guid referente a cada botão.
Nota: A ordem de adição do controle ao arquivo “UserUI.xslt” é a ordem mostrada na Interface do
CorelDraw
Após todos os botões serem adicionados, vamos adicionar a barra de comandos.
Neste exemplo vou adiciona-lá abaixo da barra padrão. Pode se adicionar em qualquer outro ponto.
Para isso precisamos do “Xpath”.do “Container” que aloja as barras superiores, para encontrar esse
container vamos utilizar a barra Padrão como refêrencia. Vamos voltar ao DrawUI Explorer no
CorelDraw.
Expanda a arvore de visualização da tag “commandBars”, essa tag contém todas as barras padrões
do CorelDraw, vamos procurar pela barra “Padrão”, Vá passando pelas tags “commandBarData” e
observando na janela detalhes, logo veremos o nome “Padrão” e seu guid.
Clique no botão lampada para vermos se realmente é nossa barra. A barra “Padrão” vai se iluminar.
Clique com o botão direito em cima do atributo guid, circulado na figura acima, clique em “Search
Item”.
Na janela “Search Tree” irá mostrar um resultado, clique sobre ele. E de um duplo clique sobre o
caminho para copia-lo
Precisamos fazer um pequena alteração nesse “Xpath”, precisamos adicionar a referência da barra
de comando “Padrão”, já que este caminho nos leva a apenas o Container dela
/uiConfig/containers/container[@guid='bee85f91-3ad9-dc8d-48b5-d2a87c8b2109']/
container[@guid='Framework_MainFrame-layout']/dockHost/toolbar[1]
Como queremos adicionar nossa barra após está modificaremos para
/uiConfig/containers/container[@guid='bee85f91-3ad9-dc8d-48b5-d2a87c8b2109']/container[@guid='Framework_MainFrame-layout']/dockHost/toolbar[@guid='c2b44f69-6dec-
444e-a37e-5dbf7ff43dae']
Voltando ao arquivo “UserUI.xslt”, no ponto onde paramos nossa edição após nosso texto
adicionado, vamos adicionar mais um bloco de texto
<xsl:template match="xpath"> <xsl:copy> <xsl:apply-templates select="node()|@*"/> <xsl:if test="not(./toolbar[@guidRef='1c2b607b-791a-4d77-a51e- 73d1c976bee2'])"> <toolbar guidRef="1c2b607b-791a-4d77-a51e-73d1c976bee2" dock="top"/> </xsl:if> </xsl:copy> </xsl:template>
Note o guid é o mesmo da barra de comandos criada no arquivo AppUI.xslt, troque o texto do
atributo “match” de xpath para o caminho que editamos antes.
<xsl:template match="/uiConfig/containers/container[@guid='bee85f91-3ad9-dc8d-48b5- d2a87c8b2109']/container[@guid='Framework_MainFrame-layout']/dockHost/ toolbar[@guid='c2b44f69-6dec-444e-a37e-5dbf7ff43dae']"> <xsl:copy> <xsl:apply-templates select="node()|@*"/> <xsl:if test="not(./toolbar[@guidRef='1c2b607b-791a-4d77-a51e- 73d1c976bee2'])"> <toolbar guidRef="1c2b607b-791a-4d77-a51e-73d1c976bee2" dock="top"/> </xsl:if> </xsl:copy> </xsl:template>
E finalmente precisamos adicionar nossa barra aos “Estados”, isso fará com que sejá possível
manter ela visível após fechar o CorelDraw com ela visível e vice versa.
Precisamos encontrar o “Xpath” dos “Estados”.
De volta ao DrawUI Explorer, clique normalmente na tag “toolbar” que encontramos na pesquisa
anterior com isso o caminho das tag será realçado, vá expandindo as tags, observe o caminho, vá ate
a tag “states” e tente encontrar o guid da barra “Padrão”.
<xsl:template match="uiConfig/states/state[1]/container[@guidRef='bee85f91-3ad9-dc8d-48b5- d2a87c8b2109']/layout/dockHost[@guid='894bf987-2ec1-8f83-41d8-68f6797d0db4']/ toolbar[@guidRef='c2b44f69-6dec-444e-a37e-5dbf7ff43dae']"> <xsl:copy> <xsl:apply-templates select="node()|@*"/> <xsl:if test="not(./toolbar[@guidRef='1c2b607b-791a-4d77-a51e- 73d1c976bee2'])"> <toolbar guidRef="1c2b607b-791a-4d77-a51e-73d1c976bee2" dock="top"/> </xsl:if> </xsl:copy> </xsl:template>
Salve o arquivo “UserUI.xslt”.
Testando
Primeiramente, para um teste eficaz, descarregue as macros que estão no seu projeto do Visual
Studio do “Gerenciador de Macros”/”Script” do CorelDraw, precisamos checar se as macros vão ser
carregadas da pasta “Addons”, também remova-as das pastas de carregamento automatico, como
em (corelDraw)/Draw/GMS e (user)/appData/Roaming/Corel/(corelDraw/)/Draw/GMS.
No Visual Studio clique no botão “Iniciar”
O coreldraw deve abrir e a barra deve ser aberta uma primeira vez.
Se a barra não aparecer cheque os arquivos gerados, no Visual Studio, no “Explorador de Solução”
clique com o direito e vá até o menu “Cdr Addons Tools” clique para abrir a pasta do addon, e
cheque os arquivos. Obrigatoriamente teremos os arquivos:
• AppUI.xslt
• config.xml
• CorelDrw.addon
• UserUI.xslt
• (nome do projeto).CorelAddon
Além desses precisam estar presentes os arquivos .GMS adicionados.
Caso corretos, revise os passos, caso edite o arquivo “UserUI.xslt”, será necessário o descarte da
área de trabalho do CorelDraw, para testar o projeto e descartar a área de trabalho no Visual Studio,
no “Explorador de Solução” clique com o direito e vá até o menu “Cdr Addons Tools” e clique em
“Delete workspace and Run”, lembre-se de fazer uma copia de segurança da área de trabalho antes
de executar.
Se tudo ocorreu bem, vamos criar o Instalador.
Criando o instalador
No Visual Studio, clique no botão “Create Setup CorelDraw Addon” posicionado próximo ao botão
“Iniciar”
Preencha o formulário com alguns dados
O instalador será criado na pasta especificada.
Extras
Podemos definir algumas configurações extras para nosso botões, por exemplo desativa-lo se
nenhum documento estiver aberto, para isso vamos usar as “Fontes de Dados” do CorelDraw,
vamos olhar no DrawUI Explorer e ver algum item que fique desativado e é ativado ao criar um
documento novo.
Vamos pegar o botão “Importar” do menu “Arquivo”.
Primeiramente encontre a barra de “Menus” na tag “commandBars”, esta barra contém botões que
ao serem clicado abrem outras barras, o botão “Importar” está na barra que é aberta no botão
“Arquivo”, então vamos verificar o botão “Arquivo”
Quando clicado na tag “item” esta não possui muitas informações, lembre-se de nosso projeto, onde
ela só possui-a dois atributos um guidRef e um dock, então clicaremos no tag “itemData” na janela
“Ref Tree”
Nessa tag vemos o atributo flyoutBarRef, este é o menu que precisamos, onde está alocado nosso
botão ‘Importar”, como pode ser visto na Interface do CorelDraw. Clicando com o direito sobre
esse atributo selecione “Search by Guid”, uma nova pesquisa será adicionada na janela “Search
Tree”, esse é o menu que procuramos.
Expanda-o e o explore, você irá encontrar o botão “Importar”, faça como antes, vá ate a “Ref Tree”
e clique na tag “itemData”, com o botão direito do mouse em cima do atributo “enable” clique em
copiar.
No Visual Studio, no arquivo “AppUI.xslt” vá até as tag “itemData”, cole o atributo no item que
você deseja habilitar somente quando algum documento estiver aberto.
<itemData guid="e88c668a-b6a9-493b-8267-09bbaf9c3763" dynamicCommand="Projeto1.Modulo1.Macro1" dynamicCategory="2cc24a3e-fe24-4708-9a74-9c75406eebcd" caption="Valor" icon="guid://e88c668a-b6a9-493b-8267-09bbaf9c3763" enable='*Bind(DataSource=AppDS;Path=DocumentAvailable)'/>
Pronto agora este comando só estará habilitado caso tenha um documento aberto.
