Multi-Language & Localization Support in Sitefinity

Thursday, September 10, 2009

Notes for the Localization webinar

Overview of Localization in ASP.NET

Using Implicit Localization in ASP.NET

~/Default.aspx

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" Culture="auto" UICulture="auto" %>

<!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></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button" meta:resourceKey="Button1" runat="server" />
    </div>
    </form>
</body>
</html>

~/App_LocalResources/Default.aspx.resx

Button1.Text: This is a button.

~/App_LocalResources/Default.aspx.es.resx

Button1.Text: Se trata de un botón.

Using Explicit Localization in ASP.NET

~/Default.aspx

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" Culture="auto:en-US" UICulture="auto:en-US" %>

<!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></title>
</head>
<body>
    <form id="form1" runat="server">       <asp:Button ID="Button1" runat="server" Text="<%$ Resources:Resource, Submit %>" />
    </form>
</body>
</html>

Using ASP.NET Globalization

~/web.config

<configuration>
  <system.web>
    <globalization
      culture="auto"
      uiCulture="auto"
        />
  </system.web>
</configuration>

Enabling Sitefinity Localization

Set the localization persistenceMode (available persistence modes)

None
BrowserSettings
DomainExtension
DomainName
PathPrefix
QueryString

Using the PathPrefix persistenceMode:

<localization defaultProvider="Sitefinity" persistenceMode="PathPrefix" defaultCulture="en" cultures="en, es, fr, de, bg">
  ...
</localization>

Using the QueryString persistenceMode:

<localization defaultProvider="Sitefinity" persistenceMode="QueryString" defaultCulture="en" cultures="en, es, fr, de, bg">
  ...
</localization>

Using DomainExtension persistanceMode:

<localization defaultProvider="Sitefinity" persistenceMode="DomainExtension" defaultCulture="en" cultures="en, fr, de, bg">
  <providers>
    <clear/>
    <add name="Sitefinity" type="Telerik.Localization.Data.DefaultProvider, Telerik.Localization.Data" connectionStringName="DefaultConnection"/>
  </providers>
  <cultureMappings>
    <add key="com" culture="en" />
    <add key="co.uk" culture="en" />
    <add key="fr" culture="fr" />
  </cultureMappings>
</localization>

Using DomainName persistenceMode:

<localization defaultProvider="Sitefinity" persistenceMode="DomainName" defaultCulture="en" cultures="en, fr, de, bg">
  <providers>
    <clear/>
    <add name="Sitefinity" type="Telerik.Localization.Data.DefaultProvider, Telerik.Localization.Data" connectionStringName="DefaultConnection"/>
  </providers>
  <cultureMappings>
    <add key="english-domain.com" culture="en" />
    <add key="french-domain.fr" culture="fr" />
    <add key="german-domain.de" culture="de" />
    <add key="bulgarian-domain.bg" culture="bg" />
  </cultureMappings>
</localization>

To allow specific cultures (example, en-US) add the allowSpecificCultures=”true” attribute to the <localization> element.

Create Localized Versions of Existing Sitefinity Pages

Home : Principal
News : Noticias

Automatic Translations with RadEditor & Google Translate

Editor Google Translation : Automatic Translate Tool

Get the Generic Content Control Designer from the External Templates Zip

Copy ~/Sitefinity/Admin/ControlTemplates/Generic_Content to the local web site.

Map Embedded Template to an External Template

How to map a view to an external template.

Create ~/App_Data/Configuration/Telerik.Sitefinity.Configuration.ControlsConfig.xml

<?xml version="1.0" encoding="utf-8"?>
<controlsConfig>
  <viewMap>
    <viewSettings hostType="Telerik.Cms.Engine.WebControls.Design.GenericContentDesigner" layoutTemplatePath="~/Sitefinity/Admin/ControlTemplates/Generic_Content/GenericContentDesigner.ascx" />
  </viewMap>
</controlsConfig>

Add the following Javascript to: ~/Sitefinity/Admin/ControlTemplates/Generic_Content/GenericContentDesigner.ascx

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
    google.load("language", "1");


    function OnClientCommandExecuting(editor, args) {
        if (args.get_name() == "TranslateTool") {
            //Get language 
            var language = args.get_value();

            //Use either selected HTML or if no selection use all HTML                 
            var hasSelection = true;
            var html = editor.getSelectionHtml().trim();
            if (!html) {
                html = editor.get_html(true);
                hasSelection = false;
            }

            google.language.translate(html, "", language, function(result) {
                if (!result.error) {
                    currentSelectedHtml = result.translation;

                    //Either paste at current location or replace whole editor content 
                    if (hasSelection) {
                        editor.pasteHtml(currentSelectedHtml);
                    }
                    else editor.set_html(currentSelectedHtml);
                }
            });

            args.set_cancel(true);
        }
    } 
</script>

Add OnClientCommandExecuting to the <RadEditor> tag in:
~/Sitefinity/Admin/ControlTemplates/Generic_Content/GenericContentDesigner.ascx

