Принцип работы дизайнера интерфейсов

Многие разработчики опасаются дизайнера интерфейсов и файлов проектов как «Черного ящика», с которым в случае чего не понятно, что делать. Не стоит опасаться, структура файла проекта достаточно проста. В данном разделе вы узнаете об общей структуре и устройстве дизайнера.

Файл проекта представляет собой сериализованный объект класса Designer_Project, закодированный в base64.

Вся работа с проектом идет с использованием API этого класса, после внесения изменений объект сериализуется, кодируется и сохраняется на диск. За сохранение данных, а так же их загрузку, отвечает Designer_Storage_Adapter, в дефолтной настройке это Designer_Storage_Adapter_File.

Основой структуры Designer_Project является класс Tree - древовидное представление элементов. В дерево элементов размещаются объекты DVelum обертки для библиотеки ExtJs, объекты классов Ext_Object.

Открыв любой проект дизайнера интерфейсов и нажав на кнопку debugger можно ознакомится с внутренней структурой файла конкретного проекта.

Сам дизайнер интерфейсов представляет собой UI для Designer_Project API. Различные действия в дизайнере вызывают его контроллеры, которые в конечном счете, используя API, вносят изменения в объект класса Designer_Project.

Для упрощения понимания приведем мета код (абстрактное описание):

	 	 	 	
// создали новый проект
$project = new Designer_Project();
// создали объект обертки Ext_Panel реализующий обертку для Ext.panel.Panel
$panel = Ext_Factory::object('Panel',array(
           'width'=>100,
           'height'=>200,
           'title'=>'My Panel',
           'layout'=>'fit'
));
// назначаем панели уникальный идентификатор, проще говоря имя
$panel->setName('myPanel');
// добавили панель в проект
$project->addObject(0, $panel);
// создали экземпляр генератора кода
$generator = new Designer_Project_Code($project);
// получили Js код проекта
$js = $generator->getCode();


//В результате в js содержится что-то типа:
var myPanel = Ext.create('Ext.panel',{
   width:100,
   height:200,
   title:'My Panel',
   layout:'fit'
});

Именно подобные вещи и делает дизайнер интерфейсов, без необходимости написания кода вручную.

Более подробно с примерами генерации кода проекта можно ознакомиться в генераторе модулей (он создает проект дизайнера интерфейсов на основе структуры ORM-объекта), посмотрите класс Backend_Modules_Generator.

Вложенные в проект объекты Ext_Object_xxx, в зависимости от их предназначения, реализуют тот или иной функционал генерации JS-кода компонентов ExtJS, содержат списки доступных свойств и событий, а главное, на основе этих настроек могут создать свой JS-код.

Поскольку вложенные в проект объекты не имеют представления друг о друге, для того чтобы сгенерировать код проекта и связать эти компоненты на уровне JS, используется вспомогательный инструмент - класс Designer_Project_Code. Анализируя структуру проекта Designer_Project, класс связывает код его элементов и выдает результирующий код скрипта (занимается расфасовкой кода элементов).

Описание объектов, обертки их свойств и методов находятся в папке library/Ext.

При необходимости можно доработать генератор интерфейсов, чтобы он создавал проект на основе ваших предпочтений (Backend_Modules_Generator).