Стандартные диалоговые окна, используемые в веб просмотрщике документов

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

По умолчанию веб просмотрщик документов использует следующие стандартные диалоговые окна:

WebUiDocumentPasswordDialogJS - диалоговое окно, которое позволяет установить пароль документа. Диалоговое окно появляется при загрузке защищенного документа.
WebUiUploadImageFromUrlDialogJS - UI-диалог, позволяющий ввести URL-адрес файла изображения/документа для открытия в веб просмотрщике документов. Диалог появляется при нажатии кнопки "Открыть файл с URL-адреса".
WebDocumentLayoutSettingsDialogJS - UI-диалог, позволяющий изменять настройки макета документа. Диалог появляется при нажатии кнопки "Настройки макета".
WebPrintImagesDialogJS - диалоговое окно, которое позволяет печатать изображения, отображаемые в веб просмотрщике изображений. Диалоговое окно появляется при нажатии кнопки "Print images" (Печать изображений).
WebImageViewerSettingsDialogJS - диалоговое окно, которое позволяет просматривать и редактировать настройки просмотрщика изображений. Диалоговое окно появляется при нажатии кнопки "Image viewer settings" (Настройки просмотрщика изображений).
WebThumbnailViewerSettingsDialogJS - диалоговое окно, которое позволяет просматривать и редактировать настройки просмотрщика миниатюр. Диалоговое окно появляется при нажатии кнопки "Thumbnail viewer settings" (Настройки просмотрщика миниатюр).
WebExportFileSettingsDialogJS - UI-диалог, позволяющий просматривать и редактировать настройки экспорта изображений в файл. Диалог появляется при нажатии кнопки "Экспортировать и загрузить файл".
WebRotateImageWithAnnotationsDialogJS - диалоговое окно, которое позволяет повернуть выделенное изображение с аннотациями. Диалоговое окно появляется при нажатии кнопки "Rotate image with annotations" (Поворот изображения с аннотациями).

1. Стандартные диалоговые окна на базе Bootstrap

Готовые к использованию стандартные диалоговые окна на базе Bootstrap хранятся в файле Vintasoft.Imaging.DocumentViewer.Dialogs.Bootstrap.js.
Если веб просмотрщик документов должен использовать стандартные диалоговые окна на базе Bootstrap, то веб-приложение должно содержать:

ссылку на CSS-файл стилей Bootstrap, например:

HTML

<link rel="stylesheet" type="text/css" href="~/lib/bootstrap/dist/css/bootstrap.css">

ссылки на библиотеки jQuery и Bootstrap, например:

HTML

<script src="~/lib/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>

ссылки на файлы Vintasoft.Imaging.js, Vintasoft.Imaging.DocumentViewer.js, Vintasoft.Imaging.Dialogs.Bootstrap.js и Vintasoft.Imaging.DocumentViewer.Dialogs.Bootstrap.js, например:

HTML

<link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.css">
<script src="~/js/Vintasoft.Shared.js" type="text/javascript"></script>
<script src="~/js/Vintasoft.Imaging.js" type="text/javascript"></script>
<script src="~/js/Vintasoft.Imaging.DocumentViewer.js" type="text/javascript"></script>
<script src="~/js/Vintasoft.Imaging.Dialogs.Bootstrap.js" type="text/javascript"></script>
<script src="~/js/Vintasoft.Imaging.DocumentViewer.Dialogs.Bootstrap.js" type="text/javascript"></script>

Внешний вид диалоговых окон можно настроить с помощью CSS-стилей Bootstrap.

Ниже представлен снимок экрана стандартного диалогового окна "Password dialog" (Диалоговое окно ввода пароля), созданного на базе Bootstrap:
'Standard' Bootstrap password dialog for Vintasoft Web Document Viewer

'Standard' Bootstrap password dialog for Vintasoft Web Document Viewer

2. Стандартные диалоговые окна на базе jQuery UI

Готовые к использованию стандартные диалоговые окна на базе jQuery UI хранятся в файле Vintasoft.Imaging.DocumentViewer.Dialogs.jQueryUI.js.
Если веб просмотрщик документов должен использовать стандартные диалоговые окна на базе jQuery UI, то веб-приложение должно содержать:

ссылку на CSS-файл стилей jQuery UI, например:

HTML

