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

1. Text property is overridden – this is the text will be translated to target language based on the LanguageCode property.
2. LanguageCode property – See Google Language Enum for valid codes.
3. 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

1. 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.
2. 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

1. Register web server control – <%@ Register Namespace=”Posts.AjaxControl” Assembly=”Posts” TagPrefix=”ac” %>
2. Link to the external Javascript http://www.google.com/jsapi.
3. Include Google AJAX Lauguage API in the page – call google.load(”language”, “1″); to load version 1 of the AJAX Language API.
4. 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 долларов в моем кошельке.