Layout Designer: How it Works

Some developers may dread using Layout Designer or project files as if they are a black box whose internal workings are unknown. However, there is no reason to feel awkward about it as the project file structure is pretty simple. In this case study you will learn about the Layout Designer general structure and functionalities.

A project file is basically the Designer_Project serialized PHP class encoded in base64.

All work with the project revolves around using this class API. Once changes have been made, the object is serialized, encoded and saved. Designer_Storage_Adapter, which is Designer_Storage_Adapter_File in the default setup, is responsible for uploading and saving data.

The core of the Designer_Project structure is the Tree class – a tree like element structure. The element tree contains objects of DVelum wrapper for ExtJs library and Ext_Object class objects.

Open any Designer project and click the debugger button to learn about the internal structure of a specific project file.

The Layout Designer is nothing else but a UI for Designer_Project API. Various actions in the Designer are invoked by its controllers, which eventually – by means of an API - introduce changes into the Designer_Project class object.

To grasp the idea, have a look at the meta code below (abstract description):

// create a new project
$project = new Designer_Project();
// create an Ext_Panel wrapper object implementing Ext.panel.Panel wrapper
$panel = Ext_Factory::object('Panel',array(
       	'width'=>100,
       	'height'=>200,
       	'title'=>'My Panel',
       	'layout'=>'fit'
));

// assign a unique id to the panel, i.e. give it a name
$panel->setName('myPanel');
// add a panel to the object
$project->addObject(0, $panel);
// create a code generator instance
$generator = new Designer_Project_Code($project);
// get the project Js code
$js = $generator->getCode();
 
 
//The resulting Js code looks like this:
var myPanel = Ext.create('Ext.panel',{
   width:100,
   height:200,
   title:'My Panel',
   layout:'fit'
});

So, this is basically what the Layout Designer does without you manually writing the code.

More examples of project code generation can be found in the module generator, which creates a Layout Designer project based on the ORM object structure. Have a look at the Backend_Modules_Generator.

Embedded in a project, Ext_Object_xxx objects, depending on their role, implement this or that functionality generating JS code of ExtJs components, contain lists of available properties and events and, most importantly, can create JS code based on these settings.

As embedded project objects are unaware of each other, the Designer_project_Code class helps to generate the project code and connect these elements on the JS level. Analyzing the project structure, Designer_Project class binds its elements’ code and produces the resulting script, i.e. arranges the code of the elements.

You can find object descriptions, their property and method wrappers in the library/Ext directory.

If needed, the interface generator may be improved to create a project based on your preferences (Backend_Modules_Generator).