Перейти к содержимому


w2ui библиотека для построения ui

Автор wondertalik, 09 янв. 2016 00:27
w2ui ui create

Сообщений в теме: 10

#1 wondertalik

    Активный участник

  • Пользователи
  • PipPipPip
  • 1 159 сообщений
  • Пол:Мужчина
  • Город:Кривой Рог, Украина

Отправлено 09 Январь 2016 - 00:27

В целом топик больше для разработчиков. Довольно часто в проектах приходится строить отчеты под ключ. Достойной библиотекой является w2ui. Документация достаточно хороша. Скрин1 , Скрин2 того, что можно получить с использованием этой либы. Весь интерфейс на js/html, подгрузка данных ajax.

Сообщение отредактировал wondertalik: 09 Январь 2016 - 00:32

#2 Александр Пономарев

    Активный участник

  • Пользователи
  • PipPipPip
  • 435 сообщений
  • Пол:Мужчина
  • Город:Таганрог

Отправлено 10 Январь 2016 - 21:56

Что-то попытка залить пример разметки во внешний файл clientbase к удаче не привел, в отличие, например от jQuery mobile на котором можно при помощи clientbase делать весьма симпатичные сервисы для мобильных телефонов при помощи ajax.

#3 wondertalik

    Активный участник

  • Пользователи
  • PipPipPip
  • 1 159 сообщений
  • Пол:Мужчина
  • Город:Кривой Рог, Украина

Отправлено 11 Январь 2016 - 01:24

Просмотр сообщенияАлександр Пономарев (10 Январь 2016 - 21:56) писал:

Что-то попытка залить пример разметки во внешний файл clientbase к удаче не привел, в отличие, например от jQuery mobile на котором можно при помощи clientbase делать весьма симпатичные сервисы для мобильных телефонов при помощи ajax.
Я не преследовал цель делать мобильные интерфейсы. Имхо предпочитаю нативные клиенты посредством апи. А подключить библиотеку проблем не вижу, постоянно использую.

#4 CbCoder

    Активный участник

  • Программист ООО "КБ"
  • PipPipPip
  • 8 761 сообщений
  • Пол:Мужчина
  • Город:Казань

Отправлено 11 Январь 2016 - 11:25

Интересно, надо поизучать на досуге. А нет какой-нибудь русскоязычной статьи для первичного обзора?

#5 wondertalik

    Активный участник

  • Пользователи
  • PipPipPip
  • 1 159 сообщений
  • Пол:Мужчина
  • Город:Кривой Рог, Украина

Отправлено 11 Январь 2016 - 11:39

Просмотр сообщенияCbCoder (11 Январь 2016 - 11:25) писал:

Интересно, надо поизучать на досуге. А нет какой-нибудь русскоязычной статьи для первичного обзора?
Честно сказать, даже не искал. Мне хватило документации и примеров из демо. Немного в ступор ушел с локализацией и иконками, но потом понял что их просто нужно подключить и все. Пример например, доп. действия могу выложить, если требуется.

#6 CbCoder

    Активный участник

  • Программист ООО "КБ"
  • PipPipPip
  • 8 761 сообщений
  • Пол:Мужчина
  • Город:Казань

Отправлено 11 Январь 2016 - 12:27

Да по документации то более-менее понятно. Мне скорее интересно обзорное описание, например чем от того же бутстрапа отличается. Документация - она уже для тех, кто знает для чего ему это все нужно.

#7 wondertalik

    Активный участник

  • Пользователи
  • PipPipPip
  • 1 159 сообщений
  • Пол:Мужчина
  • Город:Кривой Рог, Украина

Отправлено 11 Январь 2016 - 12:41

Просмотр сообщенияCbCoder (11 Январь 2016 - 12:27) писал:

Да по документации то более-менее понятно. Мне скорее интересно обзорное описание, например чем от того же бутстрапа отличается. Документация - она уже для тех, кто знает для чего ему это все нужно.
Я бутстрап только мельком посмотрел, поэтому сравнивать сложно. Что касается самой либы, то + маленький порог вхождения, полное конфигурирование из файлов js, покрывает большинство пожеланий с лихвой. Есть конечно и минусы, с чем я столкнулся, в гридах не работает нативное контекстное меню браузера, если включить редактирование инлайн. Это пожалуй одно, чему я был удивлен и не очень рад.

#8 Александр Пономарев

    Активный участник

  • Пользователи
  • PipPipPip
  • 435 сообщений
  • Пол:Мужчина
  • Город:Таганрог

Отправлено 11 Январь 2016 - 19:37

Нельзя ли поподробнее расписать процесс подключения из-под clientbase.ru? Мне как раз нужно многооконный интерфейс сделать на вашем движке.

