Émerveillez vos clients MQL5 avec un cocktail de technologies utilisables !

Introduction

MQL5 fournit aux programmeurs un ensemble très complet de fonctions et d'API orientées objet grâce auxquelles ils peuvent faire tout ce qu'ils veulent dans l'environnement MetaTrader. Cependant, la technologie Web est un outil extrêmement polyvalent de nos jours qui peut venir à la rescousse dans certaines situations lorsque vous devez faire quelque chose de très spécifique, voulez émerveiller vos clients avec quelque chose de différent ou tout simplement vous n'avez pas assez de temps pour maîtriser une partie spécifique de Bibliothèque standard MT5. L'exercice d'aujourd'hui vous présente un exemple pratique sur la façon dont vous pouvez gérer votre temps de développement tout en créant un cocktail technologique incroyable.

Ce didacticiel vous montre comment créer un fichier CSV à partir d'une interface graphique Web géniale (Interface utilisateur graphique). Plus précisément, nous allons créer le calendrier d'actualités utilisé par l'EA expliqué dans l'article Création d’un News Trader automatique. Les technologies Web avec lesquelles nous allons travailler sont HTML5, CSS et JQuery. Cet exercice est particulièrement intéressant pour les développeurs MQL5 qui ont déjà des connaissances Web ou qui souhaitent apprendre certaines de ces technologies afin de les combiner avec leurs développements MQL5. Personnellement, j'ai eu l'occasion de travailler ces dernières années avec JQuery, HTML5 et CSS, donc je connais bien tout ça. Tout cela est connu comme le côté client d'une application Web.

Figure 1. Cocktails. Image distribuée par mountainhiker sous licence Creative Commons sur Flickr

Ce mois-ci, je n'ai pas de temps matériel pour étudier les classes de création de panneaux de contrôle et de dialogues, j'ai donc préféré adopter l'approche expliquée dans les graphiques et les diagrammes en HTML. C'est pourquoi j'ai ouvert le fil de discussion sur les interfaces graphiques d'EA pour saisir les données.

1. Le cocktail des technologies

Le langage HTML et le Web sont nés en 1989, il n'y a pas si longtemps, pour décrire et partager quelques documents scientifiques dans le CERN (Organisation européenne pour la recherche nucléaire). HTML a été conçu à l'origine comme un outil de communication pour la communauté scientifique. Depuis lors, le langage de balisage hypertexte n'a cessé d'évoluer afin de partager des informations entre les personnes du monde entier. Je ne veux pas vous ennuyer avec un peu d'histoire de la science et de la technologie, mais souvenez-vous simplement de cette information.

Ainsi, au début, alors que les développeurs prenaient le HTML et se l'appropriaient pour créer des choses sympas, ils écrivaient le code HTML, le code de style CSS et le JavaScript dans un seul et même document. Ils ont tout mélangé et se sont vite rendu compte qu'ils devaient adopter une philosophie de séparation des choses afin que les applications Web fonctionnent avec moins d'erreurs. C'est pourquoi aujourd'hui, nous séparons toujours la structure (HTML), la présentation visuelle (CSS) et le comportement (JavaScript) lorsque nous travaillons côté client d'une application web. Chaque fois que vous voulez faire un exercice comme celui d'aujourd'hui, vous devez connaître ces trois technologies interdépendantes.

2. Et qu'en est-il de la convivialité ?

Utilisabilité signifie facile à utiliser. Cela signifie à quel point il est facile d'apprendre à utiliser quelque chose, à quel point il est efficace de l'utiliser, à quel point vous pouvez facilement vous tromper en utilisant quelque chose ou à quel point les utilisateurs aiment utiliser cette chose. Rappelons brièvement. Nous développons une interface graphique Web afin que nos clients puissent créer un calendrier d'actualités pour notre produit MQL5, a expliqué l'EA dans l'article Création d’un News Trader automatique. L'aspect convivialité est important car nous intégrons un certain nombre de technologies. Mais il faut faire attention, tout cela doit être transparent pour l'utilisateur ! Nous réussirons lorsque nos clients utiliseront notre solution orientée web et qu'ils finiront par dire : "Comme c'est cool d'utiliser ce produit !", "Comme je l'aime !".

La conception de notre interface graphique suit un certain nombre de directives d'utilisation connues :

• Il a une couleur de fond claire et une couleur de police sombre afin de rendre le texte lisible.
• La taille de la police est suffisamment grande pour que le texte puisse être lu par un public normal.
• Les icônes ne sont pas seules, mais accompagnent la description textuelle correspondante.
• Les liens sont soulignés et sont en bleu. Cela les rend visibles.

3. L'interface graphique Web pour créer un CSV d'actualités

L'intégralité du code de cet exercice est disponible dans news-watcher-csv.html. C'est ce que nous allons livrer à notre client avec notre EA. En passant, je vous recommande d'abord de jeter un œil à ce fichier que je vais expliquer en détail ci-dessous.

3.1. Chargement de la couche de comportement (JS) et de la couche d'affichage (CSS)

Les Google Hosted Libraries est un réseau de distribution de contenu pour les bibliothèques JavaScript open source les plus populaires. Vous pouvez prendre sur les serveurs de Google les bibliothèques JS dont vous avez besoin afin de ne pas avoir à les copier sur votre machine pour travailler avec elles, votre application Web demandera à Google dans la première requête HTTP les bibliothèques que vous spécifiez. C'est l'approche adoptée par cet exercice pour que le navigateur charge la bibliothèque JQuery et son CSS correspondant.

Nous chargeons tous les éléments nécessaires dans la balise d'en-tête du document :

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="jquery.timepicker.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="jquery.timepicker.min.js"></script>

Néanmoins, nous incluons également le CSS et le JavaScript de jquery.timepicker, le widget qui permet aux clients de sélectionner une heure précise. C'est parce qu'il n'y a pas de solution miracle ! JQuery UI n'est livré avec aucun widget visuel pour sélectionner les heures d'une journée, nous devons donc recourir à ce composant tiers. Les fichiers jquery.timepicker.css et jquery.timepicker.min.js ne sont pas disponibles sur les serveurs de Google, nous devons donc les copier sur notre machine locale et les référencer dans le document HTML.

Cela peut être inconfortable pour nos clients, donc dans le cadre de cet exercice je vous recommande d'abord de télécharger ces deux fichiers sur un serveur public fiable puis de les pointer depuis votre document HTML, tout comme nous le faisons avec la bibliothèque JQuery qui est hébergée sur Google . Moins les fichiers voient nos clients, mieux c'est. Rappelez-vous ce que nous avons discuté plus tôt concernant la convivialité ! Cela vous est laissé comme un exercice d'amélioration. Dans tous les cas, gardez à l'esprit que tout cela suppose que notre client dispose d'une connexion Internet afin d'utiliser cette interface graphique.

3.2. Widgets JQuery utilisés dans notre interface graphique

Notre interface graphique contient les contrôles visuels JQuery suivants. N'oubliez pas que tout cela est déjà programmé dans ce framework JavaScript ! Veuillez consulter la documentation officielle pour approfondir vos connaissances dans JQuery et JQuery UI. J'expliquerai un peu plus tard comment fonctionne le programme principal jQuery.

3.2.1. Sélecteur de date

Ce contrôle permet aux utilisateurs de saisir facilement une date particulière.

Figure 2. sélecteur de date jQuery

3.2.2. Sélecteur de temps

Ce plugin aide les utilisateurs à entrer une heure spécifique. Il est inspiré de Google Agenda.

Figure 3. Sélecteur de temps jQuery. Cette extension est écrite par Jon Thornton

3.2.3. Sortable

C'est pour réorganiser les nouvelles dans une liste ou une grille en utilisant la souris.

Figure 4. jQuery sortable

3.2.4. Dialogue

Ce contrôle sert à afficher du contenu dans une superposition interactive. Les puristes de l'utilisabilité ne le recommandent pas car il est un peu intrusif pour l'utilisateur. Il oblige également les utilisateurs à déplacer soigneusement leurs mains pour interagir avec lui, de sorte que les personnes ayant des problèmes moteurs peuvent se sentir mal à l'aise d'interagir avec une boîte de dialogue jQuery, cependant, ce widget peut être utilisé dans certains contextes. J'en suis conscient. L'amélioration de cette interface utilisateur graphique afin que le contenu CSV soit affiché de manière un peu moins intrusive est un exercice pour vous.

