La création de Panneaux Graphiques est Devenue Facile dans MQL5

Introduction

MQL5 fournit aux développeurs un grand nombre d'outils utiles qui peuvent être utilisés pour faciliter le processus de codage et obtenir des résultats efficaces en économisant du temps et des efforts. Un exemple de ces outils est que nous avons de nombreuses bibliothèques, ou classes, dans MQL5 qui peuvent être utilisées pour coder un grand nombre d'applications sans avoir à construire le code de ces applications à partir de zéro. A partir de ces bibliothèques ou classes Panels et Dialogs par exemple. Dans cet article, nous apprendrons comment utiliser ces classes et créer une application en les utilisant. Nous apprendrons également, après l’avoir clarifié, comment l'utilisation des classes mql5 peut être utile lors de la création d'un logiciel MetaTrader 5. Nous présenterons 2 méthodes différentes pour créer la même application.

Il peut également s'agir d'un bon contenu pratique pour améliorer vos compétences en matière de codage en tant que développeur débutant en créant l'application à partir de zéro pour améliorer vos compétences en matière de logique de programmation en codant des choses prêtes à l'emploi avec votre propre code. Il peut également être utilisé comme un simple guide pour créer quelque chose pouvant être utilisé pour vous épargner des distractions pendant que vous négociez si vous êtes un trader. Si vous êtes un développeur mql5 débutant, il peut être utilisé comme un guide utile pour apprendre comment créer des panneaux graphiques dans le terminal MetaTrader 5. Dans ce guide simple, nous allons essayer de simplifier les choses pour pouvoir créer votre panneau graphique simple ou pour pouvoir plonger de plus en plus dans ce sujet pour créer des panneaux complexes en tant que développeur ou même en tant que trader.

Nous essaierons de couvrir les sujets à travers les points suivants :

• Identification Graphique des Panneaux
• Classes Panels et Dialogs
• Application Panneau Graphique Simple
• Panneau Graphique Sans Classes
• Panneau Graphique Utilisant des Classes
• Conclusion

Je vous recommande d'avoir des connaissances sur la Programmation Orientée Objet dans MQL5 car cela vous aidera à comprendre le sujet de cet article. Si vous voulez le faire, vous pouvez lire mon article sur la Programmation Orientée Objet (POO) dans MQL5.

Avertissement : Toutes les informations données dans cet article sont fournies "en l'état", uniquement à des fins d'information et ne sont aucunement données à des fins de trading ou de conseil. Ces informations ne garantissent aucun type de résultat. Si vous utilisez le contenu de cet article sur l'un de vos comptes de trading, vous le faites à vos propres risques et vous en serez le seul responsable.

Identification Graphique des Panneaux

Dans cette partie, nous verrons ce que signifie un Panneau graphique et comment il peut nous être utile dans le secteur du trading. Le panneau peut simplement être une interface graphique dotée de fonctions ou d'informations utiles, comme par exemple un panneau qui peut être utilisé pour ouvrir et gérer des transactions, fournir des informations sur le compte ou la journée de trading, etc. Ces panneaux peuvent être très utiles car ils permettent de gagner du temps ou d'obtenir facilement ce dont on a besoin sans avoir à le faire normalement, ce qui nous permet de nous concentrer davantage sur le trading et l'analyse du marché pendant le trading.

En conséquence, nous pouvons créer ou avoir un panneau personnalisé en fonction des objets présents sur ces panneaux et des tâches ou de la nature de l'interaction entre l'utilisateur et ce panneau. Nous pouvons mentionner certains de ces objets comme suit :

• Des chiffres
• Des chaînes de caractères
• Des formes
• Des couleurs
• Des boutons
• etc.

Si vous vous demandez comment nous pouvons développer ou coder ces types de panneaux par nous-mêmes, je peux vous répondre qu'il existe 2 méthodes pour créer et développer ces panneaux. La première méthode est la méthode la plus difficile car nous allons tout coder à partir de zéro. Cette méthode prend beaucoup de temps et d'efforts mais si vous êtes un développeur, vous devez être capable et comprendre comment le faire car cela améliorera vos compétences de codage, même si vous ne l'utiliserez pas comme méthode dans votre travail, mais au moins pour être capable de comprendre et d'effectuer cette tâche par vous-même. L'autre méthode est la plus simple et la plus aisée, car vous utiliserez des classes ou des bibliothèques prêtes à l'emploi pour effectuer votre travail rapidement et efficacement, sans perdre beaucoup de temps ni d'efforts. Dans la suite de cet article, nous apprendrons plus d'informations sur les classes qui peuvent être utilisées pour créer ces panneaux. Nous créerons également une application simple en utilisant les deux méthodes mentionnées pour pouvoir décider et confirmer que l'utilisation des classes est une question intéressante.