#9 wondertalik

    Активный участник

  • Пользователи
  • PipPipPip
  • 1 159 сообщений
  • Пол:Мужчина
  • Город:Кривой Рог, Украина

Отправлено 12 Январь 2016 - 12:41

Вот вам пример доп. действия

Код доп. действия

$pattern = <<<ST
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="noindex,nofollow">
<title>Рога и Копыта - Клиентская база</title>
<link rel="stylesheet" href="modules/lm/w2ui-1.4.3/w2ui-1.4.3.css" type="text/css">
<link rel="stylesheet" href="modules/lm/w2ui-1.4.3/font-awesome/font-awesome.css" type="text/css">
<script type="text/javascript" src="include/jquery/jquery.min.js"></script>
<script src="modules/lm/w2ui-1.4.3/w2ui-1.4.3.js"></script>
<script src="modules/lm/core/addclient/forms.js"></script>
<script src="modules/lm/core/utils.js"></script>
ST;
$pattern .= "<script>var user_id = ".$user['id']."; var csrf = '".$csrf."'; var client_id = ".$line['id']."</script>";
$pattern .= <<<ST_2
<HEAD>
<BODY>
<div id="layout" style="width: 100%; height: 700px;"></div>
</BODY>
</HTML>
ST_2;

echo $pattern;


utils.js
/***
* Блокировка экрана
* @param message текст сообщения
* @constructor
*/
function lockDisplay(message) {
	if(message == undefined)
		message = 'Загрузка';
	w2popup.open({
		modal: true,
		showClose: false,
		showMax: false,
		height: '300px',
		width: '400px'
	});
	w2popup.lock(message, true);
}
/**
* Разблокировка экрана
* @constructor
*/
function unlockDisplay() {
	w2popup.unlock();
	w2popup.close();
}

forms.js