Figure 5. Boîte de dialogue jQuery

3.3. Le Marvel, une valeur ajoutée personnalisée pour votre produit

Peut-être que vous, en tant qu'indépendant ou en tant qu'entreprise, proposez des solutions basées sur MT5 et disposez d'une base de données stockant les préférences de vos clients en matière de marketing. Dans ce cas, vous pouvez tirer parti de ces informations pour personnaliser votre interface graphique pilotée par le Web :

Figure 6. Vous pouvez incorporer un clip Scarlatti pour que Bob puisse créer son calendrier dans un environnement détendu

Dans cet exemple, votre client Bob aime Domenico Scarlatti, le célèbre compositeur baroque italo-espagnol, vous intégrez donc un clip Scarlatti pour que Bob puisse créer son calendrier dans un environnement détendu.

3.4. Le code JQuery de notre interface graphique

S'il vous plaît, ouvrez maintenant le fichier news-watcher-csv.html et observez les trois parties dont nous avons discuté plus tôt dans ce tutoriel. N'oubliez pas qu'une application Web cliente se compose d'une présentation (CSS), d'une structure (HTML) et d'un comportement (JavaScript/jQuery). Avec tout cela en vue, vous comprendrez facilement ce que fait le programme jQuery.

Le programme jQuery principal est un jeu d'enfant. Tout d'abord, il apporte une petite correction à l'iframe de YouTube afin que le code HTML5 du document puisse être correctement validé. Ensuite, l'application initialise les widgets dont nous avons parlé plus tôt et programme enfin le comportement du bouton pour ajouter des nouvelles et du lien pour créer le contenu CSV. C'est ça!

$(function() { 

    // fix YouTube's zIndex iframes issue

    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });

    // Init GUI elements

    $("#datepicker").datepicker({ 'dateFormat': 'yy.m.dd' });
    $("#timepicker").timepicker({ 'timeFormat': 'H:i:s' });                 
    $("#sortable").sortable().disableSelection();
    $("#news-calendar").hide();

    // Buttons behavior

    $("#add-new").click(function() {

        $("#news-calendar").fadeIn("500");

        $("#sortable").append('<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>' + 
            $('#base-currency').val() + ';' + 
            $('#datepicker').val() + ';' + 
            $('#timepicker').val() + ';' + 
            $('#description').val() + '</li>');

    });

    $("#get-csv").click(function() {

        var csv = "Country;Time;Event\n";

        $("#sortable li").each(function(){

            csv += $(this).text() + "\n";

        });

        $("#dialog").empty().dialog({
            modal: true,
            width: 650,
            show: {
                effect: "blind",
                duration: 400
            },
            hide: {
                effect: "explode",
                duration: 400
            },
            buttons: {
                Ok: function() {
                $( this ).dialog( "close" );
                }
            }
        }).append(csv.replace(/\n/g, '<br/>'));

        return false;

    });

});

Le code jQuery ci-dessus manipule dynamiquement la structure HTML ci-dessous :

<div id="csv-generator">
    <p>Dear Bob, please, generate the CSV file for NewsWatcher EA while you listen to your favourite music:</p>
    <iframe id="video" width="400" height="280" src="https://www.youtube.com/embed/4pSh8kHKuYw" allowfullscreen></iframe>
    <div id="form">
        <p>Enter news in your CSV calendar:</p>
        <div class="form-field">
            <label>Base currency:</label>
            <select id="base-currency">
                <option>AUD</option>
                <option>CAD</option>
                <option>CHF</option>
                <option>CNY</option>
                <option>EUR</option>
                <option>GBP</option>
                <option>JPY</option>
                <option>NZD</option>
                <option>USD</option>
            </select>
        </div>
        <div class="form-field">
            <label>Date:</label>
            <input type="text" id="datepicker"/>
        </div>
        <div class="form-field">
            <label>Time:</label>
            <input type="text" id="timepicker"/>
        </div>
        <div class="form-field">
            <label>Description:</label>
            <input id="description" type="text"/>
        </div>
        <div id="add-new-button" class="form-field">
            <label></label>
            <button id="add-new">+ Add new</button>
        </div>
    </div>
</div><!-- end of csv-generator -->
<div id="news-calendar">
    <p><a id="get-csv" href="#">Get CSV</a></p>
    <ul id="sortable"></ul>
