xtDojoPlugin. Combining dojo with the symfony framework

Hello% username%.

Let me introduce you to xtDojoPlugin for the symfony framework version 1.2 and higher. The plugin allows you to use dojo features in any project written on the symfony framework. The idea of ​​creating this plugin came after the solutions found on the symfony website did not satisfy my requirements. Two dgDojoPlugin and sfDojoPlugin plug-ins were found on the official website.

Let's take a quick look at the possibilities of the available solutions.

Let's start with dgDojoPlugin . This plugin did not suit me for several reasons, but the main thing is the use of helpers and classes for displaying widgets. On the one hand, this may seem convenient, you don’t need to memorize a bunch of dojo attributes, but on the other hand, there will be too much PHP code in the templates, which is not always good. For example, here’s the code to get the BorderContainer and two ContentPane.

1. <?php echo dojo_border ( array ( 'design' => 'headline' , 'liveSplitters' => 'true' ) ) ?> <?php echo dojo_content_pane ( 'The Title' , array ( 'region' => 'top' , 'minSize' => 50 , 'splitter' => 'true' , 'style' => 'height: 50px;' ) ) ?> < h1 > I'm content! < / h1 > < / div > <?php echo dojo_content_pane ( 'Another Pane' , array ( 'region' => 'center' ) ) ?> < h1 > I'm more content! < / h1 > < / div > < / div >
2. <?php echo dojo_border ( array ( 'design' => 'headline' , 'liveSplitters' => 'true' ) ) ?> <?php echo dojo_content_pane ( 'The Title' , array ( 'region' => 'top' , 'minSize' => 50 , 'splitter' => 'true' , 'style' => 'height: 50px;' ) ) ?> < h1 > I'm content! < / h1 > < / div > <?php echo dojo_content_pane ( 'Another Pane' , array ( 'region' => 'center' ) ) ?> < h1 > I'm more content! < / h1 > < / div > < / div >
3. <?php echo dojo_border ( array ( 'design' => 'headline' , 'liveSplitters' => 'true' ) ) ?> <?php echo dojo_content_pane ( 'The Title' , array ( 'region' => 'top' , 'minSize' => 50 , 'splitter' => 'true' , 'style' => 'height: 50px;' ) ) ?> < h1 > I'm content! < / h1 > < / div > <?php echo dojo_content_pane ( 'Another Pane' , array ( 'region' => 'center' ) ) ?> < h1 > I'm more content! < / h1 > < / div > < / div >
4. <?php echo dojo_border ( array ( 'design' => 'headline' , 'liveSplitters' => 'true' ) ) ?> <?php echo dojo_content_pane ( 'The Title' , array ( 'region' => 'top' , 'minSize' => 50 , 'splitter' => 'true' , 'style' => 'height: 50px;' ) ) ?> < h1 > I'm content! < / h1 > < / div > <?php echo dojo_content_pane ( 'Another Pane' , array ( 'region' => 'center' ) ) ?> < h1 > I'm more content! < / h1 > < / div > < / div >
5. <?php echo dojo_border ( array ( 'design' => 'headline' , 'liveSplitters' => 'true' ) ) ?> <?php echo dojo_content_pane ( 'The Title' , array ( 'region' => 'top' , 'minSize' => 50 , 'splitter' => 'true' , 'style' => 'height: 50px;' ) ) ?> < h1 > I'm content! < / h1 > < / div > <?php echo dojo_content_pane ( 'Another Pane' , array ( 'region' => 'center' ) ) ?> < h1 > I'm more content! < / h1 > < / div > < / div >
6. <?php echo dojo_border ( array ( 'design' => 'headline' , 'liveSplitters' => 'true' ) ) ?> <?php echo dojo_content_pane ( 'The Title' , array ( 'region' => 'top' , 'minSize' => 50 , 'splitter' => 'true' , 'style' => 'height: 50px;' ) ) ?> < h1 > I'm content! < / h1 > < / div > <?php echo dojo_content_pane ( 'Another Pane' , array ( 'region' => 'center' ) ) ?> < h1 > I'm more content! < / h1 > < / div > < / div >
7. <?php echo dojo_border ( array ( 'design' => 'headline' , 'liveSplitters' => 'true' ) ) ?> <?php echo dojo_content_pane ( 'The Title' , array ( 'region' => 'top' , 'minSize' => 50 , 'splitter' => 'true' , 'style' => 'height: 50px;' ) ) ?> < h1 > I'm content! < / h1 > < / div > <?php echo dojo_content_pane ( 'Another Pane' , array ( 'region' => 'center' ) ) ?> < h1 > I'm more content! < / h1 > < / div > < / div >
8. <?php echo dojo_border ( array ( 'design' => 'headline' , 'liveSplitters' => 'true' ) ) ?> <?php echo dojo_content_pane ( 'The Title' , array ( 'region' => 'top' , 'minSize' => 50 , 'splitter' => 'true' , 'style' => 'height: 50px;' ) ) ?> < h1 > I'm content! < / h1 > < / div > <?php echo dojo_content_pane ( 'Another Pane' , array ( 'region' => 'center' ) ) ?> < h1 > I'm more content! < / h1 > < / div > < / div >

I think many will agree that we say the designer will be quite difficult to understand such templates.
')
Let's go to sfDojoPlugin . This plugin say relatively pleased me. It had several components: a filter for automatically connecting and versioning JS and CSS, console tasks for performing specific manipulations with the plugin through the console, and a couple of classes responsible for dojo behavior. Unfortunately this was not enough. For example, I will give the same section of code as for the plugin above.