<link rel="stylesheet" type="text/css" href="~/js/jquery-ui-css/jquery-ui.min.css">

ссылки на библиотеки jQuery и jQuery UI, например:

HTML

<script src="~/js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="~/js/jquery-ui.min.js" type="text/javascript"></script>

ссылки на файлы Vintasoft.Imaging.js, Vintasoft.Imaging.DocumentViewer.js, Vintasoft.Imaging.Dialogs.jQueryUI.js и Vintasoft.Imaging.DocumentViewer.Dialogs.jQueryUI.js, например:

HTML

<link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.css">
<script src="~/js/Vintasoft.Shared.js" type="text/javascript"></script>
<script src="~/js/Vintasoft.Imaging.js" type="text/javascript"></script>
<script src="~/js/Vintasoft.Imaging.DocumentViewer.js" type="text/javascript"></script>
<script src="~/js/Vintasoft.Imaging.Dialogs.jQueryUI.js" type="text/javascript"></script>
<script src="~/js/Vintasoft.Imaging.DocumentViewer.Dialogs.jQueryUI.js" type="text/javascript"></script>

Внешний вид диалоговых окон можно настроить с помощью CSS-стилей jQuery UI.

Ниже представлен снимок экрана стандартного диалогового окна ввода пароля, созданного на базе jQuery UI:
'Standard' jQuery UI password dialog for Vintasoft Web Document Viewer

'Standard' jQuery UI password dialog for Vintasoft Web Document Viewer

3. Пользовательские стандартные диалоговые окна

Если готовые к использованию стандартные диалоговые окна Bootstrap и jQuery UI не подходят для вашего интерфейса или задачи, вы можете использовать пользовательские стандартные диалоговые окна в веб просмотрщик документов.

Если необходимо создать UI-диалог для другой библиотеки пользовательского интерфейса, рекомендуется создать диалог как обертку вокруг готовой к использованию UI-панели (WebUiDocumentPasswordPanelJS, WebUiUploadImageFromUrlDialogJS, WebDocumentLayoutSettingsDialogJS, WebUiPrintImagesSettingsPanelJS, WebUiImageViewerSettingsPanelJS, WebUiThumbnailViewerSettingsPanelJS, WebUiRotateImageWithAnnotationsPanelJS). В этом случае нет необходимости реализовывать логику, связанную с диалогом (например, печать изображений), поскольку UI-панель уже содержит всю необходимую логику.

Можно также создать пользовательское диалоговое окно с нуля, но в этом случае необходимо реализовать как пользовательский интерфейс, так и логику работы диалогового окна.

3.1. Пользовательское стандартное диалоговое окно для печати изображений

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

Создайте диалоговое окно, которое позволяет печатать изображения:

Создайте UI-панель, позволяющую печатать изображения. Добавьте UI-панель в веб просмотрщик документов отрисуйте панель как HTML-элемент:

JavaScript

// create panel that allows to print images
_printImagesSettingsPanel = new Vintasoft.Imaging.DocumentViewer.Panels.WebPrintImagesSettingsPanelJS({ cssClass: "vsdv-dialogContent" });
// add panel to the web document viewer
_docViewer.get_Items().addItem(_printImagesSettingsPanel);
// subscribe to the "beginPrint" and "imagesPreparationFailed" events of panel
Vintasoft.Shared.subscribeToEvent(_printImagesSettingsPanel, "beginPrint", __printImagesSettingsPanel_beginPrint);
Vintasoft.Shared.subscribeToEvent(_printImagesSettingsPanel, "imagesPreparationFailed", __printImagesSettingsPanel_imagesPreparationFailed);
// render panel as HTML-element
var printImagesSettingsPanelElement = _printImagesSettingsPanel.render(null);

Создайте диалоговое окно и добавьте в него UI-панель, созданную на предыдущем шаге:

JavaScript

// get div-element that should contain the panel
var printImagesSettingsPanelDiv = document.getElementById("printImageSettingsPanelDiv");
// append the panel to the dialog
printImagesSettingsPanelDiv.appendChild(printImagesSettingsPanelDivElement);

