span8
span4
这个例子演示了如何使用FME服务器流回JSON到web浏览器,允许用户玩“Fun with Flags”。
这个现场演示使用FME服务器数据流服务,返回JSON到网页。
当用户选择他们希望使用多少标志时,这将作为数据流服务直接URL的末端的参数发送给FME服务器。
已经建立了一个工作区,可以从CIA网页中随机选择给定数量的国家。
响应是JSON,设置为Text writer, MIME Type设置为application/ JSON。
工作区使用htmllextractor返回所有国家和国家代码。AttributeManager使用国家代码创建国旗图像来源的url,以及作为线索的地图图像。JSONTemplater构建将以流返回的JSON。
工作空间将JSON返回给应用程序,其中包含:问题编号、标志图像的URL、地图图像的URL和国家名称。
本文开头的zip文件是让这个演示程序在您自己的系统上运行所需要的。
注意:app.js是如果你使用node.js作为web服务器的express。
打开flagRequestorCIA。FME Desktop 2018.1中的fmw。
使用“发布到FME服务器”向导:
var source = '/fmedatastreaming/Flags/flagRequestorCIA.fmw?旗帜= ' + flagsRequested;美元.getJSON(源)
隐藏/显示元素
游戏背后的许多代码都与隐藏和显示不同元素有关,这取决于游戏所处的阶段。这些可以通过以下方式看到:
文档。getElementById(“< div id >”)。风格=”显示:没有;;文档。getElementById(“< div id >”)。风格=”显示:内联;;
JSON请求
getFlags()函数通过在URL中传入请求的标志数量作为参数,从FME服务器请求json。flagsRequested是一个变量,它被分配了请求的编号。
var source =' https://demos-亚搏在线safe-software.fmecloud.com/fmedatastreaming/Flags/flagRequestorCIA.fmw?flags=' + flagsRequested;$.getJSON(source) .always(function(data) {Flags = data;totalFlags = data.length;//获取返回的标志数量qno = data[currentQuestion].QuestionNo;回答= [currentQuestion] .countryAnswer数据;clueURL = [currentQuestion] .clueURL数据;flagURL = [currentQuestion] .flagURL数据;$ (' # flagimage ') .attr(“src”,flagURL);//将标志的img源设置为返回的url $('#clueimage').attr("src",clueURL);//将映射线索的img源设置为返回的url flagNumber = currentQuestion + 1; // The array counting starts at 0, which is why we add 1 $('#flagNo').text("Flag "+ flagNumber +"//www.baooytra.com/knowledge/" +totalFlags); // Set the flag number so you know how far through the game you are });
标志验证
标志验证在validateCountry()函数中处理。
它接受文本输入,并将其与FME Server返回的正确答案进行比较。它还记分,每次答对时加1。
您可以使用另一个FME工作区来完成此操作,将用户输入的答案和正确的答案发送给FME服务器,以进行一些验证或模糊匹配。然而,这将需要更多的请求被发送到FME服务器,因此您将希望建立作业队列,以确保引擎总是可用来处理快速数据流请求。
function validateCountry() {var Canswer = document.getElementById('idSearch').value;. getelementbyid(“idSearch”)。禁用= true。如果(Canswer.toLowerCase() == answer.toLowerCase()) {document.getElementById('guessStatus')。setAttribute(“阶级”、“标签”成功的因素);. getelementbyid(“guessStatus”)。textContent = "你是正确的";正确答案=正确答案+ 1;} else {document.getElementById('guessStatus')。label-error setAttribute(“阶级”、“标签”);. getelementbyid(“guessStatus”)。textContent =“正确答案是”+答案;};};
©2019 S亚搏在线afe Software Inc |法律