Classes Panels et Dialogs

Dans cette partie, nous parlerons des classes qui peuvent nous aider à créer facilement un panneau graphique, nous ferons référence aux classes Panels et Dialogs. Vous pouvez consulter la Référence MQL5 pour plus d'informations car nous ne ferons référence qu'à certaines d'entre elles dans cet article.

Nous pouvons dire qu'il s'agit d'une bibliothèque qui contient du code prêt à l'emploi pour créer ou développer des panneaux interactifs ou des applications, y compris des indicateurs et des experts advisors. Elle se trouve dans le dossier data du terminal, dans le dossier Controls, dans le dossier include. Il existe des classes auxiliaires, de base, simples et complexes qui peuvent être utilisées pour différentes opérations. Exemples de ces classes :

Classe	Nom du fichier à inclure (dossier Controls)	Description
CLabel	Label.mqh	Il s'agit d'une classe de contrôle simple permettant de créer des étiquettes de texte simples et non modifiables.
CButton	Button.mqh	Il s'agit d'une classe de contrôle simple permettant de créer des boutons simples.
CEdit	Edit.mqh	Il s'agit d'une classe de contrôle simple qui permet à l'utilisateur de saisir un texte
CPanel	Panel.mqh	Il s'agit d'une classe de contrôle simple permettant de combiner des contrôles avec d'autres fonctions similaires dans un groupe
CCheckBox	CheckBox.mqh	Il s'agit d'une classe de contrôle complexe qui affiche une case à cocher et permet à l'utilisateur de choisir entre vrai et faux
CSpinEdit	SpinEdit.mqh	Il s'agit d'une classe de contrôle complexe qui permet de modifier une valeur entière par incrémentation et décrémentation
CDialog	Dialog.mqh	Il s'agit d'une classe de contrôle complexe permettant de combiner des contrôles avec d'autres fonctions différentes au sein d'un groupe

Comme nous pouvons le voir à travers les classes mentionnées et d'autres, nous pouvons les utiliser pour effectuer de nombreuses tâches qui peuvent prendre beaucoup de temps et d'efforts si nous essayons de les faire à travers le code normal ou sans utiliser les classes. Nous pouvons élargir la même vue à d'autres classes qui peuvent aider à effectuer d'autres tâches que les panneaux. Nous allons voir dans la partie suivante à travers un exemple simple.

Application Panneau Graphique Simple

Dans cette partie, nous allons apprendre à créer un simple panneau de trading qui peut être utilisé pour ouvrir des ordres d'achat et de vente après avoir déterminé la taille du lot. Nous allons créer ce panneau en utilisant 2 méthodes : la première consiste à créer notre propre code sans utiliser de classes, et la seconde à utiliser des classes afin de nous assurer et de comparer dans quelle mesure l'utilisation de classes nous aidera à atteindre notre objectif facilement et sans heurts et à apprendre en créant le panneau à l'aide de notre propre code sans utiliser de classes, car cela améliorera notre logique de programmation et nos compétences en matière de codage.

Panneau Graphique Sans Classes

Les étapes suivantes permettent de créer un panneau d'ordres simple pour ouvrir des ordres d'achat et de vente après avoir déterminé la taille du lot sans utiliser de classes, à l'exception de la classe "Trade", car l'objectif de cet article est seulement d'apprendre à créer des panneaux :

Utilisation de #include pour inclure le fichier d'inclusion Trade et création d'un objet sous le nom trade à utiliser pour les ordres ouverts

#include <Trade\Trade.mqh>
CTrade trade;

Créez une fonction open trade de type boolean pour définir le type d'ordre ENUM_ORDER_TYPE et la taille de lot double de la transaction. Ce sont les paramètres de cette fonction que nous allons créer :

• Création d'une variable double pour le prix
• Définition de la condition pour déterminer le type de prix (ask ou bid) en fonction du type d'ordre à l'aide de la condition if :
• Si le type d'ordre est un ordre d'achat, le prix qui sera utilisé pour ouvrir l'ordre est le prix de la demande (Ask).
• Si le type d'ordre est un ordre de vente, le prix sera le prix de l’offre (Bid).
• Le retour sera l'ouverture de la position avec le symbole actuel, le type d'ordre, la taille du lot, le type de prix, la valeur zéro pour le stop loss et le take profit, et un commentaire vide.

bool openTrade(ENUM_ORDER_TYPE type, double vol)
  {
   double price;
   if(type==ORDER_TYPE_BUY)
   {
      price=SymbolInfoDouble(Symbol(),SYMBOL_ASK);
   }
   else price=SymbolInfoDouble(Symbol(),SYMBOL_BID);

   return trade.PositionOpen(Symbol(),type,vol,price,0,0,"");
  }

