UI Интерфейс (Генератор SQL запроса)

[Rix]

Привет всем!

В общем появилась такая идея мысль написать UI web-интерфейс по составлению SQL запросов.

Примерная идея такая:

1. Используя средства PHP создаем JS массив с именами таблиц и полей

2. Используя полученный массив строится отдельные таблички для каждой таблицы.

3. Затем используя Drag&Drop или др. способов делаются объединение таблиц по указанным ключам и тип соединения (JOIN, LEFT JOIN, и т.д. думаю меня поняли (: ), выделяются галочками поля, которые будут использоваться в запросе и т.д.

Что то типа как тут

Сам я думаю тут надо использовать JQuery,

Сделать отдельные блоки с полями и галочками это фигня) а вот как сделать Drag&Drop и при этом создать связь?

У кого какие идеи?

[Rix]

А давайте говорить более конструктивно, а насчет идеи, идею я изложил, у меня был вопрос "а вот как сделать Drag&Drop и при этом создать связь?", если не знаете и у вас нет ИДЕЙ как это реализовать, тогда лучше ничего не пиши!

З.Ы извиняюсь за грубость, просто порой подобные "троли" добивают, показывая свою не сущность

[Быколай]

А давайте говорить более конструктивно, а насчет идеи, идею я изложил, у меня был вопрос "а вот как сделать Drag&Drop и при этом создать связь?", если не знаете и у вас нет ИДЕЙ как это реализовать, тогда лучше ничего не пиши!

З.Ы извиняюсь за грубость, просто порой подобные "троли" добивают, показывая свою не сущность

прошу прощения, не сразу вчитался в пост. потёрто.

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

[Rix]

Да, все ок) я рад что это выяснили

Но теперь бы хотелось перейти все же к заданию.

Я по бывал на нескольких форумах, и многие начинали подобную тему, но как я понял ни кто не смог это сделать, либо просто не отписали Тема меня заинтересовала, и она на мой взгляд очень интересная и полезна, может пригодится

Я хочу ее задействовать в отчетной системе, для простых пользователей, которые не знаю SQL и т.д. чтобы было "тупо" и просто соединил, выбрал, и нажал сформировать и все

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

Сейчас к сожалению нет прототипа, но сейчас начинаю потихоньку писать, но попробую объяснить наглядно. В первом посте, я выложил скрипт программы Navicat. Примерно такой же интерфейс я бы хотел написать только веб. по поводу дропа, видишь там соединения в виде линий между полями. они создаются путем переноса одного поля к другому. ( надеюсь понятно изъяснился (: )

[s0rr0w]

Сделать отдельные блоки с полями и галочками это фигня) а вот как сделать Drag&Drop и при этом создать связь?

У кого какие идеи?

SVG или Canvas используйте для рисования линий.

Наверное, лучше всего будет вообще все на SVG сделать.

[Rix]

интересно SVG ни когда не использовал, но я посмотрел в принципе то что надо, теперь как бы это красиво объединить со всем остальным )

Наверное, лучше всего будет вообще все на SVG сделать.

Скажи а можно рисуя линию так:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

задавать ей точки динамические, то есть если я нарисую линию и перемещу блок линия останется. а блок уже в другом месте, хотелось бы узнать можно ли привязывать к объекту линию?

[Great Rash]

1) Есть блок, у него есть ширина и высота.

2) Находим координаты середины блока. x + половина ширины, y + половина высоты

3) Привязываем начало линии (x1, y1) к середине одного блока и конец линии (x2, y2) к середине другого блока.

[s0rr0w]

задавать ей точки динамические, то есть если я нарисую линию и перемещу блок линия останется. а блок уже в другом месте, хотелось бы узнать можно ли привязывать к объекту линию?

Автоматически - никак. При изменении координат блока нужно перерисовать все линии. Даже во время перемещения это делать надо.

[Great Rash]

Можно во время перемещения не перерисовывать, перерисовывать только в момент дропа. А в момент драга тащить только прозрачный "клон" объекта. Это сэкономит ресурсы.

[Rix]

