Einleitung

MQL 5 versorgt Programmierer mit einem sehr umfassenden Set an Funktionen und objektorientierten Anwendungsprogrammschnittstellen, die ihnen eine - eine MetaTrader-Umgebung vorausgesetzt - nahezu unendliche Handlungsfreiheit verleihen. Web-Technologien stellen heute ein äußerst mächtiges Instrument dar, das Ihnen in vielen verschiedenen Situationen gute Dienste kann - wenn Ihnen beispielsweise die Zeit fehlt, einen bestimmten Teil der MT5-Standard-Library zu meistern - bzw. das Ihnen dabei hilft, Ihre Kunden einfach nur ins Staunen zu versetzen. Die heutige Übung soll Ihnen als ein praktisches Beispiel dafür dienen, wie Sie Ihre Entwicklungszeit beschleunigen, als auch einen wahren Cocktail an Technologien hervorbringen können.

Diese Einführung soll Ihnen zeigen, wie Sie CSV-Dateien mithilfe einer webgestützten, (grafischen Benutzeroberfläche) (GUI) erstellen können. Ganz konkret ausgedrückt: Wir werden einen News-Kalender kreieren, der von dem in Wie baue ich mir einen automatisierten News Trader erwähnten EA benutzt wird. Wenn ich an dieser Stelle von Web-Technologien spreche, dann meine ich damit HTML5, CSS und jQuery. Diese Übung richtet sich vor allem an MQL5-Entwickler, die bereits ein wenig Web-Wissen mitbringen oder die einige dieser Technologien besser verstehen wollen, um auf diese Weise ihre MQL-Entwicklungsfähigkeiten zu verbessern. Was mich ganz persönlich betrifft, so habe ich im Laufe der letzten Jahre das Privileg genossen, mich mit jQuery, HTML5 und CSS mehr und mehr vertraut machen zu können. All diese Dinge sind auch als Client-Seite von Web-Applikationen bekannt.

Abbildung 1. Cocktails. Unter einer Creative Commons Lizenz auf Flickr veröffentlichtes Bild

Da ich diesen Monat noch nicht dazu gekommen bin, ausführlich Klassen zum Erstellen von Bedienfeldern und Dialogen zu studieren, habe ich mich für einen Ansatz entschieden, der bereits in Charts und Diagramme in HTML dargelegt wurde. Dies ist auch der Grund, warum ich den Thread Das GUI eines EAs, um Daten einzugeben eröffnet habe.

1. Ein wahrer Cocktail an Technologien

Im Jahr 1989 erblickte die Sprache HTML zusammen mit dem Internet das Licht der Welt. Die damaligen Entwickler hatten eigentlich nur die Absicht, wissenschaftliche CERN-Dokumente auf elektronischem Wege zu verteilen und auszutauschen. HTML war also ursprünglich als ein Kommunikationstool für einen ausgewählten, wissenschaftlichen Kreis konzipiert worden. Seit damals hat diese Sprache (HyperText Markup Language) etliche Veränderungen miterlebt, die ihre Nutzer letztendlich dazu befähigten, überall auf der Welt Informationen zu verbreiten. Obwohl ich diese Details sehr interessant finde, möchte ich Sie an dieser Stelle keineswegs mit Wissenschafts- und/oder Technologiegeschichte langweilen, also keine Sorge.

Zu Anfang, als die Entwickler ein wenig mit HTML experimentierten, war es zunächst noch üblich, HTML-, CSS-Style- sowie JavaScript-Codes alle zusammen in einem einzigen Dokument zu verwenden. Sie haben einfach alles zusammengeworfen und machten sich dann allmählich darüber Gedanken, dass es doch noch einen anderen Weg geben müsse, alles separat zu schreiben, um auf diese Weise weniger Fehler zu erzeugen. Dies ist der Grund für den heutigen Umstand, Struktur (HTML), visuelle Präsentation (CSS) sowie das Verhalten (JavaScript) zu separieren, wenn wir mit der Client-Seite einer Web-Applikation arbeiten. Wann auch immer Sie den Drang danach verspüren, sich an einer Übung wie der heutigen zu versuchen, sollten Sie sich stets dieser drei miteinander verflochtenen Technologien gewahr sein.

