WebView w cTrader

WebView to kontrolka, której można użyć do wyświetlania strony internetowej na wykresie lub w oknie wyjściowym wskaźnika.

WebView jest oparty na Microsoft Edge WebView2. W rezultacie jest w pełni kompatybilny ze wszystkimi nowoczesnymi standardami internetowymi.

Możesz również wykonywać kod JavaScript na stronie i uzyskiwać wyniki za pomocą WebView.

Uwaga

WebView działa tylko na wskaźnikach i cBotach .NET 6 lub nowszych.

Używanie WebView w cTrader

Jako przykład wyświetlimy stronę internetową cTrader.com wewnątrz okna i głównego wykresu.

using cAlgo.API;

namespace cAlgo.Robots
{
    [Indicator(AccessRights = AccessRights.None, IsOverlay = true)]
    public class WebViewOnWindow : Indicator
    {
        private WebView _webView;

        [Parameter("On Window?", DefaultValue = false)]
        public bool OnWindow { get; set; }

        protected override void Initialize()
        {
            _webView = new WebView
            {
                DefaultBackgroundColor = Color.Red
            };

            _webView.Loaded += OnWebViewLoaded;

            if (OnWindow)
            {
                var window = new Window
                {
                    Child = _webView
                };

                window.Show();
            }
            else
            {
                Chart.AddControl(_webView);
            }           
        }

        public override void Calculate(int index)
        {
        }

        private void OnWebViewLoaded(WebViewLoadedEventArgs args)
        {
            _webView.NavigateAsync("https://ctrader.com/");
        }
    }
}

Po utworzeniu wystąpienia poniższego wskaźnika będziesz mógł nawigować między różnymi stronami internetowymi na cTrader.com. Wybrane okno wyjściowe będzie zachowywać się podobnie do przeglądarki internetowej.

using cAlgo.API;

namespace cAlgo.Robots
{
    [Robot(AccessRights = AccessRights.None)]
    public class WebViewOnWindow : Robot
    {
        private WebView _webView;

        private TextBox _addressTextBox;

        private TextBox _scriptTextbox;

        private Button _executeScriptButton;

        protected override void OnStart()
        {
            var goBackButton = new Button
            {
                Text = "←",
                Margin = 3
            };

            goBackButton.Click += OnGoBackButtonClick;

            var goForwardButton = new Button
            {
                Text = "→",
                Margin = 3
            };

            goForwardButton.Click += OnGoForwardButtonClick;

            _addressTextBox = new TextBox
            {
                Text = "https://ctrader.com/",
                Margin = 3,
                Width = 150,
                MinWidth = 150,
                MaxWidth = 150
            };

            var goButton = new Button
            {
                Text = "→",
                Margin = 3
            };

            goButton.Click += OnGoButtonClick;

            var reloadButton = new Button
            {
                Text = "Reload",
                Margin = 3
            };

            reloadButton.Click += OnReloadButtonClick;

            var stopButton = new Button
            {
                Text = "x",
                Margin = 3
            };

            stopButton.Click += OnStopButtonClick;

            _scriptTextbox = new TextBox
            {
                Text = "alert('Hi');",
                Margin = 3,
                Width = 150,
                MinWidth = 150,
                MaxWidth = 150,
                IsEnabled = false
            };

            _executeScriptButton = new Button
            {
                Text = "Execute Script",
                Margin = 3,
                IsEnabled = false
            };

            _executeScriptButton.Click += OnExecuteScriptButtonClick;

            var addressBarPanel = new StackPanel
            {
                MaxHeight = 50,
                VerticalAlignment = VerticalAlignment.Top,
                BackgroundColor = Color.Black,
                Orientation = Orientation.Horizontal
            };

            addressBarPanel.AddChild(goBackButton);
            addressBarPanel.AddChild(goForwardButton);
            addressBarPanel.AddChild(_addressTextBox);
            addressBarPanel.AddChild(goButton);
            addressBarPanel.AddChild(reloadButton);
            addressBarPanel.AddChild(stopButton);
            addressBarPanel.AddChild(_scriptTextbox);
            addressBarPanel.AddChild(_executeScriptButton);

            _webView = new WebView
            {
                DefaultBackgroundColor = Color.Red
            };

            _webView.NavigationCompleted += OnWebViewNavigationCompleted;
            _webView.WebMessageReceived += OnWebViewWebMessageReceived;
            _webView.Loaded += OnWebViewLoaded;
            _webView.Unloaded += OnWebViewUnloaded;

            var mainGrid = new Grid(2, 1);

            mainGrid.Rows[0].SetHeightToAuto();
            mainGrid.Rows[1].SetHeightInStars(1);

            mainGrid.AddChild(addressBarPanel, 0, 0);
            mainGrid.AddChild(_webView, 1, 0);

            var window = new Window
            {
                Child = mainGrid
            };

            window.Show();
        }