var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;';
w2utils.locale('modules/lm/w2ui-1.4.3/locale/ru-ru.json');
var config = {
	places: [],
	forms: {
		id: "forms_write",
		ui: {
			name: 'forms_write',
			header: 'Фильтр',
			fields: [
				{
					name: 'brand', type: 'list', required: true,
					html: {
						caption: 'Бренд', span: 6
					},
					options: {
						items: [
							{id: '1', text: 'Jean d’Estrees'},
							{id: '2', text: 'Maria Galland'},
							{id: '3', text: 'Perle de Mer'}
						]
					}
				},
				{
					name: 'place_event', type: 'list',
					html: {
						caption: 'Место проведения', span: 6
					},
					options: {
						items: [
							{id: '1', text: 'Офис' },
							{id: '2', text: 'Выезд'},
							{id: '3', text: 'Командировка'}
						],
						selected: 1
					}
				},
				{
					name: 'contact', type: 'list',
					html: {
						caption: 'Контактное лицо', span: 6
					},
					options: {
						items: [
						]
					}
				}
			],
			onRender: function(event) {
				getContactListForClient(client_id);
			},
			actions: {
				Reset: function () {
					this.clear();
					w2ui[config.table.id].records = [];
					w2ui[config.table.id].refresh();
				},
				Search: function () {
					var validate_st = this.validate();
					if(validate_st.length == 0) {
						var brand_id = w2ui[config.forms.id].record.brand.id;
						getCoursesList(brand_id, client_id);
					}
				}
			}
		}
	},
	layout: {
		id: "main_layout",
		ui: {
			name: 'main_layout',
			panels: [
				{type: 'main', style: pstyle, content: '', size: '200'},
				{type: 'preview', style: pstyle, content: '', size: '470'}
			]
		}
	},
	table: {
		id: "list_events",
		ui: {
			name: 'list_events',
			header: "График обучения",
			show: {
				header: true,
				footer: true,
				toolbar: true,
				lineNumbers: true,
				toolbarReload: false,
				toolbarEdit: true
			},
			columns: [
				{field: 'recid', caption: 'id', size: '40px'},
				{field: 'place', caption: 'Место проведения', size: '120px'},
				{field: 'startDate', caption: 'Начальная дата', size: '120px'},
				{field: 'typeStudy', caption: 'Вид обучения', size: '100px'},
				{field: 'subject', caption: 'Тема обучения', size: '320px'}
			],
			onEdit: function(event) {
				w2confirm('Вы уверенны что хотите записать клиента на обучение?', function btn(answer) {
					if(answer == 'Yes') {
						//записываем клиента на обучение
					   // w2alert("На обучение успешно записан");
					 //   console.log(event);
						var course_id = event.recid;
						var brand_id = w2ui[config.forms.id].record.brand.id;
						var contact_id = w2ui[config.forms.id].record.contact.id;
						addClientToCourse(course_id, brand_id, client_id, contact_id);
					}
				});
			}
		}
	}
};
$(function () {
	var btn = w2obj.grid.prototype.buttons;
	btn.edit.caption = "Записать клиента на обучение";
	$('#layout').w2layout(config.layout.ui);
	w2ui[config.layout.id].content('main', $().w2form(config.forms.ui));
	w2ui[config.layout.id].content('preview', $().w2grid(config.table.ui));
});
/***
* Получение списка контактов
* @param brand
* @param client_id
*/
function getCoursesList(brand, client_id) {
	lockDisplay();
	$.ajax({
		type: 'POST',
		url: 'modules/lm/core/addclient/api.php',
		dataType: 'json',
		data: {_type: "getCourses", brand: brand, client_id: client_id, _user_id: user_id, csrf: csrf},
		success: function (response) {
			//console.log(response);
			if (response.status == 'done') {
				//сохраняем список мест
				config.places = response.data;
				var place_sel =  {id: '1', text: 'Офис', hidden: false};
				if(w2ui[config.forms.id].record.place_event != "") {
					place_sel = w2ui[config.forms.id].record.place_event;
				} else {
					w2ui[config.forms.id].record.place_event = place_sel;
				}
				var records = [];
				for(var key in config.places) {
					if(config.places[key].place == place_sel.text) {
						records.push(config.places[key]);
					}
				}
				//обновляем таблицу и форму
				w2ui[config.table.id].records = records;
				w2ui[config.table.id].refresh();
				w2ui[config.forms.id].refresh();
				unlockDisplay();
			} else {
				unlockDisplay();
				w2alert("Не удалось загрузить контент. Пожалуйста, обновите страницу");
			}
		}
	});
}
/**
* Получаем список контактных лиц
* @param client_id
*/
function getContactListForClient(client_id) {
	lockDisplay();
	$.ajax({
		type: 'POST',
		url: 'modules/lm/core/addclient/api.php',
		dataType: 'json',
		data: {_type: "getContactList", client_id: client_id, _user_id: user_id, csrf: csrf},
		success: function (response) {
			//console.log(response);
			if (response.status == 'done') {
				//формируем список контактов
				var contacts = [];
				for(var key in response.data) {
					var one = {id: response.data[key].id, text: response.data[key].name, hidden: false};
					if(response.data[key].main == 'Да') {
						w2ui[config.forms.id].record.contact = one;
					}
					contacts.push(one);
				}
				w2ui[config.forms.id].set('contact', {options: {items: contacts}});
				//обновляем форму
				w2ui[config.forms.id].refresh();
				$('button[name=Search]').addClass('btn-blue');
				unlockDisplay();
			} else {
				unlockDisplay();
				w2alert("Не удалось загрузить список контактных лиц. Пожалуйста, обновите страницу");
			}
		}
	});
}
function addClientToCourse(course_id, brand_id, client_id, contact_id) {
  //  lockDisplay();
	$.ajax({
		type: 'POST',
		url: 'modules/lm/core/addclient/api.php',
		dataType: 'json',
		data: {_type: "addClientToCourse", course_id: course_id,
			brand_id: brand_id, client_id: client_id, contact_id: contact_id, _user_id: user_id, csrf: csrf},
		success: function (response) {
			//console.log(response);
			if (response.status == 'done') {
   //			 unlockDisplay();
			   w2alert(response.data);
			} else {
	 //		   unlockDisplay();
				w2alert("Не удалось загрузить список контактных лиц. Пожалуйста, обновите страницу");
			}
		}
	});
}

структура файлов скрин

#10 Александр Пономарев

    Активный участник

  • Пользователи
  • PipPipPip
  • 435 сообщений
  • Пол:Мужчина
  • Город:Таганрог

Отправлено 10 Октябрь 2016 - 14:34

Я так понял, что этот вариант явно не для SAAS версии.

#11 wondertalik

    Активный участник

  • Пользователи
  • PipPipPip
  • 1 159 сообщений
  • Пол:Мужчина
  • Город:Кривой Рог, Украина

Отправлено 11 Октябрь 2016 - 15:49

Просмотр сообщенияАлександр Пономарев (10 Октябрь 2016 - 14:34) писал:

Я так понял, что этот вариант явно не для SAAS версии.
В чем проблема? На саас аккаунтах спокойно использовал.
Обратно в Разработчикам


Количество пользователей, читающих эту тему: 5

0 пользователей, 5 гостей, 0 анонимных

  1. Форум CRM программы Клиентская база
  2. → Форум программы Клиентская база
  3. → Разработчикам