Stupisci i tuoi clienti MQL5 con un cocktail di tecnologie!

Introduzione

MQL5 fornisce ai programmatori un set molto completo di funzioni e API orientate agli oggetti grazie alle quali possono fare tutto ciò che vogliono all'interno dell'ambiente MetaTrader. Tuttavia, la tecnologia Web è uno strumento estremamente versatile al giorno d'oggi. Essa può venire in soccorso in alcune situazioni in cui è necessario fare qualcosa di molto specifico, oppure quando vuoi stupire i tuoi clienti con qualcosa di diverso o semplicemente quando non si ha abbastanza tempo per padroneggiare una parte specifica della libreria standard MT5. L'esercizio di oggi ti guida attraverso un esempio pratico su come puoi gestire il tuo tempo di sviluppo mentre crei un fantastico cocktail tecnologico.

Questo tutorial ti mostra come creare un file CSV da una fantastica Graphical User Interface (GUI) guidata dal web Graphical User Interface). In particolare, creeremo il calendario delle notizie utilizzato da EA spiegato nell'articolo Building an Automatic News Trader. Le tecnologie web con cui lavoreremo sono HTML5, CSS e JQuery. Questo esercizio è particolarmente interessante per gli sviluppatori MQL5 che hanno già una certa conoscenza del Web o vogliono imparare alcune di queste tecnologie per combinarle con i loro sviluppi MQL5. Personalmente ho avuto l'opportunità di lavorare negli ultimi anni con JQuery, HTML5 e CSS, quindi conosco molto bene tutto. Tutto questo è noto come lato client di un'applicazione web.

Figura 1. Cocktail. Immagine distribuita da mountainhiker sotto licenza Creative Commons su Flickr

Questo mese, non ho tempo materiale per studiare Classi per la creazione di pannelli di controllo e finestre di dialogo, quindi ho preferito adottare l'approccio spiegato in Grafici e diagrammi in HTML. Ecco perché ho aperto il thread delle GUI di EA per inserire i dati.

1. Il cocktail di tecnologie

Il linguaggio HTML e il Web sono nati nel 1989, non molto tempo fa, per descrivere e condividere alcuni documenti scientifici in CERN (European Organization for Nuclear Research). L'HTML è stato originariamente concepito come strumento di comunicazione per la comunità scientifica. Da allora, l'HyperText Markup Language è in continua evoluzione al fine di condividere informazioni tra persone in tutto il mondo. Non voglio annoiarvi con un po 'di storia della scienza e della tecnologia, ma ricorda solo queste informazioni.

Quindi, all'inizio, quando gli sviluppatori prendevano l'HTML e lo facevano proprio per fare cose interessanti, scrivevano il codice HTML, il codice di stile CSS e il JavaScript tutto in un unico documento. Hanno mescolato tutto e presto si sono resi conto che dovevano adottare una filosofia di separazione delle cose in modo che le applicazioni web funzionassero con meno errori. Ecco perché oggi separiamo sempre la struttura (HTML), la presentazione visiva (CSS) e il comportamento (JavaScript) quando lavoriamo sul lato client di un'app Web. Ogni volta che vuoi fare un esercizio come quello di oggi, dovresti conoscere queste tre tecnologie interdipendenti.

2. E per quanto riguarda l'usabilità?

Usabilità significa facile da usare. Significa quanto sia facile imparare a usare qualcosa, quanto sia efficiente usarlo, quanto facilmente si possa sbagliare quando si usa qualcosa o quanto agli utenti piaccia usare quella cosa. Ricordiamo brevemente. Stiamo sviluppando una GUI basata sul web in modo che i nostri clienti possano creare un calendario delle notizie per il nostro prodotto MQL5, ha spiegato l'EA nell'articolo Building an Automatic News Trader. L'aspetto dell'usabilità è importante perché stiamo integrando una serie di tecnologie. Ma dobbiamo stare attenti, tutto questo deve essere trasparente per l'utente! Avremo successo quando i nostri clienti utilizzeranno la nostra soluzione basata sul web e finiranno per dire: "Quanto è stato bello usare questo prodotto!", "Quanto lo adoro!"

