Локализация веб редактора электронных таблиц

В этом разделе

Демо приложение VintaSoft ASP.NET Spreadsheet Editor Demo содержит словари локализации, которые позволяют локализовать веб редактор электронных таблиц (класс WebSpreadsheetDocumentEditorControlJS) на 45 языков (африкаанс, арабский, армянский, азербайджанский, белорусский, болгарский, китайский, хорватский, чешский, датский, голландский, английский, эстонский, финский, французский, грузинский, немецкий, греческий, иврит, хинди, венгерский, итальянский, японский, казахский, корейский, киргизский, латышский, литовский, норвежский, португальский, румынский, русский, словацкий, словенский, испанский, суахили, шведский, таджикский, татарский, турецкий, туркменский, украинский, узбекский, вьетнамский, зулусский).
Словари локализации находятся в папке "<SdkInstallPath>\VintaSoft\Imaging .NET 14.0\Examples\ASP.NET Core\CSharp\AspNetCoreSpreadsheetEditorDemo\wwwroot\locales\".

Если вы хотите создать собственный словарь локализации для пользовательского интерфейса веб редактора электронных таблиц, вам необходимо выполнить следующие шаги:

Определить список языков для локализации.
Создать словари для локализации.
Добавить JavaScript код для локализации пользовательского интерфейса.

Если вы создали пользовательский словарь локализации для веб редактора электронных таблиц и хотите поделиться им с другими пользователями, отправьте нам созданный словарь, и мы включим его в исходный код VintaSoft ASP.NET Core Spreadsheet Editor Demo.

1. Определение списка языков для локализации

Для начала необходимо определить список языков для локализации и создать файл настроек локализации, например, "settings.json". Вот содержимое файла "settings.json", который определяет, что интерфейс может быть локализован на английский и немецкий языки:

JSON

{
  "locales": [ "en", "af", "ar", "bg", "cs", "da", "de", "el", "es", "fi", "fr", "he", "hi", "hr", "hu", "it", "ja", "ko", "nb", "nl", "pt", "ro", "ru", "sv", "tr", "vi", "zh" ]
}

Затем файл "settings.json" необходимо добавить к содержимому веб-приложения, например, поместить его в папку "locales".

В завершение необходимо добавить на веб-страницу элемент "link" с информацией о настройках локализации:

HTML

<link rel="localization" href="/locales/settings.json">

2. Создание словарей для локализации

Файл словаря должен иметь имя, которое соответствует имени локали браузера, с расширением ".txt". Например, файл словаря английского языка должен иметь имя "en.txt", файл словаря немецкого языка должен иметь имя "de.txt", файл словаря французского языка должен иметь имя "fr.txt", файл словаря испанского языка должен иметь имя "es.txt", файл словаря итальянского языка должен иметь имя "it.txt", файл словаря португальского языка должен иметь имя "pt.txt", файл словаря русского языка должен иметь имя "ru.txt".

Файл словаря должен располагаться в той же папке, что и файл "settings.json". В нашем случае эта папка называется "locales".

Для создания словаря английского языка необходимо выполнить следующие шаги:

Отобразить на HTML-странице все элементы, которые должны быть локализованы.
Создать экземпляр класса VintasoftLocalizationJS, который позволяет локализовать DOM-элементы на HTML-странице.
Вызвать функцию VintasoftLocalizationJS.getDocumentLocalizationDictionary для получения словаря локализации на английском языке для DOM-элементов на HTML-странице.
Сериализовать словарь локализации на английском языке с помощью функции "JSON.stringify".
Сохранить сериализованный JSON-объект в файл с именем "en.txt".

Вот JavaScript код, который демонстрирует, как создать словарь локализации для HTML-страницы, содержащей веб редактор электронных таблиц:

JavaScript

...
// create UI localizer
_localizer = new Vintasoft.Shared.VintasoftLocalizationJS();
...

/**
 Creates the dictionary for localization of application UI.
*/
function __createUiLocalizationDictionary() {
    __createDocumentViewerDialogsForLocalization();

    var localizationDict = _localizer.getDocumentLocalizationDictionary();
    var localizationDictString = JSON.stringify(localizationDict, null, '\t');
    console.log(localizationDictString);
}

