Скачать MetaTrader 5

Удивите ваших MQL5-клиентов эффективным коктейлем технологий!

29 октября 2013, 14:13
Jordi Bassaganas
4
2 997

Введение

MQL5 предоставляет программистам полный набор функций и объектно-ориентированный API, благодаря которым они могут делать в среде MetaTrader все что угодно. Тем не менее, веб-технологии – это очень универсальный инструмент, который может помочь в ситуациях, когда вам нужно создать нечто совершенно особое, вы хотите удивить ваших клиентов или у вас просто нет времени на изучение определенной части стандартной библиотеки MQL5. В данной статье вы узнаете, как можно управлять временем разработки при создании вашего уникального коктейля технологий.

В данной статье мы займемся созданием CSV-файла с помощью графического веб-интерфейса (Графический интерфейс пользователя). В частности, мы создадим календарь новостей, использующийся торговым советником, который описан в статье "Создание новостного торгового советника". Мы будем работать с HTML5, CSS и JQuery. Данное упражнение будет особенно интересно для MQL5-разработчиков, которые уже имеют некоторое представление о веб-технологиях или хотят обучиться им, чтобы использовать их в своих разработках на MQL5. Лично у меня в последние годы была возможность поработать с JQuery, HTML5 и CSS, так что мне знакомы данные технологии. Все они имеют дело с клиентской частью веб-приложения.

Коктейли. Изображение опубликовано пользователем mountainhiker на сервисе Flickr по лицензии Creative Commons

Рис. 1. Коктейли. Изображение опубликовано пользователем mountainhiker на сервисе Flickr по лицензии Creative Commons

В этом месяце у меня не было времени на изучение классов для создания панелей индикации и диалогов управления, поэтому я решил применить подход, описанный в статье "Графики и диаграммы в формате HTML" и открыл тему на форуме EA's GUIs to enter data (графические интерфейсы торгового советника для ввода данных).


1. Коктейль технологий

Язык разметки HTML и всемирная паутина появились сравнительно недавно (в 1989 году) для создания и обмена научной документацией в ЦЕРНе (CERN) – Европейской организации по ядерным исследованиям. HTML был изначально задуман как средство коммуникации внутри научного сообщества. С тех пор гипертекстовый язык описания документов постоянно развивается, предоставляя возможность обмениваться информацией людям по всему миру. Я не хочу утомлять вас экскурсами в историю науки и техники, поэтому не буду углубляться в детали.

В начале, когда разработчики еще только создали HTML, они писали HTML-код, CSS-код и JavaScript в одном документе. Таким образом они смешали все, что было можно, но скоро поняли, что необходимо разделить все элементы, чтобы уменьшить количество ошибок в веб-приложениях. Именно поэтому сегодня мы всегда разделяем структуру (HTML), визуальное представление (CSS) и поведение (JavaScript) при работе на клиентской стороне веб-приложений. При выполнении упражнения, аналогичного сегодняшнему, вы должны знать эти три взаимосвязанные технологии.


2. А как насчет удобства использования?

Удобство использования (юзабилити) означает степень удобности предмета для применения пользователями. Другими словами, эта характеристика показывает, как много усилий необходимо потратить, чтобы научиться пользоваться чем-либо, насколько эффективен предмет в использовании, насколько легко совершить ошибку при его применении и насколько он популярен среди пользователей. Давайте кратко вспомним. Мы разрабатываем графический веб-интерфейс, позволяющий нашим покупателям создать календарь новостей для нашего MQL5-продукта – торгового советника, описанного в статье "Создание новостного торгового советника". Данная характеристика важна, так как мы интегрируем целый ряд технологий. Но мы должны быть осторожны, так как все они должны быть понятны пользователю! Мы можем считать наши усилия успешными, если получим положительную реакцию пользователей при использовании нашего веб-решения: 'Как хорошо, что я воспользовался этим продуктом!", "Здорово!"

При создании нашего графического интерфейса мы основываемся на ряде известных правил, связанных с удобством использования:

  • Интерфейс имеет светлый фон в сочетании с темным цветом шрифта для лучшей читаемости текста.
  • Размер шрифта достаточно велик, чтобы текст мог быть прочитан среднестатистическим пользователем.
  • Необходимо учитывать не только иконки, но и соответствующее текстовое описание.
  • Ссылки отмечены подчеркиванием и синим цветом шрифта. Это позволяет легко отличить их от обычного текста.


3. Графический веб-интерфейс для создания CSV-файла новостей

