Saltar a contenido

Cómo añadir botones personalizados a la barra de herramientas con plugins

Los plugins le permiten añadir botones para acciones, tareas o contenido específicos a la Barra de herramientas del gráfico en cTrader. Cuando se hace clic en un botón de acción, se ejecuta la operación programada.

En este artículo y su correspondiente vídeo, le mostraremos cómo añadir nuevos botones a la Barra de herramientas del gráfico utilizando un plugin.

Crear un plugin

Primero, crearemos un plugin y lo programaremos para que muestre un botón que abra posiciones cuando se haga clic en él.

Abra la aplicación Algo y navegue a la pestaña Plugins. Haga clic en el botón Nuevo. Seleccione la plantilla En blanco. Escriba un nombre para su plugin, como "Botón personalizado de la barra de herramientas", luego haga clic en Crear.

Añada el botón de la barra de herramientas.

1
Commands.Add(CommandType.ChartContainerToolbar, OpenPositions);

Cree un método que maneje el evento de clic del botón y abra algunas posiciones.

1
2
3
4
5
6
private void OpenPositions(CommandArgs args) 
{
    ExecuteMarketOrder(TradeType.Buy, "EURUSD", 1000); 
    ExecuteMarketOrder(TradeType.Buy, "USDJPY", 1000); 
    ExecuteMarketOrder(TradeType.Buy, "EURGBP", 1000);
}

Puede copiar el código completo a continuación:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
using System;
using cAlgo.API;
using cAlgo.API.Collections;
using cAlgo.API.Indicators;
using cAlgo.API.Internals;

namespace cAlgo.Plugins
{
    [Plugin(AccessRights = AccessRights.None)]
    public class TestPlug : Plugin
    {
        protected override void OnStart()
        {
            Commands.Add(CommandType.ChartContainerToolbar, OpenPositions);
        }
        private void OpenPositions(CommandArgs args) 
        {
            ExecuteMarketOrder(TradeType.Buy, "EURUSD", 1000);
            ExecuteMarketOrder(TradeType.Buy, "USDJPY", 1000); 
            ExecuteMarketOrder(TradeType.Buy, "EURGBP", 1000);
        }
        protected override void OnStop()
        {
            // Handle Plugin stop here
        }
    }        
}

Compile el plugin utilizando las teclas de acceso rápido Ctrl+B o haciendo clic en el botón Compilar. Luego, vaya a la aplicación Trade y confirme que se ha añadido un nuevo botón a la Barra de herramientas del gráfico.

Cuando haga clic en el botón y conceda permiso, debería ver algunas posiciones abiertas.

Añadir una imagen personalizada para el botón

Si no le gusta el icono predeterminado, puede establecer su imagen preferida como icono para su plugin. Basadas en código XML, las imágenes SVG son los objetos más comúnmente utilizados como iconos. cTrader Algo proporciona comandos que le permiten especificar y utilizar imágenes SVG personalizadas como iconos.

Obtener el código de la imagen

Cree o descargue la imagen SVG que desea utilizar como icono. Abra el archivo SVG en modo XML en el Bloc de notas, Visual Studio Code o cualquier IDE. Utilice la funcionalidad Buscar y reemplazar en el programa para reemplazar todas las comillas dobles " por comillas simples '.

Su código XML no debe contener comillas dobles.

Copie el código XML resultante.

<svg class='w-6 h-6 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'>
<path stroke='#BFBFBF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 6.5h2M11 18h2m-7-5v-2m12 2v-2M5 8h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0 12h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm12 0h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0-12h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Z'/>
</svg>

Establecer el nuevo icono

Vuelva a la aplicación Algo y abra el editor de código para su plugin.

Inicialice un icono SVG vacío.

1
var icon = new SvgIcon();

Añada el código XML que extrajo anteriormente.

