I have been thinking,for quite a long time, of some technique by which one can share the same view files between the developer and the designer inside a symfony based application.

So lets try to do something interesting with symfony and make this possible.
The basic idea behind it is to devise a method that can make it possible to share the assets (JS files, CSS files, Images etc etc) between the two key persons involved, the developer and the designer so that if any change is made by the guy who is designing something, it automatically gets visible in the application( without the need for the developer to implement it ).

Let’s say the designer is working on the theme of the application, which includes changes in images, CSS and JS files while keeping the structure of pages intact. What happens in routine practice is, the designer makes the changes and hands the updated files over to the developer who embeds the modifications into the CSS and images. The separation of two tasks requires more time and it becomes somewhat difficult for the two people to work on the same view file(s).

For a symfony project the directory structure looks like this:

Now inside the ‘web’ folder, there are ‘Images, CSS and JS’ folders which contain the Images, CSS and JS files by default.

Let’s play a little with symfony configuration and create a theme structure!

Create a ‘theme’ folder and within this, create ‘frontend’ and ‘backend’ sub folders. Each of these sub folders will contain themes for the frontend and backend separately, so that we can switch between themes easily in case the need arises.
Having accomplished this, we will have a directory structure which will look somewhat like this:

Notice that we have moved the ‘images, css and js’ folders from main ‘web’ folder to their respective UI folders. We get two advantages by doing so: separation of assets of different applications (Layouts) and managing them inside different themes.

Now lets change the application configuration classes so that the default directories for frontend and backend are changed and symfony knows where to look for the required files.

You can make following changes in ‘apps/frontend/config/frontendConfiguration.class.php‘

Notice that we are changing only the configure() function.

public function configure()
     {
       $current_theme = 'first_ui';
       sfConfig::add (
                      array (
                               'sf_web_images_dir_name' = 'themes' . '/' . 'frontend' . '/' . $current_theme . '/' . 'images',
                               'sf_web_css_dir_name' = 'themes' . '/' . 'frontend' . '/' . $current_theme . '/' . 'css',
                               'sf_web_js_dir_name' = 'themes' . '/' . 'frontend' . '/' . $current_theme . '/' . 'js'
                             )
                      );
     }

This is the time to move all of your images, css anf js files to the respective folders inside the theme folder and symfony will automatically load them from this location.
Now for the last point, in order for the designers to use the same css,js and images lets create a folder ‘xhtml’ inside the main project directory. For this the directory structure will be as follows:

Put the html files inside frontend and backend ‘first_ui’ folder and use relative paths for images,css and js files.
To summarize, the benefits which can be obtained by using the above mentioned technique, are:

1. No need of the developers to implement minor changes given by designers, designers can directly edit design changes right into the application.
2. No need to manage separate svn for application code and application Ui, each UI change will be there side by side the application code inside the same svn repository.