От автора: очень часто создавая скрипты с использованием языка JavaScript, необходимо отображать результат в определенном виде. При этом если данных не много мы с легкостью сможем добавить их в один из существующих блоков сайта, ну или, по крайней мере, создать данный блок. Но что если скрипт формирует огромное количество различной информации, для отображения которой одного блока просто не достаточно.
 |
Автор: Виктор ГавриленкоМеня зовут Виктор Гавриленко, по образованию я инженер электромеханик. Еще учась в институте, начал увлекаться компьютерными технологиями и программированием, на протяжении двух лет усиленно занимаюсь разработкой интернет сайтов и веб-программированием. Увлекаюсь написанием небольших скриптов на языке PHP, в связке базами данных MySQL, SQLite, неплохо знаю такие движки как WordPress, Drupal, Joomla. |
Поэтому в данном уроке, я хотел бы рассказать Вам о фреймворке Webix, языка JavaScript, при помощи которого, можно быстро и легко реализовать кроссбраузерное и интерактивное веб-приложение. Причем оно успешно будет работать как на десктопных так и на мобильных устройствах.
Итак, как было сказано выше WebIx – это JavaScript фреймворк, который значительно облегчает создание приложений с адаптивным дизайном. При этом он очень легок в освоении, хорошо документирован и позволяет создавать сложные и интерактивные веб-приложения. Причем он сравнительно мало весит и обладает высоким быстродействием.
Помимо этого, WebIx хорошо интегрируется с популярными библиотеками, такими как Backbone.js, AngularJS и конечно же, всем известная jQuery. Официальный сайт фреймворка вы найдете по следующей ссылке.
Обратите внимание – на главной странице в самом верху, расположены ссылки на официальную документацию по WebIx. Для скачивания последней актуальной версии фреймворка, кликаем по кнопке “Скачать” и переходим на страницу выбора версии – платной или бесплатной. Традиционно платная версия обладает более широким функционалом нежели бесплатная, но порой ее вполне достаточно для реализации типовых задач, а значит, ее и скачиваем.
Содержимое скачанного архива, а именно каталог codebase, располагаем в папке хранения JavaScript. Далее, к интересующей странице, необходимо подключить стили, а также основное логическое ядро фреймворка WebIx.
|
1 2 |
<link rel="stylesheet" href="js/codebase/webix.css"> <script src="js/codebase/webix.js"></script> |
На этом установка библиотеки завершена, а значит, мы можем приступать к работе, используя ее функционал. К тестовой странице, я подключил пустой файл script.js, в котором мы будем писать код.
Для инициализации компонентов фреймворка Webix, необходимо использовать метод конструктор ui(), который может быть дополнительно добавлен в функцию обработчик метода ready(). В этом случае Вы можете быть на 100% уверенны, что выполнение кода начнётся только после полной загрузки страницы (эквивалент события body.onLoad).
|
1 2 3 4 5 |
webix.ready(function(){ webix.ui({ //код скрипта }); }); |
Для формирования структуры будущего проекта, необходимо использовать компонент Webix Layout. Который задает каркас приложения, разделяя его на колонки — cols и ряды – rows. К примеру, если в будущем проекте необходимо реализовать три колонки, необходимо использовать следующий код.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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 – простой текст, который будет отображен в определенном элементе.
При этом на экране мы увидим следующее.
Далее давайте во второй ряд, добавим три колонки, для этого используем следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
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, которое определяет вид отображаемых данных.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
webix.ready(function(){ webix.ui({ container:"wrapper", type:'head', rows:[ { template:"Ряд № 1" }, { cols:[ { template:"Колонка №1", width:200 }, { template:"Колонка №2", width: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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
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:"<strong>#title#</strong> - #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 предлагает достаточно интересный и удобный в работе функционал, а значит, если он Вас заинтересовал – используйте его в своих наработках.
На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!
