Guiber Prototype

Что такое Guiber? Это Graphic User Interface Builder. Точнее, это всего-лишь прототип и попытка решить одну маленькую проблему, которую я заметил уже не в одном проекте.

Как вы собираете интерфейс? Точнее, как вы подбираете координаты для элементов/картинок/кнопок/текстовых полей и т.п.? Я видел и xml-файл(или любой другой конфигурационный файл), который программист заполняет вручную и потом некий класс на основании этого располагает элементы, пробовал и создание gui в Flash IDE и потом уже «натягивание» функционала в коде, которое тоже далеко не идеально, видел и задание значений x/y вручную прямо в коде. Xml и ручное введение равным образом имеют негативную сторону — нужно каждый раз запускать и «прицеливаться» чтобы построить интерфейс. Во Flash IDE, конечно, можно делать интерфейс, но в этом подходе есть ряд мелкий недостатков. Возможно есть и четвертый и пятый метод, о котором я не знаю. Но у меня (и не у меня одного) нет никакого желания вместо того, чтобы создавать информационные решения подбирать координаты x и y для элементов интерфейса. (Я сейчас не говорю о Flex).

Этот пост написан в основном, чтобы получить фидбек и узнать, насколько подобное решение будет кому-то полезно.

Итак, что делает Guiber.

Guiber получает на вход swc-библиотеки, позволяет расположить элементы и генерирует as3/xml расположения этих элементов. Т к. это прототип, делается это все очень примитивно и урезанно.

Рассмотрим пример. Путь у нас будет библиотека с 4 элементами:


Создадим swc-файл AssetsLibrary.swc:

package {
	public class Assets {
		[Embed(source="../assets/background.png")]
		public var BackgroundAsset:Class;

		[Embed(source="../assets/blueButton.png")]
		public var BlueButtonAsset:Class;

		[Embed(source="../assets/orangeButton.png")]
		public var OrangeButtonAsset:Class;

		[Embed(source="../assets/closeButton.png")]
		public var CloseButtonAsset:Class;

	}
}

Теперь этот файл нужно положить в папку swc в папке Guiber’а. Запускаем Guiber и нажимаем Load SWC и располагаем элементы.

После этого остается только нажать Project->Generate AS3 code и мы получим сгенерированный код:

package com.guiber.assets {
	import flash.display.Sprite;
	public class UnknownAsset extends Sprite {
			public function UnknownAsset() {
				super();
				init();
			}
			
			public function init():void {
				// instance460
				var instance460:Assets_BackgroundAsset = new Assets_BackgroundAsset();
				instance460.name = "instance460";
				instance460.x = 1;
				instance460.y = 81;
				addChild(instance460);
				
				// instance491
				var instance491:Assets_BlueButtonAsset = new Assets_BlueButtonAsset();
				instance491.name = "instance491";
				instance491.x = 15;
				instance491.y = 252;
				addChild(instance491);
				
				// instance522
				var instance522:Assets_OrangeButtonAsset = new Assets_OrangeButtonAsset();
				instance522.name = "instance522";
				instance522.x = 170;
				instance522.y = 252;
				addChild(instance522);
				
				// instance553
				var instance553:Assets_CloseButtonAsset = new Assets_CloseButtonAsset();
				instance553.name = "instance553";
				instance553.x = 283;
				instance553.y = 96;
				addChild(instance553);
				
			}
	}
}

На этом действия прототипа заканчивается. Спасибо всем за внимание. Жду с нетерпением feedback!

2011.11.19