Обзор возможностей, настроек и особенностей устройства компонента модального диалога в технологии Flexberry Ember.

Назначение компонента

Компонент модального диалога в технологии Flexberry Ember предназначен для отображения данных внутри модального окна.

Модальный диалог используется в таких компонентах технологии Flexberry Ember как:

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

Обзор возможностей и API компонента

Компонент модального диалога реализован на базе компонента Semantic UI Modal, поэтому часть настроек аналогичны:

• title - заголовок модального окна (рекомендуется задавать локализованное значение).
• sizeClass - css-класс размера модального окна, возможные варианты: ‘small’, ‘large’, ‘fullscreen’. Если ничего не указано, то используется ‘small’.
• viewImageContent - флаг, определяющий, что в модальном диалоге будет отображаться изображение, что изменит используемые css-классы разметки (используется, в частности, в окне просмотра файла в файловом контроле).
• useOkButton - флаг, определяющий, следует ли на модальном окне отображать кнопку “Ок”. Если ничего не указано, то используется ‘true’.
• useCloseButton - флаг, определяющий, следует ли на модальном окне отображать кнопку закрытия. Если ничего не указано, то используется ‘true’.
• settings - настройки, которые передаются внутреннему компоненту Semantic UI Modal.
• componentName - имя компонента.

Если ничего не было переопределено, то:

• при срабатывании onVisible наружу прокидывается Action определённый для created.
• при срабатывании onApprove наружу прокидывается Action, определённый для ok,
• при срабатывании onHidden наружу прокидывается Action определённый для close.

Пример использования модального диалога, применяемый в компоненте лукапа.

{{#modal-dialog
  title=title
  sizeClass=modalDialogSettings.sizeClass
  close='removeModalDialog'
  created='createdModalDialog'
  useOkButton=modalDialogSettings.useOkButton
  useCloseButton=modalDialogSettings.useCloseButton
  componentName=componentName
  settings=modalDialogSettings.settings
  data-test-lookup-dialog=true
}}
  {{outlet 'modal-content'}}
{{/modal-dialog}}

Особенности устройства роутинга и компонента для отображения модального диалога

Особенности устройства роутинга и компонента для отображения модального диалога будут рассмотрены на примере внутреннего устройства компонента лукапа.

Пусть компонент лукапа располагается на форме редактирования и настроен таким образом, что выбор значения осуществляется на списке в модальном окне.

• При нажатии на соответствующую кнопку компонента лукапа наружу прокидывается Action определённый для choose, это showLookupDialog.
• Обработчик showLookupDialog находится в миксине контроллера текущей формы редактирования FlexberryLookupMixin, который в итоге прокидывает наружу Action showModalDialog.
• Обработчик showModalDialog находится в миксине роута всего приложения ModalApplicationRoute, который стартует рендеринг шаблона, где используется компонент модального диалога. Параметры для рендеринга заданы в базовом контроллере формы редактирования EditFormController и приведут к отображению шаблона lookup-dialog, который в разметке использует компонент модального диалога.
• При срабатывании onVisible (фактически - это окончание отрисовки модального окна) наружу прокидывается Action определённый для created, здесь это createdModalDialog. Обработчик createdModalDialog находится в контроллере lookup-dialog.
• При скрытии модального окна (в результате любой из причины) срабатывает onHidden и наружу прокидывается Action определённый для close, здесь это removeModalDialog. Обработчик removeModalDialog находится в миксине роута всего приложения ModalApplicationRoute и скрывает отрендеренный шаблон, содержащий модальный диалог.

Таким образом, при использовании модального диалога типичным является то, что:

• Отрисовка шаблона (render) компонента для отображения модального диалога и его скрытие (disconnectOutlet) происходят на базе роута всего приложения application (соответствующие методы добавляются из миксина ModalApplicationRoute).
• Компонент для отображения модального диалога является не компонентом в типичном варианте, а парой из контроллера и шаблона, которым соответствующим образом передаётся управление.