사용 가능한 기술 칵테일로 MQL5 고객을 놀래켜보세요!

소개

MQL5는 프로그래머가 MetaTrader 환경 내에서 원하는 모든 작업을 수행할 수 있는 매우 완전한 기능 세트와 객체 지향 API를 제공합니다. 그러나 웹 기술은 오늘날 매우 다재다능한 도구로, 매우 구체적인 작업을 수행해야 하거나 고객을 뭔가 다른 것으로 놀라게 하고 싶거나 특정 MT5 Standard Library를 마스터할 시간이 충분하지 않은 경우에 도움이 될 수 있습니다. 오늘의 연습에서는 놀라운 기술 칵테일을 만드는 동시에 개발 시간을 관리할 수 있는 방법에 대한 실용적인 예를 안내해드립니다.

이 튜토리얼은 멋진 웹 기반 GUI(그래픽 사용자 인터페이스)에서 CSV 파일을 만드는 방법을 보여줍니다. 특히 자동 뉴스 거래자 구축 글에서 설명한 EA에서 사용하는 뉴스 캘린더를 만들 것입니다. 우리가 작업할 웹 기술은 HTML5, CSS 및 JQuery입니다. 이 연습은 이미 웹 지식이 어느 정도 있거나 MQL5 개발과 결합하기 위해 이러한 기술 중 일부를 배우고자 하는 MQL5 개발자에게 특히 흥미로울 것입니다. 개인적으로 최근 몇 년 동안 JQuery, HTML5 및 CSS로 작업할 기회가 있었기 때문에 이 모든 것에 매우 익숙합니다. 이 모든 것을 웹 애플리케이션의 클라이언트 측이라고 합니다.

그림 1. 칵테일. Flickr의 Creative Commons License에 따라 mountainhiker가 배포한 사진

이번 달에는 제어판 및 대화 상자 생성을 위한 클래스를 공부할 시간이 없으므로 HTML의 차트 및 다이어그램에 설명된 접근 방식을 선호합니다. 그래서 스레드 EA의 GUI를 열어 데이터를 입력합니다.

1. 기술의 칵테일

HTML 언어와 웹은 CERN(유럽 핵 연구 기구)에서 일부 과학 문서를 설명하고 공유하기 위해 1989년에 탄생한 지 얼마 되지 않았습니다. HTML은 원래 과학 커뮤니티를 위한 커뮤니케이션 도구로 생각되었습니다. 그 이후로 HyperText Markup Language는 전 세계 사람들과 정보를 공유하기 위해 끊임없이 발전해 왔습니다. 과학과 기술의 역사로 여러분을 지루하게 만들고 싶지는 않지만 이 정보만 기억하십시오.

따라서 처음에는 개발자가 HTML을 가져와 멋진 것을 만들기 위해 자체적으로 만들면서 HTML 코드, CSS 스타일 코드 및 JavaScript를 하나의 문서에 모두 작성했습니다. 그들은 모든 것을 섞었고 곧 웹 애플리케이션이 더 적은 오류로 작동하도록 사물을 분리하는 철학을 채택해야 한다는 것을 깨달았습니다. 그래서 오늘날 우리는 웹 앱의 클라이언트 측에서 작업할 때 항상 구조(HTML), 시각적 표현(CSS) 및 동작(자바스크립트)을 분리합니다. 오늘날과 같은 운동을 하고 싶다면 이 세 가지 상호 의존적인 기술을 알아야 합니다.

2. 오늘날과 같은 운동을 하고 싶다면 이 세 가지 상호 의존적인 기술을 알아야 합니다.

사용성은 사용하기 쉽다는 의미입니다. 그것은 어떤 것을 사용하는 법을 배우는 것이 얼마나 쉬운지, 그것을 사용하는 것이 얼마나 효율적인지, 어떤 것을 사용할 때 얼마나 쉽게 잘못될 수 있는지, 또는 사용자가 그것을 사용하는 것을 얼마나 좋아하는지를 의미합니다. 간단히 기억해봅시다. 우리는 고객이 MQL5 제품에 대한 뉴스 캘린더를 만들 수 있도록 웹 기반 GUI를 개발하고 있습니다. EA는 자동 뉴스 거래자 구축 글에서 설명했습니다. 우리는 여러 기술을 통합하기 때문에 사용성 측면이 중요합니다. 그러나 우리는 주의해야 합니다. 이 모든 것이 사용자에게 투명해야 합니다! 우리는 고객이 우리의 웹 기반 솔루션을 사용하고 '이 제품을 사용하는 것이 얼마나 멋져요!'라고 말하게 되는 순간 성공하게 될 것입니다.

