WebIx быстрое создание страниц при помощи JavaScript

WebIx быстрое создание страниц при помощи JavaScript

От автора: очень часто создавая скрипты с использованием языка JavaScript, необходимо отображать результат в определенном виде. При этом если данных не много мы с легкостью сможем добавить их в один из существующих блоков сайта, ну или, по крайней мере, создать данный блок. Но что если скрипт формирует огромное количество различной информации, для отображения которой одного блока просто не достаточно.

автор

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

Меня зовут Виктор Гавриленко, по образованию я инженер электромеханик. Еще учась в институте, начал увлекаться компьютерными технологиями и программированием, на протяжении двух лет усиленно занимаюсь разработкой интернет сайтов и веб-программированием. Увлекаюсь написанием небольших скриптов на языке PHP, в связке базами данных MySQL, SQLite, неплохо знаю такие движки как WordPress, Drupal, Joomla.

скачать исходникискачать урок

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

Итак, как было сказано выше WebIx – это JavaScript фреймворк, который значительно облегчает создание приложений с адаптивным дизайном. При этом он очень легок в освоении, хорошо документирован и позволяет создавать сложные и интерактивные веб-приложения. Причем он сравнительно мало весит и обладает высоким быстродействием.

Помимо этого, WebIx хорошо интегрируется с популярными библиотеками, такими как Backbone.js, AngularJS и конечно же, всем известная jQuery. Официальный сайт фреймворка вы найдете по следующей ссылке.

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

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

<link rel="stylesheet" href="js/codebase/webix.css">
<script src="js/codebase/webix.js"></script>

На этом установка библиотеки завершена, а значит, мы можем приступать к работе, используя ее функционал. К тестовой странице, я подключил пустой файл 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.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", 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.

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 предлагает достаточно интересный и удобный в работе функционал, а значит, если он Вас заинтересовал – используйте его в своих наработках.

На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree