Saltar a contenido

Cómo crear plugins de marco personalizados

Los operadores a menudo se esfuerzan por mantener los sitios web con información importante de operaciones y análisis técnico lo más cerca posible de los gráficos. Los plugins les permiten lograr esto a través de marcos personalizados.

En este artículo y su correspondiente vídeo, le mostraremos cómo crear marcos personalizados que pueden albergar sitios web y cuadros de texto utilizando un plugin.

Crear un marco personalizado que muestre un sitio web

Crearemos un marco personalizado en el área de gráficos para albergar un sitio web.

Vaya a la aplicación Algo y cambie a la pestaña Plugins. Haga clic en el botón Nuevo para crear un nuevo plugin. Marque la opción Blank. Asigne un nombre a su plugin, como "My Custom Frame Example", y haga clic en el botón Create.

Cuando aparezca el editor de código, inicialice un objeto WebView.

1
_cTraderWebView = new WebView();

Suscríbase al evento de carga de WebView.

1
_cTraderWebView.Loaded += _cTraderWebView_Loaded;

Establezca el foro de cTrader como el sitio web en WebView cuando se cargue.

1
2
3
4
private void _cTraderWebView_Loaded(WebViewLoadedEventArgs args) 
{
    _cTraderWebView.NavigateAsync("https://ctrader.com/forum");
}

Inicialice un cuadro de gráfico personalizado.

1
var webViewFrame = ChartManager.AddCustomFrame("Forum");

Asigne el WebView como elemento secundario al cuadro de gráfico personalizado.

1
webViewFrame.Child = _cTraderWebView;

Configure el cuadro de gráfico personalizado en modo multigráfico.

1
webViewFrame.ChartContainer.Mode = ChartMode.Multi;

Adjúntelo a los gráficos.

1
webViewFrame.Attach();

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 MyCustomFrameExample : Plugin
    {

        WebView _cTraderWebView = new WebView();

        protected override void OnStart()
        {
            _cTraderWebView.Loaded += _cTraderWebView_Loaded;
            var webViewFrame = ChartManager.AddCustomFrame("Forum");
            webViewFrame.Child = _cTraderWebView;
            webViewFrame.ChartContainer.Mode = ChartMode.Multi;
            webViewFrame.Attach();
        }

        private void _cTraderWebView_Loaded(WebViewLoadedEventArgs args)
        {
            _cTraderWebView.NavigateAsync("https://ctrader.com/forum");
        }

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

Para compilar nuestro plugin, use las teclas de acceso rápido Ctrl+B o haga clic en el botón Build.

Para ver los resultados, vaya a la aplicación Trade. En nuestro caso, la página web del foro de cTrader ahora se muestra en nuestro cuadro personalizado en el área de gráficos.

Gestionar el cuadro personalizado

El cuadro personalizado que aloja el sitio web del foro de cTrader se puede gestionar como cualquier cuadro de gráfico en cTrader. Se puede separar y volver a adjuntar al área de gráficos, cambiar de tamaño, intercambiar o reemplazar con otros gráficos.

Cambiar la URL del sitio web

Reemplazaremos el sitio web del foro de cTrader con otra página web.

Vuelva a la aplicación Algo y edite el código del plugin. Reemplace la URL del foro de cTrader (https://ctrader.com/es/forum) con la URL de Spotware (https://www.spotware.com).

Esta debería ser la línea de código resultante:

1
_cTraderWebView.NavigateAsync("https://www.spotware.com");

Compile el plugin nuevamente y vaya a la aplicación Trade para ver los cambios. El sitio web de Spotware ahora se muestra en el cuadro personalizado.

Agregar múltiples cuadros

Actualizaremos el código del plugin para agregar dos cuadros personalizados, cada uno mostrando un sitio web. Agregue un nuevo objeto WebView y repita los pasos y líneas de código del ejemplo anterior.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
WebView _cTraderWebView = new WebView();
WebView _cTraderWebViewSite = new WebView();

_cTraderWebViewSite.Loaded += _cTraderWebViewSite_Loaded;
var webViewFrameSite = ChartManager.AddCustomFrame("Site");
webViewFrameSite.Child = _cTraderWebViewSite;
webViewFrameSite.ChartContainer.Mode = ChartMode.Multi;
webViewFrameSite.Attach();

private void _cTraderWebViewSite_Loaded(WebViewLoadedEventArgs args)
{
    _cTraderWebViewSite.NavigateAsync("https://www.spotware.com");
}

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
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 MyCustomFrameExample : Plugin
    {
        WebView _cTraderWebView = new WebView();
        WebView _cTraderWebViewSite = new WebView();

        protected override void OnStart()
        {
            _cTraderWebView.Loaded += _cTraderWebView_Loaded;
            var webViewFrame = ChartManager.AddCustomFrame("Forum");
            webViewFrame.Child = _cTraderWebView;
            webViewFrame.ChartContainer.Mode = ChartMode.Multi;
            webViewFrame.Attach();

            _cTraderWebViewSite.Loaded += _cTraderWebViewSite_Loaded;
            var webViewFrameSite = ChartManager.AddCustomFrame("Site");
            webViewFrameSite.Child = _cTraderWebViewSite;
            webViewFrameSite.ChartContainer.Mode = ChartMode.Multi;
            webViewFrameSite.Attach();
        }

        private void _cTraderWebView_Loaded(WebViewLoadedEventArgs args)
        {
           _cTraderWebView.NavigateAsync("https://www.ctrader.com/forum");
        }

        private void _cTraderWebViewSite_Loaded(WebViewLoadedEventArgs args)
        {
           _cTraderWebViewSite.NavigateAsync("https://www.spotware.com");
        }

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

Compile el plugin. Cuando vuelva a la aplicación Algo, debería ver dos sitios web (foro de cTrader y Spotware) en cuadros individuales.

Crear un cuadro de texto

Además de los cuadros de gráfico que alojan páginas web, los plugins le permiten agregar cuadros personalizados que contienen otros objetos. Por ejemplo, puede agregar un cuadro que aloje un cuadro de texto.

Elimine todas las líneas de código de WebView y agregue las siguientes líneas para un cuadro de texto en su lugar:

1
2
3
4
5
6
7
8
9
var webViewFrame = ChartManager.AddCustomFrame("Hello World");

var txtHelloWorld = new TextBlock
{
    Text = "Hello World"
};
webViewFrame.Child = txtHelloWorld;
webViewFrame.ChartContainer.Mode = ChartMode.Single;
webViewFrame.Attach();

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
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 MyCustomFrameExample : Plugin
    {
        protected override void OnStart()
        {
            var webViewFrame = ChartManager.AddCustomFrame("Hello World");

            var txtHelloWorld = new TextBlock
            {
                Text = "Hello World"
            };

            webViewFrame.Child = txtHelloWorld;
            webViewFrame.ChartContainer.Mode = ChartMode.Single;
            webViewFrame.Attach();
        }

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

Compile el plugin y vea los resultados en la aplicación Trade. Esta vez, debería ver un cuadro con el texto Hello World en el área de gráficos.

Resumen

Ahora debería ser experto en el uso de plugins para incorporar páginas web, cuadros de texto y otros elementos útiles en el área de gráficos.