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

45

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

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

Автор: Віктор Гавриленко

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

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

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

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

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

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

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

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

Вміст скачаного архіву, а саме каталог 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 – простий текст, який буде відображений у певному елементі.

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

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

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

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

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

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

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

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

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

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

button – кнопка.

Для створення списку певних елементів, властивість 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 швидке створення сторінок за допомогою JavaScript

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

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