Все базовые визуальные компоненты в basisjs являются экземплярами класса basis.ui.Node и его потомков.

Для того чтобы начать использовать этот класс необходимо подключить область имен basis.ui конструкцией basis.require('basis.ui').

Большую часть возможностей basis.ui.Node наследует от своего родительского класса — basis.dom.wrapper.Node. По сути basis.ui.Node — это basis.dom.wrapper.Node "скрещенный" с шаблоном. Но последний не имеет визуального представления, поэтому их общие возможности мы показываем в секции UI.

Создавая новый класс от basis.ui.Node или их экземпляр, мы можем указать шаблон, который будет использоваться. Базовый шаблон basis.ui.Node - это пустой элемент <div>.

Каждый экземпляр basis.ui.Node имеет ссылку element на корневой узел шаблона. На практике вам редко прийдется иметь с этим дело, но для данной демонстрации нам нужно увидеть результат, поэтому мы добавляем element в тело документа, чтобы увидеть результат.

Данный пример выглядит сложным, но в нем все описано явно. На следующем слайде мы увидим как можно сделать проще.