Définissez l'emplacement du panneau en choisissant le coin supérieur gauche, après avoir créé une variable const ENUM_BASE_CORNER panelLoc :

const ENUM_BASE_CORNER panelLoc=CORNER_LEFT_UPPER;

Définissez les marges x et y après la création de variables entières constantes x et y :

const int xMargin=20;
const int yMargin=20;

Fixez l'espace entre les éléments x et y après avoir créé d'autres variables entières const :

const int xSpace=10;
const int ySpace=10;

Définissez la taille des éléments boutons et texte après avoir créé 4 variables const integer btnWidth pour la largeur du bouton, btnHeight pour la hauteur du bouton, txtWidth pour la largeur du texte et txtHeight pour la hauteur du texte :

const int btnWidth=50;
const int btnHeight=20;
const int txtWidth=(btnWidth*2)+xSpace;
const int txtHeight=20;

Définissez les emplacements du texte et des boutons avec les coordonnées texte x, texte y, bouton d'achat x, bouton d'achat y, bouton de vente x et bouton de vente y. Nous allons déclarer des variables entières constantes pour chacun d'entre eux et leur attribuer des valeurs :

const int txtX=3;
const int txtY=yMargin+txtHeight;
const int buyX=3;
const int buyY=txtY+ySpace+btnHeight;
const int sellX=buyX+xSpace+btnWidth;
const int sellY=txtY+ySpace+btnHeight;

Attribuez un nom aux éléments texte, bouton d'achat et bouton de vente après avoir créé des variables const string pour ces éléments :

const string txtName="txttVol";
const string buyName="buyBtn";
const string sellName="sellBtn";

Créez une variable double avec une valeur initiale :

double lotSize=0.01;

Dans la partie OnInit(), nous appellerons la fonction createPanel() que nous créerons plus tard :

   createPanel();

Dans la partie OnDeinit, nous allons supprimer des objets en utilisant leur nom :

   ObjectDelete(0,txtName);
   ObjectDelete(0,buyName);
   ObjectDelete(0,sellName);

Dans la portée globale, nous créerons la fonction qui permet l'interaction avec le panneau en suivant les étapes suivantes.

La fonction OnChartEvent est utilisée et ses paramètres sont les suivants :

• const int id : pour l'ID de l'événement
• const long &lparam : pour le paramètre de l'événement de type long
• const double &dparam : pour le paramètre de type double event
• const string &sparam : pour le paramètre de type string event

Définissez les conditions d'interaction avec le texte des objets (taille du lot), le bouton d'achat et le bouton de vente :

//+------------------------------------------------------------------+
//| Interaction function                                             |
//+------------------------------------------------------------------+
void OnChartEvent(const int id, const long &lparam, const double &dparam, const string &sparam)
  {
//--- If the event id is equal to the end of text editing in the panel and the string type event is equal to the text name
   if(id==CHARTEVENT_OBJECT_ENDEDIT && sparam==txtName)
     {
      //--- lotTxt string variable will be equal to the returned property value by using the ObjectGetString function
      string lotTxt=ObjectGetString(0, txtName, OBJPROP_TEXT);
      //--- call setLot function that we will create later with the lotTxt value
      setLot(lotTxt);
      //Setting the property value by using the ObjectSetString
      ObjectSetString(0, txtName, OBJPROP_TEXT, string(lotSize));
      //--- Use return
      return;
     }
//--- If the event id is equal to the object click to check if we click the buy button
   else
      if(id==CHARTEVENT_OBJECT_CLICK)
        {
         //We will check if the string param is equal to buyname
         if(sparam==buyName)
           {
            //--- Setting the value of the property by using the ObjectSetInteger
            ObjectSetInteger(0, buyName, OBJPROP_STATE, false);
            //Calling the created openTrade to open a buy order.
            openTrade(ORDER_TYPE_BUY, lotSize);
            //--- Use return
            return;
           }
         //--- If the event id is equal to the object click to check if we click the sell button
         //--- We will check if the string param is equal to sellname
         else
            if(sparam==sellName)
              {
               //--- Setting the value of the property by using the ObjectSetInteger
               ObjectSetInteger(0, sellName, OBJPROP_STATE, false);
               //Calling the created openTrade to open a sell order
               openTrade(ORDER_TYPE_SELL, lotSize);
               //--- Use return
               return;
              }
        }
  }

Créez la fonction void createPanel que nous avons appelée précédemment dans la partie OnInit() en suivant les étapes suivantes :