Весь код к данному упражнению доступен в файле news-watcher-csv.html. Это то, что мы будем предоставлять нашим клиентам в комплекте с нашим торговым советником. Я рекомендую прежде всего взглянуть на этот файл. Ниже он описывается подробнее.

3.1. Загрузка Behavior Layer (JS) и Display Layer (CSS)

Google Hosted Libraries представляет собой сеть для распространения контента для наиболее популярных JavaScript-библиотек с открытым кодом. Вы можете использовать необходимые JS-библиотеки на серверах Google. Таким образом, вам не нужно копировать их на свою машину для работы. Ваше веб-приложение запросит необходимые библиотеки у Google в своем первом HTTP-запросе. Применяемый в упражнении подход позволяет браузеру загрузить библиотеку JQuery и необходимые CSS.

Мы загружаем все необходимые элементы в тег заголовка документа:

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

Тем не менее, мы также включаем CSS и JavaScript элемента jquery.timepicker – виджета, позволяющего пользователям выбрать определенное время, так как у нас нет серебряных пуль. Библиотека JQuery UI не имеет собственного виджета для выбора времени суток, поэтому мы вынуждены прибегать к стороннему компоненту. Файлы jquery.timepicker.css и jquery.timepicker.min.js недоступны на серверах Google, поэтому мы должны скопировать их на нашу локальную машину и сделать на них ссылку в HTML-документе.

Это может вызвать неудобства у наших клиентов, поэтому в рамках данного упражнения я рекомендую вам сначала загрузить эти два файла на какой-нибудь надежный публичный сервер и затем сделать на них ссылку в вашем HTML-документе, так же как мы это делаем с библиотекой JQuery, которая размещается на серверах Google. Чем меньше файлов видят наши клиенты, тем лучше. Вспомните, о чем я говорил ранее, рассуждая об удобстве использования! Эту задачу я оставляю вам в качестве дополнительного упражнения. В любом случае помните, что все наши действия предполагают наличие у конечных пользователей подключения к интернету.

3.2. Виджеты JQuery в нашем графическом интерфейсе

Наш графический интерфейс содержит визуальные элементы управления JQuery, перечисленные ниже. Помните, что все это уже запрограммировано в данном JavaScript-фреймворке! Пожалуйста, изучите официальную документацию, чтобы углубить свои знания библиотек JQuery и JQuery UI. Чуть ниже я объясню, как работает основная программа jQuery.

3.2.1. Datepicker

Данный элемент управления позволяет легко вводить конкретную дату.


Рис. 2. jQuery datepicker

Рис. 2. jQuery datepicker


3.2.2. Timepicker

Этот плагин, основанный на Google Calendar, помогает пользователям вводить определенное время.


Рис. 3. jQuery timepicker. Данный плагин разработан Джоном Торнтоном

Рис 3. jQuery timepicker. Данный плагин разработан Джоном Торнтоном

3.2.3. Sortable

Данный элемент предназначен для перемещения новостей в списке или таблице с помощью мыши.

Рис. 4. jQuery sortable

Рис. 4. jQuery sortable


3.2.4. Dialog

Данный элемент управления предназначен для отображения содержания в интерактивном виде. Пуристы из сферы юзабилити не рекомендуют делать это, так как такое оформление может показаться пользователю навязчивым. Оно также заставляет пользователей тщательнее контролировать свои движения при работе. В результате люди, имеющие проблемы с моторикой, могут испытывать дискомфорт при работе с jQuery dialog. Тем не менее, в некоторых случаях данный виджет все же может быть использован. Я понимаю проблемы, возникающие при использовании данного виджета, и оставляю вам в качестве дополнительного задания работу по улучшению графического интерфейса таким образом, чтобы CSV-контент отображался в менее навязчивой форме.


Рис. 5. jQuery dialog


Рис. 5. jQuery dialog


3.3. Добавление пользовательского значения в ваш продукт

Возможно, вы, будучи фрилансером или сотрудником компании, предлагаете решения на основе MT5 и располагаете базой данных, в которой храните предпочтения ваших клиентов в маркетинговых целях. В этом случае вы можете воспользоваться этими данными для настройки вашего графического интерфейса:


Рис. 6. Вы можете встроить видеоклип с композицией Скарлатти, чтобы Боб создавал свой календарь, слушая любимую музыку

Рис. 6. Вы можете встроить видеоклип с композицией Скарлатти, чтобы Боб создавал свой календарь, слушая любимую музыку

