انتقل إلى المحتوى

مواضع الإضافات في واجهة مستخدم cTrader

يمكن للإضافات إضافة عناصر مخصصة إلى مناطق واجهة مستخدم cTrader مثل لوحة الرمز النشط (ASP)، Trade Watch (TW)، الرسم البياني والإطارات المخصصة، النافذة المخصصة ومنطقة القائمة الرئيسية. يوضح هذا الدليل كيفية استخدام كل من هذه الخيارات ويقترح حالات استخدام ذات صلة.

مواضع الإضافات في دقيقة واحدة!

  • من خلال توسيع واجهة مستخدم cTrader، يمكنك دمج خدمات الطرف الثالث بسلاسة مع محطة التداول.
  • يمكن لإضافة واحدة تنفيذ وظائف مختلفة في مناطق مختلفة من واجهة المستخدم، مما يتيح لك تخصيص مظهر وملمس cTrader.
  • يمكنك تكوين العناصر المخصصة التي تم إنشاؤها بواسطة الإضافة بحيث يمكن فصلها وإعادة إرفاقها بمواقعها الأصلية في واجهة مستخدم cTrader.
  • قد تتناسب بعض الأفكار بشكل أفضل مع مناطق معينة من واجهة المستخدم. يمكنك تجربة المواضع لاكتشاف ما يعمل بشكل أفضل.

ASP

تقع ASP على يمين عرض الرسم البياني. يمكن للإضافة إضافة عنصر مخصص واحد أو أكثر باستخدام الخيارات التالية:

  • كـ AspTab. عند استخدام هذا الخيار، تعرض الإضافة العناصر المخصصة في علامة (علامات) تبويب منفصلة إلى جانب الرمز، DoM وغيرها.
  • كـ AspBlock. عند استخدام هذا الخيار، تعرض الإضافة العناصر المخصصة في علامة تبويب الرمز في قسم (أقسام) جديدة قابلة للطي والتوسيع مع عناوين ومواضع قابلة للتخصيص.

إليك كيف تبدو نفس الإضافة كقسم وكعلامة تبويب.

"قسم ASP"===

<figure markdown>
![](../../img/plugins/asp-section.png){ width="400" }
</figure>

"علامة تبويب ASP"===

<figure markdown>
![](../../img/plugins/asp-tab.png){ width="400" }
</figure>

حالات الاستخدام

فيما يلي بعض الأفكار للإضافات التي تعرض عناصر مخصصة في قسم ASP:

  • آلة حاسبة صغيرة لمستويات الحماية لرمز معين.
  • شبكة تعرض معلومات إضافية حول الرمز النشط حاليًا.

ستعمل الأفكار التالية بشكل أفضل عند تضمينها كعلامة تبويب ASP:

  • قائمة تحتوي على تحليلات مخصصة حول جميع المراكز المفتوحة حاليًا.
  • عرض WebView لمصدر أخبار مالية.

لإضافة عناصر مخصصة كقسم ASP، استخدم طريقة Asp.SymbolTab.AddBlock(string title).

1
2
3
var child = ... // Insert the contents you want the block to have here
AspBlock aspBlock = Asp.SymbolTab.AddBlock("Cool Plugin");
aspBlock.Child = child; 

لإضافة عناصر مخصصة كعلامة تبويب ASP، استخدم طريقة Asp.AddTab(string title).

1
2
3
var child = ... // Insert the contents you want the tab to have here
AspTab pluginTab = Asp.AddTab("Another Cool Plugin");
pluginTab.Child = child;

لتحديد الترتيب الذي يظهر فيه القسم أو علامة التبويب في ASP، استخدم خاصية Index لـ AspBlock و AspTab على التوالي.

تحذير

لاحظ أنه لا يمكن وضع أي علامات تبويب مخصصة قبل علامة تبويب الرمز. كما لا يمكنك تضمين القسم الخاص بك أعلى من قسم أمر جديد في علامة تبويب الرمز. نتيجة لذلك، أصغر فهرس ممكن لقسم مضمن في ASP هو 1.

Trade Watch

تقع Trade Watch أسفل منطقة الرسم البياني مباشرة. يمكنك إضافة عناصر مخصصة هناك كعلامة تبويب منفصلة.