Il nostro design della GUI segue una serie di linee guida di usabilità note:

• Ha un colore di sfondo chiaro e un colore di carattere scuro per rendere il testo leggibile.
• La dimensione del carattere è abbastanza grande in modo che il testo possa essere letto da un pubblico normale.
• Le icone non sono sole, ma vanno d'accordo con la sua corrispondente descrizione del testo.
• I link sono sottolineati e sono blu. Questo li rende visibili.

3. La Web GUI per la creazione di un CSV di notizie

L'intero codice di questo esercizio è disponibile in news-watcher-csv.html. Questo è ciò che consegneremo ai nostri clienti insieme al nostro EA. A proposito, ti consiglio prima di dare un'occhiata a quel file che spiegherò in dettaglio di seguito.

3.1. Caricamento del livello di comportamento (JS) e del livello di visualizzazione (CSS)

Il Google Hosted Libraries è una rete di distribuzione di contenuti per le librerie JavaScript open source più popolari. Puoi prendere dai server di Google le librerie JS di cui hai bisogno in modo da non doverle copiare sul tuo computer per lavorare con loro, la tua app web richiederà a Google nella prima richiesta HTTP le librerie che specifichi. Questo è l'approccio adottato da questo esercizio affinché il browser carichi la libreria JQuery e il CSS corrispondente.

Carichiamo tutte le cose necessarie nel tag di intestazione del documento:

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

Tuttavia, includiamo anche il CSS e il JavaScript di jquery.timepicker, il widget che consente ai clienti di selezionare un momento specifico. Questo perché non ci sono soluzioni magiche! interfaccia utente JQuery non viene fornito con alcun widget visivo per la selezione degli orari di una giornata fuori dalla scatola, quindi dobbiamo ricorrere a questo componente di terze parti. I file jquery.timepicker.css e jquery.timepicker.min.js non sono disponibili sui server di Google, quindi dobbiamo copiarli sul nostro computer locale e farvi riferimento nel documento HTML.

Questo potrebbe essere scomodo per i nostri clienti, quindi nel contesto di questo esercizio ti consiglio di caricare prima questi due file su un server pubblico affidabile e poi puntarli dal tuo documento HTML, proprio come facciamo con la libreria JQuery che è ospitata su Google. Meno file vedono i nostri clienti, meglio è. Ricorda ciò di cui abbiamo discusso in precedenza per quanto riguarda l'usabilità! Questo è lasciato a te come esercizio di miglioramento. In ogni caso, tieni presente che tutto ciò presuppone che il nostro cliente abbia una connessione Internet per utilizzare questa GUI.

3.2. Widget JQuery utilizzati nella nostra GUI

La nostra GUI contiene i seguenti controlli visivi JQuery. Ricorda che tutto questo è già programmato in questo framework JavaScript! Per favore, dai un'occhiata alla documentazione ufficiale per approfondire le tue conoscenze in JQuery e JQuery UI. Spiegherò un po 'più tardi come funziona il programma jQuery principale.

3.2.1. Datepicker

Questo controllo consente agli utenti di immettere facilmente una data particolare.

Figura 2. jQuery datepicker

3.2.2. Timepicker

Questo plugin aiuta gli utenti a inserire un orario specifico. È ispirato a Google Calendar.

Figura 3.jQuery timepicker. Questa estensione è stata scritta da Jon Thornton

3.2.3. Ordinabile

Questo è per riordinare le notizie in un elenco o in una griglia usando il mouse.

Figura 4. jQuery ordinabile

3.2.4. Dialogo