</div>
<div id="dialog" title="Please, copy and paste in data_folder\MQL5\FILES\news_watcher.csv"></div>

Enfin, il va sans dire que la couche de présentation est le CSS suivant qui est clairement séparé des deux autres couches :

<style>

    /* Simple CSS reset */

    * {
        margin: 0;
        padding: 0
    }


    /* HTML tags */

    body {
        font-family: Arial, Helvetica, sans-serif;
        padding: 0em 2em
    }

    header { border-bottom: 1px solid #cccccc }
    footer { border-top: 1px solid #cccccc; margin-top: 2em; padding-top: 1em }

    h1, h2, h3, h4, h5, p { padding: 1em 0em }

    label {
        width: 150px;
        display: inline-block;
        margin: 5px;
        text-align: right
    }

    input { border: 1px solid #cccccc }           
    button, option, input { padding: 4px }
    select { padding: 3px }

    /* Custom ids */

    #csv-generator {
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fafafa');
        background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fafafa)); 
        background: -moz-linear-gradient(top, #ffffff, #fafafa);
        width: 100%;
        clear: both;
        overflow: hidden
    }

    #video {
        width: 30%;
        float: left;
        margin-right: 1em;
        -moz-box-shadow: 0px 3px 5px #888;
        -webkit-box-shadow: 0px 3px 5px #888;
        box-shadow: 0px 3px 5px #888;
        border:0
    }  

    #dialog { font-size: 12px }

    /* Form for adding the news */

    #form { width: 65%; float: right }
    input#datepicker, input#timepicker { width: 100px }
    input#description { width: 300px } 
    #add-new-button { float: left; margin-right: 1em }

    /* Sortable */

    #news-calendar { clear: both; margin-top: 2em; padding: 0em 2em 2em 1em; background: #fafafa; border: 1px solid #cccccc }
    #sortable { list-style-type: none; margin: 0; padding: 0em; width: auto; clear: both }
    #sortable li { margin: 3px; padding: 0.4em; padding-left: 1.5em; }
    #sortable li span { position: absolute; margin-left: -1.3em; }

    a#get-csv {
        background: url('http://icons.iconarchive.com/icons/deleket/soft-scraps/24/File-New-icon.png') no-repeat 0px 8px;
        padding: 10px 58px 20px 30px;
    }

    /* Custom classes */

    .form-field { margin-bottom: 0.5em }

    /* Overwrites */

    .ui-dialog-title { font-size: 12px }

</style>

Cette simple couche de présentation peut également être améliorée, par exemple, en écrivant un code CSS qui prend en compte tous les dispositifs mobiles. Actuellement, cela est possible grâce aux media queries de CSS3 et à responsive web design, mais il n'y a pas assez de place dans cet article pour explorer cette technique, elle est donc laissée comme un exercice pour le lecteur.

Conclusion

La technologie Web est un outil extrêmement polyvalent de nos jours qui peut venir à la rescousse dans certaines situations. Aujourd'hui, nous avons créé une Interface utilisateur graphique basée sur le Web pour créer un calendrier d'actualités au format CSV à utiliser par l'Expert Advisor que nous avons déjà développé dans l'article Création d’un News Trader automatique.

HTML5, CSS et JQuery sont les principales technologies Web avec lesquelles nous avons travaillé. Tout cela est connu comme le côté client d'une application Web. Nous avons également brièvement discuté de la nécessité de toujours penser à la personne qui utilisera l'interface, en faisant une brève note sur les questions de utilisabilité.

*Remarques très importantes : Le code HTML5 de ce tutoriel a été validé via le W3C Markup Validation Service pour garantir un produit de qualité, et a été testé dans les versions récentes des navigateurs Chrome et Firefox. IE8 devient obsolète, veuillez ne pas exécuter cet exercice dans ce navigateur. jQuery 2.0 ne prend pas en charge IE 6, 7 ou 8. Les trois fichiers de ce tutoriel sont envoyés au format txt car MQL5 ne permet pas l'envoi de HTML, CSS et JavaScript. Veuillez les télécharger et renommer news-watcher-csv.txt en news-watcher-csv.html, jquery.timepicker.txt en jquery.timepicker.css et jquery.timepicker.min.txt en jquery.timepicker.min.js.