Статья содержит описание графического метода, при помощи которого можно создавать композиции из объектов в различных областях знаний. Метод легко развивается и трансформируется под конкретную функциональность объектов. Язык реализации ActionScript 2.0, для больших проектов С++.

Описание задачи.

Предлагается метод и его реализация в виде программы, которая позволяет объединять визуальные объекты при помощи мыши в единую композицию, подобно тому, как это делается, например, в конструкторе SQL запросов Microsoft Access.

Демонстрация метода.

Загрузить демонстрационную версию программы можно отсюда (80 кб).

Выберем в качестве объектов композиции модели различных микросхем, а затем для демонстрации метода объединим их в некоторый узел. Отметим, что выбор данной области для демонстрации метода не имеет большого значения, просто это направление нам ближе.

В левой части загруженного приложения находится окно Tree с набором микросхем. Выберите несколько любых микросхем (далее объектов), щелкнув по каждой из них мышью. Расположите объекты на рабочем столе, так как Вы считаете нужным. Обратите внимание — объекты можно свободно перемещать, так как работает функция drag-and-drop.

Работает так же контекстное меню, причем работает оно избирательно. Если Вы щелкнете правой мышью на пустом месте области проектирования, то увидите множество пунктов системного меню. Если щелкнете над объектом или связью (о них чуть позже), то к системному меню добавятся новые подпункты. Выбрав подпункт «Delete Component», можно удалить объект с рабочего стола.

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

Если разрешение экрана Вашего монитора велико и работать трудно, включите нужное увеличение, и работать станет значительно удобнее. Сделать это можно либо из пункта View Flash Player, либо из контекстного меню.

Отметим, что любая линия связи может иметь какое угодно число составных частей (звеньев). Чтобы изменить форму линии, достаточно щелкнуть по ней левой кнопкой мыши, затем, не отпуская кнопки, переместить мышь в любое место рабочего стола и отпустить. Обратите внимание, что цвет редактируемой линии изменяется. Выбрав подпункт «Delete Line» в контекстном меню, можно удалить ненужную линию связи.

Объект, объединенный в схему, может быть перенесен в любую точку стола проектирования, линии связи последуют за ним, причем, изменяться будет только последнее (первое) звено cвязи. Таким образом сохраняется единое целое конструкции.

Поместив на экран некоторое число компонентов, и связав их можно получить приблизительно такую картину. Если приложить усилие и выровнять компоненты и связи, то получим читаемую схему узла. Итак, мы имеем возможность связать объекты. Но что это дает?

Каждый объект (в данном случае модель микросхемы) имеет свою функциональность, которая реализована в виде класса с определенным набором свойств, методов, обработчиков событий. Связывая объекты программа конструирует модель композиции. В данном случае мы получим модель узла, собранного из моделей микросхем, в другом случае - это может быть SQL запрос, в третьем - еще что-то. Это зависит от выбранной области знания и требует создания соответствующего программного модуля проектирования.

Примечание. Статья описывает лишь метод объединения объектов и никак не затрагивает вопросы проектирования узлов на микросхемах.

Как устроены связи.

Связи между объектами — это суть наследники класса MovieClip, создаются динамически в процессе рисования и имеют обработчики событий onPress(), onRelease(), а также обработчик контекстного меню itemHandler(_obj, menuItem), где:

• _obj — имя выбранной пользователем связи;
• menuItem — подпункт контекстного меню.

Количество звеньев в связи (в линии) ничем не ограничивается, другими словами, линия может быть как угодно сложной.

Примечание. В определениях «как угодно сложной» или «ничем не ограничивается» есть немного от лукавого. Более точное определение может звучать так: «сложность композиции зависит от мощности Вашего компьютера».

Все связи сохраняются в двух специальных массивах: arrayLines({startNameElement, endNameElement, lineObject ,,,,}) и arrayPoint({nameLine, x,y }); где,

• startNameElement — стартовый элемент;
• endNameElement — финишный элемент;
• lineObject, nameLine — имя линии;
• x, y — координаты звена линии.

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

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

Как устроены объекты.

Объекты, между которыми проводятся связи, так же наследники класса MovieClip. Создаются они динамически из одноименных классов при выборе элемента внутри компонента Tree. Например:

la3 = new la3(nameLa3, numberLayer, numberLa3);

Однако отметим, что в качестве объектов могут использоваться любые визуальные компоненты, имеющие обработчики onPress(), onRelease(), onMouseUp() а не только наследники MovieClip. Но при этом нужно иметь в виду, что работы может значительно прибавиться.

В качестве «горячих областей» (hitArea) применяются также MovieClip. Количество горячих областей внутри объекта никак не ограничивается, однако, координаты их, определяются при создании класса объекта.

Несмотря на то, что каждый объект имеет несколько «горячих» областей, обработчик событий для всех дочерних областей объекта один. Реализовано это, например, для события onPress следующим образом:

function _onPress(parametr){
	// Переберем все дочерние MovieClip	элемента _this
	var _this = parametr;
	var obj:Object;
	for(j in _this){
		if((typeof (_this[j]) == "movieclip")) {
		obj= _this[j];
			// Найдем горячую область, по которой щелкнули мышью
			if (obj.hitTest(_root._xmouse, _root._ymouse, true)) {...}
							
		}
		.........
	}
}

где parametr — несущий MovieClip для дочерних областей.

Несколько слов о среде проектирования.

В состав основного модуля программы входит небольшое число функций, перечислим некоторые из них: onLoad, onEnterFrame , и другие.

Общий объем текста программы без учета классов микросхем содержит около 600 строк.

Чего нет в демонстрационной версии программы?

Много чего, например:

• Автоматической привязки компонентов и связей к линиям сетки, что значительно упрощает рисование;
• Изменяемой размерности линий сетки;
• Наличия в меню реализованных пунктов Select, Copy, Paste;
• Сохранения и восстановления нарисованной схемы узла на диске.

Будем считать это заданием на будущее.

Всего хорошего, Евгений.