![Webix logo](http://habrastorage.org/files/c5c/ae0/d4d/c5cae0d4dc3541278efb34f505a3c3a1.jpg)
Лето набирает силу, и разработчики Webix позаботились о том, чтобы вам было чем себя занять в отпуске или на каникулах. Не так давно в их блоге появился пост о новой, за номером 2.4, версии фреймворка. Новые фичи, обновления, длинный список багфиксов. Очень увлекательно! Давайте посмотрим подробнее, что для нас приготовили.
К слову говоря, если вы слышите это название впервые и вообще не понимаете, о чем речь, здесь доступен мой небольшой Webix-туториал.
Portlet Widget
![Portlet Widget](https://habrastorage.org/files/bf7/dc7/831/bf7dc7831ff14fbbb5a649aa5b54ccb2.png)
Portlet представляет из себя drag-and-drop контейнер, который может содержать любой другой элемент. Таким образом, можно быстро менять расположение элементов на странице. Лучше понять, как это выглядит, поможет демка.
Добавить отдельный portlet можно так:
{ view:"portlet", body:{
template:"My portlet"
}}
Для тех, кто не читал мою статью-введение и не знаком с Webix: свойство `view` необходимо для добавления нового элемента, а его значение определяет тип добавляемого элемента. Таким образом, код выше добавит на страницу один portlet с содержимым, определяемым свойством `body`.
Больше инфы и демок можно найти на странице документации.
MultiCombo
![Multicombo](https://habrastorage.org/files/0dd/c3c/97d/0ddc3c97d04a430f808ca1f05c49eb84.png)
Multicombo окажется полезным в случае, если при работе с формами пользователю нужно выбрать несколько элементов из списка. Кликаем на multicombo-поле — появляется выпадающий список с чекбоксам. Выбираем нужные. Готово! Демо-страница.
Использовать можно так:
{ view:"multicombo", label:"To", value:"2,3,4,13", suggest: "data/names.js"}
где `value` содержит изначально выбранные элементы, а `suggest` (функция или строка) определяет источник данных для выпадающего списка. Документация доступна здесь.
RangeSlider
![RangeSlider](https://habrastorage.org/files/7f0/d80/0a2/7f0d800a2cb64cfdbdf3ecf8cdbce7bc.png)
В отличие от старого доброго слайдера, этот позволяет выбрать определенный диапазон значений. Демо.
Используем, например, так:
{ view:"rangeslider", label:"Level B", value:[0,100], name:"slider1"}
где `value` содержит нужный диапазон значений; `name` — имя контрола, нужное для того, чтобы извлечь из него выбранное значение.
Валидация форм
![Form validation](https://habrastorage.org/files/2f7/2a3/fce/2f72a3fce031400898668470b2588675.png)
Пользователи вечно норовят ввести неверные данные! Для самых недогадливых из была разработана фича под названием Validation Message. Она окрашивает поле с неверно введенными данными в радикально красный цвет и выводит заданное сообщение об ошибке. Корректность введенных данных, к слову, можно проверить с помощью заранее определенных разработчиками правил:
var form = [
//some code here
{ view:"text", label:'E-mail address', name:"email", invalidMessage: "Incorrect e-mail address" },
//some more code here
];
webix.ui({
view:"form",
elements: form,
//form config
rules:{
"email": webix.rules.isEmail,
},
//some more form config
});
За выводимое сообщение, понятное дело, отвечает свойство `invalidMessage`. О том, как даже самых несмышленых заставить вводить валидные данные, читайте в документации.
Помимо описанных новшеств, разработчики, как и в прошлый раз внесли множество обновлений и исправили большое количество ошибок. Полный список изменений доступен здесь.
Комментарии (11)
massimus
02.06.2015 21:00+1Уж больно много в GPL-версии отрезано, хотелось бы больше пощупать. ExtJS в этом отношении гуманнее. А какой срок у триала Pro, не подскажете? Беглым осмотром сайта не нашёл.
stannislav Автор
02.06.2015 22:28Триал, вроде как, на 30 дней
yurash
03.06.2015 11:09[ответ на комментарий выше] Отрезано не мало, соглашусь, но вполне хватает понять что да как. Imho, цена адекватная — если покупать без поддержки, $170, это на одного разработчика без ограничений на число проектов. И год обновлений (пользоваться старой версией можно будет и дальше)
Alexeyco
03.06.2015 16:08> Лето набирает силу, и разработчики… позаботились о том, чтобы вам было чем себя занять в отпуске или на каникулах.
А мы с вами… не женаты? (с)
serf
Я так понял это такой виджетный ферймворк, на подобии extjs/dojo/yuilibrary. Интересно чем вдохновлялись авторы уже зная что подобных ферймворков много.
stannislav Автор
Да, похож на extjs.
Как и все велосипедо-строители, вдохновлялись они скорее всего желанием сделать свой, правильный, велосипед :)
На фоне MVC фреймворков, появляющихся каждую неделю, виджет фреймворков не так и много. yuilibrary вроде официально мерт, dojo в процессе переписывания на typescript.
zharikovpro
Kendo UI еще интересный. Но дорогой, зараза.
serf
Дорогой это относительно, особенно если проект большой и на долго.
Keyten
А можно поподробнее про Dojo?
zharikovpro
Вот официальный сайт с демками виджетов. Если коротко — это OpenSource JS-фреймворк для корпоративных приложений, активно поддерживаемый IBM, которая использует его в своих продуктах.
Keyten
Ого, сайт обновили :)
Не, что такое Dojo я знаю, даже использовал, мне интересно по поводу его переписывания на TypeScript. Беглое гугление ничего не дало.
P.S. Ах да, нашёл. > Firstly, Dojo 2 will be written in TypeScript.
Спасибо за новость.