Войти

Браузер реестра

Контрол "Браузер реестра" обеспечивает компоновку для списочного контрола и вспомогательных контролов, которые обеспечивают удобное взаимодействие пользователя его окружение. На основе браузера можно создавать самые разные реестры, адаптированные под решения прикладных задач.

Пример
Исходный код

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

Руководство разработчика по конфигурации контрола

Рассмотрим создание и конфигурацию раскладки, которая в демо-примере выше. Схема раскладки контролов будет выглядеть следующим образом:

Рис. 4. Схема раскладки реестра.

Шаг 1: Создание нового контрола и добавление контрола-раскладки.

  1. Создайте новый контрол, например с именем MyArea/MyRegistry. В этом контроле мы организуем реестр в рамках данного руководства разработчика.
  2. Откройте файл MyRegistry.wml и добавьте в качестве корневого тега контрол-раскладку Layout/browsers:Browser.

Шаг 2: Добавление списочного контрола

Подробнее о списочных контролах можно прочитать здесь.

Далее описан порядок добавления плоского списка в браузер реестра:

  1. Для Layout/browsers:Browser в опцию content добавьте списочный контрол, например Controls/list:View.
    <!-- MyRegistry.wml -->
<Layout.browsers:Browser>
   <ws:content>
      <Controls.list:View />
   </ws:content>
</Layout.browsers:Browser>
  2. Базовую конфигурацию списочного контрола перенесите в конфигурацию Layout/browsers:Browser.
    <!-- MyRegistry.wml -->
<Layout.browsers:Browser source="{{_source}}" keyProperty="id" >
   <ws:content>
      <Controls.list:View />
   </ws:content>
</Layout.browsers:Browser>
    // MyRegistry.js
import { SbisService } from 'Types/source';
...
_source: null,
_beforeMount: function() {
   this._source = new SbisService({
      keyProperty: 'department',
      // Элементы статического источника описаны в отдельном файле, его можно найти в исходных файлах демо-примера
      data: MemorySourceData
   });
}

Особенности настройки иерархического списка

Для обеспечения навигации по иерархическому списку необходимо задать опцию root в конфигурацию контрола Layout/browsers:Browser. Это обеспечит корректную работу поиска и навигации по хлебным крошкам.

Шаг 3: Добавление строки поиска

Подробнее о контроле "Строка поиска" можно прочитать здесь.

Далее описан порядок добавления строки поиска в браузер реестра:

  1. Для Layout/browsers:Browser в опцию search добавьте контрол Controls/search:Input.
  2. Для Layout/browsers:Browser в опцию searchParam установите имя поля, которое будет передаваться в параметре "Фильтр" при вызове списочного метода.
<!-- MyRegistry.wml -->
<Layout.browsers:Browser
    searchParam="department">
    <ws:search>
        <Controls.search:Input/>
    </ws:search>
</Layout.browsers:Browser>

Настройка поиска со сменой раскладки

См. руководство.

Шаг 4: Добавление объединенного фильтра

Подробнее о контроле "Объединенный фильтр" можно прочитать здесь.

Далее описан порядок добавления объединенного фильтра в браузер реестра:

  1. Для Layout/browsers:Browser в опцию filterView добавьте контрол Controls/filter:View.
    <!-- MyRegistry.wml -->
<Layout.browsers:Browser>
    <ws:filterView>
        <Controls.filter:View />
    </ws:filterView>
</Layout.browsers:Browser>
  2. В конфигурации Controls/filter:View в опцию detailPanelTemplateName установите шаблон для панели фильтров. Подробнее о конфигурации панели фильтров можно прочитать здесь.
    В следующем примере шаблон задан из отдельного WML-файла.
    <!-- MyRegistry.wml -->
<Layout.browsers:Browser>
    <ws:filterView>
        <Controls.filter:View
            detailPanelTemplateName="wml!Engine-demo/Browser/BrowserFilterView/filterDetailPanelTemplate" />
    </ws:filterView>
</Layout.browsers:Browser>
    <!-- filterDetailPanelTemplate.wml -->
