Браузер реестра
Контрол "Браузер реестра" обеспечивает компоновку для списочного контрола и вспомогательных контролов, которые обеспечивают удобное взаимодействие пользователя его окружение. На основе браузера можно создавать самые разные реестры, адаптированные под решения прикладных задач.
Документация API Спецификация Axure
Руководство разработчика по конфигурации контрола
Рассмотрим создание и конфигурацию раскладки, которая в демо-примере выше. Схема раскладки контролов будет выглядеть следующим образом:
Рис. 4. Схема раскладки реестра.
Шаг 1: Создание нового контрола и добавление контрола-раскладки.
- Создайте новый контрол, например с именем
MyArea/MyRegistry
. В этом контроле мы организуем реестр в рамках данного руководства разработчика. - Откройте файл
MyRegistry.wml
и добавьте в качестве корневого тега контрол-раскладку Layout/browsers:Browser.
Шаг 2: Добавление списочного контрола
Подробнее о списочных контролах можно прочитать здесь.
Далее описан порядок добавления плоского списка в браузер реестра:
- Для
Layout/browsers:Browser
в опцию content добавьте списочный контрол, напримерControls/list:View
.<!-- MyRegistry.wml --> <Layout.browsers:Browser> <ws:content> <Controls.list:View /> </ws:content> </Layout.browsers:Browser>
- Базовую конфигурацию списочного контрола перенесите в конфигурацию
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: Добавление строки поиска
Подробнее о контроле "Строка поиска" можно прочитать здесь.
Далее описан порядок добавления строки поиска в браузер реестра:
- Для
Layout/browsers:Browser
в опцию search добавьте контролControls/search:Input
. - Для
Layout/browsers:Browser
в опцию searchParam установите имя поля, которое будет передаваться в параметре "Фильтр" при вызове списочного метода.
<!-- MyRegistry.wml -->
<Layout.browsers:Browser
searchParam="department">
<ws:search>
<Controls.search:Input/>
</ws:search>
</Layout.browsers:Browser>
Настройка поиска со сменой раскладки
См. руководство.
Шаг 4: Добавление объединенного фильтра
Подробнее о контроле "Объединенный фильтр" можно прочитать здесь.
Далее описан порядок добавления объединенного фильтра в браузер реестра:
- Для
Layout/browsers:Browser
в опцию filterView добавьте контролControls/filter:View
.<!-- MyRegistry.wml --> <Layout.browsers:Browser> <ws:filterView> <Controls.filter:View /> </ws:filterView> </Layout.browsers:Browser>
- В конфигурации
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}}"/>
- В конфигурации
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, ... });
- В конфигурации
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: Добавление панели действий
Подробнее о контроле "Панель действий" можно прочитать здесь.
Далее описан порядок добавления панели действий в браузер реестра:
- Для
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>
- Для
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 }); },
- Для
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>
- Использование панели действий актуально, когда включен режим массового выбора записей. Для этого в конфигурации
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: Добавление в список операций удаления и перемещения записей
В реестре можно организовать удаление и перемещение записей списка. Подробнее об этом можно прочитать здесь.
Добавление в раскладку диалога редактирования
Создание и конфигурирование диалога редактирования подробно описано в документе здесь.
Там же описан пример добавления диалога редактирования в раскладку.