1. < div dojotype = "dijit.layout.BorderContainer" design = "headline" liveSplitters = "true" >
2. < div dojoType = "dijit.layout.ContentPane" title = "The Title" region = "top" minSize = "50" splitter = "true" style = "height: 50px;" >
3. < h1 > I'm content! < / h1 >
4. < / div >
5. < div dojoType = "dijit.layout.ContentPane" title = "Another Pane" region = "center" >
6. < h1 > I'm more content! < / h1 >
7. < / div >
8. < / div >

With this code maker-up will be easier to understand. But in my opinion this is also not a very good decision.

Thus, not finding anything suitable for myself (I will not argue, maybe I was looking bad), it was decided to write my own plugin that meets all requirements. The following key objectives were set. So, the plugin should:

• be able to initialize the initial directory structure for your needs from the console
• be able to compile dojo js with the right parameters
• automatically integrate into the necessary templates and independently connect the necessary JS and CSS
• be able to work in DEV and PROD mode
• be able to work with templates without / using specials. dojo attributes

After setting all the goals and desires, work began on the plugin, which by this time has almost come to an end. The plugin passes the last test checks, to soon appear before the public. All goals were fully or partially implemented. The code is divided into several functional blocks, these are blocks of settings (config), handler (handler), tasks (task), filter (filter) and auxiliary classes. Consider all the more detailed.

1. The settings block is the main configuration file, where all paths to dojo JS files are specified, as well as some additional parameters
2. A handler block - contains a class designed to handle dojo.yml files that describe widgets and bind widgets to template elements. Details of this functionality will be described below.
3. Task block - commands executed through symfony cli. At this time, two commands are available with a minimum of parameters. The first is the symfony dojo: init initializes the initial directory structure and creates the necessary files. In the future, it is planned to remotely receive the dojo source codes and unpack them into the necessary folder; at this stage, this has to be done manually. The second symfony dojo: build command is responsible for compiling dojo JS for use in production. At this stage, no parameters are available for this command, everything is written manually. In the next versions this functionality will be developed.
4. Filter block - provides automatic connection of all the necessary dojo files, calls the handler and selects the data needed to display the page
5. Auxiliary classes perform service functions for the correct operation of the plugin.

Thanks to the handler and the filter, it was possible to achieve clean code in the templates and put all the descriptions of elements and widgets into a separate dojo.yml file. For the correct operation of the plugin, you need one main dojo.yml in the config directory of the symfony application and, depending on the need, in the folders of the modules, which can be both in the folder with the application, and in the folders of other plug-ins.
The main dojo.yml file has the following structure:

1. # <project_dir> / apps / <app_name> /config/dojo.yml
2. default : # identifier pointing to the main document structure
3. theme : # dojo theme box
4. name : 'dojo theme' # name of the theme used to display
5. css : [ 'css_file' , 'another_css_file' ] # optional element indicating the additional css files required for dojo
6. actions : # block of settings of akshinov in which dijit blocks will be used
7. all : [ group_name , another_group_name ] # is a required element indicating which blocks will be present in all excs
8. action_name : [ group_name ] # dijit groups to be used strictly in a specific action
9. dijits : # dijit groups settings block
10. group_name : # dijit group name
11. block_id : { dojotype : 'desired dojoType' } # bunch of block ID in the template and attributes
12. another_block_id : { dojotype : 'desired dojoType' } # bunch of block ID in the template and attributes
13. another_group_name : # name of dijit group

The optional dojo.yml is used to define a structure that changes from module to module and has the following structure:

1. # <project_dir> / apps / <app_name> / modules / <module_name> /config/dojo.yml
2. default : # is the same as the main file is used to override the description of the document, optional
3. all : # like the default block, the theme control block is missing. the configuration from this block is added to the main one without overriding it.

Thus, using this way of defining a structure, we get rid of the need to write dojo attributes in templates and the code I give above will look like this:

1. < div id = "borderConteiner" >
2. < div id = "topPane" title = "The Title" >
3. < h1 > I'm content! < / h1 >
4. < / div >
5. < div id = "centerPane" >
6. < h1 > I'm more content! < / h1 >
7. < / div >
8. < / div >

and will require the following definition in the dojo.yml file:

1. default :
2. theme : 'tundra'
3. actions :
4. all : [ 'layout' ]
5. dijits :
6. layout :
7. borderConteiner : { dojoType : 'dijit.layout.BorderContainer' , design : 'headline' , liveSplitters : 'true' }
8. topPane : { dojoType : 'dijit.layout.ContentPane' , region : 'top' , minSize : '50' , splitter : 'true' , style : 'height: 50px' }
9. centerPane : { dojoType : 'dijit.layout.ContentPane' , region : 'center' , title : 'Another Pane' }

Unfortunately, this solution does not completely eliminate the dojo attributes in the templates. There are moments, for example with a dynamic code, where at this stage it is necessary to use the usual definition, but I think that in the future we will be able to resolve this issue as well. As for the performance of this solution, it is subjectively at a high enough level, the plug-in will soon be available to the public and anyone will be able to assess the advantages and disadvantages on their own.

Instead of a conclusion: Within a couple of days, the release version of the plug-in will be prepared, let's say, the code will be cleaned and slightly optimized. After that, the plugin can be tried. Initially plans to place it on github.com , a bit later it will be available through the symfony repository.

UPD:
Plugin available for review at github.com
Watch plugin
UPD2:
the plugin is now also available from the symfony website
xtDojoPlugin

Thanks for attention.