Risk-Based Trade Placement EA mit On-Chart UI (Part 1): Gestaltung der Nutzeroberfläche
24
0
Einführung
Viele Händler tun sich schwer damit, die richtige Losgröße für jeden Handel zu berechnen und gleichzeitig ihr Risiko konstant zu halten. Die manuelle Durchführung dieser Berechnungen vor jedem Eintrag ist repetitiv und zeitaufwändig; selbst ein kleiner Fehler kann zu unerwünschten Verlusten führen. Die Händler brauchen eine Möglichkeit, diesen Prozess schneller und zuverlässiger zu gestalten, und zwar direkt im Chart.
Dieser Artikel stellt eine praktische Lösung vor, indem er zeigt, wie man ein On-Chart-Kontrollpanel für einen risikobasierten Expert Advisor zur Handelsplatzierung entwickelt. Die Schnittstelle, die wir aufbauen werden, ist die Grundlage für ein komplettes System, das später die Losgrößenberechnung und die Auftragsvergabe automatisieren wird. In diesem ersten Teil konzentrieren wir uns auf die Erstellung des statischen grafischen Layouts, das den visuellen Kern des Tools bilden wird.
Der Zweck dieses Projekts geht über die Erstellung eines einfachen Designs hinaus. Ziel ist es, etwas zu entwickeln, das schließlich unter realen Handelsbedingungen eingesetzt werden kann. Die Leser lernen auch, wie sie Chart-Objekte richtig positionieren und gestalten können, um später ihre eigenen professionellen Oberflächen für nutzerdefinierte Expert Advisors zu erstellen.
Zu Beginn muss der Leser verstehen, wie man eine organisierte und attraktive Nutzeroberfläche in MQL5 gestaltet. Am Ende haben sie das Wissen und den Beispielcode, um ein komplettes statisches Panel auf dem Chart zu erstellen. Dieser Artikel bildet den ersten Schritt in einer zweiteiligen Serie, die vom visuellen Design zur vollen Funktionalität übergeht.
Konzept und Gestaltung
Bevor wir mit der Programmierung beginnen, ist es wichtig, dass wir ein klares Bild davon haben, was wir aufbauen wollen. Die grafische Nutzeroberfläche dieses Expert Advisors wurde entwickelt, um die Arbeit eines Händlers zu erleichtern und zu beschleunigen. Es vereint alle wichtigen Eingaben, die für die Berechnung der Losgröße und die Erteilung eines Auftrags erforderlich sind, in einem einzigen Chart-Panel.
Die Schnittstelle ermöglicht es dem Händler, die Art des Auftrags zu wählen, den er erteilen möchte. Sie können einen Einstiegskurs für schwebende Aufträge eingeben und das Stop-Loss- und Take-Profit-Niveau festlegen. Es enthält auch ein Feld, um den Prozentsatz des Risikos pro Handel festzulegen. Es stehen zwei Hauptschaltflächen zur Verfügung. Die eine Schaltfläche berechnet die korrekte Losgröße auf der Grundlage der Eingaben des Nutzers, während die andere Schaltfläche den Handel berechnet und sofort an den Server sendet.
Das Panel enthält auch einen kleinen Bereich, in dem die berechnete Losgröße angezeigt wird, damit der Nutzer das Ergebnis sehen kann, bevor er den Handel absendet. Um die Nutzerfreundlichkeit zu verbessern, gibt es eine Schaltfläche, um das Panel zu schließen, wenn es nicht benötigt wird, und eine weitere Schaltfläche, um es wieder zu öffnen. Dadurch wird sichergestellt, dass die Oberfläche sauber bleibt und die Chartansicht während des Handels nicht beeinträchtigt wird.
Das Design folgt einem einfachen und modernen Layout. Alle Elemente sind übersichtlich in einer geraden Linie angeordnet, sodass das Panel leicht zu lesen und zu bedienen ist. Das Farbthema verwendet einen weichen, hellen Hintergrund mit minimalen Akzentfarben, um den Schwerpunkt auf die Informationen zu legen. Der Titel ist größer und in einer anderen Farbe hervorgehoben, sodass der Nutzer den Zweck des Tools sofort erkennen kann. Die Aktionsschaltflächen sind in leuchtenden Farben gehalten, die die Aufmerksamkeit des Händlers auf sich ziehen und ihn zum nächsten Schritt führen.
Der Nutzer kann auf einen Blick erkennen, was das Panel tut und wie es zu bedienen ist. Das Layout vermittelt ein klares Gefühl für Struktur und Zweck und macht das Tool sowohl professionell als auch angenehm in der Anwendung.
Vorbereiten der EA-Struktur
Beginnen wir mit der Erstellung unserer Arbeitsdatei. Öffnen Sie MetaEditor, gehen Sie auf Datei --> Neu --> Expert Advisor (Vorlage) und erstellen Sie eine leere EA-Datei. Nennen Sie es SmartRiskTrader. Wir haben diesen Namen gewählt, weil er den Zweck unseres Tools klar widerspiegelt. Dies ist ein intelligenter Handelsassistent, der risikobasierte Handelsplatzierungen verwaltet.
Sobald die Datei erstellt ist, löschen Sie jeglichen automatisch generierten Code darin und fügen Sie den folgenden Quellcode ein:
//+------------------------------------------------------------------+ //| SmartRiskTrader.mq5 | //| Copyright 2025, MetaQuotes Ltd. Developer is Chacha Ian | //| https://www.mql5.com/en/users/chachaian | //+------------------------------------------------------------------+ #property copyright "Copyright 2025, MetaQuotes Ltd. Developer is Chacha Ian" #property link "https://www.mql5.com/en/users/chachaian" #property version "1.00" //+------------------------------------------------------------------+ //| Expert initialization function | //+------------------------------------------------------------------+ int OnInit() { //--- create timer EventSetTimer(60); return(INIT_SUCCEEDED); } //+------------------------------------------------------------------+ //| Expert deinitialization function | //+------------------------------------------------------------------+ void OnDeinit(const int reason) { //--- destroy timer EventKillTimer(); } //+------------------------------------------------------------------+ //| Expert tick function | //+------------------------------------------------------------------+ void OnTick() { } //+------------------------------------------------------------------+ //| Timer function | //+------------------------------------------------------------------+ void OnTimer() { } //+------------------------------------------------------------------+ //| TradeTransaction function | //+------------------------------------------------------------------+ void OnTradeTransaction(const MqlTradeTransaction &trans, const MqlTradeRequest &request, const MqlTradeResult &result) { } //+------------------------------------------------------------------+ //| ChartEvent function | //+------------------------------------------------------------------+ void OnChartEvent(const int32_t id, const long &lparam, const double &dparam, const string &sparam) { } //+------------------------------------------------------------------+
Dieser Code dient als Grundgerüst. Es ist eine saubere Grundlage, auf der wir die volle Funktionalität unseres EAs aufbauen werden. Gehen wir kurz auf die wichtigsten Teile ein:
- OnInit – Diese Funktion wird aufgerufen, wenn der EA zum ersten Mal in ein Chart geladen wird. Darin legen wir ein Timer-Ereignis fest, das nach einem bestimmten Zeitintervall ausgelöst wird. In diesem Fall nach jeweils 60 Sekunden. Innerhalb dieser Funktion werden in der Regel die EA-Initialisierungsvorgänge durchgeführt.
- OnDeinit- – Diese Funktion wird ausgeführt, wenn der EA vom Chart abgetrennt wird oder wenn das Terminal heruntergefahren wird. Er löscht alle vom EA erstellten Timer und Ressourcen.
- OnTick – Diese Funktion wird jedes Mal aufgerufen, wenn ein neuer Preis-Tick eintrifft. Später werden wir es für die Handelslogik verwenden.
- OnTimer – Diese Funktion wird in regelmäßigen Abständen auf der Grundlage des in OnInit festgelegten Timers ausgeführt. Sie eignet sich hervorragend für Hintergrundaufgaben wie die Aktualisierung von Panels oder die Überprüfung von Handelsbedingungen.
- OnTradeTransaction – Diese Funktion wird jedes Mal aufgerufen, wenn eine Handelsaktion wie das Öffnen, Ändern oder Schließen einer Position stattfindet. Wir können sie nutzen, um Handelsaktivitäten zu überwachen und darauf zu reagieren.
- OnChartEvent – Diese Funktion verarbeitet Nutzerinteraktionen im Chart, wie z. B. das Klicken auf eine Schaltfläche. Sie ist für den Aufbau unseres On-Chart-Kontrollpanels unerlässlich.
Mit dieser Struktur haben wir nun alle notwendigen „Haken“, an denen wir unsere Logik Schritt für Schritt aufhängen können. Lassen Sie uns fortfahren und einige Hilfsfunktionen definieren, die das Erstellen und Verwalten von grafischen Objekten in unserem Chart erleichtern. Wir fügen folgende Funktionen direkt unter unserem bestehenden Quellcode ein. Sie werden als wiederverwendbare Bausteine bei der Konstruktion unserer Nutzeroberfläche dienen.
//--- UTILITY FUNCTIONS //+------------------------------------------------------------------+ //| Function to generate a unique object name with a given prefix | //+------------------------------------------------------------------+ string GenerateUniqueName(string prefix){ int attempt = 0; string uniqueName; while(true) { uniqueName = prefix + IntegerToString(MathRand() + attempt); if(ObjectFind(0, uniqueName) < 0){ break; } attempt++; } return uniqueName; } //--- Reusable GUI elements //+------------------------------------------------------------------+ //| 1. To create a Rectangular panel | //+------------------------------------------------------------------+ bool CREATE_OBJ_RECTANGLE_LABEL( string objName, int xDistance, int yDistance, int width, int height, color clrBackground, int borderWidth, color borderColor = clrNONE, ENUM_BORDER_TYPE borderType = BORDER_FLAT, ENUM_LINE_STYLE borderStyle = STYLE_SOLID ){ ResetLastError(); //--- Create a rectangular panel if(!ObjectCreate(0, objName, OBJ_RECTANGLE_LABEL, 0, 0, 0)){ Print("Error while creating a rectangular panel: ", GetLastError()); return false; } //--- Set values for corresponding object properties ObjectSetInteger(0, objName, OBJPROP_XDISTANCE, xDistance); ObjectSetInteger(0, objName, OBJPROP_YDISTANCE, yDistance); ObjectSetInteger(0, objName, OBJPROP_XSIZE, width); ObjectSetInteger(0, objName, OBJPROP_YSIZE, height); ObjectSetInteger(0, objName, OBJPROP_CORNER, CORNER_LEFT_UPPER); ObjectSetInteger(0, objName, OBJPROP_BGCOLOR, clrBackground); ObjectSetInteger(0, objName, OBJPROP_BORDER_TYPE, borderType); ObjectSetInteger(0, objName, OBJPROP_STYLE, borderStyle); ObjectSetInteger(0, objName, OBJPROP_WIDTH, borderWidth); ObjectSetInteger(0, objName, OBJPROP_COLOR, borderColor); ObjectSetInteger(0, objName, OBJPROP_BACK, false); ObjectSetInteger(0, objName, OBJPROP_STATE, false); ObjectSetInteger(0, objName, OBJPROP_SELECTABLE, false); ObjectSetInteger(0, objName, OBJPROP_SELECTED, false); ChartRedraw(); return true; } //+------------------------------------------------------------------+ //| 2. To create a Button Object | //+------------------------------------------------------------------+ bool CREATE_OBJ_BUTTON( string objName, int xDistance, int yDistance, int width, int height, string text = "Activate", color textColor = clrDarkGray, int fontSize = 12, int borderWidth = 0, color backgroundColor = clrWhiteSmoke, color borderColor = clrBlack, string font = "Tahoma" ){ ResetLastError(); //--- Create a button object if(!ObjectCreate(0, objName, OBJ_BUTTON, 0, 0, 0)){ Print("Error while creating a button: ", GetLastError()); return false; } //--- Set values for corresponding object properties ObjectSetInteger(0, objName, OBJPROP_XDISTANCE, xDistance); ObjectSetInteger(0, objName, OBJPROP_YDISTANCE, yDistance); ObjectSetInteger(0, objName, OBJPROP_XSIZE, width); ObjectSetInteger(0, objName, OBJPROP_YSIZE, height); ObjectSetInteger(0, objName, OBJPROP_CORNER, CORNER_LEFT_UPPER); ObjectSetString (0, objName, OBJPROP_TEXT, text); ObjectSetInteger(0, objName, OBJPROP_COLOR, textColor); ObjectSetInteger(0, objName, OBJPROP_FONTSIZE, fontSize); ObjectSetString (0, objName, OBJPROP_FONT, font); ObjectSetInteger(0, objName, OBJPROP_BGCOLOR, backgroundColor); ObjectSetInteger(0, objName, OBJPROP_BORDER_TYPE, BORDER_FLAT); ObjectSetInteger(0, objName, OBJPROP_WIDTH, borderWidth); ObjectSetInteger(0, objName, OBJPROP_BORDER_COLOR, borderColor); ObjectSetInteger(0, objName, OBJPROP_BACK, false); ObjectSetInteger(0, objName, OBJPROP_SELECTABLE, false); ObjectSetInteger(0, objName, OBJPROP_SELECTED, false); ChartRedraw(); return true; } //+------------------------------------------------------------------+ //| 3. To create an Input field | //+------------------------------------------------------------------+ bool CREATE_OBJ_EDIT( string objName, int xDistance, int yDistance, int width, int height, string text = "Say sth'...", color textColor = clrGray, int fontSize = 12, color backgroundColor = clrWhite, color borderColor = clrBlack, string font = "Tahoma" ){ ResetLastError(); //--- Create an input field if(!ObjectCreate(0, objName, OBJ_EDIT, 0, 0, 0)){ Print("Error while creating a text input: ", GetLastError()); return false; } //--- Set values for corresponding object properties ObjectSetInteger(0, objName, OBJPROP_XDISTANCE, xDistance); ObjectSetInteger(0, objName, OBJPROP_YDISTANCE, yDistance); ObjectSetInteger(0, objName, OBJPROP_XSIZE, width); ObjectSetInteger(0, objName, OBJPROP_YSIZE, height); ObjectSetInteger(0, objName, OBJPROP_CORNER, CORNER_LEFT_UPPER); ObjectSetString (0, objName, OBJPROP_TEXT, text); ObjectSetInteger(0, objName, OBJPROP_COLOR, textColor); ObjectSetInteger(0, objName, OBJPROP_FONTSIZE, fontSize); ObjectSetString (0, objName, OBJPROP_FONT, font); ObjectSetInteger(0, objName, OBJPROP_BGCOLOR, backgroundColor); ObjectSetInteger(0, objName, OBJPROP_BORDER_COLOR, borderColor); ObjectSetInteger(0, objName, OBJPROP_ALIGN, ALIGN_LEFT); ObjectSetInteger(0, objName, OBJPROP_READONLY, false); ObjectSetInteger(0, objName, OBJPROP_BACK, false); ObjectSetInteger(0, objName, OBJPROP_STATE, false); ObjectSetInteger(0, objName, OBJPROP_SELECTABLE, false); ObjectSetInteger(0, objName, OBJPROP_SELECTED, false); ChartRedraw(); return true; } //+------------------------------------------------------------------+ //| 4. To create a Text label | //+------------------------------------------------------------------+ bool CREATE_OBJ_LABEL( string objName, int xDistance, int yDistance, string text = "Name sth'...", color textColor = clrDarkGray, int fontSize = 12, string font = "Tahoma" ){ ResetLastError(); //--- Create a text label if(!ObjectCreate(0, objName, OBJ_LABEL, 0, 0, 0)){ Print("Error while creating a text label: ", GetLastError()); return false; } //--- Set values for corresponding object properties ObjectSetInteger(0, objName, OBJPROP_XDISTANCE, xDistance); ObjectSetInteger(0, objName, OBJPROP_YDISTANCE, yDistance); ObjectSetInteger(0, objName, OBJPROP_CORNER, CORNER_LEFT_UPPER); ObjectSetString (0, objName, OBJPROP_TEXT, text); ObjectSetInteger(0, objName, OBJPROP_COLOR, textColor); ObjectSetInteger(0, objName, OBJPROP_FONTSIZE, fontSize); ObjectSetString (0, objName, OBJPROP_FONT, font); ObjectSetInteger(0, objName, OBJPROP_BACK, false); ObjectSetInteger(0, objName, OBJPROP_STATE, false); ObjectSetInteger(0, objName, OBJPROP_SELECTABLE, false); ObjectSetInteger(0, objName, OBJPROP_SELECTED, false); ChartRedraw(); return true; }
Lassen Sie uns nun verstehen, was jede dieser Funktionen bewirkt.
1. GenerateUniqueName
Jedes grafische Objekt in einem Chart muss einen eindeutigen Namen haben, Diese Funktion erstellt einen eindeutigen Namen unter Verwendung eines Präfixes und einer Zufallszahl. Sie hilft, Namenskonflikte zu vermeiden, wenn mehrere Objekte dynamisch erstellt werden.
2. CREATE_OBJ_RECTANGLE_LABEL
Diese Funktion erstellt ein rechteckiges Panel. Wir werden sie als Hintergrund oder Container verwenden, um andere GUI-Elemente wie Beschriftungen und Schaltflächen aufzunehmen.
3. CREATE_OBJ_BUTTON
Diese Funktion erstellt eine anklickbare Schaltfläche mit anpassbarem Text, Größe und Farbe. Schaltflächen sind für Nutzeraktionen wie die Platzierung von Geschäften oder die Berechnung von Losgrößen unerlässlich.
4. CREATE_OBJ_EDIT
Diese Funktion erstellt ein editierbares Textfeld, in das der Nutzer Eingabewerte eingeben kann. Wir werden diese Felder später verwenden, um Eingaben wie Einstiegspreis und Risikoprozentsatz zu erfassen.
5. CREATE_OBJ_LABEL
Diese Funktion erstellt eine einfache Textbeschriftung, die Informationen oder Beschreibungen neben Eingabefeldern und Schaltflächen anzeigt.
Diese fünf Funktionen bilden zusammen die Grundlage für unsere grafische Nutzeroberfläche auf dem Chart. Sie vereinfachen die Erstellung von Objekten und machen unseren Code übersichtlicher und lesbarer. Im nächsten Abschnitt werden wir sie verwenden, um unser Haupt-GUI-Layout zu erstellen.
Schritt für Schritt: Zusammenbau der Nutzeroberfläche
Nachdem wir nun alle unsere Hilfsfunktionen eingerichtet haben, ist es an der Zeit, die eigentliche Nutzeroberfläche zusammenzustellen. Um unseren Code sauber und übersichtlich zu halten, werden wir eine einzige Funktion erstellen, die den gesamten Prozess des Renderns der grafischen Nutzeroberfläche übernimmt. Wir werden diese Funktion CREATE_GUI nennen. Es ist sehr nützlich, die Schnittstelle auf diese Weise modular zu gestalten, da wir später das Panel möglicherweise zerstören und neu aufbauen wollen, wenn ein Nutzer auf eine Schaltfläche zum Schließen der Nutzeroberfläche klickt. Eine einzige Funktion, die für die Erstellung aller visuellen Elemente zuständig ist, macht diesen Prozess einfach und überschaubar. Lassen Sie uns nun fortfahren und diese Funktion direkt unter unseren bestehenden Funktionen deklarieren.
... //+------------------------------------------------------------------+ //| Function to render the main GUI | //+------------------------------------------------------------------+ void CREATE_GUI(){ } //+------------------------------------------------------------------+
Wir werden sie auch innerhalb der Funktion OnInit aufrufen, damit wir die Auswirkungen unseres Codes sofort sehen können, während wir die Schnittstelle Schritt für Schritt aufbauen.
... //+------------------------------------------------------------------+ //| Expert initialization function | //+------------------------------------------------------------------+ int OnInit() { //--- create timer EventSetTimer(60); //--- render the graphical user interface CREATE_GUI(); return(INIT_SUCCEEDED); } ...
Bevor wir weitermachen, sollten wir noch einen wichtigen Schritt tun, um sicherzustellen, dass unsere Schnittstelle sauber im Chart angezeigt wird. Standardmäßig werden in den Charts des MetaTraders in der oberen linken Ecke Schaltflächen für den Ein-Klick-Handel angezeigt. Diese können unsere nutzerdefinierte Schnittstelle überlagern und die Übersichtlichkeit erschweren. Um dies zu beheben, werden wir das Erscheinungsbild des Charts konfigurieren, indem wir die Schaltflächen für den Ein-Klick-Handel deaktivieren, wenn unser EA startet.
Wir werden dies mit einer einfachen Funktion namens ConfigureChartAppearance erreichen, die wir direkt unter unseren bestehenden Dienstprogrammfunktionen definieren werden. Mit dieser Funktion wird die Charteigenschaft zum Ausblenden der Ein-Klick-Schaltflächen festgelegt.
//+------------------------------------------------------------------+ //| 4. This function configures the chart's appearance. | | //+------------------------------------------------------------------+ bool ConfigureChartAppearance() { if(!ChartSetInteger(0, CHART_SHOW_ONE_CLICK, false)){ Print("Error while setting one click buttons, ", GetLastError()); return false; } return true; }
Sobald diese Funktion definiert ist, rufen wir sie innerhalb von OnInit auf, damit sie automatisch ausgeführt wird, wenn der Expert Advisor geladen wird. Dadurch wird sichergestellt, dass das Chartlayout angepasst wird, bevor die grafische Nutzeroberfläche gerendert wird.
//+------------------------------------------------------------------+ //| Expert initialization function | //+------------------------------------------------------------------+ int OnInit() { ... //--- Configure chart appearance if(!ConfigureChartAppearance()){ Print("Error while customizing the chart's appearance"); return(INIT_FAILED); } return(INIT_SUCCEEDED); }
Es ist eine gute Praxis sicherzustellen, dass alle von unserem EA erstellten grafischen Objekte ordnungsgemäß entfernt werden, wenn das Programm vom Chart getrennt wird. Auf diese Weise wird ein Durcheinander vermieden und es werden keine Objekte aus früheren Sitzungen übrig gelassen.
Um dies zu bewerkstelligen, werden wir eine einfache Codezeile in die Funktion OnDeinit einfügen, die alle grafischen Objekte löscht, wenn der EA entfernt wird. Die Funktion ObjectsDeleteAll löscht jedes Objekt aus dem aktuellen Chart, sodass es sauber und für die zukünftige Verwendung bereit ist.
//+------------------------------------------------------------------+ //| Expert deinitialization function | //+------------------------------------------------------------------+ void OnDeinit(const int reason) { ... //--- delete all graphical objects ObjectsDeleteAll(0); }
Bevor wir mit der Erstellung der einzelnen Objekte für unser Panel beginnen, müssen wir sicherstellen, dass jedes Objekt einen eindeutigen Namen hat. Auf diese Weise können wir sie auf dem Chart leicht erkennen und verwalten. Um dies zu erreichen, werden wir Makros verwenden, um die Namen unserer Objekte zu speichern. Für Objekte, auf die wir nicht häufig zugreifen oder die wir nicht häufig ändern müssen, definieren wir einfach ein kurzes Präfix, das zur Generierung ihrer Namen verwendet wird. Fügen wir den folgenden Codeschnipsel direkt unter dem Abschnitt hinzu, der die EA-Eigenschaftsrichtlinien definiert.
... //+------------------------------------------------------------------+ //| Macros | //+------------------------------------------------------------------+ #define SmartRiskTrader "SmartRiskTrader" ...
Wir beginnen unsere Schnittstelle mit der Erstellung des Hintergrund-Panels, das als Basis-Container für alle anderen Elemente unserer GUI dienen wird. Betrachten Sie es als die Leinwand, auf der jede Schaltfläche, jedes Etikett und jedes Steuerelement sitzt. Dazu rufen wir unsere nutzerdefinierte Funktion CREATE_OBJ_RECTANGLE_LABEL auf, die ein rechteckiges Beschriftungsobjekt auf dem Chart zeichnet.
... //+------------------------------------------------------------------+ //| Function to render the main GUI | //+------------------------------------------------------------------+ void CREATE_GUI(){ //--- Background panel CREATE_OBJ_RECTANGLE_LABEL(GenerateUniqueName(SmartRiskTrader), 20, 20, 320, 380, clrWhiteSmoke, 1, clrDarkBlue, BORDER_FLAT, STYLE_DASHDOTDOT); } ...
Wir verwenden GenerateUniqueName(SmartRiskTrader), um sicherzustellen, dass der Name des Objekts eindeutig ist, und wir geben ihm einen sauberen weißen Rauchhintergrund mit einem dunkelblauen Rand.
Kompilieren Sie an dieser Stelle Ihren Quellcode. Nach erfolgreicher Kompilierung wechseln Sie zu Ihrem Chart und starten den EA. Sie sollten nun ein sauberes rechteckiges Panel sehen, das genau dort sitzt, wo Sie es definiert haben.
Dies bestätigt, dass unsere GUI-Erstellungsfunktion korrekt funktioniert. Es ist immer eine gute Idee, den Code auf diese Weise schrittweise zu testen, damit Sie eventuelle Probleme frühzeitig erkennen und beheben können, bevor die Schnittstelle komplexer wird.
Als Nächstes fügen wir einen weiteren rechteckigen Bereich über unserem ursprünglichen Hintergrundbereich hinzu. Dieses sekundäre Panel erfüllt keinen funktionalen Zweck, sondern dient lediglich der Optik und verleiht der Nutzeroberfläche ein aufgeräumtes, mehrschichtiges Aussehen. Wir legen es einfach über das erste Rechteck, wobei wir etwas kleinere Koordinaten verwenden, damit es sich gut in den Rahmen des Hauptfensters einfügt.
Nach dem Hinzufügen sollte Ihr Code nun wie folgt aussehen:
... //+------------------------------------------------------------------+ //| Function to render the main GUI | //+------------------------------------------------------------------+ void CREATE_GUI(){ //--- Background panel CREATE_OBJ_RECTANGLE_LABEL(GenerateUniqueName(SmartRiskTrader), 20, 20, 320, 380, clrWhiteSmoke, 1, clrDarkBlue, BORDER_FLAT, STYLE_DASHDOTDOT); CREATE_OBJ_RECTANGLE_LABEL(GenerateUniqueName(SmartRiskTrader), 30, 30, 300, 360, clrWhite, 1, clrDarkBlue, BORDER_FLAT, STYLE_SOLID); } ...
Dieser einfache Zusatz verleiht unserer Schnittstelle ein raffinierteres, mehrschichtiges Aussehen. Kompilieren Sie es und führen Sie es aus, um Ihr aktualisiertes Design zu bewundern.
Nun, da unser Hintergrund fertig ist, können wir mit dem Aufbau des Kopfbereichs unserer GUI fortfahren. In diesem Bereich wird der Titel unseres Tools angezeigt und eine kleine Schaltfläche eingefügt, mit der der Nutzer das Panel schließen kann. Außerdem fügen wir eine dünne Trennlinie hinzu, um die Kopfzeile optisch vom Rest der Nutzeroberfläche zu unterscheiden.
Wir werden dies Schritt für Schritt aufbauen, indem wir eine Komponente nach der anderen hinzufügen und nach jeder Hinzufügung kompilieren, um die Änderungen in Echtzeit zu beobachten.
Beginnen wir damit, ein kleines Rechteck zu erstellen, das unsere Schließen-Schaltfläche aufnehmen wird:
... //+------------------------------------------------------------------+ //| Function to render the main GUI | //+------------------------------------------------------------------+ void CREATE_GUI(){ //--- Background panel ... CREATE_OBJ_RECTANGLE_LABEL(GenerateUniqueName(SmartRiskTrader), 30, 30, 300, 360, clrWhite, 1, clrDarkBlue, BORDER_FLAT, STYLE_SOLID); //--- Header Section Components CREATE_OBJ_RECTANGLE_LABEL(GenerateUniqueName(SmartRiskTrader), 300, 40, 20, 20, clrWhiteSmoke, 1, clrDarkBlue, BORDER_FLAT, STYLE_SOLID); } ...
Sobald Sie diese Zeile hinzugefügt haben, kompilieren Sie den Code und führen Sie den EA aus, damit das kleine Kopfzeilenfeld im oberen rechten Bereich Ihres Panels erscheint.
Als Nächstes platzieren wir die Schaltfläche zum Schließen („X“) direkt in diesem Feld: Im Gegensatz zu den dekorativen Komponenten, die wir bisher erstellt haben, wird diese Schaltfläche tatsächlich auf Nutzerinteraktion reagieren – wenn sie angeklickt wird, schließt sie unsere Schnittstelle. Aus diesem Grund ist es wichtig, ihr einen eindeutigen und leicht erkennbaren Namen zu geben, auf den wir später in unserem Code verweisen können.
... //+------------------------------------------------------------------+ //| Macros | //+------------------------------------------------------------------+ #define SmartRiskTrader "SmartRiskTrader" #define BTN_CLOSE_GUI "BTN_CLOSE_GUI" ...
Fügen wir nun den Code hinzu, der die Schaltfläche tatsächlich anzeigt.
... //+------------------------------------------------------------------+ //| Function to render the main GUI | //+------------------------------------------------------------------+ void CREATE_GUI(){ ... //--- Header Section Components CREATE_OBJ_RECTANGLE_LABEL(GenerateUniqueName(SmartRiskTrader), 300, 40, 20, 20, clrWhiteSmoke, 1, clrDarkBlue, BORDER_FLAT, STYLE_SOLID); CREATE_OBJ_LABEL(BTN_CLOSE_GUI, 305, 40, "X", clrDarkBlue, 12); }
Kompilieren Sie Ihren EA, und Sie sollten das Symbol „X“ im oberen rechten Teil Ihres Panels erscheinen sehen.
Jetzt fügen wir die Titelbezeichnung für unsere GUI hinzu. Dadurch wirkt das Panel professioneller und informativer.
... //+------------------------------------------------------------------+ //| Function to render the main GUI | //+------------------------------------------------------------------+ void CREATE_GUI(){ ... CREATE_OBJ_LABEL(GenerateUniqueName(SmartRiskTrader), 40, 37, "Smart Risk Trader", clrDarkBlue, 14, "Comic Sans Ms"); CREATE_OBJ_LABEL(GenerateUniqueName(SmartRiskTrader), 40, 37, "Smart Risk Trader", clrDarkBlue, 14, "Comic Sans Ms"); } ...
Kompilieren Sie Ihren Code und führen Sie ihn erneut aus. Der Titel sollte nun in einer freundlichen und gut lesbaren Schriftart am oberen Rand Ihres Panels angezeigt werden.
Zum Schluss erstellen wir eine horizontale Linie, um die Kopfzeile von den übrigen Komponenten darunter zu trennen:
... //+------------------------------------------------------------------+ //| Function to render the main GUI | //+------------------------------------------------------------------+ void CREATE_GUI(){ ... CREATE_OBJ_LABEL(GenerateUniqueName(SmartRiskTrader), 40, 37, "Smart Risk Trader", clrDarkBlue, 14, "Comic Sans Ms"); CREATE_OBJ_RECTANGLE_LABEL(GenerateUniqueName(SmartRiskTrader), 30, 70, 300, 1, clrDarkBlue, 1, clrDarkBlue, BORDER_FLAT); } ...
Kompilieren Sie noch einmal, um sicherzustellen, dass alles korrekt ist.
Nach diesen Schritten hat Ihre Nutzeroberfläche nun einen einfachen, aber eleganten Kopfbereich, der ihr Struktur und Identität verleiht – eine kleine Schaltfläche zum Schließen, einen klaren Titel und eine klare Trennlinie darunter.
Jetzt fügen wir unser erstes Eingabefeld und seine Beschriftung hinzu. In diesem Eingabefeld kann der Nutzer eine Auftragsart auswählen, z. B. Kaufen, Verkaufen, Kauflimit oder andere. Wie zuvor beginnen wir mit der Anzeige einer Textbeschriftung, die beschreibt, wofür das Feld steht.
Als Nächstes erstellen wir die eigentliche Schaltfläche, die als Eingabefeld dienen wird. Da wir später programmatisch auf diese Schaltfläche zugreifen wollen, um beispielsweise zu erkennen, wann sie angeklickt wurde, müssen wir ihr einen festen Namen zuweisen, anstatt einen dynamisch zu generieren. Um dies zu erreichen, definieren wir zunächst ein Makro wie folgt:
... //+------------------------------------------------------------------+ //| Macros | //+------------------------------------------------------------------+ ... #define BTN_ORDER_TYPES "BTN_ORDER_TYPES" ...
Sobald das Makro definiert ist, können wir mit der Erstellung der Beschriftung und des Eingabefeldes (das in diesem Fall durch eine Schaltfläche dargestellt wird) fortfahren. Die Beschriftung dient als Titel für das Feld, während die Schaltfläche es dem Nutzer ermöglicht, mit der Schnittstelle zu interagieren und die gewünschte Auftragsart auszuwählen.
... //+------------------------------------------------------------------+ //| Function to render the main GUI | //+------------------------------------------------------------------+ void CREATE_GUI(){ ... //--- Order Types CREATE_OBJ_LABEL(GenerateUniqueName(SmartRiskTrader), 40, 90, "Order Type: ", C'20, 20, 20'); CREATE_OBJ_BUTTON(BTN_ORDER_TYPES, 140, 90, 140, 25, "Select Order Type", C'20, 20, 20', 12, 1, clrWhiteSmoke, clrDarkBlue); } ...
Nachdem Sie diesen Code hinzugefügt haben, können Sie ihn kompilieren und ausführen, um das neue Eingabefeld im Chart anzuzeigen.
Bevor wir das Dropdown-Menü für unsere Auftragsarten erstellen, müssen wir zunächst einige Makros definieren. Diese Makros enthalten die eindeutigen IDs für jedes Dropdown-Element, sodass wir sie später leicht identifizieren und mit ihnen interagieren können. Da diese Elemente auf Nutzeraktionen wie z. B. Klicks reagieren, ist es einfacher, Ereignisse zu behandeln, wenn man feste Namen anstelle von dynamisch generierten Namen verwendet. Nachfolgend finden Sie die Makros, die die Dropdown-Gruppe und die einzelnen Auftragsarten definieren.
#define ORDER_TYPE_GROUP "ORDER_TYPE_GROUP" #define MARKET_BUY "ORDER_TYPE_GROUP_MARKET_BUY" #define MARKET_SELL "ORDER_TYPE_GROUP_MARKET_SELL" #define BUY_LIMIT "ORDER_TYPE_GROUP_BUY_LIMIT" #define SELL_LIMIT "ORDER_TYPE_GROUP_SELL_LIMIT" #define BUY_STOP "ORDER_TYPE_GROUP_BUY_STOP" #define SELL_STOP "ORDER_TYPE_GROUP_SELL_STOP"
Nachdem wir nun die Makros definiert haben, können wir eine Funktion erstellen, die die Auswahlliste aufbaut. Diese Funktion mit dem Namen CREATE_ORDER_TYPE_DROPDOWN rendert alle Dropdown-Elemente – einschließlich des Hintergrundpanels und der einzelnen Auftragstypbeschriftungen. Die Dropdown-Liste bietet den Nutzern eine saubere und übersichtliche Möglichkeit, eine Auftragsart direkt auf der Nutzeroberfläche auszuwählen.
... //+------------------------------------------------------------------+ //| Function to create the order types dropdown | //+------------------------------------------------------------------+ void CREATE_ORDER_TYPE_DROPDOWN(){ CREATE_OBJ_RECTANGLE_LABEL(GenerateUniqueName(ORDER_TYPE_GROUP), 140, 116, 140, 151, clrWhiteSmoke, 1, clrDarkBlue, BORDER_FLAT); CREATE_OBJ_LABEL(MARKET_BUY , 150, 120, "Market Buy ", C'20, 20, 20'); CREATE_OBJ_LABEL(MARKET_SELL, 150, 145, "Market Sell", C'20, 20, 20'); CREATE_OBJ_LABEL(BUY_LIMIT , 150, 170, "Buy Limit ", C'20, 20, 20'); CREATE_OBJ_LABEL(SELL_LIMIT , 150, 195, "Sell Limit ", C'20, 20, 20'); CREATE_OBJ_LABEL(BUY_STOP , 150, 220, "Buy Stop ", C'20, 20, 20'); CREATE_OBJ_LABEL(SELL_STOP , 150, 245, "Sell Stop ", C'20, 20, 20'); }
Um diese Funktion zu testen, können wir sie vorübergehend innerhalb der OnInit-Funktion aufrufen. So können wir sehen, wie das Dropdown im Chart erscheint, wenn der EA gestartet wird.
... //+------------------------------------------------------------------+ //| Expert initialization function | //+------------------------------------------------------------------+ int OnInit() { //--- create timer EventSetTimer(60); //--- render the graphical user interface CREATE_GUI(); CREATE_ORDER_TYPE_DROPDOWN(); return(INIT_SUCCEEDED); } ...
Kompilieren Sie nun den Quellcode und werfen Sie einen Blick auf das Chart – Sie sollten ein hübsches Dropdown-Menü auf Ihrer Oberfläche sehen.
Nachdem wir überprüft haben, dass die Funktion korrekt funktioniert, ist es wichtig, den Funktionsaufruf auszukommentieren, da wir das Dropdown-Menü später nur anzeigen werden, wenn der Nutzer auf die Schaltfläche „Select Order Type“ klickt. Dadurch wird sichergestellt, dass sich das Dropdown-Menü dynamisch verhält, so wie es in einer professionellen Oberfläche sein sollte.
... //+------------------------------------------------------------------+ //| Expert initialization function | //+------------------------------------------------------------------+ int OnInit() { //--- create timer EventSetTimer(60); //--- render the graphical user interface CREATE_GUI(); //CREATE_ORDER_TYPE_DROPDOWN(); return(INIT_SUCCEEDED); } ...
Als Nächstes erstellen wir das Feld für den Eröffnungspreis und seine Kennzeichnung. Da wir später in unserem Code auf dieses Feld zugreifen müssen, sollten wir ihm einen festen Namen zuweisen, damit es leicht zu finden ist. Wir werden diesen Namen als Makro definieren, wie unten gezeigt:
... //+------------------------------------------------------------------+ //| Macros | //+------------------------------------------------------------------+ ... #define FIELD_ENTRY_PRICE "FIELD_ENTRY_PRICE" ...
Mit dem definierten Makro können wir nun die Kennzeichnung und das Eingabefeld zu unserer CREATE_GUI-Funktion hinzufügen. Diese beiden Codezeilen zeigen die Bezeichnung „Entry Price“ (Eröffnungspreis) und ein editierbares Feld an, in das der Nutzer einen Wert eingeben kann.
... //+------------------------------------------------------------------+ //| Function to render the main GUI | //+------------------------------------------------------------------+ void CREATE_GUI(){ ... //--- Entry Price CREATE_OBJ_LABEL(GenerateUniqueName(SmartRiskTrader), 40, 125, "Entry Price: ", C'20, 20, 20'); CREATE_OBJ_EDIT(FIELD_ENTRY_PRICE, 140, 125, 100, 25, "1.14030", C'20, 20, 20', 12, clrWhiteSmoke, clrDarkBlue); }
Kompilieren Sie nun den Quellcode und starten Sie den EA in Ihrem Chart. Sie sollten ein sauberes und gut ausgerichtetes Eingabepreisfeld zusammen mit seiner Beschriftung sehen, bereit für die Nutzereingabe.
Nachdem wir nun das Feld für den Eröffnungspreis hinzugefügt haben, wiederholen wir das gleiche Verfahren für die übrigen Eingabefelder. In diesen Feldern kann der Nutzer das Stop-Loss-Niveau, das Take-Profit-Niveau und den Risikoprozentsatz eingeben. Wie zuvor werden wir für jedes dieser Felder Makros definieren, damit wir später in unserem Code leicht auf sie verweisen können.
... //+------------------------------------------------------------------+ //| Macros | //+------------------------------------------------------------------+ ... #define FIELD_STOP_LOSS "FIELD_STOP_LOSS" #define FIELD_TAKE_PROFIT "FIELD_TAKE_PROFIT" #define RISK "RISK"
Nachdem wir diese Makros definiert haben, können wir zu unserer Funktion CREATE_GUI zurückkehren und den Code hinzufügen, der die Beschriftungen und Eingabefelder für jedes von ihnen erstellt.
//+------------------------------------------------------------------+ //| Function to render the main GUI | //+------------------------------------------------------------------+ void CREATE_GUI(){ ... //--- Stop Loss CREATE_OBJ_LABEL(GenerateUniqueName(SmartRiskTrader), 40, 160, "Stop Loss: ", C'20, 20, 20'); CREATE_OBJ_EDIT(FIELD_STOP_LOSS, 140, 160, 100, 25, "1.13302", C'20, 20, 20', 12, clrWhiteSmoke, clrDarkBlue); //--- Take Profit CREATE_OBJ_LABEL(GenerateUniqueName(SmartRiskTrader), 40, 195, "Take Profit: ", C'20, 20, 20'); CREATE_OBJ_EDIT(FIELD_TAKE_PROFIT, 140, 195, 100, 25, "1.16302", C'20, 20, 20', 12, clrWhiteSmoke, clrDarkBlue); //--- Risk CREATE_OBJ_LABEL(GenerateUniqueName(SmartRiskTrader), 40, 230, "Risk %: ", C'20, 20, 20'); CREATE_OBJ_EDIT(RISK, 140, 230, 100, 25, "2.0", C'20, 20, 20', 12, clrWhiteSmoke, clrDarkBlue); }
Sobald Sie diese Zeilen hinzugefügt haben, kompilieren Sie den Quellcode und führen den EA auf Ihrem Chart aus. Sie sollten nun ein sauberes und übersichtliches Layout sehen, das die drei neuen Eingabefelder enthält, die jeweils richtig beschriftet und am Rest der Schnittstelle ausgerichtet sind.
Als Nächstes fügen wir die Ausführungsschaltflächen hinzu, die für Aktionen wie die Berechnung der Losgröße und das Senden von Handelsaufträgen zuständig sind. Da wir später erkennen müssen, wenn ein Nutzer auf diese Schaltflächen klickt, ist es wichtig, jeder dieser Schaltflächen einen eindeutigen und leicht erkennbaren Namen zu geben. Dies geschieht durch die Definition von Makros für die Schaltflächen, wie unten gezeigt:
//+------------------------------------------------------------------+ //| Macros | //+------------------------------------------------------------------+ ... #define BTN_SEND_ORDER "BTN_SEND_ORDER" #define RESULTS_TEXT "RESULTS_TEXT" #define BTN_GUI_OPEN "BTN_GUI_OPEN"
Sobald wir diese Makros definiert haben, können wir mit der Erstellung der eigentlichen Schaltflächenelemente in unserer Funktion CREATE_GUI fortfahren. Der folgende Code fügt zwei Schaltflächen hinzu – eine zur Berechnung der Losgröße und eine weitere zum Senden von Handelsaufträgen.
//+------------------------------------------------------------------+ //| Function to render the main GUI | //+------------------------------------------------------------------+ void CREATE_GUI(){ ... //--- Execution Buttons CREATE_OBJ_BUTTON(BTN_CALC_LOT, 40, 270, 140, 40, "CALCULATE LOT", clrWhite, 12, 1, clrDarkBlue, clrBlack); CREATE_OBJ_BUTTON(BTN_SEND_ORDER, 190, 270, 120, 40, "SEND ORDER", clrWhite, 12, 1, clrDarkGreen, clrBlack); }
Kompilieren Sie nun Ihren Quellcode und fügen Sie den EA in einen Chart ein. Sie sollten zwei sauber ausgerichtete Schaltflächen sehen, die es dem Nutzer später ermöglichen, die Losgröße zu berechnen und Aufträge direkt über die Schnittstelle zu senden.
Um das statische Layout unserer Nutzeroberfläche zu vervollständigen, werden wir nun einen kleinen Anzeigebereich erstellen, in dem die berechnete Losgröße angezeigt wird, nachdem der Nutzer eine Berechnung durchgeführt hat. Dieser Anzeigebereich besteht aus einem rechteckigen Hintergrundfeld und einer darin platzierten Textbeschriftung. Da wir den auf diesem Feld angezeigten Wert später programmgesteuert aktualisieren müssen, geben wir ihm einen eindeutigen Namen, der als Makro definiert ist, um die Referenz zu erleichtern.
//+------------------------------------------------------------------+ //| Macros | //+------------------------------------------------------------------+ ... #define RESULTS_TEXT "RESULTS_TEXT"
Sobald das Makro definiert ist, können wir mit der Erstellung der eigentlichen visuellen Elemente fortfahren. Innerhalb unserer Funktion CREATE_GUI fügen wir die folgenden Codezeilen hinzu, um den rechteckigen Container zu zeichnen und die Textbeschriftung darin zu platzieren:
//+------------------------------------------------------------------+ //| Function to render the main GUI | //+------------------------------------------------------------------+ void CREATE_GUI(){ ... //--- Execution Results CREATE_OBJ_RECTANGLE_LABEL(GenerateUniqueName(SmartRiskTrader), 40, 320, 270, 50, clrWhiteSmoke, 1, clrDarkBlue, BORDER_FLAT); CREATE_OBJ_LABEL(RESULTS_TEXT, 60, 333, "Result: Lot Size = 0.23", clrDarkGreen, 14); }
Kompilieren Sie Ihren Code und fügen Sie den EA an einen Chart an. Sie sollten nun einen sauberen und einfachen Bereich am unteren Rand Ihrer Schnittstelle sehen, der einen Beispieltext für die berechnete Losgröße anzeigt.
Mit dieser Ergänzung haben wir das statische Design unserer Oberfläche „Smart Risk Trader“ abgeschlossen. Um Ihnen das Nachvollziehen zu erleichtern, haben wir den vollständigen Quellcode für die aktuelle Phase des Projekts beigefügt. Sie können sie in MetaEditor öffnen, die besprochenen Funktionen prüfen und sicherstellen, dass alles korrekt kompiliert wird. Im nächsten Abschnitt werden wir uns darauf konzentrieren, die grafische Nutzeroberfläche interaktiv zu gestalten und auf Nutzeraktionen zu reagieren – sie also zum Leben zu erwecken.
Schlussfolgerung
An diesem Punkt haben wir erfolgreich eine saubere und funktionale grafische Oberfläche für unseren Smart Risk Trader Expert Advisor erstellt. Sie wissen nun, wie Sie die grafischen Objekte von MQL5 verwenden können, um Bedienfelder, Beschriftungen, Schaltflächen und Eingabefelder zu erstellen, und wie Sie Ihren Code modular strukturieren, um ihn einfach zu warten und zu erweitern. Was als leere EA-Vorlage begann, hat sich zu einer visuell ansprechenden und gut organisierten Grundlage für ein professionelles Handelswerkzeug entwickelt.
Indem Sie Schritt für Schritt folgen, haben Sie nicht nur gelernt, wie man eine grafische Nutzeroberfläche in MQL5 erstellt, sondern auch wertvolle Einblicke in das Zusammenspiel dieser Elemente innerhalb der MetaTrader 5-Umgebung erhalten. Mit diesem Wissen können Sie jetzt noch fortschrittlichere, elegantere und dynamischere Schnittstellen für Ihre eigenen Expert Advisors und Indikatoren entwerfen und erstellen.
In Teil 2 werden wir diese Schnittstelle zum Leben erwecken, indem wir jede Komponente mit echten Funktionen verbinden. Sie werden lernen, wie man Nutzeraktionen – wie das Anklicken von Schaltflächen und die Auswahl von Dropdowns – erkennt und darauf reagiert und wie man den Smart Risk Trader vollständig interaktiv gestaltet.
Übersetzt aus dem Englischen von MetaQuotes Ltd.
Originalartikel: https://www.mql5.com/en/articles/19932
Warnung: Alle Rechte sind von MetaQuotes Ltd. vorbehalten. Kopieren oder Vervielfältigen untersagt.
Dieser Artikel wurde von einem Nutzer der Website verfasst und gibt dessen persönliche Meinung wieder. MetaQuotes Ltd übernimmt keine Verantwortung für die Richtigkeit der dargestellten Informationen oder für Folgen, die sich aus der Anwendung der beschriebenen Lösungen, Strategien oder Empfehlungen ergeben.
Entwicklung des Price Action Analysis Toolkit (Teil 49): Integration von Trend-, Momentum- und Volatilitätsindikatoren in ein MQL5-System
Automatisieren von Handelsstrategien in MQL5 (Teil 38): Versteckter RSI-Divergenzhandel mit Steigungswinkel-Filtern
Eine alternative Log-datei mit der Verwendung der HTML und CSS
Entwicklung des Price Action Analysis Toolkit (Teil 48): Multi-Timeframe Harmony Index mit gewichtetem Bias Dashboard
- Freie Handelsapplikationen
- Über 8.000 Signale zum Kopieren
- Wirtschaftsnachrichten für die Lage an den Finanzmärkte
Sie stimmen der Website-Richtlinie und den Nutzungsbedingungen zu.