Добавьте в диалоговое окно кнопку "OK". При нажатии пользователем кнопки "OK" начните печать изображений:
- JavaScript
```
/**
 "OK" button is clicked.
*/
function okButtonClicked() {
  // start image printing
  _printImagesSettingsPanel.print();
}
```
Добавьте в диалоговое окно кнопку "Cancel" (Отмена). При нажатии пользователем кнопки "Cancel" по необходимости прервите подготовку к печати изображений и закройте диалоговое окно:
- JavaScript
```
/**
 "Cancel" button is clicked.
*/
public cancelButtonClicked() {
  // abort image printing if necessary
  _printImagesSettingsPanel.abort();
  // close this dialog
  __closeDialog();
}
```

Если печать изображений началась, закройте диалоговое окно:

JavaScript

/**
 Image printing is starting.
*/
private _printImagesSettingsPanel_beginPrint() {
  // close this dialog
  __closeDialog();
}

Если подготовка к печати изображений завершилась ошибкой, закройте диалоговое окно:

JavaScript

/**
 Image printing preparation is failed.
*/
private _printImagesSettingsPanel_imagesPreparationFailed() {
  // close this dialog
  __closeDialog();
}

Создайте функцию, которая создает пользовательскую кнопку "Print images" (Печать изображений):

JavaScript

/**
 * Creates UI button for image printing.
 */
function __createPrintImagesButton() {
  // create the button that allows to show a dialog with previously uploaded image files and select image file
  var button = new Vintasoft.Imaging.DocumentViewer.UIElements.WebUiButtonJS({
    cssClass: "vsdv-printImagesButton",
    title: "Print images",
    localizationId: "printImagesButton",
    onClick: __printImagesButton_clicked
  });

  // subscribe to the "activated" event of button
  Vintasoft.Shared.subscribeToEventOnce(button, "activated", function (event, eventArgs) {
    var uiElement = event.target;
    var docViewer = uiElement.get_RootControl();
    var imageViewer = docViewer.get_ImageViewer();
    var images = imageViewer.get_Images();


    function __updateButtonState() {
      // if image collection contains images, enable the button
      var isEnabled = images.get_Count() > 0;
      uiElement.set_IsEnabled(isEnabled);
    }

    function __destroyed(event) {
      // unsubscribe from the "changed" event of image collection of image viewer
      Vintasoft.Shared.unsubscribeFromEvent(images, "changed", __updateButtonState);
    }


    // subscribe to the "changed" event of image collection of image viewer
    Vintasoft.Shared.subscribeToEvent(images, "changed", __updateButtonState);
    // subscribe to the "destroyed" event of button
    Vintasoft.Shared.subscribeToEventOnce(uiElement, "destroyed", __destroyed);

    // update button state
    __updateButtonState();
  });

  return button;
}

Зарегистрируйте созданную кнопку в WebUiElementsFactoryJS в качестве функции, которая должна создавать кнопку с идентификатором "printImagesButton".
- JavaScript
```
// override the "Print images" button in web UI elements factory
Vintasoft.Imaging.DocumentViewer.WebUiElementsFactoryJS.registerElement("printImagesButton", __createPrintImagesButton);
```

Откройте пользовательское диалоговое окно при нажатии на пользовательскую кнопку "Print images" (Печать изображений):

JavaScript

/**
 * "Print images" button is clicked.
 */
function __printImagesButton_clicked(event, uiElement) {
  var docViewer = uiElement.get_RootControl();
  if (docViewer != null) {
    var dlg = new PrintImagesDialog(docViewer);
    dlg.open();
  }
}

3.2. Пользовательское стандартное диалоговое окно для настроек веб просмотрщика миниатюр

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

Создайте пользовательское диалоговое окно, которое позволяет менять настройки веб просмотрщика миниатюр.

Создайте функцию, которая создает пользовательскую кнопку "Thumbnail viewer settings" (Настройки просмотрщика миниатюр):

JavaScript

/**
 * Creates UI button for showing thumbnail viewer settings dialog.
 */
function __createThumbnailViewerSettingsButton() {
  // create the button that allows to show a dialog with image viewer settings
  return new Vintasoft.Imaging.DocumentViewer.UIElements.WebUiButtonJS({
    cssClass: "vsdv-thumbnailViewerSettingsButton",
    title: "Show Thumbnail Viewer Settings",
    localizationId: "thumbnailViewerSettingsButton",
    onClick: __thumbnailViewerSettingsButton_clicked
  });
}

