Это часть II руководства по coServ. Часть I объясняет, как использовать интерфейс командной строки coServ для создания веб-приложения. Здесь также описывается, как создать палитру для отображения элементов TODO. В этой статье показано, как реализовать контроллер палитры, чтобы ваша палитра могла взаимодействовать с пользователями. Также будет показано, как импортировать существующие компоненты пользовательского интерфейса. Импорт компонентов пользовательского интерфейса и их повторное использование могут значительно упростить ваше приложение.

Чтобы быстро сгенерировать нужный пользовательский интерфейс, не тратя слишком много энергии на их описание, мы используем инфраструктуру начальной загрузки для создания пользовательского интерфейса, необходимого в этом руководстве. Возможно, вам придется проверить документацию по начальной загрузке, если вы не знакомы с ней. Однако следует отметить, что coServ не ограничен начальной загрузкой. coServ в основном работает со всеми неофициальными библиотеками JS и CSS-фреймворками.

Реализовать контроллер палитры

Вы можете добавить контроллер палитры, реализовав функцию exports.control() внутри файла палитры.

exports.control = function(p)  {
    p.click = function(event)  {
        let  li = $(event.currentTarget)
        itemIndex = li.data('index')
        li.tab('show')
        alert( li.text() )
    }
}

Функция получает экземпляр палитры (p) в качестве первого параметра. В примере кода мы добавляем функцию контроллера click() в качестве обработчика событий, когда пользователи нажимают на элемент TODO. Функция click() определяет цель события по $(event.currentTarget) и выделяет элемент с помощью li.tab(‘show’). Чтобы убедиться, что все работает правильно, мы вызываем предупреждение, чтобы отобразить заголовок выбранного элемента TODO.

Когда обработчик событий готов, нам нужно зарегистрировать этот обработчик в элементах TODO. Это можно сделать, вызвав функцию on() элемента HTML, представляющего элемент TODO:

.on('click', 'this.click')

Первый аргумент «щелчок» обозначает событие, которое мы слушаем. Второй аргумент this.click указывает на функцию-обработчик. Использование «this» для указания контроллера палитры.

Теперь давайте немного уменьшим масштаб и посмотрим, как на самом деле регистрируется контроллер событий с элементом HTML:

В строке 13 говорится, что мы будем прослушивать событие click для каждого элемента TODO, и это событие должно быть направлено в функцию контроллера палитры click(), которая определена в exports.control(). .

Теперь перезагрузите страницу и нажмите на любой из пунктов TODO, вы увидите что-то вроде:

Импорт существующих компонентов

Мы успешно зарегистрировали обработчик события в элементе HTML. Обработчик выводит всплывающее предупреждение для отображения заголовка выбранного элемента. Это работает, но не красиво. Наш следующий шаг — использовать модальное диалоговое окно начальной загрузки, чтобы показать детали элемента TODO.

Bootstrap — очень полезный инструмент, и мы его любим, но иногда его использование немного утомительно. Проверьте ниже, чтобы увидеть HTML-код, необходимый только для создания каркаса модального диалогового окна:

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Без слишком большого количества компонентов начальной загрузки ваш HTML-код может быть легко загроможден слоями тегов ‹div›. Более того, если по ошибке пропустить хотя бы один тег ‹div›, ваш код может завершиться ошибкой без каких-либо подсказок. Слишком больно отлаживать такие HTML-коды.

coServ здесь для спасения. coServ позволяет определить любой компонент Bootstrap как UIC (компонент пользовательского интерфейса). Как только вы заставите UIC работать один раз, вы можете использовать его столько раз, сколько захотите. Больше не нужно беспокоиться об опечатке в одном из множества тегов ‹div›. Более того, полученный код будет намного более читабельным и удобным для сопровождения. Давайте посмотрим, как вызвать UIC в палитре coServ:

Первая строка указывает coServ импортировать пакет компонента начальной загрузки из каталога uic в вашем каталоге веб-приложения. После импорта пакета вы можете создать экземпляр UIC, вызвав его функцию create(), как показано в строке 15. Строка 15 создаст модальное диалоговое окно из пакета компонента начальной загрузки, который мы импортировали в строке 1:

become.create('Modal', 'todoModal', modalData)