Предположим, что ваш клиент Боб любит творчество известного итальянского композитора эпохи барокко Доменико Скарлатти. Поэтому вы встраиваете видеоклип с композицией Скарлатти, чтобы Боб создавал свой календарь, слушая любимую музыку.

3.4. Код JQuery для нашего графического интерфейса

Откройте файл news-watcher-csv.html и изучите его структуру, обращая внимание на рассмотренные выше элементы. Не забывайте о том, что клиентское веб-приложение состоит из визуального представления (CSS), структуры (HTML) и поведения (JavaScript/jQuery). Помня об этом, вы легко поймете, что делает jQuery.

Основная программа jQuery довольно проста. Прежде всего она вносит небольшую поправку в плавающий фрейм (iframe) сервиса YouTube. Благодаря этому, HTML5-код документа проходит валидацию. Затем приложение инициализирует упомянутые ранее виджеты и программирует поведение кнопки добавления новостей и ссылки для создания CSV-контента.

$(function() { 

    // устранение проблемы с плавающими фреймами zIndex сервиса YouTube

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

    // Инициализация элементов графического интерфейса

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

    // Поведение кнопок

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

    });

});

Приведенный выше код jQuery динамически управляет следующей структурой HTML:

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

Уровень представления оформляется в виде следующего CSS-кода, четко отделенного от двух других уровней:

<style>

    /* Простой перезапуск CSS */

    * {
        margin: 0;
        padding: 0
    }


    /* HTML-теги */

    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 }

    /* Пользовательские id */

    #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 { 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;
    }

    /* Пользовательские классы */

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

    /* Перезапись */

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

</style>

Этот простой уровень представления может быть улучшен, например, путем добавления CSS-кода, который учитывает все мобильные устройства. В настоящее время это возможно сделать с помощью медиа-запросов (media queries) в CSS3 и адаптивного веб-дизайна, однако рамки статьи не позволяют остановиться на этом подробно, поэтому я оставляю вам эту задачу в качестве упражнения.


Заключение

Современные веб-технологии – это уникальный инструмент, способный выручить во многих ситуациях. Сегодня мы рассмотрели создание графического веб-интерфейса для новостного календаря в формате CSV, предназначенного для использования торговым советником, рассмотренным в статье "Создание новостного торгового советника".

В своей работе мы использовали HTML5, CSS и JQuery. Все они имеют дело с клиентской частью веб-приложения. Мы также кратко упомянули о необходимости постоянно учитывать потребности будущих пользователей интерфейса, говоря об удобстве использования.

*Внимание: Используемый в статье HTML5-код прошел валидацию в W3C Markup Validation Service и тестировался в последних версиях браузеров Chrome и Firefox. IE8 все больше устаревает. Пожалуйста, не выполняйте данное упражнение в этом браузере. jQuery 2.0 не поддерживает IE 6, 7 и 8. Файлы приложены к статье в формате txt, так как MQL5 не позволяет прикладывать HTML, CSS и JavaScript. После загрузки переименуйте файл news-watcher-csv.txt в news-watcher-csv.html, jquery.timepicker.txt – в jquery.timepicker.css и jquery.timepicker.min.txt – в jquery.timepicker.min.js.



Перевод с английского произведен MetaQuotes Software Corp.
Оригинальная статья: https://www.mql5.com/en/articles/728

Прикрепленные файлы |
Dmitry Fedoseev
Dmitry Fedoseev | 29 окт 2013 в 15:47
Сильно внимательно не читал, но просмотрел все в поисках центральной мысли. Что это и о чем? О генерации вебстраниц из mql5, ли это "Основы html для всех"? Какой-то Datepicker, Timepicker... как их прикрутить к советнику для MT5?
o_o
o_o | 29 окт 2013 в 16:01

что это было вообще?  призыв валить с MQL на Java ?

revers45
revers45 | 29 окт 2013 в 16:12

Главное написано, что код прошел валидацию, а толком не работает, видно за магарыч - теперь понял, что на первой картинке.

Ivan Negreshniy
Ivan Negreshniy | 31 окт 2013 в 16:24
Спасибо за интересную статью. Надеюсь автор не будет против небольшого увеличения юзабилити данного примера. Я сделал это с помощью движка Hlaiman, выкладываю немного измененный файл news-watcher-csv.html. Добавил функции обнаружения установленных на компьютере терминалов и сохранения новостного календаря в формате CSV в папку данных выбранного пользователем терминала.


Выбор терминала

Изменения news-watcher-csv.html:


Инициализация Hlaiman, обнаружение терминалов на компьютере пользователя, создание соответствующих элементов интерфейса.