우리의 GUI 디자인은 알려진 여러 사용성 지침을 따릅니다.

• 텍스트를 읽을 수 있도록 밝은 배경색과 어두운 글꼴 색상을 사용합니다.
• 글꼴 크기는 일반 청중이 읽을 수 있을 만큼 충분히 큽니다.
• 아이콘은 혼자가 아니라 해당 텍스트 설명과 함께 표시됩니다.
• 링크는 밑줄이 그어져 있고 파란색입니다. 이렇게 하면 보기가 좋습니다.

3. 뉴스 CSV 생성을 위한 웹 GUI

이 연습의 전체 코드는 news-watcher-csv.html에서 볼 수 있습니다. 이것이 EA와 함께 고객에게 제공할 것입니다. 그건 그렇고, 먼저 아래에서 자세히 설명할 해당 파일을 살펴보는 것이 좋습니다.

3.1. 행동 계층(JS) 및 디스플레이 계층(CSS) 로드

Google 호스팅 라이브러리는 가장 인기 있는 오픈 소스 자바스크립트 라이브러리를 위한 콘텐츠 배포 네트워크입니다. Google 서버에서 필요한 JS 라이브러리를 가져올 수 있으므로 작업을 위해 컴퓨터에 복사할 필요가 없습니다. 웹 앱은 첫 번째 HTTP 요청에서 지정한 라이브러리를 Google에 요청할 것입니다. 이것은 브라우저가 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>

그럼에도 불구하고 고객이 특정 시간을 선택할 수 있도록 하는 위젯인 jquery.timepicker의 CSS와 JavaScript도 포함합니다. 은색 총알이 없기 때문이죠! JQuery UI에는 시간을 즉시 선택할 수 있는 시각적 위젯이 제공되지 않으므로 이 타사 구성 요소에 의존해야 합니다. jquery.timepicker.css 및 jquery.timepicker.min.js 파일은 Google 서버에서 사용할 수 없으므로 로컬 시스템에서 파일을 복사하고 HTML 문서.

이는 고객에게 불편할 수 있으므로 이 연습의 맥락에서 Google에서 호스팅되는 JQuery 라이브러리와 마찬가지로 먼저 이 두 파일을 신뢰할 수 있는 공용 서버에 업로드한 다음 HTML 문서에서 지정하는 것이 좋습니다. 고객에게 표시되는 파일은 적을수록 좋습니다. 이전에 사용성에 관해 논의한 것을 기억하십시오! 이것은 개선 연습으로 남겨 둡니다. 어쨌든 이 모든 것은 고객이 이 GUI를 사용하기 위해 인터넷에 연결되어 있다고 가정한다는 점을 명심하십시오.

3.2. GUI에서 사용되는 JQuery 위젯

GUI에는 다음과 같은 JQuery 시각적 컨트롤이 포함되어 있습니다. 이 모든 것이 이 JavaScript 프레임워크에 이미 프로그래밍되어 있음을 기억하십시오! JQuery 및 JQuery UI에 대한 지식을 심화하려면 공식 문서를 살펴보십시오. 메인 jQuery 프로그램이 어떻게 작동하는지 잠시 후에 설명하겠습니다.

3.2.1. 날짜 선택기 (Datepicker)

이 컨트롤을 사용하면 사용자가 특정 날짜를 쉽게 입력할 수 있습니다.

그림 2. jQuery 날짜 선택기

3.2.2. 시간 선택기 (Timepicker)

이 플러그인은 사용자가 특정 시간을 입력하도록 도와줍니다. Google 캘린더에서 영감을 받았습니다.

그림 3. jQuery 시간 선택기. 이 확장은 Jon Thornton이 작성했습니다.

3.2.3. 정렬 가능

마우스를 사용하여 목록이나 그리드에서 뉴스를 재정렬하기 위한 것입니다.

그림 4. jQuery 정렬 가능

3.2.4. 대화