1
2
3
var icon = new SvgIcon(@"<svg class='w-6 h-6 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'>
<path stroke='#BFBFBF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 6.5h2M11 18h2m-7-5v-2m12 2v-2M5 8h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0 12h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm12 0h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0-12h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Z'/>
</svg>");

Asigne el icono al botón.

1
Commands.Add(CommandType.ChartContainerToolbar, OpenPositions, icon);

Añada una información sobre herramientas que describa la funcionalidad del botón.

1
2
var command = Commands.Add(CommandType.ChartContainerToolbar, OpenPositions, icon);
command.ToolTip = "Open Positions";

Puede copiar el código completo a continuación:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
using System;
using cAlgo.API;
using cAlgo.API.Collections;
using cAlgo.API.Indicators;
using cAlgo.API.Internals;

namespace cAlgo.Plugins
{
    [Plugin(AccessRights = AccessRights.None)]
    public class CustomToolbarButton : Plugin
    {
        protected override void OnStart()
        {
            var icon = new SvgIcon(@"<svg class='w-6 h-6 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'>
    <path stroke='#BFBFBF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 6.5h2M11 18h2m-7-5v-2m12 2v-2M5 8h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0 12h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm12 0h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0-12h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Z'/>
    </svg>");

            var command = Commands.Add(CommandType.ChartContainerToolbar, OpenPositions, icon);
            command.ToolTip = "Open Positions";
        }

        private void OpenPositions(CommandArgs args) 
        {
            ExecuteMarketOrder(TradeType.Buy, "EURUSD", 1000); 
            ExecuteMarketOrder(TradeType.Buy, "USDJPY", 1000); 
            ExecuteMarketOrder(TradeType.Buy, "EURGBP", 1000);
        }

        protected override void OnStop()
        {
            // Handle Plugin stop here
        }
    }        
}

Compile el plugin de nuevo.

Vaya a la aplicación Trade para confirmar que ha aparecido el nuevo icono.

Añadir un botón con un menú emergente

Además de los botones que ejecutan operaciones específicas al hacer clic, puede añadir botones que muestren un menú emergente. Puede personalizar el menú resultante para que muestre varios botones o un mini terminal único.

Vuelva al editor de código en la aplicación Algo, cree un botón que abra un menú emergente y añada otro botón que proporcione la funcionalidad Cerrar todas las posiciones dentro de ese menú. Cuando se haga clic en este botón, se cerrarán todas las posiciones previamente abiertas.

Añada un nuevo botón a la barra de herramientas.

1
Commands.Add(CommandType.ChartContainerToolbar, OnIconClicked, icon);

Cree el nuevo botón y asígnele estilos.

1
2
3
4
5
6
7
8
9
var buttonStyle = new Style();

buttonStyle.Set(ControlProperty.Margin, new Thickness(0, 5, 0, 0)); 
buttonStyle.Set(ControlProperty.Width, 150);

var closePositionsButton = new Button 
{ 
    Text = "Close All Positions", Style = buttonStyle 
};

Declare un panel de pila y añada el botón como hijo.

1
2
var stackPanel = new StackPanel();
stackPanel.AddChild(closePositionsButton);

Añada un evento para manejar la acción de clic del botón.

1
2
3
4
5
6
7
closePositionsButton.Click += args => 
{
    foreach (var position in Positions)
    {
        position.Close();
    }
};

Puede copiar el código completo a continuación:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
using System;
using cAlgo.API;
using cAlgo.API.Collections;
using cAlgo.API.Indicators;
using cAlgo.API.Internals;

namespace cAlgo.Plugins
{
    [Plugin(AccessRights = AccessRights.None)]
    public class CustomToolbarButton : Plugin
    {
        protected override void OnStart()
        {
            var icon = new SvgIcon(@"<svg class='w-6 h-6 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'>
    <path stroke='#BFBFBF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 6.5h2M11 18h2m-7-5v-2m12 2v-2M5 8h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0 12h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm12 0h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Zm0-12h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1Z'/>
    </svg>");

            var command = Commands.Add(CommandType.ChartContainerToolbar, OpenPositions, icon);
            command.ToolTip = "Open Positions";

            Commands.Add(CommandType.ChartContainerToolbar, CloseAllPositions, icon);
        }

        private CommandResult CloseAllPositions (CommandArgs args)
        {
            var buttonStyle = new Style();

            buttonStyle.Set(ControlProperty.Margin, new Thickness(0, 5, 0, 0));
            buttonStyle.Set(ControlProperty.Width, 150);

            var closePositionsButton = new Button
            {
                Text = "Close All Positions", 
                Style = buttonStyle  
            };

            closePositionsButton.Click += args =>
            {
                foreach (var position in Positions)
                {
                    position.Close();
                }
            };

            var stackPanel = new StackPanel();
            stackPanel.AddChild(closePositionsButton);

            return new CommandResult(stackPanel);
        }

        private void OpenPositions(CommandArgs args) 
        {
            ExecuteMarketOrder(TradeType.Buy, "EURUSD", 1000); 
            ExecuteMarketOrder(TradeType.Buy, "USDJPY", 1000); 
            ExecuteMarketOrder(TradeType.Buy, "EURGBP", 1000);  
        }

        protected override void OnStop()
        {
            // Handle Plugin stop here
        }
    }        
}

Compile el plugin.

Vaya a la aplicación Trade y utilice el botón Cerrar todas las posiciones. Esta vez, las posiciones previamente abiertas deberían cerrarse.

Resumen

Esperamos que este vídeo y artículo le hayan ayudado a entender cómo añadir botones personalizados para operaciones, tareas e incluso menús emergentes a la Barra de herramientas del gráfico.