• Supprimer les objets txtName, buyName et sellName
• Appel de la fonction EditCreate
• Appel de la fonction ButtonCreate pour le bouton d'achat
• Appel de la fonction ButtonCreate pour le bouton de vente

//+------------------------------------------------------------------+
//|createPanel function                                              |
//+------------------------------------------------------------------+
void createPanel()
  {
//--- Delete objects of txtName, buyName, and sellName
   ObjectDelete(0, txtName);
   ObjectDelete(0, buyName);
   ObjectDelete(0, sellName);
//--- calling the EditCreate function
   EditCreate(             // Parameters:
      0,                   // const long (chart_ID): to specify the chart's ID, we will use (0).
      txtName,             // const string (name): to specify the button name,  we will use (txtName)
      0,                   // const int (sub_window): to specify the subwindow index, we will use (0) for the main window
      txtX,                // const int (x): to specify the X coordinate, we will use (txtX)
      txtY,                // const int (y): to specify the Y coordinate, we will use (txtY)
      txtWidth,            // const int (width):to specify the button width, we will use (txtWidth)
      txtHeight,           // const int (height): to specify the button height, we will use (txtHeight)
      string(lotSize),     // const string (text): to specify the text, we will use (lotSize)
      "Arial",             // const string (font): to specify the font, we will use "Arial"
      10,                  // const int (font_size): to specify the font size, we will use (10)
      ALIGN_LEFT,          // const ENUM_ALIGN_MODE (align_mode): to specify the position of text, we will use (ALIGN_LEFT)
      false,               // const bool (read_only=false): to specify the ability to edit, we will be (false)
      panelLoc,            // const ENUM_BASE_CORNER (corner): to specify the chart corner for anchoring, we will call panelLoc function
      clrBlack,            // const color (clr): to specify the text color, we will specify clrBlack
      clrWhite,            // const color (back_clr): to specify the background color, we will specify clrWhite
      clrBlack,            // const color (border_clr): to specify the border color, we will specify clrBlack
      false,               // const bool (back=false): in the background, we will set false
      false,               // const bool (selection=false): highlight to move, we will set false
      false,               // const bool (hidden): hidden in the object list, we will set false
      0);                  // const long (z_order=0): priority for a mouse click, we will use (0)
//--- calling the ButtonCreate function for the buy
   ButtonCreate(           // Parameters:
      0,                   // const long (chart_ID): to specify the chart's ID, we will use (0)
      buyName,             // const string (name): to specify the button name, we will use (buyName) for the buy button
      0,                   // const int (sub_window): to specify the subwindow index, we will use (0) for the main window
      buyX,                // const int (x): to specify the X coordinate, we will use (buyX) for buy
      buyY,                // const int (y): to specify the Y coordinate, we will use (buyY) for buy
      btnWidth,            // const int (width): to specify the button width, we will use (btnWidth) for buy
      btnHeight,           // const int (height): to specify the button height, we will use (btnHeight) for buy
      panelLoc,            // const ENUM_BASE_CORNER (corner): to specify the chart corner for anchoring, we will call panelLoc function for buy button
      "Buy",               // const string (text): to specify the text, we will use ("Buy") for the buy button
      "Arial",             // const string (font): to specify the font, we will use "Arial"
      10,                  // const int (font_size): to specify the font size, we will use (10)
      clrBlack,            // const color (clr): to specify the text color, we will specify clrBlack
      clrGreen,            // const color (back_clr): to specify the background color, we will specify clrGreen for the buy button
      clrBlack,            // const color (border_clr): to specify the border color, we will specify clrBlack
      false,               // const bool (state): to specify if the object is pressed or released, we will specify false
      false,               // const bool (back=false): in the background, we will set false
      false,               // const bool (selection=false): highlight to move, we will set false
      false,               // const bool (hidden): hidden in the object list, we will set false
      0);                  // const long (z_order=0): priority for mouse click, we will use (0) for buy button
//--- calling the ButtonCreate function for the sell
   ButtonCreate(          //Parameters:
      0,                   //const long (chart_ID): to specify the chart's ID, we will use (0)
      sellName,            //const string (name): to specify the button name, we will use (sellName) for the sell button
      0,                   //const int (sub_window): to specify the subwindow index, we will use (0) for the main window
      sellX,               //const int (x): to specify the X coordinate, we will use (sellX) for sell
      sellY,               //const int (y): to specify the Y coordinate, we will use (sellY)
      btnWidth,            //const int (width): to specify the button width, we will use (btnWidth) for sell
      btnHeight,           //const int (height): to specify the button height, we will use (btnHeight) for sell
      panelLoc,            //const ENUM_BASE_CORNER (corner): to specify the chart corner for anchoring, we will call panelLoc function for sell button
      "Sell",              //const string (text): to specify the text, we will use ("Sell") for the sell button
      "Arial",             //const string (font): to specify the font, we will use "Arial"
      10,                  //const int (font_size): to specify the font size, we will use (10)
      clrBlack,            //const color (clr): to specify the text color, we will specify clrBlack
      clrRed,              //const color (back_clr): to specify the background color, we will specify clrRed for the sell button
      clrBlack,            //const color (border_clr): to specify the border color, we will specify clrBlack
      false,               //const bool (state): to specify if the object is pressed or released, we will specify false
      false,               //const bool (back=false): in the background, we will set false
      false,               //const bool (selection=false): highlight to move, we will set false
      false,               //const bool (hidden): hidden in the object list, we will set false
      0);                  //const long (z_order=0): priority for mouse click, we will use (0) for sell button
  }