إليك كيف يمكن أن تبدو إضافة عند إضافتها إلى العرض.

حالات الاستخدام

الأفكار التالية مناسبة لعرضها في شاشة Trade Watch.

  • مجموعة تحليلات مخصصة تعرض إحصائيات متنوعة حول الحساب الحالي للمستخدم.
  • عرض WebView لمنتدى ويب مخصص للتداول.

لإضافة عناصر مخصصة كعلامة تبويب جديدة في شاشة Trade Watch، استخدم طريقة Trade Watch.AddTab(string title).

1
2
3
var child = ... // Insert the contents you want the plugin to have here
Trade WatchTab Trade WatchTab = Trade Watch.AddTab("Yet Another Cool Plugin");
Trade WatchTab.Child = child;

وبشكل مماثل لكتل وعلامات تبويب ASP، يمكنك استخدام خاصية Index لـ Trade WatchTab لتحديد موضعها بالنسبة لعلامات التبويب الأخرى في شاشة Trade Watch.

ملاحظة

تظهر جميع علامات التبويب المخصصة الموضوعة في شاشة Trade Watch فقط في أقصى اليمين من علامات التبويب الافتراضية المضمنة في واجهة مستخدم cTrader عند التشغيل الأول للمحطة. بالتالي، يجب أن يكون Index لهذه علامات التبويب 1 أو أكبر؛ يحدد الفهرس فقط الموضع النسبي لعلامات تبويب الإضافة مقارنة بعلامات تبويب الإضافات الأخرى.

الرسم البياني والإطار المخصص

يمكنك أيضًا اختيار عرض العناصر المخصصة في إطار رسم بياني منفصل، مما يضيفه فعليًا كرسم بياني جديد إلى عرض الرسم البياني الحالي. بالإضافة إلى ذلك، يمكن للإضافة فتح أي عدد من الرسوم البيانية لأي رموز وأطر رسم بياني متاحة.

إليك كيف يبدو إطار رسم بياني مخصص مع WebView بجانب رسم بياني عادي.

حالات الاستخدام

ستبدو الأفكار التالية وتعمل بأفضل شكل عند دمجها في إطار مخصص:

  • عرض WebView لخدمة رسم بياني أخرى.
  • لوحة تداول مخصصة واسعة النطاق.
  • عرض WebView لخدمة ذكاء اصطناعي توليدي قد يستشيرها المتداول عند تحديد كيفية الاستجابة لتحركات السوق.

لإضافة إطار مخصص جديد، استخدم طريقة ChartManager.AddCustomFrame(string title).

1
2
3
var child = ... // Insert the contents you want the plugin to have here
var newCustomFrame = ChartManager.AddCustomFrame("Best Plugin");
newCustomFrame.Child = child;

لفتح رسم بياني جديد للإضافة الخاصة بك، استخدم طريقة ChartManager.AddChartFrame(string symbolName, TimeFrame timeFrame).

1
var newChart = ChartManager.AddChartFrame("EURUSD", TimeFrame.Day2);

ملاحظة

بمجرد إضافة إضافة لإطار مخصص جديد أو رسم بياني، ستنتقل cTrader إلى وضع الرسم البياني المتعدد حتى لو كان وضع الرسم البياني الفردي أو وضع الرسم البياني الحر مُفعلاً مسبقًا.

القائمة الرئيسية

يمكن برمجة الإضافات لإضافة أقسام مخصصة إلى واجهة مستخدم القائمة الرئيسية، بالإضافة إلى الأقسام الموجودة مثل التداول والخوارزميات والنسخ والتحليل. يمكن لأي قسم مخصص مضاف أن يحتوي على مواقع ويب ولوحات معلومات وأزرار وأدوات وأكثر.

إليك الكود لإضافة بسيطة تضيف قسمًا مخصصًا متجر cTrader، والذي يحتوي على موقع متجر cTrader، إلى القائمة الرئيسية:

 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
46
47
48
49
50
51
52
53
using System;
using cAlgo.API;
using cAlgo.API.Collections;
using cAlgo.API.Indicators;
using cAlgo.API.Internals;