<telerik:RadEditor 
    runat="server" 
    ID="textEditor"
    ContentAreaCssFile="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorContentArea.css"
    ToolsFile="~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml"    
    Skin="WebBlue"    
    NewLineBr="False"
    Height="360px" 
    Width="98%"
    OnClientCommandExecuting="OnClientCommandExecuting"
    ContentFilters="FixUlBoldItalic,FixEnclosingP,IECleanAnchors,MozEmStrong,ConvertFontToSpan,ConvertToXhtml,IndentHTMLContent"> 
    <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" DeletePaths="~/Images" />
    <MediaManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
    <FlashManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
    <DocumentManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
    <CssFiles>
        <telerik:EditorCssFile Value="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorCssFile.css" />
    </CssFiles>
</telerik:RadEditor>

Create a code-behind file:
~/Sitefinity/Admin/ControlTemplates/Generic_Content/GenericContentDesigner.ascx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;

public partial class Sitefinity_Admin_ControlTemplates_Generic_Content_GenericContentDesigner : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        //add a new Toolbar dynamically
        EditorToolGroup dynamicToolbar = new EditorToolGroup();
        textEditor.Tools.Add(dynamicToolbar);

        EditorDropDown ddn = new EditorDropDown("TranslateTool");
        ddn.Name = "TranslateTool";
        ddn.Text = "Translation Tool";

        //Set the popup width and height
        ddn.Attributes["width"] = "110px";
        ddn.Attributes["popupwidth"] = "240px";
        ddn.Attributes["popupheight"] = "100px";

        //Add items
        ddn.Items.Add(GetImagePath("en", "English"), "en");
        ddn.Items.Add(GetImagePath("es", "Spanish"), "es");
        ddn.Items.Add(GetImagePath("de", "German"), "de");
        ddn.Items.Add(GetImagePath("fr", "Frensh"), "fr");
        ddn.Items.Add(GetImagePath("it", "Italian"), "it");
        ddn.Items.Add(GetImagePath("ru", "Russian"), "ru");
        ddn.Items.Add(GetImagePath("he", "Hebrew"), "he");
        ddn.Items.Add(GetImagePath("nl", "Dutch"), "nl");
        ddn.Items.Add(GetImagePath("ja", "Japanese"), "ja");
        ddn.Items.Add(GetImagePath("bg", "Bulgarian"), "bg");
        ddn.Items.Add(GetImagePath("ro", "Romanian"), "ro");
        ddn.Items.Add(GetImagePath("uk", "Ukrainian"), "uk");
        ddn.Items.Add(GetImagePath("sv", "Swedish"), "sv");

        //Add tool to toolbar
        dynamicToolbar.Tools.Add(ddn);
    }

    private string GetImagePath(string code, string country)
    {
        return "<img src='" + Request.ApplicationPath + "/flags/" + code + ".png' alt=''/> " + country;
    }
}

Copy the Language images to ~/flags

Enabling Module Localization

Find the <cmsEngine> section in the web.config and set the allowLocalization attribute to True

<cmsEngine defaultProvider="Generic_Content">
  <providers>
    <clear/>
    <add name="Generic_Content" urlRewriteFormat="[Publication_Date]/[Name].aspx" urlDateTimeFormat="yy-MM-dd" urlWhitespaceChar="_" visible="True" defaultMetaField="Name" securityProviderName="" allowLocalization="True" allowVersioning="True" allowWorkflow="False" allowComments="false" commentsModeration="true" versioningProviderName="" connectionStringName="GenericContentConnection" type="Telerik.Cms.Engine.Data.Providers.DefaultProvider, Telerik.Cms.Engine.Data"/>
  </providers>
</cmsEngine>

Add a localizable=”True” attribute for each Metakey that needs localization enabled:

<metaFields>
  <add key="News.Title" valueType="ShortText" visible="True" searchable="True" sortable="True" defaultValue="" localizable="true" />
  <add key="News.Summary" valueType="LongText"  visible="True" searchable="True" sortable="True" defaultValue="" localizable="True" />
</metaFields>

Localizing the Sitefinity Admin

~/Sitefinity/Admin/App_LocalResources/Admin.master.es.resx

Logout: Cerrar sesión

Localizing Sitefinity Embedded Resources

Copy ~/Sitefinity/ControlTemplates/News from Embedded Resources.

Map Embedded NewsView templates to External Templates

<?xml version="1.0" encoding="utf-8"?>
<controlsConfig>
  <viewMap>
    <viewSettings hostType="Telerik.News.WebControls.NewsView">
      <additionalTemplates>
        <!--Provides user interface for displaying a list of news items in the NewsView control for the News module.-->
        <add key="ItemListTemplatePath" layoutTemplatePath="~/Sitefinity/ControlTemplates/News/ListPageMaster.ascx" />
        <!--Provides user interface for displaying a single news item in the NewsView control of the News module.-->
        <add key="SingleItemTemplatePath" layoutTemplatePath="~/Sitefinity/ControlTemplates/News/ListPageDetails.ascx" />
      </additionalTemplates>
    </viewSettings>
    <viewSettings hostType="Telerik.Cms.Engine.WebControls.Design.GenericContentDesigner" layoutTemplatePath="~/Sitefinity/Admin/ControlTemplates/Generic_Content/GenericContentDesigner.ascx" />
  </viewMap>
</controlsConfig>

~/Sitefinity/ControlTemplates/News/App_LocalResources/ListPageMaster.ascx.es.resx

FullStory: Artículo completo