이 컨트롤은 대화형 오버레이에 일부 콘텐츠를 표시하기 위한 것입니다. 사용성 순수주의자들은 사용자에게 약간의 방해가 되기 때문에 권장하지 않습니다. 또한 사용자가 손을 조심스럽게 움직여 상호 작용해야 하므로 운동 문제가 있는 사람들은 jQuery 대화 상자와 상호 작용하는 것이 불편할 수 있지만 이 위젯은 일부 상황에서 사용할 수 있습니다. 저는 이것을 알고 있습니다. CSV 콘텐츠가 덜 방해가 되는 방식으로 표시되도록 이 그래픽 사용자 인터페이스를 개선하는 것은 연습 문제로 남아 있습니다.

그림 5. jQuery 대화 상자

3.3. 제품에 맞춤형 가치를 더하는 Marvel

프리랜서 또는 회사로서 MT5 기반 솔루션을 제공하고 마케팅 문제에 대한 고객의 선호도를 저장하는 데이터베이스를 보유하고 있을 수 있습니다. 이 경우 해당 정보를 활용하여 웹 기반 GUI를 사용자 정의할 수 있습니다.

그림 6. Bob이 편안한 환경에서 캘린더를 만들 수 있도록 Scarlatti 클립을 통합할 수 있습니다.

이 예에서 Bob은 유명한 이탈리아/스페인 바로크 작곡가인 Domenico Scarlatti를 좋아하므로 Bob이 편안한 환경에서 캘린더를 만들 수 있도록 Scarlatti 클립을 통합합니다.

3.4. GUI의 JQuery 코드

이제 news-watcher-csv.html 파일을 열고 이 튜토리얼의 앞부분에서 논의한 세 부분을 관찰하십시오. 클라이언트 웹 앱은 프레젠테이션(CSS), 구조(HTML) 및 동작(JavaScript/jQuery)으로 구성된다는 점을 기억하십시오. 이 모든 것을 보면 jQuery 프로그램이 무엇을 하는지 쉽게 이해할 수 있을 것입니다.

주요 jQuery 프로그램은 스냅입니다. 우선 문서의 HTML5 코드가 제대로 검증될 수 있도록 YouTube의 iframe을 약간 수정합니다. 그런 다음 앱은 앞에서 설명한 위젯을 초기화하고 마지막으로 뉴스 추가 버튼과 CSV 콘텐츠 생성 링크의 동작을 프로그래밍합니다. 그게 다입니다.

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

    });

});

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

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

이 간단한 프리젠테이션 레이어는 예를 들어 모든 모바일 장치를 고려하는 CSS 코드를 작성하여 개선할 수도 있습니다. 현재 이것은 CSS3 미디어 쿼리 및 반응형 웹 디자인으로 가능하지만 이 기술을 탐구할 공간이 이 글에 충분하지 않으므로 독자를 위한 연습으로 남겨둡니다.

결론

웹 기술은 오늘날 어떤 상황에서 구출될 수 있는 매우 다재다능한 도구입니다. 오늘 우리는 자동 뉴스 거래자 구축에서 이미 개발한 Expert Advisor가 사용할 CSV 형식의 뉴스 캘린더를 만들기 위한 웹 기반 그래픽 사용자 인터페이스를 만들었습니다. 글.

HTML5, CSS 및 JQuery는 우리가 작업한 주요 웹 기술입니다. 이 모든 것을 웹 애플리케이션의 클라이언트 측이라고 합니다. 우리는 또한 인터페이스를 사용할 사람을 항상 생각해야 할 필요성에 대해 간략하게 논의하고 사용성 문제에 대해 간략하게 기록했습니다.

*매우 중요한 참고사항: 이 튜토리얼의 HTML5 코드는 다음을 보장하기 위해 W3C 마크업 검증 서비스를 통해 검증되었습니다. 고품질 제품이며 최신 버전의 Chrome 및 Firefox 브라우저에서 테스트되었습니다. IE8은 더 이상 사용되지 않습니다. 해당 브라우저에서 이 연습을 실행하지 마십시오. jQuery 2.0은 IE 6, 7 또는 8을 지원하지 않습니다. MQL5는 HTML, CSS 및 JavaScript 전송을 허용하지 않기 때문에 이 튜토리얼의 세 파일은 txt 형식으로 전송됩니다. 다운로드하고 news-watcher-csv.txt의 이름을 news-watcher-csv.html로, jquery.timepicker.txt의 이름을 jquery.timepicker.css로, 그리고 jquery.timepicker.min.txt의 이름을 jquery.timepicker.min.js로 변경해주세요.