Archive
Google Language ASP.NET Controls
I published my second project at CodePlex – Google Language ASP.NET Controls.
In my previuos post, I wrote the sample code to create Google Ajax Language Custom Controls – they are Ajax-able, but this time I just build regular server control to save some time 🙂
The usage is:
- Include library:
<%@ Register Assembly="GoogleLanguage.WebControls" Namespace="GoogleLanguage.WebControls" TagPrefix="glc" %>
- Bootstrap Javascript with LanguageManager:
<glc:LanguageManager ID="LanguageManager1" runat="server" />
- Use <Literal> tag for next text:
<glc:Literal ID="Literal5" runat="server" Text="Do you like music too?" DestinationLanguage="FRENCH" />
- Use <Translator> tag for existing text in server controls:
<asp:TextBox ID="TextBox1" runat="server" Text="Important Notice" /> <glc:Translator ID="Translator2" runat="server" TargetControlID="TextBox1" DestinationLanguage="GERMAN" />
Screenshot – Sample Code
Screenshot – Sample Output
Google AJAX Language Custom Server Control
I tried Google AJAX Language API yesterday with a “Hello World” example, today I build an ASP.NET AJAX-enabled custom server control for it. The coding process is fun and it’s way simpler than building Virtual Earth Map AJAX-enabled controls at work. If you need to learn how to build an ASP.NET AJAX-enabled custom server control, this tutorial will help you.
My Google AJAX Language custom server control is straightforward and it extends System.Web.UI.WebControls.Label class and implements System.Web.UI.IScriptControl interface. I will list the source code and give some notes.
GoogleLanguageLabel.cs – server-side code of control
- Text property is overridden – this is the text will be translated to target language based on the LanguageCode property.
- LanguageCode property – See Google Language Enum for valid codes.
- AssemblyInfo.cs and WebResource – Add the following line to AssemblyInfo.cs because we will make the associated Javascript as web resource: [assembly: System.Web.UI.WebResource(“Posts.AjaxControl.GoogleLanguageLabel.js”, “application/x-javascript”)]
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Posts.AjaxControl
{
[DefaultProperty(“Text”)]
[ToolboxData(“<{0}:GoogleLanguageLabel runat=server></{0}:GoogleLanguageLabel>”)]
public class GoogleLanguageLabel : Label, IScriptControl
{
[Category(“Appearance”)]
public override string Text
{
get { return ((ViewState[“Text”] != null) ? ViewState[“Text”].ToString() : String.Empty); }
set { ViewState[“Text”] = value; }
}
[Category(“Appearance”)]
public string LanguageCode
{
get { return ((ViewState[“LanguageCode”] != null) ? ViewState[“LanguageCode”].ToString() : “en”); }
set { ViewState[“LanguageCode”] = value; }
}
protected virtual IEnumerable<ScriptReference> GetScriptReferences()
{
ScriptReference reference = new ScriptReference(Page.ClientScript.GetWebResourceUrl(typeof(GoogleLanguageLabel), “Posts.AjaxControl.GoogleLanguageLabel.js”));
return new ScriptReference[] { reference };
}
protected virtual IEnumerable<ScriptDescriptor> GetScriptDescriptors()
{
ScriptControlDescriptor descriptor = new ScriptControlDescriptor(“AjaxControl.GoogleLanguageLabel”, this.ClientID);
descriptor.AddProperty(“text”, this.Text);
descriptor.AddProperty(“languageCode”, this.LanguageCode);
return new ScriptDescriptor[] { descriptor };
}
IEnumerable<ScriptReference> IScriptControl.GetScriptReferences()
{
return GetScriptReferences();
}
IEnumerable<ScriptDescriptor> IScriptControl.GetScriptDescriptors()
{
return GetScriptDescriptors();
}
protected override void OnPreRender(EventArgs e)
{
if (!this.DesignMode)
{
// Test for ScriptManager and register if it exists
ScriptManager sm = ScriptManager.GetCurrent(Page);
if (sm == null)
{
throw new HttpException(“A ScriptManager control must exist on the current page.”);
}
sm.RegisterScriptControl(this);
}
base.OnPreRender(e);
}
protected override void Render(HtmlTextWriter writer)
{
if (!this.DesignMode)
{
ScriptManager.GetCurrent(Page).RegisterScriptDescriptors(this);
}
base.Render(writer);
}
}
}
GoogleLanguageLabel.js – client-side code of control
- Global variable – I define a global variable “global_google” to make sure it’s hooked up with the “google” object from the external Javascript http://www.google.com/jsapi, and this global variable can be accessed inside Javascript functions.
- Save context – Remember to save context (“this._languageCode” and “this.get_element()” in this case) before going inside the inner functions.
Type.registerNamespace(‘AjaxControl’);
var global_google = google;
AjaxControl.GoogleLanguageLabel = function(element)
{
AjaxControl.GoogleLanguageLabel.initializeBase(this, [element]);
this._text = null;
this._languageCode = null;
}
AjaxControl.GoogleLanguageLabel.prototype =
{
initialize : function() {
AjaxControl.GoogleLanguageLabel.callBaseMethod(this, ‘initialize’);
// save context
var langugaeCode = this._languageCode;
var element = this.get_element();
// current text
var text = this.get_element().innerHTML;
// detect and translate
global_google.language.detect(text, function(result) {
if (!result.error && result.language) {
global_google.language.translate(text, result.language, langugaeCode, function(result) {
if (result.translation) {
element.innerHTML = result.translation;
}
});
}
});
},
dispose : function() {
AjaxControl.GoogleLanguageLabel.callBaseMethod(this, ‘dispose’);
},
// *** Control properties ***
set_text : function(value) {
if (this._text !== value) {
this._text = value;
this.raisePropertyChanged(‘text’);
}
},
get_text : function() { return this._text; },
set_languageCode : function(value) {
if (this._languageCode !== value) {
this._languageCode = value;
this.raisePropertyChanged(‘languageCode’);
}
},
get_languageCode : function() { return this._languageCode; }
}
AjaxControl.GoogleLanguageLabel.registerClass(‘AjaxControl.GoogleLanguageLabel’, Sys.UI.Control);
if (typeof(Sys) !== ‘undefined’) Sys.Application.notifyScriptLoaded();
GoogleLanguageLabel.aspx – demo page
- Register web server control – <%@ Register Namespace=”Posts.AjaxControl” Assembly=”Posts” TagPrefix=”ac” %>
- Link to the external Javascript http://www.google.com/jsapi.
- Include Google AJAX Lauguage API in the page – call google.load(“language”, “1”); to load version 1 of the AJAX Language API.
- Create <ac:GoogleLanguageLabel> controls and assign Language Code.
<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”GoogleLanguageLabel.aspx.cs” Inherits=”Posts.AjaxControlDemo.GoogleLanguageLabel” %>
<%@ Register Namespace=”Posts.AjaxControl” Assembly=”Posts” TagPrefix=”ac” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
<title>Google Language Label</title>
<script type=”text/javascript” src=”http://www.google.com/jsapi”></script>
<script type=”text/javascript”>
google.load(“language”, “1”);
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<asp:ScriptManager ID=”ScriptManager1″ runat=”server” />
<div>
<ac:GoogleLanguageLabel ID=”lblMessage1″ runat=”server” Text=”Hello!” LanguageCode=”zh-TW” />
<br />
<ac:GoogleLanguageLabel ID=”lblMessage2″ runat=”server” Text=”How are you?” LanguageCode=”fr” />
<br />
<ac:GoogleLanguageLabel ID=”lblMessage3″ runat=”server” Text=”Can I borrow 100 dollars from you?” LanguageCode=”hi” />
<br />
<ac:GoogleLanguageLabel ID=”lblMessage4″ runat=”server” Text=”Can I return your money when I win the lottery?” LanguageCode=”ja” />
<br />
<ac:GoogleLanguageLabel ID=”lblMessage5″ runat=”server” Text=”Actually I just find I still have 1000 dollars in my wallet.” LanguageCode=”ru” />
</div>
</form>
</body>
</html>
Here is the result:
Hello!
Comment vas-tu?
उधार लेने से 100 डॉलर कर सकता हूँ ?
あなたのお金を返すときに私に勝つの宝くじですか？
На самом деле я просто найти Я еще 1000 долларов в моем кошельке.
Google AJAX Language in ASP.NET
I found another treasure in Google Code – Google AJAX Languages API. Now I can detect and translate blocks of text in a web page using Javascript. I am thinking to build a custom server control which inherits System.Web.UI.WebControls.Label, and this control is able to translate its Text and Tooltip to the language specified when the control is rendered.
Today I just try the “Hello World” example:
<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Default.aspx.cs” Inherits=”Posts._Default” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
<title>Google AJAX Language</title>
<script type=”text/javascript” src=”http://www.google.com/jsapi”></script>
<script type=”text/javascript”>
google.load(“language”, “1”);
function pageLoad(sender, args)
{
translate_text(“<%=lblMessage1.ClientID%>”, “zh-TW”);
translate_text(“<%=lblMessage2.ClientID%>”, “zh-TW”);
}
function translate_text(element_id, language_code)
{
var text = $get(element_id).innerHTML;
google.language.detect(text, function(result) {
if (!result.error && result.language) {
google.language.translate(text, result.language, language_code, function(result) {
if (result.translation) {
$get(element_id).innerHTML = result.translation;
}
});
}
});
}
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<asp:ScriptManager ID=”ScriptManager1″ runat=”server” />
<h3>Google AJAX Language</h3>
<div>
<asp:Label ID=”lblMessage1″ runat=”server” Text=”Hello World” />
<br />
<asp:Label ID=”lblMessage2″ runat=”server” Text=”This is a test page demonstrating the language translation.” />
</div>
</form>
</body>
</html>
The output is:
Google AJAX Language
世界您好
這是一個測試網頁上展示的語言翻譯。
Alex Tsung's Weblog 