var hlaim_app = new ActiveXObject("hlaim.Application");
if(hlaim_app != null) {
        var hlaim_plugin = hlaim_app.LoadModuleObject("mt45.dll");
        var hlaim_terminals = document.getElementById("base-terminal");
        if(hlaim_plugin && hlaim_plugin.TerminalsCount > 0 && hlaim_terminals)
        for(i = 0; i < hlaim_plugin.TerminalsCount; i++) {
                var new_term = document.createElement("option");
                if(new_term) {
                        new_term.text = hlaim_plugin.Terminals[i];
                        new_term.value = i;
                        hlaim_terminals.add(new_term);
                }
        }
}

Небольшие изменения функции кнопки "ОК" диалога

Ok: function() {
var fso, f1, ht; 
        fso = new ActiveXObject("Scripting.FileSystemObject");
        ht = document.getElementById("base-terminal");
        if(fso && ht) {
                csv_term = new String(ht.options[ht.selectedIndex].text);
                csv_path = csv_term.slice(0, csv_term.indexOf("terminal")) +
                "MQL5\\files\\news_watcher.csv";
                f1 = fso.CreateTextFile(csv_path, true); 
                f1.Write (csv);
                fso = null;
        }  
        $( this ).dialog( "close" );
}

Элемент интерфейса для выбора терминала

<div class="form-field">
        <label>Select terminal:</label>
        <select id="base-terminal">
        </select>
</div>

*Используемый HTML5-код прошел валидацию в W3C Markup Validation Service. Для работы данного примера необходимо установить Hlaiman EA Generator. Чтобы узнать больше о Hlaiman EA Generator ознакомьтесь со статьей Создание нейросетевых торговых роботов на базе MQL5 Wizard и Hlaiman EA Generator

Возможности движка Hlaiman позволяют разработчикам MQL в полной мере воспользоваться всей мощью веб технологий в своих приложениях. Такой коктейль технологий может быть использован например для создания комплексных, мультитерминальных, кроссплатформенных советников.

Рецепты MQL5 - Элементы управления в подокне индикатора - Кнопки Рецепты MQL5 - Элементы управления в подокне индикатора - Кнопки

В этой статье мы рассмотрим пример разработки пользовательского интерфейса с такими элементами управления, как кнопки. В качестве подсказки пользователю о том, что с элементом можно взаимодействовать, сделаем так, чтобы кнопка при наведении на нее курсора мыши меняла цвет. При наведении курсора мыши на кнопку цвет будет немного затеняться, а при нажатии будет становиться заметно темнее. Добавим еще всплывающие подсказки для каждой кнопки. Таким образом, интерфейс станет интуитивно понятным.

Рецепты MQL5 - Наблюдение за несколькими таймфреймами в одном окне Рецепты MQL5 - Наблюдение за несколькими таймфреймами в одном окне

MetaTrader 5 предлагает на выбор 21 таймфрейм для анализа. На график можно также поместить специальный объект-график и уже в нем задать символ, таймфрейм и еще некоторые свойства. В этой статье рассмотрим такие графические объекты более подробно: создадим индикатор с элементами управления (кнопками), с помощью которых можно будет устанавливать в подокно сразу несколько объектов-графиков. При этом объекты-графики будут точно вписываться и автоматически подстраиваться под размер подокна при изменении размеров главного окна графика или терминала.

Рецепты MQL5 - Элементы управления в подокне индикатора - Полоса прокрутки Рецепты MQL5 - Элементы управления в подокне индикатора - Полоса прокрутки

Продолжим изучение элементов управления и на этот раз рассмотрим полосу прокрутки (scrollbar). Так же, как и в предыдущей статье "Рецепты MQL5 - Элементы управления в подокне индикатора - Кнопки", будем работать в подокне индикатора. Упомянутую статью необходимо изучить, так как в ней подробно изложена работа с событиями в функции OnChartEvent(), а здесь о них будет только поверхностное упоминание. В этой статье в качестве примера мы создадим вертикальную полосу прокрутки для большого списка всех показателей финансового инструмента, которые возможно получить средствами MQL5.

Индикатор для построения графика "Каги" Индикатор для построения графика "Каги"

В статье предложен вариант индикатора графика "Каги" с различными способами построения и дополнительными функциями, рассмотрен принцип построения индикатора и особенности его реализации на MQL5. Представлены наиболее популярные примеры его практического использования в торговле - стратегии торговли по смене Yin/Yang, отталкивание от линии тренда, торговля по каналам и последовательно возрастающие "плечи"/убывающие "талии".