这个函数从我们的配置文件中导入了两个新值,id 和密钥代码(文件 config.py):
# microsoft translation service MS_TRANSLATOR_CLIENT_ID = '' # enter your MS translator app id here MS_TRANSLATOR_CLIENT_SECRET = '' # enter your MS translator app secret here上面的 ID 和密钥代码是需要自己去申请,步骤上面已经讲了。即使你只希望测试应用程序,你也能免费地注册这项服务。
因为我们又添加了新的文本,这些也是需要翻译的,请重新运行 tr_update.py,poedit 和 tr_compile.py 来更新翻译的文件。
让我们翻译一些文本因此我们该怎样使用翻译服务了?这实际上很简单。这是例子:
$ flask/bin/python Python 2.6.8 (unknown, Jun 9 2012, 11:30:32) >>> from app import translate >>> translate.microsoft_translate('Hi, how are you today?', 'en', 'es') u'Hola, cómo estás hoy?' 服务器上的 Ajax现在我们可以在多种语言之间翻译文本,因此我们准备把这个功能整合到我们应用程序中。
当用户点击 blog 旁的 “翻译” 链接的时候,会有一个 Ajax 调用发送到我们服务器上。我们将看看这个调用是如何生产的, 现在让我们集中精力实现服务器端的 Ajax 调用。
服务器上的 Ajax 服务像一个常规的视图函数,不同的是不返回一个 HTML 页面或者重定向,它返回的是数据,典型的格式化成 XML 或者 JSON。因为 JSON 对 Javascript 比较友好,我们将使用这种格式(文件 app/views.py):
from flask import jsonify from translate import microsoft_translate @app.route('http://my.oschina.net/translate', methods = ['POST']) @login_requireddef translate(): return jsonify({ 'text': microsoft_translate( request.form['text'], request.form['sourceLang'], request.form['destLang']) })这里没有多少新内容。这个路由处理一个携带要翻译的文本以及原语言类型和要翻译的语言类型的 POST 请求。因为这是个 POST 请求,我们获取的是输入到 HTML 表单中的数据,请直接使用 request.form 字典。我们用这些数据调用我们的一个翻译函数,一旦我们获取翻译的文本就用 Flask 的 jsonify 函数把它转换成 JSON。客户端看到的这个请求响应的数据类似这个格式:
{ "text": "<translated text goes here>" } 客户端上的 Ajax现在我们需要从网页浏览器上调用 Ajax 视图函数,因为我们需要回到 post.html 子模板来完成我们最后的工作。
首先我们需要在模版中加入一个有唯一 id 的 span 元素,以便我们在 DOM 中可以找到它并且替换成翻译的文本(文件 app/templates/post.html):
<p><strong><span id="post{{post.id}}">{{post.body}}</span></strong></p>同样,我们需要给一个 “翻译” 链接一个唯一的 id,以保证一旦翻译显示我们能隐藏这个链接:
<div><span id="translation{{post.id}}"><a href="#">{{ _('Translate') }}</a></span></div>为了做出一个漂亮的并且对用户友好的功能,我们将会加入一个动态的图片,开始的时候是隐藏的,仅仅出现当翻译服务运行在服务器上,同样也有唯一的 id:
<img id="loading{{post.id}}" style="display: none" src="/static/img/loading.gif">目前我们有一个名为 post<id> 的元素,它包含要翻译的文本,还有一个名为 translation<id> 的元素,它包含一个 “翻译” 链接但是不久就会被翻译后的文本代替,也有一个 id 为 loading<id> 的图片,它将会在翻译服务工作的时候显示。
现在我们需要在 “链接” 链接点击的时候触发 Ajax。与直接从链接上触发调用相反,我们将会创建一个 Javascript 函数,这个函数做了所有工作,因为我们有一些事情在那里做并且不希望在每个模板中重复代码。让我们添加一个对这个函数的调用当 “翻译” 链接被点击的时候:
<a href="javascript:translate('{{post.language}}', '{{g.locale}}', '#post{{post.id}}', '#translation{{post.id}}', '#loading{{post.id}}');">{{ _('Translate') }}</a>