        private void OnWebViewLoaded(WebViewLoadedEventArgs args)
        {
            Print($"Webview loaded, IsLoaded: {args.WebView.IsLoaded}");

            _webView.NavigateAsync(_addressTextBox.Text);
        }

        private void OnWebViewUnloaded(WebViewUnloadedEventArgs args)
        {
            Print($"Webview unloaded, IsLoaded: {args.WebView.IsLoaded}");
        }

        private void OnStopButtonClick(ButtonClickEventArgs args)
        {
            _webView.StopAsync();
        }

        private void OnExecuteScriptButtonClick(ButtonClickEventArgs args)
        {
            var result = _webView.ExecuteScript(_scriptTextbox.Text);

            Print($"IsSuccessful: {result.IsSuccessful} | Json: {result.Json}");
        }

        private void OnReloadButtonClick(ButtonClickEventArgs args)
        {
            _webView.ReloadAsync();
        }

        private void OnGoForwardButtonClick(ButtonClickEventArgs args)
        {
            _webView.GoForwardAsync();
        }

        private void OnGoBackButtonClick(ButtonClickEventArgs args)
        {
            _webView.GoBackAsync();
        }

        private void OnGoButtonClick(ButtonClickEventArgs args)
        {
            _webView.NavigateAsync(_addressTextBox.Text);
        }

        private void OnWebViewWebMessageReceived(WebViewWebMessageReceivedEventArgs args)
        {
            Print($"Source: {args.Source} | Message: {args.Message}");
        }

        private void OnWebViewNavigationCompleted(WebViewNavigationCompletedEventArgs args)
        {
            Print($"{args.HttpStatusCode} | {args.IsSuccessful} | {args.Url}");

            _addressTextBox.Text = args.Url;
            _scriptTextbox.IsEnabled = true;
            _executeScriptButton.IsEnabled = true;
        }
    }
}

Używanie skryptów i obsługa zdarzeń komunikatów

Klasa WebView ma dwa potężne elementy, a mianowicie metodę ExecuteScript() i zdarzenie WebMessageReceived. Możesz ich użyć do tworzenia algorytmów, które uzyskują dostęp do wybranej strony internetowej (na przykład kanału wiadomości Forex lub dowolnej strony z niestandardowym HTML), wykonują niestandardowy JavaScript na tej stronie i poprawnie obsługują wszelkie komunikaty wysyłane z WebView z powrotem do algorytmu.

Wykonywanie skryptów

Aby wykonać niestandardowy skrypt wewnątrz WebView, wystarczy wywołać metodę WebView.ExecuteScript(String javaScript), jak pokazano poniżej.

private _webView = new WebView();
_webView.ExecuteScript("document.getElementById('nextButton').style.display = 'none';");

Skrypt, który ma zostać wykonany wewnątrz WebView, można po prostu przekazać jako ciąg znaków do metody ExecuteString().

Należy pamiętać, że ten ciąg znaków musi zawierać w pełni poprawny JavaScript. Na przykład musi zawierać średnik po każdej wykonywalnej linii.

Wieloliniowy JavaScript

Możesz swobodnie przekazywać wieloliniowy JavaScript do metody ExecuteScript(), jak pokazano w poniższym przykładzie (zwróć uwagę na użycie literału ciągu).

