必威体育下载基督教Heilmann

⚡️使用YQL和YUI将web上的数据表转换为自动完成转换程序

周一,8月31日,2009年4时03分

夏天的小部件上周末黑客事件,托马斯·卡斯珀,尼娜维兰德Jens Grochdreis有一个想法,创造一个翻译工具,从当地科隆口音翻译到德国和回来。

为此,他们在网上找到了一个令人印象深刻的数据源,即本网站由Reinhard Kaaden提供。现在的任务是把它变成一个漂亮的界面,让人们很容易地输入一个“Kolsch”术语,得到德语的对应词,反之亦然。为此,我提议YQLYUI下面是一步一步的解释。

你可以在这里看到最终的结果:Deutsch-Kolsch ubersetzer
或点击截图:

你是德国人。

步骤1:检索和转换数据

从web获取数据的一个非常简单的方法是使用YQL。为了得到整体HTML对于源页面,我们要做的就是从html中选择*,其中url='http://www.magicvillage.de/~reinhard_kaaden/d-k.html'。这就得到了整个数据我们只想得到表的内容。

使用Firebug并查找一些XPATH我们提出了以下声明,将给我们的语言对作为德语科埃尔什内段:/ /表[1]/ tr / td / p[不是(a)]。的(一)需要语句过滤出A-Z导航表单元格。我们选择JSON作为输出格式YQLdktrans作为回调函数名。

所有这些给了我们aURL这将加载我们想要的数据并将其发送给函数dktrans一旦它被拉动:



创建自动补全控件所需的所有东西差不多都是从简单的自动完成例子YUI网站
首先是得到一些处理程序的输入字段,我想填充翻译数据:

var di =雅虎.util.Dom.get(“deutschinput”);
var ci =雅虎.util.Dom.get(“koelschinput”);

然后需要实例化autocomplete的数据源,并为其提供语言数组。作为一个responseSchema,你可以定义一个叫做term的字段:

dkttransdata.cologneds=新建雅虎.util.LocalDataSource(
dktransdata.koelsch
);
dkttransdata.cologneds.responseSchema=字段:['term']

接下来,您需要实例化AutoComplete小部件。这个有三个参数输入元素,输出容器和数据源。你可以设置useShadow在容器上得到一个小的投影:

dkttransdata.cologneac=新雅虎.widget.AutoComplete(
“koelschinput”、“koelschoutput’,dktransdata.cologneDS
);
dkttransdata.cologneac.useshadow=true;

这将把科隆语言的输入转换为自动完成,但它还没有填充另一个字段。为此,我们需要订阅itemSelectEvent自动完成小部件的。该事件的事件处理程序获取一些参数,所选元素的文本内容是第二个参数中第三个元素的第一个元素YUI网站)。您所需要做的就是将另一个字段的值设置为我们定义的转换映射的相应元素:

dktransdata.cologneAC.itemSelectEvent.subscribe(cologneHandler);
函数cologneHandler(,){
di.value=dkttransdata.dk[a[2][0];
}

剩下的就是对德国到科隆的球场也做同样的事情:


dkttransdata.germands=新建雅虎.util.LocalDataSource(
dktransdata.deutsch
);
dkttransdata.germands.responseSchema=字段:['term']
dkttransdata.germanac=新建雅虎.widget.AutoComplete(
“deutschinput”、“deutschoutput’,dktransdata.germanDS
);
dkttransdata.germanac.useshadow=true;
dktransdata.germanAC.itemSelectEvent.subscribe(germanHandler);
函数germanHandler(,){
ci.value=dkttransdata.kd[a[2][0];
}

第五步:把这些都放在一起

你可以看到全部GitHub上的翻译工具的源代码可以在那里下载,了。
当然,我们在这里还没有真正完成,因为这只在JavaScript环境中有效。翻译本来就是一个小部件,这不是问题。自动补全功能在手机上似乎不起作用,尽管:)。

在没有JavaScript的情况下让它工作起来很简单,了。当数据返回时JSON我们也可以用这个PHP如果需要的话,编写一个简单的表单脚本,我以后再做。

标签:,,,,,

在Twitter上分享