WebIx швидке створення сторінок за допомогою JavaScript

Від автора: дуже часто створюючи сценарії з використанням мови JavaScript, необхідно відображати результат у певному вигляді. При цьому якщо даних не багато ми з легкістю зможемо додати їх до одного з існуючих блоків сайту, ну або, принаймні, створити даний блок. Але що якщо скрипт формує величезна кількість різної інформації, для відображення якої одного блоку просто не достатньо.

Автор: Віктор Гавриленко Мене звати Віктор Гавриленко, за освітою я інженер електромеханік. Ще навчаючись в інституті, почав захоплюватися комп’ютерними технологіями та програмуванням, протягом двох років посилено займаюся розробкою інтернет-сайтів та веб-програмуванням. Захоплююсь написанням невеликих скриптів на мові PHP, у зв’язці базами даних MySQL, SQLite, непогано знаю такі движки як WordPress, Drupal, Joomla.

Тому на даному уроці, я хотів би розповісти Вам про фреймворку Webix, мови JavaScript, за допомогою якого можна швидко та легко реалізувати кроссбраузерное і інтерактивне веб-додаток. Причому воно успішно буде працювати як на десктопних так і на мобільних пристроях.

Отже, як було сказано вище WebIx – це JavaScript фреймворк, який значно полегшує створення додатків з адаптивним дизайном. При цьому він дуже легкий в освоєнні, добре документований і дозволяє створювати складні і інтерактивні веб-додатки. Причому він порівняно мало важить і володіє високою швидкодією.

Крім цього, WebIx добре інтегрується з популярними бібліотеками, такими як Backbone.js, AngularJS і звичайно ж, всім відома jQuery. Офіційний сайт фреймворку ви знайдете за цим посиланням.

Зверніть увагу – на головній сторінці в самому верху, розташовані посилання на офіційну документацію по WebIx. Для скачування останньої актуальної версії фреймворку, клікаємо по кнопці “Завантажити” і переходимо на сторінку вибору версії – платною або безкоштовною. Традиційно платна версія має більш широким функціоналом, ніж безкоштовна, але часом її цілком достатньо для реалізації типових задач, а значить, і викачуємо.

Вміст скачаного архіву, а саме каталог codebase, маємо в папці зберігання JavaScript. Далі, до цікавій сторінці, необхідно підключити стилі, а також основне логічне ядро фреймворку WebIx.

На цьому установка бібліотеки завершена, а значить, ми можемо приступати до роботи, використовуючи її функціонал. До тестовій сторінці, я підключив порожній файл script.js, в якому ми будемо писати код.

Для ініціалізації компонентів фреймворку Webix, необхідно використовувати метод конструктор ui(), який може бути додатково доданий в функцію обробник методу ready(). У цьому випадку Ви можете бути на 100% впевнені, що виконання коду розпочнеться лише після повного завантаження сторінки (еквівалент події body.onLoad).

webix.ready(function(){
webix.ui({
//код скрипта
});
});

Для формування структури майбутнього проекту, необхідно використовувати компонент Webix Layout. Який задає каркас додатка, розділяючи його на колонки — cols і лави – rows. Приміром, якщо в майбутньому проекті необхідно реалізувати три колонки, необхідно використовувати наступний код.

webix.ready(function(){
webix.ui({
container:”wrapper”,
type:’head’,
height: 200,
width: 800,
rows:[
{
template:”Ряд № 1″
},
{
template:”Ряд № 2″
},
{
template:”Ряд № 3″
},
] });
});

Зверніть увагу, що по суті передаючи необхідні параметри при виклику методу ui(), Ви тим самим формує структуру майбутнього проекту. У прикладі вище використані наступні властивості:

При цьому на екрані ми побачимо наступне.

Далі давайте у другий ряд, додамо три колонки, для цього використовуємо наступний код:

webix.ready(function(){
webix.ui({
container:”wrapper”,
type:’head’,
rows:[
{
template:”Ряд № 1″
},
{
cols:[
{
template:”Колонка №1″, width:200
},
{
template:”Колонка №2″, width:500
},
{
template:”Колонка №2″
}
]
},
{
template:”Ряд № 3″
}
]
});
});

Властивість cols, формує колонки майбутнього проекту. При цьому кожна колонка це об’єкт в окремій комірці масиву. Для створення форм у фреймворку WebIx, необхідно використовувати спеціальне властивість view, яке визначає вид відображуваних даних.

webix.ready(function(){
webix.ui({
container:”wrapper”,
type:’head’,
rows:[
{
template:”Ряд № 1″
},
{
cols:[
{
template:”Колонка №1″, width:200
},
{
template:”Колонка №2″, ширина:600
},
{
/*template:”Колонка №3″*/
view”form”, id:”form1″, elements:[
{
view:”text”,name:”title”,placeholder:”Введіть заголовок”, align: center”,width:250
},
{
view:”text”,name:”email”,placeholder:”Введіть Email”, align: center”
},
{
view:’checkbox’, labelRight:”Галочка”, name:”accept”
},
{
view:’button’, value:”Надіслати”, align: center”, click:”add_item”
}
]
}
]
},
{
template:”Ряд № 3″
}
});
});

Для формування форми, використовується властивість view, зі значенням form. При цьому, так само необхідно вказати ідентифікатор майбутньої форми – властивість id, і обов’язково визначити властивість elements, значення якого використовується масив, елементів майбутньої форми. Відповідно, в кожній комірці масиву, розташовується окремий елемент форми, що представляє собою об’єкт.

Значення властивості view, визначає необхідний елемент майбутньої форми:

Для створення списку певних елементів, властивість view, необхідно передати значення list.

var myData = [
{
title: “Елемент “,
number: “1”
},
{
title: “Елемент “,
number: “2”
},
{
title: “Елемент “,
number: “3”
},
{
title: “Елемент “,
number: “4”
}
];
webix.ready(function(){
webix.ui({
container:”wrapper”,
type:’head’,
rows:[
{
template:”Ряд № 1″
},
{
cols:[
{
template:”Колонка №1″, width:100
},
{
view:”list”,id:”myList”template:”#title# – #number#!”,select:true,data:myData
},
{
view”form”, id:”form1″, elements:[
{
view:”text”,name:”title”,placeholder:”Введіть заголовок”, align: center”,width:250
},
{
view:”text”,name:”email”,placeholder:”Введіть Email”, align: center”
},
{
view:’checkbox’, labelRight:”Галочка”, name:”accept”
},
{
view:’button’, value:”Надіслати”, align: center”, click:”add_item”
}
]
}
]
},
{
}
]
});
});

Зверніть увагу, що властивість template, визначає шаблон відображення даних в кожному елементі списку. При цьому в шаблоні можна використовувати спеціальні мітки, виділені символами #, значення яких сформовані у спеціальному масиві, заданому властивості data.

Як Ви бачите, фреймворк WebIx пропонує досить цікавий і зручний в роботі функціонал, а значить, якщо він Вас зацікавив – використовуйте його у своїх напрацюваннях.

На цьому даний урок завершено. Всього Вам доброго і вдалого кодування!!!