2. Und wie sieht es mit der Benutzerfreundlichkeit aus?

Benutzerfreundlichkeit bedeutet im Prinzip nichts anderes, als einfach im Gebrauch zu sein. Es bedeutet, wie leicht es ist, etwas Ungewohntes zu erlernen, wie effizient sich der Gebrauch anfühlt, wie leicht man einen Fehler machen kann, wenn man etwas benutzt, oder aber wie gern Benutzer ein gewisses Feature haben. Erinnern wir uns zunächst noch einmal zurück. Wir versuchen ein webgestütztes GUI zu entwickeln, das es Nutzern erlaubt, einen Kalender für aktuelle Nachrichten zu erstellen, die unser MQL5-Produkt - also unseren bereits in Einen automatisierten News-Trader zusammenbauen ausführlich dargestellten EA - betreffen. Der Aspekt der Benutzerfreundlichkeit ist deswegen wichtig, da wir beabsichtigen, mehrere Technologien miteinander zu kombinieren. Gleichzeitig müssen wir allerdings darauf Acht geben, dass der Benutzer stets den Überblick behält. Wir haben genau dann Erfolg gehabt, wenn unsere Kunden sich unserer webbasierten Produkte bedienen und hinterher feststellen: „Oh Mann, das war jetzt aber kinderleicht zu benutzen!“

Unser GUI-Design entspricht dabei einer ganzen Reihe an bekannten Benutzerfreundlichkeitsrichtlinien:

• Damit der Text jederzeit lesbar bleibt, haben wir uns für eine helle Hintergrundfarbe entschieden und diese mit einer dunklen Textfarbe kombiniert.
• Ferner besitzt der Text eine ausreichende Größe, um von einem durchschnittlichen Konsumenten problemlos wahrgenommen werden zu können.
• Die Icons stehen niemals allein, sondern sind immer mit einer Beschreibung versehen.
• Die Links sind blau und unterstrichen. Dies macht sie gut sichtbar.

3. Ein Web-GUI zur Erstellung einer CSV-Datei, um Neuigkeiten anzuzeigen

Der gesamte Code dieser Übung findet sich unter news-watcher-csv.html. Dies ist, was wir unserem Kunden samt EA zukommen lassen werden. Ich rate Ihnen an dieser Stelle, zunächst einen kurzen Blick auf die Datei zu werfen, auf die ich später noch detaillierter eingehen werde.

3,1. Laden der Verhaltens- (JS) und der Anzeigeschicht (CSS)

Bei Google Hosted Libraries handelt es sich um ein Netzwerk zur Verbreitung von Contents für die bekanntesten Open-Source-JavaScript-Bibliotheken. Sie können sich von den Google Servern diejenigen JS-Bibliotheken herunterladen, von denen Sie keine Kopien auf Ihrem Rechner haben; Ihre Webapplikation wird eine entsprechende HTTP-Anfrage samt der von Ihnen spezifizierten Bibliotheken in Richtung Google senden. Die Übung hat sich für diese Herangehensweise entschieden, damit der Browser die jQery-Bibliothek (inklusive CSS) lädt.

Wir laden alle notwendige Dinge in den Header-Tag des Dokuments:

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

Gleichwohl fügen wir ferner das CSS und das JavaScript von jquery.timepicker hinzu, einem Widget, das es Kunden erlaubt, eine spezifische Zeit auszuwählen. Es gibt in diesem Fall leider kein alternatives Allheilmittel! jQuery UI wird leider nicht mit einem visuellen Widget geliefert, um einfach so die Zeit zu modifizieren. Daher verwenden wir ein Drittanbieterprogramm. Die Dateien jquery.timepicker.css und jquery.timepicker.min.js sind im Übrigen nicht per Google Server erhältlich. Wir müssen sie daher auf unseren Rechner kopieren und dann im HTML-Dokument auf sie verweisen.