Первый аргумент «Модель» указывает coServ создать модальный компонент из импортированного пакета (пакет UIC может иметь много доступных компонентов). Второй аргумент назначает «todoModal» в качестве идентификатора созданного UIC. Третий аргумент — это требуемый ввод в UIC. В примере кода, показанном выше, мы видим, что входные данные в модальное диалоговое окно определяются как:

let  modalData = {
        title: 'My TODO Item',
        body: xs.e('h5', 'Will display a TODO item here...'),
        primaryBtn: 'Confirm',
        closeBtn: true
     }

Не вдаваясь в определение, давайте просто предположим, что модальный UIC будет работать правильно, и у него будет заголовок, показывающий «Мой элемент TODO», как мы сказали. Он также будет иметь основную кнопку с надписью «Подтвердить» и отображаемую кнопку закрытия. Основная часть модального UIC должна отображать детали элемента TODO. Вначале по умолчанию будет использоваться тег заголовка (‹h5›Здесь будет отображаться элемент TODO…‹/h5›). Функция xs.e() — это то, как вы создаете HTML-элемент в coServ.

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

По сравнению с кодами контроллера, написанными в начале этого руководства, изменен только код строки 8. В строке 8 говорится, что откроется диалоговое окно Bootstrap Modal. Все выглядит хорошо, правда? Подождите минуту! Откуда берется _todoModal? Когда эта переменная определена?

Переменная _todoModal, указывающая на экземпляр Modal UIC, создается в exports.view(). Помните, что в exports.view() мы создаем модальный UIC с помощью этой строки кода:

bscomp.create('Modal', 'todoModal', modalData)

Второй аргумент указывает, что созданному экземпляру UIC будет присвоен идентификатор «todoModal». Хорошая вещь в coServ заключается в том, что он автоматически (и по своей сути) объявляет переменную в контроллере палитры для каждого экземпляра UIC, созданного в функции просмотра. Имя переменной будет идентификатором UIC, к которому добавляется «_». При этом разработчики могут легко ссылаться на любой экземпляр UIC, созданный в функции view(). Эта же функция работает и для встроенной палитры. Позже в этом уроке мы увидим, как встраивать палитры.

Теперь давайте перезагрузим страницу «/todo/list» и щелкнем любой элемент TODO, чтобы увидеть новую функцию:

Это выглядит лучше, чем оповещение, но нам все равно нужно показать выбранный элемент TODO в модальном диалоговом окне. Это то, что мы будем делать дальше.

Встроенные палитры

План состоит в том, чтобы использовать другую палитру для отображения сведений о выбранном элементе TODO. Новая палитра будет «/todo/view», и мы встроим эту палитру в тело диалога. Подытожим пользовательскую историю следующим образом:

A user click on a TODO item to see its details.

Итак, давайте создадим палитру «/todo/view». Вы можете создать файл «palets/todo/view.xs» в каталоге темы веб-приложения. Для этой палитры «представление» мы будем использовать компонент горизонтальной формы Bootstrap для отображения подробной информации о элементе TODO. Когда вы создаете веб-приложение с помощью инструмента coServ CLI, пакет UIC, содержащий горизонтальную форму Bootstrap, будет добавлен в ваше веб-приложение и готов к использованию. Ниже приведен исходный код view.xs:

Приведенный выше пример кода не требует пояснений. Ключевым моментом является импорт UIC-пакета ‘/bs4/components/form’ и создание горизонтальной формы с помощью этой строки кода:

bsform.create('Horizontal', 'mbody', {items: formItems} )

Остальное — указать, какой элемент управления формы будет использоваться для отображения каждого свойства элемента TODO, и разрешить горизонтальной форме Bootstrap выполнять презентацию. В примере будут отображаться четыре свойства (название, время начала, время выполнения и завершение) элемента TODO. Способ отображения этих свойств определяется в массиве formItems.

В порядке. Мы закончили вторую часть урока.

Если загрузочный UIC звучит слишком волшебно, вы можете изучить его исходный код, чтобы увидеть, как он работает. Исходный код будет находиться в каталоге «uic/bs4/components» вашего веб-приложения. Мы используем загрузочную UIC в учебнике, чтобы убедиться, что основные моменты четко изложены. Или мы можем запутаться со слоями тегов ‹div› в примере кода.

Статьи этого урока: