ToolBar

ToolBar - элемент управления с кнопками.

Контрол-контейнер ToolBar добавляется в шаблоне формы до корневого элемента разметки формы Layout. В контроле ToolBar можно располагать контролы Tool произвольного количества и структуры вложенности.

Примечание

Контрол ToolBar и свойство класса формы toolBar не создаются и не отображаются во вложенной форме или в обозревателе аналитик.

Свойства

id

Идентификатор контрола.

Отнаследовано от Control

hint

Всплывающая подсказка, которая появляется при наведении на контрол.

Отнаследовано от Control

tags

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

Отнаследовано от Control

captionWidth

Ширина заголовка в колонках (для Bootstrap-верстки).

отнаследовано от Control

editorWidth

Ширина контрола в колонках (для Bootstrap-верстки).

Отнаследовано от Control

denyRoles

Список ролей без прав на данный элемент.

Отнаследовано от Control

readRoles

Список ролей на чтение данных.

отнаследовано от Control

writeRoles

Список ролей на изменение данных.

Отнаследовано от Control

visible

Видимость контрола.

Отнаследовано от Control

width

Ширина контрола.

Отнаследовано от Control

Методы

items

Возвращает словарь элементов тулбара, ключом которого является id элемента.

Пример

myForm.js

toolBar.items

addItems(viewItems, parentTool)

Добавление новых элементов.

Входные параметры:

параметр	описание
viewItems	массив объектов, содержащий описание свойств новых элементов
parentTool	ссылка на элемент, в который будут добавлены новые элементы. Если передать null или undefined, то элементы добавятся в toolbar

Пример

myForm.js

import { Tool } from 'ecosoft-lexema8'
...
toolBar.addItems([{
    Ctor: Tool,
    properties: {
        id: 'tool1', 
        caption: 'Test', 
        image: image, 
    }
}], parentTool);

removeItems(idList)

Удаление элементов.

Входные параметры:

параметр	описание
idLists	массив id элементов, которые нужно удалить.

Пример

myForm.js

toolBar.removeItems(['tool1', 'tool2']);

Tool

• Tool

Пример

В примере кнопка панели с идентификатором nestedTool добавлена как вложенная в кнопку nestedMenu (строки 5-6).

Поскольку контролы Tool функционируют в качестве кнопок на панели инструментов (контрол ToolBar), необходимо обрабатывать взаимодействие пользователя с этими кнопками. Это осуществляется с помощью системного механизма событий и их обработчиков. Каждый контрол системы имеет собственный набор различных событий, которые обрабатываются одинаковым образом. Если обработчики подключаются в шаблоне формы, то они должны быть объявлены в классе формы, который использует данный шаблон.

В описываемом примере указываются обработчики события clicked контролов Tool: используются методы класса формы simpleClick, addNestedTools и addMoreTools. Код этих методов представлен ниже.

В примере также представлено указание других свойств контрола Tool: изображение, заголовок и идентификатор.

<ToolBar>
    <Tool caption="Нажать" id="simpleTool" image="current-theme/images/leftNavBar/palette.png" clicked="simpleTool_clicked"/>
    <Tool caption="Кнопка, как Меню" id="nestedMenu" image="current-theme/images/leftNavBar/menu.png">
        <Tool caption="Вложенные кнопки" id="addNestedTools" image="current-theme/images/leftNavBar/next.png" clicked="addNestedTools_clicked" />
    </Tool>
    <Tool caption="Добавить кнопки" id="addButtonsTool" image="current-theme/images/leftNavBar/equipment.png" clicked="addButtonsTool_clicked"/>
</ToolBar>

simpleTool_clicked () {
    this.services.dialog.message('Кнопка нажата!', 'OK')
}

addNestedTools_clicked () {
    const { toolBar } = this
    for (let i = 1; i < 7; i++) {
        let newButtonId = `addNestedTools${i}`
        toolBar.addItems([{
            Ctor: Tool,
            properties: {
                id: newButtonId,
                caption: `Уровень ${i}`,
                image: toolImage
            }
        }], toolBar.items[`addNestedTools${(i - 1) || ""}`])

        toolBar.items[newButtonId].clicked.add(() => {
            this.services.dialog.info(`Кнопка ${i}-го уровня.`)
        })
    }
}

addButtonsTool_clicked () {
    const { toolBar } = this
    let tools = []
    for (let i = 1; i < 10; i++) {
        tools.push({
            Ctor: Tool,
            properties: {
                id: `additionalTool${i}`,
                caption: `Доп. кнопка ${i}`,
                image: equipImage
            }
        })
    }

    toolBar.addItems(tools)
    toolBar.items.addButtonsTool.clicked.removeAll()
    toolBar.items.addButtonsTool.clicked.add(() => {
        this.services.dialog.error('Кнопки уже добавлены!')
    })
}

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

• Метод simpleTool_clicked показывает обращение к системному клиентскому сервису Dialog и вызывает его метод message.
• Методы addNestedTools_clicked и addButtonsTool_clicked демонстрируют динамическое создание новых кнопок на панели инструментов. addNestedTools_clicked создаёт вложенную структуру кнопок, а метод addButtonsTool_clicked добавляет кнопки верхнего уровня. Для динамического добавления используется метод addItems контрола ToolBar. Для создания иерархической структуры контролов в методе addNestedTools_clicked формируется и передаётся вторым параметром в метод создания элементов (строка 16) идентификатор родительской кнопки, в которую будет вложена новая.
• На строке 18 представлен пример добавления обработчика события нажатия на новую кнопку. В добавляемом обработчике используется другой метод системного сервиса Dialog - info.
• В методе addButtonsTool_clicked на строках 39-42 представлен пример сброса обработчиков события (в данном случае - одного добавленного в шаблоне) и установка нового обработчика.

---