/**
 Creates the dialogs, which are used in Web Document Viewer, for localization.
*/
function __createSpreadsheetDocumentEditorDialogsForLocalization() {
    var floatingContainer = document.getElementById("spreadsheetDocumentEditorControlContainer");

    var spreadsheetEditorControl = _spreadsheetDocumentEditorControl.get_SpreadsheetEditorControl();

    var renameWorksheetDialog = new Vintasoft.Imaging.Office.UI.Dialogs.WebUiRenameWorksheetDialogJS();
    renameWorksheetDialog.render(floatingContainer);
    tempDialogs.push(renameWorksheetDialog);

    var moveWorksheetDialog = new Vintasoft.Imaging.Office.UI.Dialogs.WebUiMoveWorksheetDialogJS();
    moveWorksheetDialog.render(floatingContainer);
    tempDialogs.push(moveWorksheetDialog);

    var findTextDialog = new Vintasoft.Imaging.Office.UI.Dialogs.WebUiFindTextDialogJS();
    findTextDialog.render(floatingContainer);
    tempDialogs.push(findTextDialog);

    var selectFunctionDialog = new Vintasoft.Imaging.Office.UI.Dialogs.WebUiSelectFunctionDialogJS();
    selectFunctionDialog.render(floatingContainer);
    tempDialogs.push(selectFunctionDialog);

    var insertCommentDialog = new Vintasoft.Imaging.Office.UI.Dialogs.WebUiInsertCommentDialogJS();
    insertCommentDialog.render(floatingContainer);
    tempDialogs.push(insertCommentDialog);

    var editCommentDialog = new Vintasoft.Imaging.Office.UI.Dialogs.WebUiEditCommentDialogJS();
    editCommentDialog.render(floatingContainer);
    tempDialogs.push(editCommentDialog);

    var cellNumberFormatDialog = new Vintasoft.Imaging.Office.UI.Dialogs.WebUiCellNumberFormatDialogJS();
    cellNumberFormatDialog.render(floatingContainer);
    tempDialogs.push(cellNumberFormatDialog);

    var insertChartDialog = new Vintasoft.Imaging.Office.UI.Dialogs.WebUiInsertChartDialogJS("ChartSource.xlsx");
    insertChartDialog.render(floatingContainer);
    tempDialogs.push(insertChartDialog);

    var editChartPropertiesDialog = new Vintasoft.Imaging.Office.UI.Dialogs.WebUiEditChartPropertiesDialogJS();
    editChartPropertiesDialog.render(floatingContainer);
    tempDialogs.push(editChartPropertiesDialog);

    var editHyperlinkDialog = new Vintasoft.Imaging.Office.UI.Dialogs.WebUiEditHyperlinkDialogJS();
    editHyperlinkDialog.render(floatingContainer);
    tempDialogs.push(editHyperlinkDialog);
}

Для создания словаря немецкого языка (или любого другого языка, кроме английского) необходимо выполнить следующие шаги:

Использовать словарь локализации на английском языке в качестве шаблона для словаря локализации на немецком языке, т.е. скопировать файл "en.txt" в файл "de.txt".
Перевести текстовые значения с английского языка на немецкий язык в файле "de.txt".

Вот пример простого файла словаря:

JSON

{
        "spreadsheetDocumentEditorControl": {
                "fileLabel": {
                        "text": "File"
                },
                "homeLabel": {
                        "text": "Home"
                },
                "editLabel": {
                        "text": "Edit"
                },
                "insertLabel": {
                        "text": "Insert"
                },
                "reviewLabel": {
                        "text": "Review"
                },
                "uploadXlsxFileButton": {
                        "title": "Upload and open XLSX file"
                },
                "downloadXlsxFileButton": {
                        "title": "Download XLSX file"
                },
                "showMobileMenuButton": {
                        "title": "More"
                },
                "boldTextButton": {
                        "title": "Bold text"
                },
                ...
        }
}

3. Добавление кода JavaScript для локализации пользовательского интерфейса

Класс VintasoftLocalizationJS предоставляет функции для локализации DOM-элементов и константных строк.

Вот JavaScript-код, который демонстрирует, как включить локализацию веб редактора электронных таблиц в веб приложении:

JavaScript

...
// create UI localizer
_localizer = new Vintasoft.Shared.VintasoftLocalizationJS();
...

/**
 Enables the localization of application UI.
*/
function __enableUiLocalization() {
    // if localizer is ready (localizer loaded localization dictionary)
    if (_localizer.get_IsReady()) {
        // localize DOM-elements of web page
        _localizer.localizeDocument();
    }
    // if localizer is NOT ready
    else
        // wait when localizer will be ready
        Vintasoft.Shared.subscribeToEvent(_localizer, "ready", function () {
            // localize DOM-elements of web page
            _localizer.localizeDocument();
        });

    // subscribe to the "dialogShown" event of web spreadsheet document editor
    Vintasoft.Shared.subscribeToEvent(_spreadsheetDocumentEditorControl, "dialogShown", function (event, data) {
        _localizer.localizeDocument();
    });
}

Отправить отзыв