Локализация веб просмотрщика документов
В этом разделе
Демо приложение VintaSoft ASP.NET Core Document Viewer Demo содержит словари локализации, которые позволяют локализовать веб просмотрщик документов (класс
WebDocumentViewerJS) на 45 языков (африкаанс, арабский, армянский, азербайджанский, белорусский, болгарский, китайский, хорватский, чешский, датский, голландский, английский, эстонский, финский, французский, грузинский, немецкий, греческий, иврит, хинди, венгерский, итальянский, японский, казахский, корейский, киргизский, латышский, литовский, норвежский, португальский, румынский, русский, словацкий, словенский, испанский, суахили, шведский, таджикский, татарский, турецкий, туркменский, украинский, узбекский, вьетнамский, зулусский).
Словари локализации находятся в папке "<SdkInstallPath>\VintaSoft\Imaging .NET v12.5\Examples\ASP.NET Core\CSharp\AspNetCoreDocumentViewerDemo\wwwroot\locales\".
Если вы хотите создать собственный словарь локализации для пользовательского интерфейса веб просмотрщика документов, вам необходимо выполнить следующие шаги:
- Определить список языков для локализации.
- Создать словари для локализации.
- Добавить JavaScript код для локализации пользовательского интерфейса.
Если вы создали пользовательский словарь локализации для веб просмотрщика документов и хотите поделиться им с другими пользователями, отправьте нам созданный словарь, и мы включим его в исходный код VintaSoft ASP.NET Core Document Viewer Demo.
1. Определение списка языков для локализации
Для начала необходимо определить список языков для локализации и создать файл настроек локализации, например, "settings.json". Вот содержимое файла "settings.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" с информацией о настройках локализации:
<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-страницы, содержащей веб просмотрщик документов:
...
// 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 __createDocumentViewerDialogsForLocalization() {
var floatingContainer = document.getElementById("documentViewerContainer");
var documentPasswordDialog = new Vintasoft.Imaging.DocumentViewer.Dialogs.WebUiDocumentPasswordDialogJS();
documentPasswordDialog.render(floatingContainer);
var imageSelectionDialog = new Vintasoft.Imaging.DocumentViewer.Dialogs.WebImageSelectionDialogJS();
imageSelectionDialog.render(floatingContainer);
var printImagesDialog = new Vintasoft.Imaging.DocumentViewer.Dialogs.WebPrintImagesDialogJS();
printImagesDialog.render(floatingContainer);
var thumbnailViewerSettingsDialog = new Vintasoft.Imaging.DocumentViewer.Dialogs.WebThumbnailViewerSettingsDialogJS();
thumbnailViewerSettingsDialog.render(floatingContainer);
var rotateImageWithAnnotationsDialog = new Vintasoft.Imaging.DocumentViewer.Dialogs.WebRotateImageWithAnnotationsDialogJS();
rotateImageWithAnnotationsDialog.render(floatingContainer);
var pdfRedactionMarkAppearanceDialog = new Vintasoft.Imaging.DocumentViewer.Dialogs.WebPdfRedactionMarkAppearanceDialogJS();
pdfRedactionMarkAppearanceDialog.render(floatingContainer);
var twainDeviceSelectionDialog = new Vintasoft.Imaging.DocumentViewer.Dialogs.WebTwainDeviceSelectionDialogJS();
twainDeviceSelectionDialog.render(floatingContainer);
var twainDeviceCapabilitiesDialog = new Vintasoft.Imaging.DocumentViewer.Dialogs.WebTwainDeviceCapabilitiesDialogJS();
twainDeviceCapabilitiesDialog.render(floatingContainer);
}
Для создания словаря немецкого языка (или любого другого языка, кроме английского) необходимо выполнить следующие шаги:
- Использовать словарь локализации на английском языке в качестве шаблона для словаря локализации на немецком языке, т.е. скопировать файл "en.txt" в файл "de.txt".
- Перевести текстовые значения с английского языка на немецкий язык в файле "de.txt".
Вот пример простого файла словаря:
{
"documentViewer": {
"fileLabel": {
"text": "File"
},
"viewLabel": {
"text": "View"
},
"toolsLabel": {
"text": "Tools"
},
"annotationsLabel": {
"text": "Annotations"
},
"uploadFileButton": {
"title": "Upload and open file"
},
"previousUploadFilesButton": {
"title": "Previously Uploaded Files"
},
"printImagesButton": {
"title": "Print images"
},
"downloadFileButton": {
"title": "Download image file"
},
...
}
}
3. Добавление кода JavaScript для локализации пользовательского интерфейса
Класс
VintasoftLocalizationJS предоставляет функции для локализации DOM-элементов и константных строк.
Вот JavaScript-код, который демонстрирует, как включить локализацию веб просмотрщика документов в веб приложении:
/**
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 document viewer
Vintasoft.Shared.subscribeToEvent(_docViewer, "dialogShown", function (event, data) {
_localizer.localizeDocument();
});
}