Unsere Kunden könnten diesen Prozess als eine Unannehmlichkeit auffassen. Ich empfehle daher ganz im Sinne dieser Übung, die beiden Dateien auf einen öffentlichen Server hochzuladen und sie dann in Ihrem HTML-Dokument zu verlinken, genauso wie wir es mit der von Google angebotenen jQuery-Bibliothek getan haben. Je weniger Dateien unsere Kunden zu Gesicht bekommen, desto besser. Bitte vergessen Sie an dieser Stelle nicht, was wir zu Anfang bezüglich der Benutzerfreundlichkeit gesagt haben. Immerhin handelt es sich um eine Übung, die dazu dienen soll, sich zu verbessern. In jedem Fall sollten Sie sich immer gewahr sein, dass unser Kunde eine Internetverbindung besitzt, um diese grafische Benutzeroberfläche zu benutzen.

3,2. Zur Rolle von jQuery Widgets in unserem GUI

Unser grafisches Benutzerinterface soll die folgenden visuellen Steuerelemente beinhalten. Beachten Sie, dass all dies bereits in verschiedenen JavaScript-Frameworks programmiert ist! Sehen Sie sich bitte unbedingt die folgenden, offiziellen Dokumentationen an, um Ihr bisheriges Wissen zu vertiefen: jQuery und jQuery UI. Ich werde später noch einmal genauer darauf eingehen, wie das primäre jQuery-Programm funktioniert.

3.2.1. Datepicker

Diese Steuerung ermöglicht es Nutzern, schnell und einfach ein bestimmtes Datum einzustellen.

Abbildung 2: jQuery-Datepicker

3.2.2. Timepicker

Dieses Plugin hilft Nutzern bei der Eingabe einer bestimmten Zeit. Google Kalender stand hierbei Pate.

Abbildung 3 jQuery-Timepicker. Diese Erweiterung stammt aus der Feder von Jon Thornton

3.2.3 Sortable

Dieses Plugin ordnet für uns die Neuigkeiten via Mausbefehl in einer Liste oder einem Gitter an.

Abbildung 4: jQuery-Sortable

3.2.4. Dialog

Diese Steuerung dient dazu, verschiedene Inhalte und Contents in Form eines interaktiven Overlays darzustellen. Absolute Benutzerfreundlichkeitsfreaks verzichten allerdings auf dieses Plugin, da es auf viele Benutzer ein wenig aufdringlich wirkt. Es verlangt außerdem eine ruhige Handbewegung, wodurch vor allem Grobmotoriker diesem Widget gegenüber abgeneigt sein könnten. Es verfügt dennoch über einen gewissen Nutzen. Darüber bin ich mir im Klaren. Das GUI so zu verbessern, dass die CSV-Inhalte ein wenig weniger aufdringlicher wirken, ist hierbei eine Aufgabe, die Ihnen überlassen bleibt.

Abbildung 5 jQuery-Dialog

3,3. Wie Sie Ihre Produkte kundenspezifischer gestalten

Vielleicht bieten Sie - sei es als ein Freiberufler oder als ein Unternehmen - verschiedene MT5-basierte Lösungen an und eventuell verfügen Sie über eine Datenbank, die die Präferenzen Ihrer Kunden hinsichtlich verschiedener Marketingthemen enthält. In solch einem Fall könnten Sie diese Informationen dazu nutzen, Ihr webbasiertes, grafisches Benutzerinterface ein wenig anzupassen:

Abbildung 6 Sie können einen Scarlatti-Clip einbinden, damit Bob seinen Kalender in einer ruhigeren Umgebung konzipieren kann

