cTrader'da WebView

WebView, bir web sayfasını bir grafikte veya bir gösterge çıktı penceresinde görüntülemek için kullanılabilecek bir kontroldür.

WebView, Microsoft Edge WebView2 tabanlıdır. Sonuç olarak, tüm modern web standartlarıyla tamamen uyumludur.

Ayrıca bir sayfada JavaScript kodu çalıştırabilir ve sonuçları WebView aracılığıyla alabilirsiniz.

Not

WebView yalnızca .NET 6 veya sonraki göstergelerde ve cBot'larda çalışır.

cTrader'da WebView kullanma

Örnek olarak, cTrader.com web sitesini bir pencerede ve ana grafikte görüntüleyeceğiz.

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/");
        }
    }
}

Aşağıdaki göstergenin bir örneğini oluşturduktan sonra, cTrader.com'daki çeşitli web sayfaları arasında gezinebileceksiniz. Seçtiğiniz çıktı penceresi bir web tarayıcısı gibi davranacaktır.

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;
        }
    }
}

Betikleri kullanma ve mesaj olaylarını işleme

WebView sınıfının iki güçlü üyesi vardır: ExecuteScript() yöntemi ve WebMessageReceived olayı. Bunları kullanarak seçtiğiniz bir web sayfasına (örneğin, bir Forex haber akışı veya özel HTML içeren herhangi bir sayfa) erişen, bu sayfada özel JavaScript çalıştıran ve WebView'dan algoritmaya geri gönderilen tüm mesajları doğru şekilde işleyen algoritmalar oluşturabilirsiniz.

Betikleri yürütme

WebView'ınızın içinde özel bir betik yürütmek için yapmanız gereken tek şey aşağıda gösterildiği gibi WebView.ExecuteScript(String javaScript) yöntemini çağırmaktır.

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

WebView içinde yürütülmesi gereken betik, ExecuteString() yöntemine basitçe bir dize olarak geçirilebilir.

Bu dizenin tamamen doğru JavaScript içermesi gerektiğini unutmayın. Örneğin, her yürütülebilir satırdan sonra bir noktalı virgül içermelidir.

Çok satırlı JavaScript

Aşağıdaki örnekte gösterildiği gibi çok satırlı JavaScript'i ExecuteScript() yöntemine serbestçe geçirebilirsiniz (dize değişmezinin kullanımına dikkat edin).

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

Mesaj olaylarını işleme

WebMessageReceived olayı, bir WebView'da görüntülenen içerik bir mesaj gönderdiğinde tetiklenir. Bu olaya uygun bir olay işleyiciye abone olarak tepki verebilirsiniz.

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

Bir WebView'dan mesaj göndermek için yapmanız gereken tek şey, HTML sayfasındaki JavaScript kodundan window.postMessage() öğesini çağırmaktır. Örneğin, iki sayı arasındaki yüzdelik farkı (bir pozisyon için olası giriş ve çıkış fiyatları gibi) hesaplamak için aşağıdaki örnekteki betiği geçirebilirsiniz.

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

Değişkenler ve dize enterpolasyonu

ExecuteScript() yöntemini çağırdığınızda C# ve JavaScript arasında bağlam paylaşılmaz. Bir değişkeni C# kapsamından JavaScript kapsamına geçirmek isterseniz, dize enterpolasyonu kullanmanız gerekecektir.

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

WebView içine kontroller yerleştirme

ExecuteScript() ve OnWebMessageReceived yöntemlerini birleştirerek, WebView aracılığıyla açılan bir sayfaya, etkileşim üzerine cBot'a mesaj gönderen kontroller yerleştirmek mümkündür. Aşağıdaki örnekte, bu işlevselliği WebView içinde doğrudan işlem yapmaya izin vermek için kullanıyoruz. WebView'ın mevcut bir kaynak yerine özel bir HTML sayfası açtığını unutmayın.

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; }
    }
}

WebView aracılığıyla cBot, yeni emirler vermemizi sağlayan kontroller içeren özel bir HTML sayfası açar. #!c# SendSymbolsToHtml()` yöntemini kullanarak cBot, bir hesabın işlem yapabileceği tüm sembollerin bir listesiyle HTML içindeki bir açılır menüyü doldurur. cBot çalışırken, kullanıcı bir sembol seçebilir, emir hacmini belirleyebilir ve ardından cTrader içindeki kontrollerle hiç etkileşime girmeden doğrudan web sayfasının içinden yeni bir emir verebilir.