콘텐츠로 이동

사용자 지정 프레임 플러그인을 만드는 방법

트레이더들은 종종 중요한 거래 및 기술적 분석 정보가 포함된 웹사이트를 차트와 최대한 가깝게 유지하려고 합니다. 플러그인을 사용하면 사용자 지정 프레임을 통해 이를 달성할 수 있습니다.

이 문서와 관련 동영상에서는 플러그인을 사용하여 웹사이트와 텍스트 상자를 포함할 수 있는 사용자 지정 프레임을 만드는 방법을 보여드리겠습니다.

웹사이트를 표시하는 사용자 정의 프레임 만들기

차트 영역에 웹사이트를 표시할 사용자 정의 프레임을 만들겠습니다.

Algo 앱으로 이동하여 플러그인 탭으로 전환합니다. 새로 만들기 버튼을 클릭하여 새 플러그인을 만듭니다. 빈 페이지 옵션을 선택합니다. 플러그인 이름을 "My Custom Frame Example"과 같이 지정하고 만들기 버튼을 클릭합니다.

코드 편집기가 나타나면 WebView 객체를 초기화합니다.

1
_cTraderWebView = new WebView();

WebView 로드 이벤트를 구독합니다.

1
_cTraderWebView.Loaded += _cTraderWebView_Loaded;

로드될 때 WebView에서 cTrader 포럼을 웹사이트로 설정합니다.

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

사용자 정의 차트 프레임을 초기화합니다.

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

WebView를 사용자 정의 차트 프레임의 하위 항목으로 할당합니다.

1
webViewFrame.Child = _cTraderWebView;

사용자 정의 차트 프레임을 다중 차트 모드로 설정합니다.

1
webViewFrame.ChartContainer.Mode = ChartMode.Multi;

차트에 연결합니다.

1
webViewFrame.Attach();

아래에서 전체 코드를 복사할 수 있습니다:

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

플러그인을 빌드하려면 Ctrl+B 단축키를 사용하거나 빌드 버튼을 클릭합니다.

결과를 보려면 거래 앱으로 이동합니다. 이 경우 cTrader 포럼 웹페이지가 차트 영역의 사용자 정의 프레임에 표시됩니다.

사용자 정의 프레임 관리

cTrader 포럼 웹사이트를 표시하는 사용자 정의 프레임은 cTrader의 다른 차트 프레임과 마찬가지로 관리할 수 있습니다. 차트 영역에서 분리하고 다시 연결할 수 있으며, 크기를 조정하고 다른 차트와 교체하거나 바꿀 수 있습니다.

웹사이트 URL 변경

cTrader 포럼 웹사이트를 다른 웹페이지로 교체하겠습니다.

Algo 앱으로 돌아가서 플러그인 코드를 편집합니다. cTrader 포럼 URL(https://ctrader.com/forum)을 Spotware URL(https://www.spotware.com)로 교체합니다.

결과 코드 라인은 다음과 같아야 합니다:

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

플러그인을 다시 빌드하고 거래 앱으로 이동하여 변경 사항을 확인합니다. 이제 Spotware 웹사이트가 사용자 정의 프레임에 표시됩니다.

여러 프레임 추가

각각 웹사이트를 표시하는 두 개의 사용자 정의 프레임을 추가하도록 플러그인 코드를 업데이트하겠습니다. 새 WebView 객체를 추가하고 이전 예제의 코드 단계와 라인을 반복합니다.

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

아래에서 전체 코드를 복사할 수 있습니다:

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

플러그인을 빌드합니다. Algo 앱으로 돌아가면 개별 프레임에 두 개의 웹사이트(cTrader 포럼 및 Spotware)가 표시되어야 합니다.

텍스트 상자 만들기

웹페이지를 표시하는 차트 프레임 외에도 플러그인을 사용하면 다른 객체를 포함하는 사용자 정의 프레임을 추가할 수 있습니다. 예를 들어 텍스트 상자를 포함하는 프레임을 추가할 수 있습니다.

모든 WebView 코드 라인을 제거하고 대신 텍스트 상자에 대한 다음 라인을 추가합니다:

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

아래의 전체 코드를 복사할 수 있습니다.

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

플러그인을 빌드하고 거래 앱에서 결과를 확인합니다. 이번에는 차트 영역에 Hello World 텍스트가 있는 상자가 표시되어야 합니다.

요약

이제 플러그인을 사용하여 웹페이지, 텍스트 상자 및 기타 유용한 요소를 차트 영역에 통합하는 방법에 능숙해졌을 것입니다.