Разрабатывая Webix, мы создали несколько демо-проектов, для того чтобы проверить, насколько наша библиотека удобна в использовании. Один из них — “SmartSheet demo”. Это приложение основано на DataTable, одном из ключевых Webix компонентов. SmartSheet может быть использован для отображения табличных или иерархических данных.
Вы можете скачать полную версию демо или посмотреть онлайн-демо.
Это микроприложение повторяет интерфейс Smartsheet, одной из лучших spreadsheet таблиц. Оно представляет иерархию задач с возможностью редактирования. (Мы реализовали только клиентский интерфейс. Для этого демо нет реального серверного кода).
Рассмотрим код приложения.
index.html
HTML файл лаконичен:
<script type="text/javascript" src="ui.js"></script>
<script type="text/javascript">
webix.ready(function(){
webix.i18n.parseFormatDate = webix.Date.strToDate("%m/%d/%Y");
webix.ui(ui_scheme);
});
</script>
Он начинается с HTML5 doctype, вслед за которым подключается библиотека Webix , а также js, css файлы данного демо приложения. Сам по себе документ не содержит никакого HTML контента, в нём лишь вызывается конструктор интерфейса webix.ui(), который инициализирует приложение (ui_scheme определено в ui.js).
Два важных момента:
— весь код инициализации обернут в webix.ready. Это гарантирует исполнение кода только после полной загрузки страницы (что является хорошей практикой);
— поскольку мы планируем работать с датами, нам необходимо настроить формат обработки дат после загрузки. Это делает webix.i18n.parseFormatDate метод.
ui.js — интерфейс и логика
В первую очередь, обратите внимание на ui_scheme структуру, которая использовалась в index.html для создания интерфейса:
container: "app",
cols: [{}, {
rows: [header, grid, footer],
width: 800
}, {}]
};
Это стандартная Webix разметка: горизонтальный layout из трех колонок, внутри которого лежит другой вертикальный layout с хедером (header), гридом (grid) и футером (footer). В горизонтальном layout первый и последний элементы пустые. Мы задаем их для того, чтобы расположить средний элемент по центру страницы. Внутренний вертикальный layout не содержит детального описания компонентов, а только ссылки на переменные. Еще одна хорошая практика – вынесение детального описания каждого компонента в свою переменную, т.к. такой код легче читать.
Хедер и футер не содержат особых хитростей. Хедер — это обычный темплейт(template), y которого установлен type:”header”, чтобы сделать его внешне похожим на хедер.
Футер представляет собой горизонтальный layout с кнопками. Для кнопок используется type: «icon» для определения внешнего вида, чтобы получить прозрачные кнопки с иконками.
view: "toolbar",
height: 25,
elements: [{
view: "button",
type: "icon",
icon: "users",
label: "Sharing (26)"
}, {
view: "button",
type: "icon",
icon: "flash",
label: "Alerts (5)"
}, {
view: "button",
type: "icon",
icon: "attach",
label: "Attachments (112)"
}, {
view: "button",
type: "icon",
icon: "vcard",
label: "Forms"
}]
};
Конфигурация грида сложнее:
view:"treetable", editable:true, autoheight:true, leftSplit:5,
columns:[
// столбцы
],
url:"data.json?v=4",
onClick:{
"webix_icon" : function(ev, id, trg){
//функции, исполняемые по клику на иконки
}
},
on:{
"onbeforeeditstart":function(cell){
return !this.getItem(cell.row).notedit;
}
}
};
Можно выделить два основных блока: настройки столбцов (columns) и логическая обработка событий.
Настройки столбцов
Для каждого столбца мы можем задать свой способ отображения данных. Это может быть автоматический вывод данных, как у столбца “num”:
или более сложный строчный темплейт, как у столбцов date и categories:
id: "category",
header: "Category",
width: 250,
template: "{common.space()} {common.icon()} #value#",
editor: "text",
sort: "string"
}, {
id: "start",
header: "Start date",
map: "(date)#start#",
editor: "date",
sort: "int"
},
или, если и этого недостаточно — используется функция для формирования контента, например, для того чтобы создать столбец с иконками:
if (!obj.attach) return "";
return "";
}},
Обработка событий
Демо-приложение содержит несколько столбцов с иноками: вложения (attachments) комментарии и иконка статуса. Все эти элементы содержат css класс “webix_icon”, позволяющий написать общий обработчик событий для всех иконок:
"webix_icon": function(ev, id, trg) {
if (id.column == "attach")
webix.message("Attach call for row: " + this.getItem(id.row).num);
}
}
Теперь, при клике по элементу с css классом webix_icon, будет вызываться заданная нами функция, которая содержит отдельные действия для каждого столбца с иконками.
Второй блок обработки событий задает логику операций редактирования в datatable, а именно не дает редактировать строки, отмеченные атрибутом «notedit».
"onbeforeeditstart":function(cell){
return !this.getItem(cell.row).notedit;
}
}
Заключение
Как видите, вполне реально создать довольно сложный UI с минимумом кода. DataTable, как и другие компоненты Webix, использует автоматические настройки всякий раз, когда это возможно. В то же время данный компонент позволяет разработчикам задавать для него достаточно сложную и детальную конфигурацию.
