用Web技术增强MQL5产品体验
HTML5+CSS+jQuery打造EA配套GUI
为什么MQL5开发者需要了解Web技术组合
MQL5为编程人员提供了一套非常完整的函数集和面向对象API，使开发者能在MetaTrader环境中实现复杂的自动交易逻辑。然而，Web技术如今是用途极为广泛的工具，可以在一些特定情形中提供帮助：当您需要完成一些非常具体的工作，例如为客户提供可视化的数据录入界面；希望用一些不同的东西给客户留下深刻印象；或仅仅是您没有足够的时间来掌握MT5标准库的特定部分（如用于创建控制面板和对话框的C++类）。今天的练习引导您完成有关如何在创建令人惊叹的技术组合的同时，管理开发时间的实例。
本教程向您展示如何从Web驱动GUI创建CSV文件，具体而言，我们将创建在《建立自动新闻交易者》一文中阐述的EA所使用的新闻日历。使用的Web技术包括HTML5、CSS和jQuery。本练习对于已经掌握一些Web知识或希望学习相关技术以与MQL5开发相结合的开发者特别有用。就个人而言，最近几年我有机会接触到jQuery、HTML5和CSS，因此对这些都很熟悉，所有这些都被认为是网络应用程序的客户端。
Web技术组合的基础：结构、呈现与行为分离
HTML语言与Web诞生于1989年，用于在CERN描述和分享科学文献，最初是学术通信工具。随着开发人员用HTML做更酷的事，他们习惯将HTML代码、CSS样式代码以及JavaScript写入一个文档，混合一切。他们很快认识到必须采取分离事物的理念以减少错误。这就是如今Web应用程序客户端总是区分结构(HTML)、视觉呈现(CSS)以及行为(JavaScript)的原因。无论何时进行此类练习，您应知道这三个相互依存的技术。
结构层负责内容语义，如输入框、按钮、列表；呈现层负责外观，如颜色、字体、布局；行为层负责交互，如日期选择、排序、生成CSV。这种分离不仅减少Bug，还让界面更易维护，也为后续响应式设计打下基础。
- HTML：定义页面结构与表单元素
- CSS：控制浅色背景深字等可视样式
- JavaScript/jQuery：处理用户行为与动态内容
易用性设计：让客户惊叹而非困惑
易用性意味着容易使用，包括学习使用的容易程度、使用效率、出错容易程度及用户喜好。我们开发Web驱动GUI以便客户为EA制作新闻日历，易用性十分重要，因为集成了多项技术，但必须对用户透明。当客户说“使用这个产品真酷”“我超爱它”时，我们就成功了。
我们的GUI设计遵循已知易用性指南：背景颜色较浅而字体颜色较深使文本易辨认；字体大小足够大；图标不与文本分离；链接采用蓝色并添加下划线使其明显。这些细节降低认知负担，尤其对非技术型交易者客户关键。
实战：构建新闻日历CSV的Web GUI
本练习全部代码在news-watcher-csv.html中提供，我们会将这些与EA一起交付给客户。该GUI让客户录入货币、日期、时间与描述，可排序并导出CSV，供EA读取。我们先看如何加载行为层与显示层。
加载JS与CSS：Google Hosted Libraries与本地回退
Google Hosted Libraries是最流行的开源JavaScript库CDN。您可从谷歌服务器获得需要的JS库，无需复制到机器，浏览器在首个HTTP请求向谷歌请求指定库。本练习为使浏览器加载jQuery库及其CSS采取此方法。我们在文档头文件标记中加载所有必要内容，但也包含允许客户选择具体时间的小组件jquery.timepicker的CSS和JS，因为jQuery UI不包含时间选择可视化组件，需第三方。该文件在谷歌不可用，必须复制本地引用。
对客户可能不便，建议先将这两个文件上传至可靠公共服务器再从HTML指向，客户看到文件越少越好，呼应易用性。所有都基于客户有互联网连接以便使用此GUI的假设。以下为头文件加载代码片段：
<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 UI组件及其在GUI中的角色
我们的GUI包含下列jQuery可视化控件，这些已在此JavaScript框架中编程。Datepicker让用户轻松输入特定日期；Timepicker帮助输入具体时间，灵感来自Google日历；Sortable用于鼠标重排新闻列表；Dialog用于在交互叠加显示内容，但易用性纯粹主义者不推荐，因稍扰用户，有运动神经问题用户不便，我们留作练习改进。以下为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>
<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>
- Datepicker：日期录入，格式yy.m.dd
- Timepicker：时间录入，格式H:i:s
- Sortable：拖拽排序新闻项
- Dialog：模态展示CSV文本
为产品添加自定义价值：个性化惊喜
无论自由职业者或公司，若您有存储客户营销偏好的数据库，可利用信息自定义Web驱动GUI。例如客户Bob喜欢巴洛克作曲家Scarlatti，可加入Scarlatti剪辑让Bob在放松环境创建日历。这种技术组合不仅功能实用，更在情感层面让客户惊叹，提升产品溢价。
jQuery主程序逻辑剖析
打开news-watcher-csv.html，客户端Web应用包含CSS、HTML和JS。jQuery主程序简单：先对YouTube内嵌框架小修正使HTML5验证正确；初始化前述小组件；编程添加新闻按钮和创建CSV链接行为。以下为主程序代码：
$(function() {
$('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;
});
});
此代码首先修复iframe的zIndex问题，然后绑定日期、时间选择器，隐藏日历区。添加按钮将表单值拼为分号分隔li追加至可排序ul；获取CSV按钮遍历li生成CSV字符串并模态显示。用户复制至MQL5\FILES\news_watcher.csv即可被EA读取。
CSS呈现层与响应式改进空间
显示层CSS负责浅背景、深字、表单布局与排序列表样式。原文CSS简单重置并设定标签宽度、浮动视频等。可改进如用CSS3媒体查询做响应式设计适配移动装置，但本文未探讨，留作练习。以下为部分CSS：
<style>
* { margin: 0; padding: 0 }
body { font-family: Arial, Helvetica, sans-serif; padding: 0em 2em }
label { width: 150px; display: inline-block; margin: 5px; text-align: right }
#csv-generator { background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fafafa)); width: 100%; clear: both; overflow: hidden }
#video { width: 30%; float: left; margin-right: 1em; border:0 }
#form { width: 65%; float: right }
#sortable li { margin: 3px; padding: 0.4em; padding-left: 1.5em; }
</style>
部署注意事项与文件重命名陷阱
非常重要：原文HTML5经W3C验证，在Chrome和Firefox测试。IE8淘汰，jQuery 2.0不支持IE6/7/8。MQL5不支持发送HTML/CSS/JS，原文以txt提供：news-watcher-csv.txt重命名为.html，jquery.timepicker.txt重命名为.css，jquery.timepicker.min.txt重命名为.js。客户需互联网连接。
与MQL5标准库GUI方案的对比
MQL5标准库提供CAppDialog等类创建控制面板，纯终端内运行，无需网络，但学习曲线陡、跨平台弱（仅MT5）。Web GUI开发快、易美化为客户惊艳，但需联网、有安全面。若EA需离线或极简，用标准库；若重体验与交付速度，Web组合优。
总结：Web技术用途广泛，今天创建基于Web的GUI生成CSV新闻日历供EA用。HTML5、CSS和jQuery是主要客户端技术，并涉及易用性。开发者可据此组合提升MQL5产品竞争力。