namespace cAlgo
{
    [Plugin(AccessRights = AccessRights.None)]
    public class CTraderStorePlugin : Plugin
    {
        private MainMenuOwnCustomItem _storeItem;

        private const string StoreIconSvg = @"
        <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
          <path fill='white' d='M7 7V6a5 5 0 0 1 10 0v1h2a1 1 0 0 1 1 1l-1 11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L4 8a1 1 0 0 1 1-1h2zm2 0h6V6a3 3 0 0 0-6 0v1z' />
        </svg>";

        protected override void OnStart()
        {
            _storeItem = MainMenu.AddItem("cTrader Store", new SvgIcon(StoreIconSvg));

            var webView = new WebView();
            webView.Loaded += _ =>
            {
                webView.NavigateAsync("http://ctrader.com");
            };

            _storeItem.Child = webView;

            MainMenu.SelectedItemChanged += OnSelectedItemChanged;
        }

        private void OnSelectedItemChanged(MainMenuSelectedItemChangedEventArgs args)
        {
            if (args.NewItem == _storeItem)
            {
                MainMenu.IsExpanded = true;
            }
        }

        protected override void OnStop()
        {
            MainMenu.SelectedItemChanged -= OnSelectedItemChanged;

            if (_storeItem != null)
            {
                MainMenu.RemoveItem(_storeItem);
                _storeItem = null;
            }
        }
    }
}

يؤدي تحديد متجر cTrader إلى الانتقال إلى القسم المخصص، مما يكشف عن محتواه كما هو موضح أدناه.

مواضع متعددة

تضيف الإضافة التالية عناصر مخصصة إلى عدة مواقع في واجهة مستخدم cTrader في وقت واحد:

  • تعرض الإضافة مجموع العمولات لجميع المراكز المفتوحة حاليًا في كتلة ASP.
  • في شاشة Trade Watch، تعرض الإضافة الحجم التراكمي لجميع المراكز المفتوحة.
  • تعرض الإضافة أيضًا عرض WebView لـ ctrader.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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
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;

namespace cAlgo.Plugins
{
    [Plugin(AccessRights = AccessRights.None)]
    public class PluginPlacementTest : Plugin
    {

        private TextBlock _commissionsText;
        private TextBlock _volumeText;
        private WebView _cTraderWebView;

        protected override void OnStart()
        {
            _cTraderWebView = new WebView();
            _cTraderWebView.Loaded += ShowWebsite;

            _commissionsText = new TextBlock
            {
                Text = ShowCommissions(),
                FontSize = 100,
                TextAlignment = TextAlignment.Center,
                FontWeight = FontWeight.ExtraBold,
            };

            _volumeText = new TextBlock
            {
                Text = ShowVolume(),
                FontSize = 100,
                TextAlignment = TextAlignment.Center,
                FontWeight = FontWeight.ExtraBold,
            };

            ChartManager.AddCustomFrame("cTrader.com").Child = _cTraderWebView;
            Asp.SymbolTab.AddBlock("Commissions").Child = _commissionsText;
            TradeWatch.AddTab("Volume").Child = _volumeText;
            Timer.Start(TimeSpan.FromSeconds(0.5));

        }

        protected void ShowWebsite(WebViewLoadedEventArgs args)
        {
            _cTraderWebView.NavigateAsync("https://ctrader.com");
        }

        protected string ShowCommissions()
        {
            double commissionsCounter = 0;
            foreach (var position in Positions)
            {
                commissionsCounter += position.Commissions;
            }
            return commissionsCounter.ToString();
        }

        protected string ShowVolume() 
        {
            double volumeCounter = 0;
            foreach (var position in Positions) 
            {
                volumeCounter += position.VolumeInUnits;
            }
            return volumeCounter.ToString();
        }

        protected override void OnTimer()
        {
            _commissionsText.Text = ShowCommissions();
            _volumeText.Text = ShowVolume();
        }
    }
}

الملخص

توفر cTrader عدة خيارات لوضع العناصر المخصصة عبر الإضافات. يمكنك استخدامها لتخصيص واجهة مستخدم cTrader وجعل المنصة خاصة بك حقًا.

Image title