_webView.ExecuteScript(@"
const element = document.getElementById('nextButton');
element.style.display = 'none';
"); 

Obsługa zdarzeń wiadomości

Zdarzenie WebMessageReceived jest wywoływane, gdy zawartość wyświetlana w WebView wysyła wiadomość. Możesz zareagować na to zdarzenie, subskrybując dowolny odpowiedni program obsługi zdarzeń.

private _webView = new WebView();
_webView.WebMessageReceived += OnWebMessageReceived;
private void OnWebMessageReceived(WebViewWebMessageReceivedEventArgs args)
{
    Print($"Source: {args.Source} | Message: {args.Message}");
}

Aby wysłać wiadomość z WebView, wystarczy wywołać window.postMessage() z kodu JavaScript wewnątrz strony HTML. Na przykład możesz przekazać skrypt z poniższego przykładu, aby obliczyć różnicę percentylową między dwiema liczbami (takimi jak możliwe ceny wejścia i wyjścia dla pozycji).

function percentChange(oldVal, newVal) {
  let change = ((newVal - oldVal) / oldVal) * 100;
  window.postMessage('Change: ${change}%');
}
percentChange(1.0784, 1.0975);

Zmienne i interpolacja ciągów

Kontekst nie jest współdzielony między C# a JavaScript, gdy wywołujesz metodę ExecuteScript(). Jeśli chcesz przekazać zmienną z zakresu C# do zakresu JavaScript, będziesz musiał użyć interpolacji ciągów.

var a = 2 + 2;
_webView.ExecuteScript($"window.postMessage({a});");

Umieszczanie kontrolek wewnątrz WebView

Możliwe jest połączenie ExecuteScript() i OnWebMessageReceived, aby umieścić kontrolki wewnątrz strony otwartej przez WebView, które po interakcji wysyłają wiadomości z powrotem do cBota. W poniższym przykładzie używamy tej funkcjonalności, aby umożliwić handel bezpośrednio wewnątrz WebView. Zauważ, że WebView otwiera niestandardową stronę HTML, a nie istniejący zasób.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using cAlgo.API;
using cAlgo.API.Collections;
using cAlgo.API.Indicators;
using cAlgo.API.Internals;
using System.Text.Json;

namespace cAlgo.Robots
{
    [Robot(AccessRights = AccessRights.None)]
    public class WebViewInteractionsExample : Robot
    {
        private WebView _webView;

        protected override void OnStart()
        {
            var window = new Window();           
            _webView = new WebView();

            _webView.Loaded += WebView_Loaded;
            _webView.NavigationCompleted += WebView_NavigationCompleted;
            _webView.WebMessageReceived += WebView_WebMessageReceived;

            window.Child = _webView;
            window.Width = 500;
            window.Height = 500;
            window.Show();
            window.Closed += args => Stop(); // stop cBot when window is closed
        }

        private void WebView_WebMessageReceived(WebViewWebMessageReceivedEventArgs args)
        {
            Print("Message received from WebView: {0}", args.Message);

            var tradeMessage = JsonSerializer.Deserialize<TradeMessage>(args.Message);;
            var tradeType = tradeMessage.side == "buy" ? TradeType.Buy : TradeType.Sell;

            ExecuteMarketOrder(tradeType, tradeMessage.symbolName, tradeMessage.volume);
        }

        private void WebView_Loaded(WebViewLoadedEventArgs args)
        {
            args.WebView.NavigateToStringAsync(@"
            <script>
                function setSymbols(symbols) // called from the cBot
                {
                const symbolSelector = document.getElementById('symbolHtml');
                symbolSelector.innerHTML = '';
                symbols.forEach((symbol) => {  
                    symbolSelector.add(new Option(symbol));
                });
                }

                function trade(operation)
                {
                const symbolSelector = document.getElementById('symbolHtml');
                const selectedSymbolName = symbolSelector.options[symbolSelector.selectedIndex].text;

                window.postMessage({
                    side: operation,
                    volume: Number(document.getElementById('volumeHtml').value),
                    symbolName: selectedSymbolName
                }); //send message to cBot
                }
            </script>

            <body bgcolor='white'>
            <div style='display:flex;flex-direction:column;width:300px'>
                <h1>This is HTML page</h1>
                <div>Symbol:</div>
                <select id='symbolHtml'></select>
                <span style='margin-top: 10px'>Volume:</span>
                <input id='volumeHtml' value='1000' />
                <div style='margin-top:10px'>
                    <input type='button' value='Buy' onclick='trade(`buy`)' />
                    <input type='button' value='Sell' onclick='trade(`sell`)' />
                </div>
            </div>
            </body>
        ");          
        }

        private void WebView_NavigationCompleted(WebViewNavigationCompletedEventArgs obj)
        {
            SendSymbolsToHtml();
        }

        private void SendSymbolsToHtml()
        {
            var allSymbols = "";
            foreach (var symbol in Symbols)
            {
                allSymbols = allSymbols + "'" + symbol + "',";
            }

            _webView.ExecuteScript("setSymbols([" + allSymbols + "]);"); // invokes the corresponding function inside HTML
        }        
    }

    class TradeMessage
    {
        public string side { get; set; }
        public double volume { get; set; }
        public string symbolName { get; set; }
    }
}

Za pośrednictwem WebView cBot otwiera niestandardową stronę HTML zawierającą kontrolki, które pozwalają nam składać nowe zlecenia. Używając metody SendSymbolsToHtml(), cBot wypełnia menu rozwijane wewnątrz HTML listą wszystkich symboli, którymi konto może handlować. Podczas działania cBota użytkownik może wybrać symbol, określić wolumen zlecenia, a następnie złożyć nowe zlecenie bezpośrednio wewnątrz strony internetowej bez konieczności interakcji z kontrolkami wewnątrz cTradera.