Créez la fonction void setLot avec un paramètre lotTxt utilisé pour lotSize. Le corps de la fonction est identique à ce qui suit :

• Création d'une variable double newLot et affectation de celle-ci à lotTxt après conversion en double d'une chaîne de caractères à l'aide de la fonction StringToDouble
• En vérifiant si la variable newLot est inférieure à 0, il faut afficher le message "Invalid Volume Specified", puis utiliser return.
• Renvoi de la valeur newLot identique à lotSize

void setLot(string lotTxt)
  {
   double newLot=StringToDouble(lotTxt);
   if(newLot<0)
     {
      Print("Invaid Volume Specified");
      return;
     }
   lotSize=newLot;
  }

Créez la fonction EditCreate en suivant les étapes suivantes :

//+------------------------------------------------------------------+
//|EditCreate function                                               |
//+------------------------------------------------------------------+
bool EditCreate(const long             chart_ID=0,
                const string           name="Edit",
                const int              sub_window=0,
                const int              x=0,
                const int              y=0,
                const int              width=50,
                const int              height=18,
                const string           text="Text",
                const string           font="Arial",
                const int              font_size=10,
                const ENUM_ALIGN_MODE  align=ALIGN_CENTER,
                const bool             read_only=false,
                const ENUM_BASE_CORNER corner=CORNER_LEFT_UPPER,
                const color            clr=clrBlack,
                const color            back_clr=clrWhite,
                const color            border_clr=clrNONE,
                const bool             back=false,
                const bool             selection=false,
                const bool             hidden=true,
                const long             z_order=0)
  {
//--- Reset the error value by using ResetLastError()
   ResetLastError();
//--- Create an edit field
   if(!ObjectCreate(chart_ID, name, OBJ_EDIT, sub_window, 0, 0))
     {
      Print(__FUNCTION__,
            ": failed to create \"Edit\" object! Error code = ", GetLastError());
      return(false);
     }
//--- Setting the object coordinates x and y by using the ObjectSetInteger
   ObjectSetInteger(chart_ID, name, OBJPROP_XDISTANCE, x);
   ObjectSetInteger(chart_ID, name, OBJPROP_YDISTANCE, y);
//--- Setting the object size by using the ObjectSetInteger function also
   ObjectSetInteger(chart_ID, name, OBJPROP_XSIZE, width);
   ObjectSetInteger(chart_ID, name, OBJPROP_YSIZE, height);
//--- Setting the text by using ObjectSetString function
   ObjectSetString(chart_ID, name, OBJPROP_TEXT, text);
//--- Setting the text font by using the ObjectSetString function also
   ObjectSetString(chart_ID, name, OBJPROP_FONT, font);
//--- Setting the font size by using the ObjectSetInteger function
   ObjectSetInteger(chart_ID, name, OBJPROP_FONTSIZE, font_size);
//--- Setting the type of text alignment in the object
   ObjectSetInteger(chart_ID, name, OBJPROP_ALIGN, align);
//--- Setting the ability to edit, enable if it is (true) or cancel (false) if you need a read-only mode
   ObjectSetInteger(chart_ID, name, OBJPROP_READONLY, read_only);
//--- Setting the chart's corner, relative to which object coordinates are defined to set the location of the object.
   ObjectSetInteger(chart_ID, name, OBJPROP_CORNER, corner);
//--- Setting the text color
   ObjectSetInteger(chart_ID, name, OBJPROP_COLOR, clr);
//--- Setting the background color
   ObjectSetInteger(chart_ID, name, OBJPROP_BGCOLOR, back_clr);
//--- Setting the border color of the object
   ObjectSetInteger(chart_ID, name, OBJPROP_BORDER_COLOR, border_clr);
//--- Displaying in the foreground by (false) or in the background by (true)
   ObjectSetInteger(chart_ID, name, OBJPROP_BACK, back);
//--- Setting (true) to enable or (false) to disable the mode of moving the label by mouse
   ObjectSetInteger(chart_ID, name, OBJPROP_SELECTABLE, selection);
   ObjectSetInteger(chart_ID, name, OBJPROP_SELECTED, selection);
//--- Setting (true) if you need hiding or (false) if you need the display of graphical object name in the object list
   ObjectSetInteger(chart_ID, name, OBJPROP_HIDDEN, hidden);
//--- Setting the priority for receiving the event of a mouse click in the chart
   ObjectSetInteger(chart_ID, name, OBJPROP_ZORDER, z_order);
//--- Returning (true) if successful execution
   return(true);
  }