<Controls.filterPopup:DetailPanel attr:class="controls-PanelFilter__width-m" items="{{items}}">
    <ws:itemTemplate templateName="wml!Engine-demo/Browser/BrowserFilterView/itemsTemplate"/>
    <ws:additionalTemplate templateName="wml!Engine-demo/Browser/BrowserFilterView/addItemsTemplate"/>
</Controls.filterPopup:DetailPanel>
    <!-- itemsTemplate.wml -->
<ws:template name="owner">
    <Controls.source:SelectedKey bind:selectedKey="item.value">
        <Controls.filterPopup:Dropdown
            source="{{item.editorOptions.source}}"
            keyProperty="owner"
            displayProperty="title"/>
    </Controls.source:SelectedKey>
</ws:template>
 
<ws:template name="department">
    <Controls.source:SelectedKey bind:selectedKey="item.value">
        <Controls.filterPopup:Dropdown
            source="{{item.source}}"
            keyProperty="title"
            displayProperty="title"/>
    </Controls.source:SelectedKey>
</ws:template>
 
<ws:partial template="{{item.id}}" item="{{item}}"/>
    <!-- addItemsTemplate.wml -->
<ws:template name="department">
    <Controls.filterPopup:Link
        caption="По департаменту"/>
</ws:template>
 
<ws:partial template="{{item.id}}" item="{{item}}"/>
  3. В конфигурации Controls/filter:View установите структуру фильтров. Для этого в конфигурации Layout/browsers:Browser установите значение для опции filterView. Подробнее о настройке стуктуры фильтров читайте здесь.
    <!-- MyRegistry.wml -->
<Layout.browsers:Browser filterSource="{{_items}}" />
    var filterButtonData = [
   {
      name: 'owner',
      resetValue: '0',
      value: '0',
      textValue: '',
      viewMode: 'frequent',
      editorOptions: {
         keyProperty: 'owner',
         displayProperty: 'title',
         source: new sourceLib.Memory({
            data: [
               {id: 0, title: 'По ответственному', owner: '0'},
               {id: 1, title: 'Новиков Д.В.', owner: 'Новиков Д.В.'},
               {id: 2, title: 'Кошелев А.Е.', owner: 'Кошелев А.Е.'},
               {id: 3, title: 'Субботин А.В.', owner: 'Субботин А.В.'},
               {id: 4, title: 'Чеперегин А.С.', owner: 'Чеперегин А.С.'}
            ],
            keyProperty: 'id'
         })
      }
   },
   ...
}];
...
var ModuleClass = Control.extend({
   _items: filterButtonData,
   ...
});
  4. В конфигурации Controls/filter:View в опцию panelTemplateName установите шаблон для быстрых фильтров. Подробнее о конфигурацию быстрых фильтров подробнее можно прочитать здесь.
    <!-- MyRegistry.wml -->
<Layout.browsers:Browser>
    <ws:filterView>
        <Controls.filter:View
            detailPanelTemplateName="wml!Engine-demo/Browser/BrowserFilterView/filterDetailPanelTemplate"
            panelTemplateName="Controls/filterPopup:SimplePanel" />
    </ws:filterView>
</Layout.browsers:Browser>
    Элементы быстрого фильтра настраиваются через источник данных Layout/browsers:Browser.
    // JavaScript
_beforeMount: function() {
   this._source = new SbisService({
      keyProperty: 'department',
      data: MemorySourceData,
   });
}

Шаг 5: Добавление панели действий

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

Далее описан порядок добавления панели действий в браузер реестра:

  1. Для Layout/browsers:Browser в опцию operationsPanel добавьте конфигурацию Controls/operations:Panel.
    <!-- MyRegistry.wml -->
<Layout.browsers:Browser>
    <ws:operationsPanel>
        <Controls.operations:Panel
            parentProperty="parent"
            nodeProperty="@parent"
            keyProperty="id"
            on:itemClick="_panelItemClick()"/>
    </ws:operationsPanel>
