Webix 3.0 — новий, ліловий

Webix 3.0

Судячи з усього, розробники цього фреймворку дуже чутливо ставляться до зміни сезонів. Раніше я вже писав про нових версіях Webix. І виходили вони або на початку весни або на початку літа. На цей раз, судячи з усього, в рамках боротьби з осінньою депресією розробники викотили мажорний реліз. У новому Webix 3.0, крім вже звичних нам нових фіч і багфіксів, з'явилися два нововведення, які цілком собі можна вважати окремими продуктами: Webix Jet і Visual Designer. Давайте розберемося, що це таке, навіщо це потрібно і як це виглядає.

Visual Designer. All Hail Drag and Drop!
Що це за штуковина, думаю, зрозуміло вже з назви. Візуальний дизайнер інтерфейсів доведеться за смаком візуалів або тим, хто просто не хоче морочитися з кодом.

New Design

Можна швидко створити необхідний лэйаут, додати потрібні віджети, змінити властивості і отримати працюючий код.

Project

Додаток на даний момент знаходиться в стані бета-версії і на момент написання статті в ньому відсутні деякі життєво важливі фішки, наприклад, автодоповнення у редакторі коду. Але розробники запевняють, що робота ведеться досить активна і Visual Designer буде обростати новими корисними функціями, так що придивитися до нього все-таки варто. Придивитися можна по цьому посиланню.

Webix Jet
За словами розробників, Webix Jet представляє з себе мікро-фреймворк, основною метою якого є спростити розробку, коли справа доходить до програми з досить складною структурою і постає питання про повторному використанні коду, навігації, роботи з даними і т. д.

З допомогою Webix Jet можна легко розбити програму на модулі, згідно з їх призначенням (елементи інтерфейсу, робота з даними). В двох словах описати принципи роботи цього фреймворку не так просто, оскільки тема обширна і заслуговує окремої статті. Краще присвятити деякий час ось цього досить детального мануали (з картинками) і по достоїнству оцінити концепт.

Інші корисності
Власне Webix також не залишився без обновок. Давайте подивимося на найцікавіші з них.

Нові властивості компонента DataTable: subrow і subview
Ці нові властивості дозволяють розширити функціональність компонента DataTable).

Для того, щоб додати якусь важливу (або не дуже) інформацію до елементів списку, можна використовувати властивість `subrow`. Використовувати можна так:

{
/* створюємо компонент */
view:"datatable",
/* додаємо sub-row */
subrow:"Rating: #rating# Category: #category#",
}

Цей код створить для кожного пункту підрядок, відповідну шаблоном:

Subrow

Можна створювати свої subrow для кожного окремого пункту, змінювати їхній вміст, і т. д. Сторінка документації і демо-сторінка додаються.

Властивість `subview` працює схожим чином, але в цьому випадку до елементів списку можна додати інші компоненти. Наприклад, для того, щоб додати форму, можна використовувати такий код:

view:"datatable",
/* додаємо subview */
subview:{ 
/* опис форми */ 
view:"form",
elements:[
{ /* перший елемент форми */ },
{ /* другий елемент форми */}
]
},
/* ініціалізація subview */
on:{
onSubViewCreate:function(view, item){
view.setValues(item);
}
},

В результаті можна отримати щось на зразок цього:

Subview

Сторінка документації перебуває тут.

Імпорт та експорт
У новій версії з'явилися додаткові можливості імпорту та експорту.

Тепер можна додати в додаток можливість переглядати PDF і Excel. Для цього потрібно використовувати компоненти pdfviewer і excelviewer. Як це виглядає на практиці, можна зрозуміти з цих демок: PDF Viewer, Excel Viewer.

Також з'явилася можливість експорту в Excel, доступна для всіх дата-компонентів. Спробувати можна демо-сторінці. Збережений файл можна надалі використовувати як джерело даних для інших компонентів.

Можливість експорту в PNG може стати в нагоді, якщо потрібно зберегти графік для подальшого використання. Демка перебуває тут.

Замість висновку
На цей раз крім нововведень, що стосуються власне працездатності фреймворку, розробники запропонували, по суті, ще два можливі способи того, як цей фреймворк можна вжити.

Крім цих нововведень, доступні і інші нововведення. Повний список можна подивитися на цій сторінці. За традицією, додається досить великий список апдейтів і багфіксів.

Тим, хто вже використовує Webix, може стати в нагоді ось цей гайд по міграції.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.