Двухколоночный реестр / Мастер деталь

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

В простейшем случае контрол может применяться для отображения телефонного справочника, когда слева — ФИО, а справа — подробная информация по выбранному человеку — его телефон, адрес, почта и т.п.

MasterDetail может применяться и для реализации более сложных сценариев, например, для реализации сценария "Реестр задач", как в примере ниже. В таком случае в master отображается список папок с задачами, а в detail — содержимое выбранной папки.

Про обработку ошибок в контроле читайте здесь

Документация API Спецификация Axure

Конфигурация

Для настройки контрола доступны 2 основные опции:

  • master — задает шаблон контента master.
    Для обеспечения связи с detail необходимо, чтобы контрол внутри указанного шаблона при смене элемента, требующего детализации, порождал событие selectedMasterValueChanged.
    Учитывая, что достаточно популярен сценарий, при котором в master используется списочный контрол, был предусмотрен специальный контейнер Controls/masterDetail:List, в который оборачивается списочный контрол, умеющий порождать событие markedKeyChanged при смене выбранного элемента.
  • detail — задает шаблон контента detail. В переданный шаблон приходит параметр selectedMasterValue, который можно использовать для фильтрации данных согласно выбранному в master элементу.

Обратите внимание!

У списочных контролов предусмотрена опция style, позволяющая устанавливать режим отображения "master", специально предназначенный для использования в MasterDetail.

Настройка движения границ

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

Чтобы включить функционал движения границ, необходимо задать опции:

  • propStorageId — уникальный идентификатор для сохранения конфигурации в хранилище данных.
  • masterWidth — ширина контентной области, применяемая при построении контрола.
  • masterMinWidth — минимально допустимая ширина контентной области контрола.
  • masterMaxWidth — максимально допустимая ширина контентной области контрола.

Включение нового дизайна в приложении, которое не строится на технологии sabyPage

Для этого необходимо в конфигурации контрола в опции newDesign установить значение true.

<!-- WML -->
<Controls.masterDetail:Base newDesign="{{true}}" />

Также включить новый дизайн можно через контекст:

  1. Объявите в своём контроле объект с полем "newDesign".
// TypeScript
this._contextValue = {
    newDesign: true
}
  1. В шаблоне оберните контрол в Controls/context:ContextOptionsProvider.
<!-- WML -->
<Controls.context:ContextOptionsProvider value="{{ _contextValue }}">
   <Controls.masterDetail:Base />
</Controls.context:ContextOptionsProvider>