La création de la fonction ButtonCreate est identique aux paramètres précédents de la fonction EditCreate, à quelques différences près :

bool ButtonCreate(const long              chart_ID=0,               
                  const string            name="Button",            
                  const int               sub_window=0,             
                  const int               x=0,                      
                  const int               y=0,                      
                  const int               width=50,                 
                  const int               height=18,                
                  const ENUM_BASE_CORNER  corner=CORNER_LEFT_UPPER, 
                  const string            text="Button",            
                  const string            font="Arial",             
                  const int               font_size=10,             
                  const color             clr=clrBlack,             
                  const color             back_clr=C'236,233,216',  
                  const color             border_clr=clrNONE,       
                  const bool              state=false,              
                  const bool              back=false,               
                  const bool              selection=false,          
                  const bool              hidden=true,              
                  const long              z_order=0)                
  {
   ResetLastError();
   if(!ObjectCreate(chart_ID,name,OBJ_BUTTON,sub_window,0,0))
     {
      Print(__FUNCTION__,
            ": failed to create the button! Error code = ",GetLastError());
      return(false);
     }
   ObjectSetInteger(chart_ID,name,OBJPROP_XDISTANCE,x);
   ObjectSetInteger(chart_ID,name,OBJPROP_YDISTANCE,y);
   ObjectSetInteger(chart_ID,name,OBJPROP_XSIZE,width);
   ObjectSetInteger(chart_ID,name,OBJPROP_YSIZE,height);
   ObjectSetInteger(chart_ID,name,OBJPROP_CORNER,corner);
   ObjectSetString(chart_ID,name,OBJPROP_TEXT,text);
   ObjectSetString(chart_ID,name,OBJPROP_FONT,font);
   ObjectSetInteger(chart_ID,name,OBJPROP_FONTSIZE,font_size);
   ObjectSetInteger(chart_ID,name,OBJPROP_COLOR,clr);
   ObjectSetInteger(chart_ID,name,OBJPROP_BGCOLOR,back_clr);
   ObjectSetInteger(chart_ID,name,OBJPROP_BORDER_COLOR,border_clr);
   ObjectSetInteger(chart_ID,name,OBJPROP_BACK,back);
   ObjectSetInteger(chart_ID,name,OBJPROP_STATE,state);
   ObjectSetInteger(chart_ID,name,OBJPROP_SELECTABLE,selection);
   ObjectSetInteger(chart_ID,name,OBJPROP_SELECTED,selection);
   ObjectSetInteger(chart_ID,name,OBJPROP_HIDDEN,hidden);
   ObjectSetInteger(chart_ID,name,OBJPROP_ZORDER,z_order);
   return(true);
  }

Après avoir compilé le code et l'avoir exécuté, nous constatons que le panneau est identique à ce qui suit :

Comme nous pouvons le voir dans l'image précédente, dans le coin supérieur gauche, nous avons le panneau avec un endroit où nous avons la taille du lot et 2 boutons acheter et vendre. Nous pouvons spécifier la taille du lot dont nous avons besoin et placer un ordre en appuyant sur acheter ou vendre en fonction du type dont nous avons besoin. Il s'agit de la première méthode pour créer ce panneau sans utiliser les classes Panels ou Dialogs. Nous pouvons constater que cette méthode nécessite de nombreuses lignes de code. Nous devons maintenant créer le même panneau en utilisant les classes Panels et Dialogs pour évaluer et vérifier la complexité ou la longueur du code pour comparer ces deux méthodes.

Panneau Graphique Utilisant des Classes

Voici la deuxième méthode pour créer le même panneau en utilisant les classes nécessaires.

Incluez les fichiers ou les classes dont nous avons besoin pour utiliser ses composants dans notre programme : Dialog, Button, Edit et Trade. Cela peut se faire, comme nous le savons, en utilisant la commande #include :

#include <Controls\Dialog.mqh>
#include <Controls\Button.mqh>
#include <Controls\Edit.mqh>
#include <Trade\Trade.mqh>