Questo controllo è per mostrare alcuni contenuti in una sovrapposizione interattiva. I puristi dell'usabilità non lo raccomandano perché è un po 'invadente per l'utente. Costringe anche gli utenti a muovere attentamente le mani per interagire con esso, quindi le persone con problemi motori possono sentirsi a disagio nell'interagire con una finestra di dialogo jQuery, tuttavia, questo widget può essere utilizzato in alcuni contesti. Ne sono consapevole. Migliorare questa interfaccia utente grafica in modo che il contenuto CSV venga visualizzato in un modo un po 'meno intrusivo viene lasciato come esercizio per te.

Figura 5. Finestra di dialogo jQuery

3.3. La Meraviglia, aggiungere valore personalizzato al tuo prodotto

Forse tu, sia come libero professionista che come azienda, stai offrendo soluzioni basate su MT5 e hai un database che memorizza le preferenze dei tuoi clienti per problemi di marketing. In tal caso, puoi sfruttare tali informazioni per personalizzare la tua GUI basata sul Web:

Figura 6. Puoi incorporare una clip Scarlatti in modo che Bob possa creare il suo calendario in un ambiente rilassato

In questo esempio il tuo cliente Bob ama Domenico Scarlatti, il famoso compositore barocco italiano/spagnolo, quindi incorpori una clip Scarlatti in modo che Bob possa creare il suo calendario in un ambiente rilassato.

3.4. Il codice JQuery della nostra GUI

Per favore, ora apri il file news-watcher-csv.html e osserva le tre parti che abbiamo discusso in precedenza in questo tutorial. Ricorda che un'app Web client è costituita da presentazione (CSS), struttura (HTML) e comportamento (JavaScript/jQuery). Con tutto questo in vista capirai facilmente cosa fa il programma jQuery.

Il programma jQuery principale è un gioco da ragazzi. Prima di tutto, fa una piccola correzione nell'iframe di YouTube in modo che il codice HTML5 del documento possa convalidare correttamente. Quindi, l'app inizializza i widget di cui abbiamo discusso in precedenza e infine programma il comportamento sia del pulsante per l'aggiunta di notizie che del collegamento per la creazione del contenuto CSV. Questo è tutto!

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

    });

});

Il codice jQuery sopra manipola dinamicamente la struttura HTML di seguito:

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

Infine, va da sé che il livello di presentazione è il seguente CSS che è chiaramente separato dagli altri due livelli:

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

Questo semplice livello di presentazione può anche essere migliorato, ad esempio, scrivendo un codice CSS che tiene conto di tutti i dispositivi mobili. Attualmente questo è possibile con le media query CSS3 e responsive web design ma non c'è spazio sufficiente in questo articolo per esplorare questa tecnica, quindi è lasciato come esercizio per il lettore.

Conclusione

La tecnologia Web è uno strumento estremamente versatile al giorno d'oggi che può venire in soccorso in alcune situazioni. Oggi abbiamo creato un'interfaccia utente grafica basata sul web per la creazione di un calendario di notizie in formato CSV da utilizzare da parte dell'Expert Advisor che abbiamo già sviluppato nell'articolo Building an Automatic News Trader.

HTML5, CSS e JQuery sono le principali tecnologie web con cui abbiamo lavorato. Tutto questo è noto come lato client di un'applicazione web. Abbiamo anche discusso brevemente della necessità di pensare sempre alla persona che utilizzerà l'interfaccia, facendo una breve nota su questioni di usabilità.

*Note molto importanti: Il codice HTML5 di questo tutorial è stato validato attraverso il W3C Markup Validation Service per garantire un prodotto di qualità, ed è stato testato nelle recenti versioni dei browser Chrome e Firefox. IE8 sta diventando obsoleto, si prega di non eseguire questo esercizio in quel browser. jQuery 2.0 non supporta IE 6, 7 o 8. I tre file di questo tutorial vengono inviati in formato txt perché MQL5 non consente l'invio di HTML, CSS e JavaScript. Per favore, scaricali e rinomina news-watcher-csv.txt in news-watcher-csv.html,jquery.timepicker.txt in jquery.timepicker.css e jquery.timepicker.min.txt in jquery.timepicker.min.js.