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

• WebUiDocumentPasswordDialogJS - UI-диалог, который позволяет установить пароль документа. Диалоговое окно появляется при загрузке защищенного документа.
• WebUiUploadImageFromUrlDialogJS - UI-диалог, который позволяет ввести URL-адрес файла изображения/документа для открытия в веб просмотрщике документов. Диалог появляется при нажатии кнопки "Открыть файл с URL-адреса".
• WebPrintImagesDialogJS - UI-диалог, который позволяет печатать изображения, отображаемые в веб просмотрщике изображений. Диалоговое окно появляется при нажатии кнопки "Print images" (Печать изображений).
• WebImageViewerSettingsDialogJS - UI-диалог, который позволяет просматривать и редактировать настройки просмотрщика изображений. Диалоговое окно появляется при нажатии кнопки "Image viewer settings" (Настройки просмотрщика изображений).
• WebThumbnailViewerSettingsDialogJS - UI-диалог, который позволяет просматривать и редактировать настройки просмотрщика миниатюр. Диалоговое окно появляется при нажатии кнопки "Thumbnail viewer settings" (Настройки просмотрщика миниатюр).
• WebImageSelectionDialogJS - UI-диалог, который позволяет выбрать изображения, отображаемые в веб просмотрщике изображений. Диалоговое окно появляется при нажатии кнопки "Mark full pages for redaction" (Пометить весь контент страниц для редактирования).
• WebPdfRedactionMarkAppearanceDialogJS - UI-диалог, который позволяет просматривать и редактировать внешний вид PDF метки редактирования документа. Диалоговое окно появляется при нажатии кнопки "PDF redaction mark appearance" (Внешний вид PDF метки редактирования).
• WebUiPdfRedactionMarkSettingsDialogJS - UI-диалог, который позволяет просматривать и редактировать настройки PDF метки редактирования. Диалог появляется при нажатии кнопки "Внешний вид PDF метки редактирования".
• WebUiPdfImageResourceDialogJS - UI-диалог, который позволяет просматривать информацию о PDF изображении-ресурсе. Диалог появляется при нажатии кнопки "Показать изображение содержимого" на боковой панели "Извлечь изображения".
• WebUiPdfAConversionAndValidationDialogJS - UI-диалог, который позволяет преобразовать PDF документ в PDF формат/A или проверить PDF документ на соответствие формату PDF/A. Диалог появляется при нажатии кнопки "Преобразование и проверка PDF/A".
• WebPdfDocumentCompressorDialogJS - UI-диалог, который позволяет сжать PDF документ. Диалог появляется при нажатии кнопки "Сжатие PDF".

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

Готовые к использованию "стандартные" UI-диалоги, основанные на Bootstrap, хранятся в файле Vintasoft.Imaging.Pdf.Dialogs.Bootstrap.js.
Если в веб редакторе PDF документа необходимо использовать "стандартные" UI-диалоги 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.css, Vintasoft.Imaging.Pdf.js, Vintasoft.Imaging.Pdf.css, Vintasoft.Imaging.Dialogs.Bootstrap.js и Vintasoft.Imaging.Pdf.Dialogs.Bootstrap.js, например:
  
  • HTML

  <link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.css">
  <link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.Pdf.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.Pdf.js" type="text/javascript"></script>
  <script src="~/js/Vintasoft.Imaging.Dialogs.Bootstrap.js" type="text/javascript"></script>
  <script src="~/js/Vintasoft.Imaging.Pdf.Dialogs.Bootstrap.js" type="text/javascript"></script>
  

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

Ниже представлен снимок экрана стандартного UI-диалога "Password dialog" (Диалоговое окно ввода пароля), созданного на базе Bootstrap:

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

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

• ссылку на 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.css, Vintasoft.Imaging.Pdf.js, Vintasoft.Imaging.Pdf.css, Vintasoft.Imaging.Dialogs.jQueryUI.js и Vintasoft.Imaging.Pdf.Dialogs.jQueryUI.js, например:
  
  • HTML

  <link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.css">
  <link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.Pdf.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.Pdf.js" type="text/javascript"></script>
  <script src="~/js/Vintasoft.Imaging.Dialogs.jQueryUI.js" type="text/javascript"></script>
  <script src="~/js/Vintasoft.Imaging.Pdf.Dialogs.jQueryUI.js" type="text/javascript"></script>
  

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

Ниже представлен снимок экрана стандартного UI-диалога ввода пароля, созданного на базе jQuery UI:

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

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

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

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