En utilisant la macro substitution #define, qui est la directive du préprocesseur permettant d'attribuer des noms mnémoniques aux constantes, celles-ci sont identiques à ce qui suit :

• PANEL_NAME "Order Panel"
• PANEL_WIDTH 116
• PANEL_HEIGHT 100
• ROW_HEIGHT 20
• BUY_BTN_NAME "Buy BTN"
• SELL_BTN_NAME "Sell BTN"
• CLOSE_BTN_NAME "Close BTN"
• EDIT_NAME "Lot Size"

#define PANEL_NAME "Order Panel"
#define PANEL_WIDTH 116
#define PANEL_HIEIGHT 100
#define ROW_HEIGHT 20
#define BUY_BTN_NAME "Buy BTN"
#define SELL_BTN_NAME "Sell BTN"
#define CLOSE_BTN_NAME "Close BTN"
#define EDIT_NAME "Lot Size"

La création d'objets à partir de classes est simple :

CAppDialog panel;
CButton buyBtn;
CButton sellBtn;
CButton closeBtn;
CEdit lotSize;
CTrade trade;

Dans la partie OnInit(), nous devons créer notre objet panel en utilisant panel.Create. Ses paramètres sont :

• const long chat, nous utiliserons 0 pour faire apparaître le panneau sur le graphique principal
• const string name, nous utiliserons PANEL_NAME
• const int subwin, nous utiliserons 0
• const int x1, nous utiliserons 10
• const int y1, nous utiliserons 20
• const int x2, nous utiliserons 10+PANEL_WIDTH+8
• const int y2, nous utiliserons 20+PANEL_HEIGHT

panel.Create(0,PANEL_NAME,0,10,20,10+PANEL_WIDTH+8,20+PANEL_HIEIGHT);

Créez et paramétrez les boutons d'achat et de vente de la même manière que dans les étapes suivantes :

• Créez les objets en utilisant object.Create
• Réglez la largeur des objets d’achat et de vente à l'aide de la fonction object.Width
• Réglez la hauteur des objets d’achat et de vente à l'aide de la fonction object.Height
• Réglez la couleur d'arrière-plan des objets à l'aide de l’objet.ColorBackground
• Définissez le texte des objets à l'aide de la fonction object.Text
• Définissez la police de caractères des objets à l'aide de la fonction object.Font
• Réglez la taille de la police des objets à l'aide de la fonction object.FontSize
• Réglez la couleur des objets à l'aide de la fonction object.Color
• Définissez la couleur de la bordure des objets à l'aide de la fonction object.ColorBorder
• Placez les objets sur le panneau
• Exécutez ensuite le panneau

int OnInit()
  {
   //buy button
   panel.Create(0,PANEL_NAME,0,10,20,10+PANEL_WIDTH+8,20+PANEL_HIEIGHT);
   buyBtn.Create(0,BUY_BTN_NAME,0,3,40,0,0);
   buyBtn.Width(50);
   buyBtn.Height(ROW_HEIGHT);
   buyBtn.ColorBackground(clrGreen);
   buyBtn.Text("Buy");
   buyBtn.Font("Arial");
   buyBtn.FontSize(10);
   buyBtn.Color(clrBlack);
   buyBtn.ColorBorder(clrBlack);   
   panel.Add(buyBtn);
   //sell button
   sellBtn.Create(0,SELL_BTN_NAME,0,63,40,0,0);
   sellBtn.Width(50);
   sellBtn.Height(ROW_HEIGHT);
   sellBtn.ColorBackground(clrRed);
   sellBtn.Text("Sell");
   sellBtn.Font("Arial");
   sellBtn.FontSize(10);
   sellBtn.Color(clrBlack);
   sellBtn.ColorBorder(clrBlack);
   panel.Add(sellBtn);
   //lotSize
   lotSize.Create(0,EDIT_NAME,0,4,10,0,0);
   lotSize.Width(108);
   lotSize.Height(ROW_HEIGHT);
   lotSize.Text("0.01");
   lotSize.Font("Arial");
   lotSize.FontSize(10);
   lotSize.ColorBackground(clrWhite);
   lotSize.Color(clrBlack);
   lotSize.ColorBorder(clrBlack);
   panel.Add(lotSize);
   //run the panel
   panel.Run();
   return(INIT_SUCCEEDED);
  }

Dans la partie OnDeinit(const int reason), nous utilisons Destroy de la même manière que la fonction de dé-initialisation suivante :

void OnDeinit(const int reason)
  {
   panel.Destroy();
  }

L'activation de l'interaction avec le panneau à l'aide de la fonction OnChartEvent et la définition des conditions du comportement des boutons d'achat et de vente sont identiques à ce qui suit :