Зарегистрируйте созданную функцию в WebUiElementsFactoryJS в качестве функции, которая должна создавать кнопку с идентификатором "thumbnailViewerSettingsButton":
- JavaScript
```
// override the "Thumbnail viewer settings" button in web UI elements factory
Vintasoft.Imaging.DocumentViewer.WebUiElementsFactoryJS.registerElement("thumbnailViewerSettingsButton", __createThumbnailViewerSettingsButton);
```

Откройте пользовательское окно при нажатии на кнопку "Thumbnail viewer settings" (Настройки просмотрщика миниатюр):

JavaScript

/**
 * "Show Thumbnail Viewer Settings" button is clicked.
 */
function __thumbnailViewerSettingsButton_clicked(event, uiElement) {
  var docViewer = uiElement.get_RootControl();
  if (docViewer != null) {
    var thumbnailViewer = docViewer.get_ThumbnailViewer();
    if (thumbnailViewer != null) {
      var dlg = new ThumbnailViewerSettingsDialog(thumbnailViewer);
      dlg.open();
    }
  }
}

3.3. Пользовательское стандартное диалоговое окно для поворота изображения с аннотациями

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

Создайте диалоговое окно, которое позволяет поворачивать изображения с аннотациями:

Создайте UI-панель, которая позволяет поворачивать изображение с аннотациями. Добавьте UI-панель в веб просмотрщик документов и отрисуйте UI-панель как HTML-элемент:

JavaScript

// create panel that allows to rotate image with annotations
var rotateImageWithAnnotationsPanel = new Vintasoft.Imaging.DocumentViewer.Panels.WebUiRotateImageWithAnnotationsPanelJS({ cssClass: "vsdv-dialogContent" });
// add panel to the web document viewer
docViewer.get_Items().addItem(rotateImageWithAnnotationsPanel);
// render panel as HTML-element
var rotateImageWithAnnotationsPanelElement = rotateImageWithAnnotationsPanel.render(null);

Создайте диалоговое окно и добавьте в него UI-панель, созданную на предыдущем шаге:

JavaScript

// get div-element that should contain the panel
var rotateImageWithAnnotationsPanelDiv = document.getElementById("rotateImageWithAnnotationsPanelDiv");
// append the panel to the dialog
rotateImageWithAnnotationsPanelDiv.appendChild(rotateImageWithAnnotationsPanelElement);

Добавьте в диалоговое окно кнопки "OK" и "Cancel".При нажатии пользователем кнопки "OK" диалоговое окно должно вызвать функцию "rotate":
- JavaScript
```
// rotate image with annotations using WebUiRotateImageWithAnnotationsPanelJS.rotate function
rotateImageWithAnnotationsPanel.rotate();
```

Создайте функцию, которая создает пользовательскую кнопку "Rotate image with annotations" (Повернуть изображение с аннотациями):

JavaScript

/**
 * Creates UI button that shows dialog for rotation of image with annotations.
 */
function __createRotateImageWithAnnotationsButton() {
  // create the button that allows to show a dialog with previously uploaded image files and select image file
  var button = new Vintasoft.Imaging.DocumentViewer.UIElements.WebUiButtonJS({
    cssClass: "vsdv-rotateImageWithAnnotations",
    title: "Rotate image with annotations",
    localizationId: "rotateImageWithAnnotationsButton",
    onClick: __rotateImageWithAnnotationsButton_clicked
  });
  return button;
}

Зарегистрируйте созданную функцию в WebUiElementsFactoryJS в качестве функции, которая должна создавать кнопку с идентификатором "rotateImageWithAnnotationsButton":
- JavaScript
```
// override the "Rotate image with annotations" button in web UI elements factory
Vintasoft.Imaging.DocumentViewer.WebUiElementsFactoryJS.registerElement('rotateImageWithAnnotationsButton', __createRotateImageWithAnnotationsButton);
```

Откройте диалоговое окно при нажатии на пользовательскую кнопку "Rotate image with annotations" (Повернуть изображение с аннотациями):

JavaScript

/**
 * "Rotate image with annotations" button is clicked.
 */
function __rotateImageWithAnnotationsButton_clicked(event, uiElement) {
  var docViewer = uiElement.get_RootControl();
  if (docViewer != null) {
    var dlg = new RotateImageWithAnnotationsDialog(docViewer);
    dlg.open();
  }
}

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