Surpreenda seus clientes MQL5 com um coquetel prático de tecnologias!
laplacianlab | 26 março, 2014
Introdução
O MQL5 fornece programadores com um conjunto muito completo de funções e IPA baseado em objetos que podem fazer tudo o eles quiserem dentro do ambiente MetaTrader. No entanto, Tecnologia Web é uma ferramenta extremamente versátil hoje em dia que pode vir para o resgate em algumas situações quando você precisa fazer algo muito específico, seja para surpreender seus clientes com algo diferente ou simplesmente por você não ter tempo suficiente para dominar uma parte específica da Biblioteca Padrão MT5. O exercício de hoje o leva através de um exemplo prático de como você pode gerenciar a duração de desenvolvimento, ao mesmo tempo que você também cria um coquetel tecnológico incrível.
Este tutorial está mostrando como você pode criar um arquivo CSV a partir de uma GUI (Interface de usuário gráfica) conduzida pela web. Nós criamos, especificamente, o calendário de notícias utilizado pelo EA explicado no artigo Construção de um negociador de notícias automático. As tecnologias da web que vamos trabalhar são HTML5, CSS e JQuery. Este exercício é especialmente interessante para desenvolvedores MQL5 que já possuam algum conhecimento da Web ou que desejam aprender algumas dessas tecnologias a fim de combiná-las com os seus desenvolvimentos MQL5. Pessoalmente, eu tive a oportunidade de trabalhar nos últimos anos com JQuery, HTML5 e CSS, por isso estou muito familiarizado com tudo isso. E tudo isso é conhecido como o lado do cliente de uma aplicação de web.
Figura 1. Coquetéis. Imagem distribuída por mountainhiker sob uma licença comum criativa no Flickr
Este mês, não tenho nenhum tempo material para estudar as classes para criação de painéis de controle e diálogos, então eu preferi adotar a abordagem explicada em Gráficos e diagramas em HTML. É por isso que eu abri o segmento GUIs de EA para dados de entrada.
1. O coquetel de tecnologias
A linguagem HTML e a Web nasceram em 1989, não muito tempo atrás, para descrever e compartilhar alguns documentos científicos na CERN (Organização Europeia para Pesquisa Nuclear). A HTML era originalmente compreendida como uma ferramenta de comunicação para a comunidade científica. Desde então, a HyperText Markup Language tem evoluído constantemente, a fim de compartilhar informações entre pessoas de todo o mundo. Eu não quero incomodá-lo com alguma história de ciência e tecnologia, mas lembre-se destas informações.
Então, no início, quando desenvolvedores pegaram a HTML e fizeram a sua própria para fazer coisas legais, eles usaram para escrever o código HTML, o código de estilo CSS e JavaScript tudo em um único documento. Eles misturaram tudo e logo perceberam que tinham que adotar uma filosofia de separar coisas de modo que as aplicações de web trabalhassem com menos erros. É por isso que hoje sempre separamos a estrutura (HTML), a apresentação visual (CSS) e o comportamento (JavaScript) ao trabalharmos no lado do cliente de um aplicativo da web. Sempre que você quiser fazer um exercício como o de hoje, você deve saber essas três tecnologias interdependentes.
2. E sobre funcionalidade?
Funcionalidade significa fácil de usar. Isso significa o quanto é fácil aprender a usar alguma coisa, o quanto eficiente sente-se ao usá-lo, qual a facilidade que você pode ter em errar ao usar algo ou o quanto os usuários gostam de usá-lo. Vamos recordar brevemente. Estamos desenvolvendo uma GUI conduzida pela web para que nossos clientes possam fazer um calendário de notícias para nosso produto MQL5, o EA explicado no artigo Construção de um negociador de notícias automático. O aspecto de funcionalidade é importante porque estamos integrando um número de tecnologias. Mas temos que ter cuidado, tudo isso tem que estar transparente ao usuário! Obteremos sucesso quando nossos clientes usarem nossa solução conduzida pela web e acabarem dizendo, "como é bom usar este produto", "como eu amo usá-lo!"
Nosso design de GUI segue um número de diretrizes de funcionalidade conhecidas:
- Possui uma cor de cenário clara e uma cor de fonte escura para tornar o texto legível.
- O tamanho da fonte é grande o suficiente para que o texto possa ser lido por um público normal.
- Os ícones não ficam isolados, mas chegam acompanhados com suas descrições de texto correspondentes
- Os links estão sublinhados e estão em azul. Isto os torna visíveis.
3. A GUI de web para criação de um CSV de notícias
Este código inteiro de exercício está disponível em news-watcher-csv.html. Isto é o que entregaremos ao nosso cliente juntamente com o nosso EA. Por falar nisso, recomendo-lhe primeiramente dar uma olhada neste arquivo que explicarei em detalhes abaixo.
3.1. Carregando a camada de comportamento (JS) e a camada de tela (CSS)
As bibliotecas moderadas pela Google são uma rede de distribuição de conteúdo para as bibliotecas do JavaScript de código aberto mais populares. Você pode pegar dos servidores da Google as bibliotecas JS que você precisa para que não tenha que copiá-las em sua máquina a fim de trabalhar com elas, o seu aplicativo web pedirá à Google, no primeiro pedido de HTTP, as bibliotecas que você especificar. Esta é a abordagem adotada por este exercício, para que o navegador carregue a biblioteca JQuery e seu CSS correspondente.
Carregamos todas as coisas necessárias na etiqueta de cabeçalho do 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>
No entanto, também incluímos o CSS e o JavaScript de jquery.timepicker, o widget que permite que os clientes selecionem um tempo específico. Isto acontece porque não há balas de prata! JQuery UI não vem com nenhum widget visual para selecionar períodos de um dia fora da caixa, por isso temos de recorrer a este componente de terceiros. Os arquivos jquery.timepicker.css e jquery.timepicker.min.js não estão disponíveis nos servidores Google, por isso, devemos copiá-los em nossa máquina local e referenciá-los no documento HTML.
Isto pode ser desconfortável para os nossos clientes, por isso, no contexto deste exercício eu recomendo que você primeiro faça o upload desses dois arquivos para um servidor público confiável e, em seguida, aponte-os a partir de seu documento HTML, assim como fazemos com a biblioteca JQuery que está hospedada na Google. Quanto menos arquivos os nosso clientes verem, melhor. Lembre-se sobre o que discutimos anteriormente sobre funcionalidade! Isso é deixado para você como um exercício de melhoria. Em qualquer caso, tenha em mente que tudo isso supõe que o nosso cliente tenha uma conexão de Internet para utilizar esta GUI.
3.2. Os Widgets JQuery utilizados em nossa GUI
Nossa GUI contém os seguintes controles visuais JQuery. Lembre-se que tudo isso já está programado nesta estrutura de JavaScript! Por favor, dê uma olhada na documentação oficial para aprofundar seus conhecimentos em JQuery e JQuery UI. Explicarei um pouco mais tarde sobre como o programa principal jQuery funciona.
3.2.1. Datepicker
Este controle permite que usuários insiram facilmente uma data em particular.
Figura 2. jQuery datepicker
3.2.2. Timepicker
Este plugin auxilia usuários a inserirem um tempo específico. É inspirado por Google Calendar.
Figura 3. jQuery timepicker. Esta extensão é escrita por Jon Thornton
3.2.3. Sortable
Este é para reordenar as notícias em lista ou grade utilizando o mouse.
Figura 4. jQuery sortable
3.2.4. Dialog
Este controle é para mostrar alguns conteúdos em um overlay interativo. Puristas de funcionalidade não o recomendam porque é um pequeno intruso ao usuário. Ele também obriga os usuários a mover cuidadosamente as mãos para interagir com ele, então, pessoas com problemas motores podem se sentir desconfortáveis interagindo com um diálogo jQuery, no entanto, este widget pode ser usado em alguns contextos. Estou ciente disso. Melhorar esta interface gráfica do usuário para que o conteúdo CSV seja exibido de uma forma um pouco menos intrusiva é deixado como um exercício para você.
Figura 5. jQuery dialog
3.3. Surpreenda-se agregando valor personalizado ao seu produto
Talvez você, como um freelancer ou como uma empresa, esteja oferecendo soluções baseadas no MT5 e tem uma base de dados que armazenam as preferências dos seus clientes para questões de marketing. Neste caso, você pode beneficiar-se destas informações para personalizar sua GUI conduzida pela web.
Figura 6. Você pode incorporar um clipe de Scarlatti para que Bob possa criar o seu calendário em um ambiente relaxante
Neste exemplo, o cliente Bob ama Domenico Scarlatti, o famoso compositor barroco italiano/espanhol, então você incorpora um clipe de Scarlatti para que Bob possa criar o seu calendário em um ambiente relaxante.
3.4. Nosso código JQuery da GUI
Por favor, agora abra o arquivo news-watcher-csv.html e observe as três partes que discutimos anteriormente neste tutorial. Lembre-se que um aplicativo de web do cliente consiste em apresentação (CSS), estrutura (HTML) e comportamento (JavaScript/jQuery). Com tudo isso em vista que você vai entender facilmente o que o programa jQuery faz.
O programa principal jQuery é muito fácil. Primeiro de tudo, ele faz uma pequena correção no iframe do YouTube para que o código HTML5 do documento possa validar corretamente. Em seguida, o aplicativo inicializa os widgets que discutimos anteriormente, e, finalmente, os programas de comportamento de ambos no botão para adicionar notícia e o link para criar o conteúdo CSV. É isso!
$(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;
});
});O código jQuery acima manipula dinamicamente a estrutura HTML abaixo:
<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>
Finalmente, é preciso dizer que a camada de apresentação é o seguinte CSS que está claramente separada das outras duas camadas:
<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>
Esta camada de apresentação simples também pode ser melhorada, por exemplo, ao escrever um código CSS que leve em conta todos os dispositivos móveis. Atualmente isso é possível com consultas de mídia CSS3 e com responsive web design mas não há espaço suficiente neste artigo para explorar esta técnica, então é deixado como um exercício para o leitor.
Conclusão
Tecnologia Web é uma ferramenta extremamente versátil hoje em dia que pode vir para o resgate em algumas situações. Hoje criamos uma Interface de usuário gráfica baseada em web para criarmos um calendário de notícias em formato CSV para ser usado pelo Expert Advisor que já desenvolvemos no artigo Criação de um negociador de notícias automático.
HTML5, CSS e JQuery são as principais tecnologias da web com os quais trabalhamos. Tudo isso é conhecido como o lado do cliente de um aplicativo da web. Também discutimos brevemente a necessidade de sempre pensar na pessoa que vai usar a interface, fazendo uma breve observação sobre as questões de funcionalidade.
*Observações muito importantes: O código HTML5 deste tutorial foi validado através do Serviço de validação de Markup W3C para garantir um produto de qualidade, e foi testado em versões recentes dos navegadores Chrome e Firefox. IE8 está ficando obsoleto, favor não executar este exercício neste navegador. jQuery 2.0 não suporta IE 6, 7 ou 8. Os três arquivos deste tutorial são enviados em formato txt porque o MQL5 não permite o envio de HTML, CSS e JavaScript. Favor baixar e renomear os arquivos news-watcher-csv.txt para news-watcher-csv.html, jquery.timepicker.txt para jquery.timepicker.css e jquery.timepicker.min.txt para jquery.timepicker.min.js.