Itera.Translate a Web Control/BaseUserControl that translate key phrases

I like EPiServer a lot, but one of the areas I think need some work is the handling of translation of key strings. Or more précises how too easy add text that can be translated or changed by editors. I have started on a module that can handle some of these issues.

The concept is simple. All text within {{text}} will be added to a dynamic data store table, where it’s possible to specify new text. Either change the text, or make a translation. The original text is uses as the key, so different areas that use the same key will share the translations. The data store class looks like this:

Code Snippet
 public class TranslateStore : IDynamicData
{
    public EPiServer.Data.Identity Id { get; set; }
    [EPiServerDataIndex]
    public string Key { get; set; }
    public string EN { get; set; }
    public string NO { get; set; }
 
    public string GetText()
    {
        var lang = Thread.CurrentThread.CurrentUICulture.IetfLanguageTag;
       
        if (lang == "no" && !string.IsNullOrEmpty(NO))
            return NO;
        if (lang == "en" && !string.IsNullOrEmpty(EN))
            return EN;
        return Key;
    }
    
    public static TranslateStore Find(string key)
    {
      
        var q = (from item in Items where item.Key == key select item).ToList();
        if (q != null && q.Count > 0)
            return q[0];
        var newItem = new TranslateStore();
        newItem.Key = key;
        Store.Save(newItem);
        return newItem;
    }
   
    public static IOrderedQueryable<TranslateStore> Items
    {
        get
        {
            return Store.Items<TranslateStore>();
        }
    }
 
    public static TranslateStore Load(EPiServer.Data.Identity id)
    {
        return Store.Load<TranslateStore>(id);
    }
    public static DynamicDataStore Store
    {
        get
        {
            return DynamicDataStoreFactory.Instance.GetStore(typeof(TranslateStore));
        }
    }
}
 

The code can either be used by inherit from a user control class, or as a web Control.

Inside the Render method I do

Code Snippet
 protected override void Render(HtmlTextWriter writer)
{
    var page = this.Page as PageBase;
    StringBuilder sb = new StringBuilder();
    StringWriter sw = new StringWriter(sb);
    HtmlTextWriter htw = new HtmlTextWriter(sw);
    base.Render(htw);
    try
    {
        writer.Write(inner.TranslateText(sb, page, this.ClientID, DisplayName));
    }
    catch (System.Exception error)
    {
        base.Render(writer);
        writer.Write(error.Message);
    }
   
}
 

and the replacement is done by

Code Snippet
   publicStringBuilder TranslateText(StringBuilder sb, PageBase page, string id, string displayName)
{
    var result = new StringBuilder();
    try
    {
 
        var start = DateTime.Now;
        string content = sb.ToString();
        var matches = FindMatches(content);
        var start2 = DateTime.Now;
        TranslateStore data = null;
        int startIndex = 0;
        foreach (var match in matches)
        {
            result.Append(content.Substring(startIndex, match.Index - startIndex));
            string key = match.Value.Substring(2, match.Value.Length - 4);
            if (!keys.ContainsKey(key.ToLower()))
            {
                data = TranslateStore.Find(key);
                keys.Add(key.ToLower(), data);
            }
            else
                data = keys[key.ToLower()];
            result.Append(data.GetText());
            startIndex = match.Index + match.Length;
        }
        result.Append(content.Substring(startIndex));
 
 
        if (HttpContext.Current.Items["TranslateMenu"] != null && HttpContext.Current.Request["translate"] != null && HttpContext.Current.Request["translate"]=="true")
        {
            var debug = new StringBuilder();
            debug.AppendLine("Found matches:" + ((TimeSpan)(start2 - start)).TotalMilliseconds + "ms<br />");
 
            debug.AppendLine("replaced matches:" + ((TimeSpan)(DateTime.Now - start2)).TotalMilliseconds + "ms<br />");
 
            result.Append(EditMode(page, debug, displayName + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Tot time:" + ((TimeSpan)(DateTime.Now - start)).TotalMilliseconds + "ms", id));
        }
        if (HttpContext.Current.Items["TranslateMenu"] != null && HttpContext.Current.Request["translate"] != null && HttpContext.Current.Request["translate"] == "all" && first)
        {
            var debug = new StringBuilder();
            var query = from item in TranslateStore.Items select item;
 
            var allKeys =new Dictionary<string, TranslateStore>();
            foreach (var item in query)
                allKeys.Add(item.Key, item);
            result.Append(EditMode(page, debug, "ALL&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Tot time:" + ((TimeSpan)(DateTime.Now - start)).TotalMilliseconds + "ms", id, allKeys,true));
        }
 
    }
    catch (System.Exception error)
    {
 
        result.Append(error.Message + error.StackTrace);
 
    }
    return result;
}
 

I’m also adding a context menu so this html code:

will appear like this:

and if I select Translate

this blue dragable div will lay it self over the text.

If you select Translate – all one blue box will appear with all the elements in the dynamic data store table displayed.

Use

Web Control

just add this line in the web.config pages/controls section

Code Snippet
 <add tagPrefix="Itera" namespace="Itera.WebControls" assembly="Itera.Translate" />
 

Then you can easy translate text like this

Code Snippet
 <Itera:Translate ID="Translate1" runat="server" DisplayName="MasterPage" >
        <a href="#nonav1" class="hiddenTxt">{{G&aring; direkte til navigasjon}}</a> 
        <a href="#nonav2" class="hiddenTxt">{{G&aring; direkte til hovedinnhold}}</a> 
        <a href="#nonav3" class="hiddenTxt">{{G&aring; direkte til kontaktinfo}}</a>
</Itera:Translate>
 

User Control

Just inherit from TranslateUserControl instead of UserControlBase and add the following element in the page directives

Code Snippet
 <%@ Control Language="C#" TranslateElements="true"
 

then you can either change text using {{}} like this

or from the code behind

Code Snippet
 var format = TranslateText("Denne saken har {0} kommentar(er)");
 

Code is in the code section here it’s compiled with CMS 6 R2, but it will work if you recompile it and remove the new the Data Store attributes.

May 02, 2011

Comments

Please login to comment.