</Layout.browsers:Browser>
  2. Для Controls/operations:Panel в опции source задайте конфигурацию команд. Подробнее о конфигурации команд читайте здесь.
    <!-- MyRegistry.wml -->
<Layout.browsers:Browser>
    <ws:operationsPanel>
        <Controls.operations:Panel
            source="{{_operationsPanelSource}}"
            parentProperty="parent"
            nodeProperty="@parent"
            keyProperty="id"
            on:itemClick="_panelItemClick()"/>
    </ws:operationsPanel>
</Layout.browsers:Browser>
    // MyRegistry.js
...
var operationsPanelData = [{
   id: 'remove',
   icon: 'icon-Erase icon-error',
   '@parent': false,
   title: 'Удалить',
   parent: null
}];
...
_beforeMount: function() {
   this._operationsPanelSource = new sourceLib.Memory({
      keyProperty: 'id',
      data: operationsPanelData
   });
},
  3. Для Layout/browsers:Browser в опции operationsPanelExpanded настройте стартовое отображение панели действий.
    <!-- MyRegistry.wml -->
<Layout.browsers:Browser bind:operationsPanelExpanded="_operationsPanelExpanded">
    <ws:operationsPanel>
        <Controls.operations:Panel
            source="{{_operationsPanelSource}}"
            parentProperty="parent"
            nodeProperty="@parent"
            keyProperty="id"
            on:itemClick="_panelItemClick()"/>
    </ws:operationsPanel>
</Layout.browsers:Browser>
  4. Использование панели действий актуально, когда включен режим массового выбора записей. Для этого в конфигурации Layout/browsers:Browser в опции multiSelectVisibility установите значение visible или onhover.
    В демо-примере значение опции задается в обработчике клика по кнопкам, которые находятся под реестром.
    <!-- MyRegistry.wml -->
<Layout.browsers:Browser multiSelectVisibility="{{_multiSelectVisibility}}" />
<Controls.buttons:Button caption="Checkbox: onhover" on:click="_onToggleMultiSelectVisibility('onhover')"/>
<Controls.buttons:Button caption="Checkbox: hidden" on:click="_onToggleMultiSelectVisibility('hidden')"/>
    // MyRegistry.js
var ModuleClass = Control.extend({
   _multiSelectVisibility: 'hidden',
   ...
   _onToggleMultiSelectVisibility: function(event, multiSelectVisibility) {
      this._multiSelectVisibility = multiSelectVisibility;
   }
});
    А также для Layout/browsers:Browser свяжите опции selectedKeys и excludedKeys со свойствами контрола.
    <!-- MyRegistry.wml -->
<Layout.browsers:Browser
   multiSelectVisibility="{{_multiSelectVisibility}}"
   bind:selectedKeys="_selectedKeys"
   bind:excludedKeys="_excludedKeys">
   ...
</Layout.browsers:Browser>
    // MyRegistry.js
var ModuleClass = Control.extend({
   _selectedKeys: [],
   _excludedKeys: [],
   ...
});

Шаг 6: Добавление элементов управления рядом со строкой поиска

Для отображения дополнительных элементов управления реестром, которые расположены рядом со строкой поиска, для Layout/browsers:Browser установите значение в опцию beforeFilterTemplate.

<!-- MyRegistry.wml -->
<Layout.browsers:Browser>
    <ws:beforeFilterTemplate>
        <div class="demo-browser-topTemplate">
            <Controls.buttons:Button
                icon="icon-AddButtonNew"
                buttonStyle="secondary"
                viewMode="toolButton"
                class="demo-browser-button"/>
            ...
        </div>
    </ws:beforeFilterTemplate>
</Layout.browsers:Browser>

Шаг 7: Добавление в список операций удаления и перемещения записей

В реестре можно организовать удаление и перемещение записей списка. Подробнее об этом можно прочитать здесь.

Добавление в раскладку диалога редактирования

Создание и конфигурирование диалога редактирования подробно описано в документе здесь.

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

© 2021 Тензор. Все права защищены.