Я что то парюсь, не могу ни как понять как можно сделать драг-дроп на объект и получить свойства объекта на который я переношу.

в общем сделал 2 блока с полями, кинул JQ и использовал "draggable". И при событии "stop", я получаю свойства, перерыл каждый метод и свойства ничего не нашел, как можно сделать, и по моему я не в ту сторону пошел.

Выклал то что есть, посмотрите что сюда можно добавить чтобы получить нужный мне объект.

Ссыль

Вроде сделал шаг, нашел способ получить объект на который я кидаю другой объект)))) па-албанский чуть чуть объясни)

script.js

...
	$( ".field" ).draggable({
		helper: "clone",
		stop: function(event, ui) {

			//alert(fnShowProps(event.currentTarget.head  , "event.currentTarget"));
			//alert($.trim($(event.parentNode).text()));
		}
	}).droppable({
			drop: function( event, ui ) {
				$(this).text($(ui.draggable.context).text());
				//alert(fnShowProps(ui.draggable.context, "ui.draggable"));
			}
		});
...

Возникла проблема, с SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="0" x2="100" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

пишу этот код, он его вставляет как то не по понятиям, в общем картинка все покажет

хотя как я понимаю он должен как то иначе отрисоваться, да?

Edited March 19, 2012 by Rix

[Rix]

нашел плагин по работе SVG. но что то не пойму почему он не работает

Jquery SVG

походу где то что то забыл и туплю)

Edited March 19, 2012 by Rix

[Great Rash]

Проще скачать библиотеку raphael.js. Для SVG лучше ничего нет + кроссбраузерно для ИЕ6+

Тут инфа. Тут практически готовый пример.

[Rix]

разобрался с Raphael но, там такая фишка что с начало нужно создать область для рисования, а что если у меня размер страницы динамический... и немного не удобно его так использовать, а если указываю всю страницу, он все накрывает собой и ничего не дает тыкнуть) как быть?

Если конечно не сделать страницу статикой, и четко его вставлять между блоками. но это помоему чуть не очень, а сама библиотека суперская спс)

http://us.ua/655319/ - хелп ми)

поправил немного Js код, но сейчас вижу проблему с определением координат объекта, как тут быть?

$(document).ready(function(){

	var x1,y1,x2,y2;
	var paper = Raphael(200, 0, 200, 200);

	$( ".field.isok" ).draggable({
		helper: "clone",
		stop: function(event, ui) {
			x1 = event.target.offsetLeft;
			y1 = event.target.offsetTop;
		//	alert(fnShowProps(event.target, "event.target"));
		}
	}).droppable({
			drop: function( event, ui ) {
				//$(this).text($(ui.draggable.context).text());
				x2 = $(ui.draggable.context).offset().left;
				y2 = $(ui.draggable.context).offset().top;
				//alert(fnShowProps(ui.offset, "ui.offset"));
				$("#log").append(x1 + " x " + y1 + " : " + x2 + " x " + y2 + "<br/>");
				var path = paper.path("M" + x1 + "," + y1 + " L"+ x2 + "," + y2);
			}
		});

});

[Great Rash]

разобрался с Raphael но, там такая фишка что с начало нужно создать область для рисования, а что если у меня размер страницы динамический... и немного не удобно его так использовать, а если указываю всю страницу, он все накрывает собой и ничего не дает тыкнуть) как быть?

Высчитывать размер области при ресайзе окна? Нельзя задать 100% ширину и высоту?

[Rix]

Высчитывать размер области при ресайзе окна? Нельзя задать 100% ширину и высоту?

ответ:

а если указываю всю страницу, он все накрывает собой и ничего не дает тыкнуть)

[br3t]

Вставить плавающий див поверх области рисования?

[Rix]

Вставить плавающий див поверх области рисования?

Я думал об этом, но это немного не правильный подход, должен же быть более верный способ решить эту проблему)

[Great Rash]

Я не понял, там же SVG, т.е. все ссылки должны быть внутри области рисования. И надо отказаться от jQuery, потому что все механизмы (дра и дроп и т.п.) есть уже внутри raphael. Полазьте по другим демкам, там много примеров, посмотрите как они устроены.