• Création de la fonction OnChartEvent
• Le corps de la fonction
• Utilisation de l'objet ChartEvent avec les paramètres id pour l'événement, lparam pour le type long de l'événement, dparam pour le type double et sparam pour le type chaîne
• Vérification si l'identifiant est égal à Chart Click (clic sur le graphique)
• Vérification si sparam est égal au nom buyBtn ou sellBtn
• Création d'une variable double du lot et affectation à StringToDouble(lot size value)
• Ouverture d’un ordre d'achat ou de vente en fonction du type d'événement en utilisant la valeur du lot

void  OnChartEvent(const int id, const long &lparam, const double &dparam, const string &sparam)
  {
   panel.ChartEvent(id,lparam,dparam,sparam);
   if(id==CHARTEVENT_OBJECT_CLICK)
     {
      if(sparam==buyBtn.Name())
        {
         double lot=StringToDouble(lotSize.Text());
         trade.Buy(lot);
        }
      else
         if(sparam==sellBtn.Name())
           {
            double lot=StringToDouble(lotSize.Text());
            trade.Sell(lot);
           }
     }
  }

Après avoir compilé le code et exécuté son fichier exécutable, nous pouvons constater que le panneau est attaché au graphique comme dans l'image suivante :

Comme nous pouvons le voir dans l'image précédente, dans le coin supérieur gauche, nous avons le panneau avec la taille du lot, les objets d'achat et de vente et nous pouvons éditer la taille du lot et les ordres ouverts.

Après avoir appris et créé le même panneau par deux méthodes différentes, nous pouvons mentionner et remarquer que nous avons créé le panneau en utilisant des classes plus facilement et plus aisément que sans utiliser de classes. Ainsi, les classes sont très utiles et nous permettent de coder facilement et de gagner beaucoup de temps. Mais je vous conseille, si vous êtes développeur, d'essayer d'apprendre et de comprendre comment créer des choses prêtes à l'emploi comme ces classes ou ces fonctions intégrées dans n'importe quel langage de programmation. C'est un très bon moyen d'améliorer vos compétences et votre logique en matière de codage et de programmation. Lorsque vous codez, vous pouvez utiliser des classes, car cela vous aidera à coder plus facilement et en douceur, en plus de vous faire gagner du temps pour effectuer des tâches répétitives.

Il est bon de mentionner ici, après avoir appris comment créer ce type de panneau, qu'il s'agit d'une application simple comme nous l'avons dit et que vous pouvez la développer de plus en plus en utilisant davantage de fonctions qui peuvent être réalisées par elle. En effet, le panel peut être aussi simple que ce que nous avons mentionné ou très complexe et disposer d'un plus grand nombre d'outils et de fonctionnalités. L'objectif ici est de comprendre comment utiliser ces classes après avoir identifié leur importance et leur valeur.

Conclusion

A la fin de cet article, nous pouvons conclure que l'utilisation des classes est une chose précieuse et utile en général et spécifiquement lors de la création de panneaux qui peuvent être utilisés dans MetaTrader 5, ce qui peut être utile pour les traders. Cela les aide dans beaucoup de choses qui leur permettent de se concentrer sur le trading lui-même et sur le marché sans faire beaucoup de tâches essentielles en dehors de l'utilisation de ces panneaux. Nous avons également appris ce que sont les panneaux et des exemples de leurs types. Nous avons découvert les classes de panneaux et de dialogues qui peuvent être utilisées pour créer facilement ces panneaux. Nous avons confirmé à quel point ces classes peuvent être utiles en créant un simple panneau en tant qu'application par deux méthodes différentes en code normal sans utiliser les classes de panneaux et de dialogues et en les utilisant pour voir combien de temps et d'efforts peuvent être consommés lorsqu'on n'utilise pas les classes.

J'espère que cet article vous sera utile et que vous trouverez les informations fournies faciles à comprendre et à réaliser. J'espère également que vous avez eu plus d'informations sur la façon dont vous pouvez développer des applications ou comment vous pouvez développer et plonger profondément pour créer des panneaux plus utiles pour votre trading ou si vous êtes un développeur mql5 débutant. J'espère que vous avez appris quelque chose de nouveau et obtenu plus d'informations sur la façon dont vous faites par ce sujet important qui est l'utilisation des classes.

Si vous souhaitez comprendre et en savoir plus sur les classes et les objets, je vous recommande de lire mon article précédent Comprendre la Programmation Orientée Objet (POO) dans MQL5, il peut vous aider à commencer à maîtriser ce sujet. Si vous voulez savoir comment créer des systèmes de trading en utilisant les indicateurs techniques les plus populaires, vous pouvez lire mes précédents articles à ce sujet dans ma section Publications et j'espère qu'ils vous seront utiles.