Навигатор является ключевым элементом для создания решений на Showcase. Он отображается в левой части основного окна приложения.
Навигатор имеет строго определённую структуру и состоит из групп, в каждой из которых находится иерархическое «дерево». Например:
groupJSON = {
"group": {
"@id": "1",
"@name": "Учебный пример",
"level1": {
"@id": "11",
"@name": "Справочники",
"level2": [{
"@id": "111",
"@name": "Орг.структура",
"@selectOnLoad": true,
"action": {
"#sorted": [
{ "main_context": "orgStructure" },
{ "datapanel": { "@type": "orgStructure.xml" } }
]
}
}]
}
}
}
В приведённом примере используются следующие ключи:
-
«group» - обозначает группу навигатора;
-
«level<НомерУровня>», где НомерУровня = 1..5 - обозначает уровни дерева внутри группы;
-
«action» - описывает события при клике на элемент дерева, содержащего данный ключ, в навигатор. Задаётся внутри ключей «group» или «level».
-
«datapanel» - задаётся внутри ключа «action». Событие отображения информационной панели (datapanel), заданной значением атрибута «@type» (см. п. 3).
-
«#sorted» - используется, если важен порядок ключей в передаваемом в качестве значения одномерном массиве словарей.
-
Каждый элемент – группа или уровень – должен иметь следующие атрибуты:
-
«@id» - уникальный идентификатор. Значением этого атрибута должна быть уникальная для всего навигатора строка, т.е. в навигаторе не должно быть элементов, имеющих одинаковые значения атрибута «@id»;
-
«@name» - подпись для отображения элемента.
У одного из ключей «level» может быть атрибут @selectOnLoad: true. Это означает, что при первой загрузке дерева или при обновлении страницы будет выделен соответствующий уровень («level») в дереве с последующим выполнением событий, описанных в ключе «action». В предыдущем примере каждый уровень («level») содержал только один элемент. Чтобы добавить несколько элементов на одном уровне, нужно использовать конструкцию, как в следующем примере:
groupJSON = {
"group": {
"@id": "gr2",
"@name": "Группа 2",
"level1": [
{ "@id": "121", "@name": "Раздел 1" },
{ "@id": "122", "@name": "Раздел 2" }
]
}
}
Результат отображения показан на рисунке:
Навигатор. Группа с двумя разделами