Im vorliegenden Beispiel findet Ihr Kunde Bob an dem berühmten ital./span. Barockkomponisten Domenico Scarlatti Gefallen, was Sie dazu antreibt, einen entsprechenden Videoclip hinzuzufügen, an dem Bob seine Freude finden und dadurch möglicherweise etwas entspannen wird.

3,4. Der jQuery-Code unseres GUIs

Öffnen Sie nun bitte die Datei news-watcher-csv.html und sehen Sie sich die drei Abschnitte an, die wir während dieser Übung bereits angesprochen haben. Erinnern wir uns dabei an Folgendes: Die Webapp eines Klienten basiert auf den Punkten Präsentation (CSS), Struktur (HTML) und Verhalten (JavaScript/jQuery). Wenn Sie all diese Dinge im Hinterkopf behalten, werden Sie rasch verstehen, was jQuery für Sie tun kann.

Das Hauptprogramm von jQuery ist wirklich ein Knacks. Zuallererst führt es einen kleinen Fix an YouTubes iFrame durch, damit der HTML5-Code der Dokumente richtig erkannt werden kann. Dann initialisiert die App die Widgets, die wir bereits diskutiert haben, und programmiert schließlich das Verhalten von beidem - dem Button, um Neuigkeiten hinzuzufügen, und dem Link, um CSV-Inhalte zu kreieren. Das ist alles!

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

    });

});

Der obige jQuery-Code manipuliert die unten befindliche HTML-Struktur auf dynamische Weise:

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

Es erübrigt sich, zu erwähnen, dass es sich bei der Präsentationsebene um die folgende CSS handelt, die von den anderen beiden klar getrennt ist:

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

Die Präsentationsebene kann ferner beispielsweise dadurch verbessert werden, dass man einen CSS-Code schreibt, der alle mobilen Geräte in Betracht zieht. Für den Moment ließe sich dies mithilfe von CSS3-Medienabfragen (media queries) und eines responsiven Webdesigns bewerkstelligen - allerdings steht vorliegendem Artikel hierzu nicht genügend Platz zur Verfügung.

Fazit

Mit Web-Technologien steht uns ein äußerst mächtiges Werkzeug zur Verfügung, das uns in so mancher Notsituation gute Dienste leisten kann. Heute haben wir gelernt, ein webgestütztes, grafisches Benutzerinterface zu kreieren, um damit einen News-Kalender im CSV-Format zu erstellen, der von einem bereits angesprochenen (Einen automatisierten News-Trader zusammenbauen) EA benutzt werden kann.

Als primäre Web-Technologien dienten uns die folgenden drei Dinge: HTML5, CSS und jQuery. All diese Elemente sind auch als Client-Seite von Web-Applikationen bekannt. Wir haben außerdem grob darüber gesprochen, was es bedeutet, sich in den Benutzer einzufühlen, was uns zur Relevanz von Benutzerfreundlichkeit hinführte.

*Sehr wichtige Hinweise: Der HTML5-Code dieser Übung wurde durch den W3C-Markup-Validation-Service bestätigt und garantiert Ihnen somit ein qualitativ hochwertiges Produkt, das mit den neusten Chrome- und Firefox-Versionen erfolgreich getestet wurde. Da der Internetexplorer 8 allmählich obsolet wird, würde ich Sie bitten, von dessen Verwendung im Hinblick auf vorliegende Übung abzusehen. jQuery 2.0 unterstützt weder IE 6, 7 oder 8. Da MQL5 keine Versendung der Formate HTML, CSS und JavaScript unterstützt, liegen diese Dateien in txt-Form vor. Laden Sie sich diese bitte herunter und benennen Sie sie bitte wie folgt um: news-watcher-csv.txt -> news-watcher-csv.html, jquery.timepicker.txt -> jquery.timepicker.css, jquery.timepicker.min.txt -> jquery.timepicker.min.js.