Lewati ke isi

Cara membuat plugin bingkai kustom

Trader sering berusaha untuk menjaga agar situs web dengan informasi trading dan analisis teknis yang penting tetap sedekat mungkin dengan grafik. Plugin memungkinkan mereka mencapai hal ini melalui bingkai kustom.

Dalam artikel ini dan video terkaitnya, kami akan menunjukkan kepada Anda cara membuat bingkai kustom yang dapat menampung situs web dan kotak teks menggunakan plugin.

Buat bingkai kustom yang menampilkan situs web

Kita akan membuat bingkai kustom di area grafik untuk menampung situs web.

Buka aplikasi Algo dan beralih ke tab Plugin. Klik tombol Baru untuk membuat plugin baru. Centang opsi Kosong. Beri nama plugin Anda, misalnya "Contoh Bingkai Kustom Saya", dan klik tombol Buat.

Ketika editor kode muncul, inisialisasi objek WebView.

1
_cTraderWebView = new WebView();

Berlangganan ke event WebView yang dimuat.

1
_cTraderWebView.Loaded += _cTraderWebView_Loaded;

Atur Forum cTrader sebagai situs web di WebView saat dimuat.

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

Inisialisasi bingkai grafik kustom.

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

Tetapkan WebView sebagai turunan ke bingkai grafik kustom.

1
webViewFrame.Child = _cTraderWebView;

Atur bingkai grafik kustom ke mode multigrafik.

1
webViewFrame.ChartContainer.Mode = ChartMode.Multi;

Lampirkan ke grafik.

1
webViewFrame.Attach();

Anda dapat menyalin kode lengkapnya di bawah ini:

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

Untuk membangun plugin kita, gunakan tombol pintas Ctrl+B atau klik tombol Bangun.

Untuk melihat hasilnya, buka aplikasi Trade. Dalam kasus kami, halaman web Forum cTrader sekarang ditampilkan dalam bingkai kustom kami di area grafik.

Kelola bingkai kustom

Bingkai kustom yang menampung situs web Forum cTrader dapat dikelola seperti bingkai grafik lainnya di cTrader. Bingkai tersebut dapat dilepas dan dipasang kembali ke area grafik, diubah ukurannya, ditukar atau diganti dengan grafik lain.

Ubah URL situs web

Kita akan mengganti situs web Forum cTrader dengan halaman web lain.

Kembali ke aplikasi Algo dan edit kode plugin. Ganti URL Forum cTrader ("https://ctrader.com/forum") dengan URL Spotware ("https://www.spotware.com").

Ini seharusnya menjadi baris kode yang dihasilkan:

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

Bangun plugin lagi dan buka aplikasi Trade untuk melihat perubahannya. Situs web Spotware sekarang ditampilkan pada bingkai kustom.

Tambahkan beberapa bingkai

Kita akan memperbarui kode plugin untuk menambahkan dua bingkai kustom, masing-masing menampilkan situs web. Tambahkan objek WebView baru dan ulangi langkah-langkah kode dan baris dari contoh sebelumnya.

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

Anda dapat menyalin kode lengkapnya di bawah ini:

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

Bangun plugin. Ketika Anda kembali ke aplikasi Algo, Anda seharusnya melihat dua situs web (Forum cTrader dan Spotware) dalam bingkai individual.

Buat kotak teks

Selain bingkai grafik yang menampung halaman web, plugin memungkinkan Anda untuk menambahkan bingkai kustom yang berisi objek lain. Misalnya, Anda dapat menambahkan bingkai yang menampung kotak teks.

Hapus semua baris kode WebView dan tambahkan baris-baris berikut untuk kotak teks sebagai gantinya:

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();

Anda dapat menyalin kode lengkap di bawah ini.

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

Bangun plugin dan lihat hasilnya di aplikasi Trade. Kali ini, Anda seharusnya melihat kotak dengan teks Hello World di area grafik.

Ringkasan

Sekarang Anda seharusnya mahir menggunakan plugin untuk memasukkan halaman web, kotak teks, dan elemen berguna lainnya ke area grafik.