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

20.04.2020

496

Від автора: дуже часто створюючи сценарії з використанням мови 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(), Ви тим самим формує структуру майбутнього проекту. У прикладі вище використані наступні властивості:

Властивість rows, визначає ряди додатка і за великим рахунком, ряд – це окрема комірка масиву rows, в якій розташований об’єкт. Знову ж властивості даного об’єкта будуть визначати вміст ряду.

Для завдання розмірів створюваних рядів, Ви можете використовувати властивості width і height (ширина і висота відповідно).

container – селектор елемента, в який буде поміщений результат роботи фреймворка.

type – тип роздільника рядів. Підтримувані значення — «line» (за замовчуванням), «head», «space», «wide» і «clean» (без рамки).

template – простий текст, який буде відображений у певному елементі.

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

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

Властивість 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, визначає необхідний елемент майбутньої форми:

text – текстова область;

textarea – поле додавання тексту великого обсягу;

checkbox – елемент чекбокс;

radio – радіо-кнопка;

button – кнопка.

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

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

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

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