Thursday, August 25, 2011

[Symfony 2] Assetic with jqueryui

I've been learning to use Symfony 2 for a couple of days and quite astonished by how Symfony 2 is able to simplify most of web application development process without losing flexibility and scalability which is needed by every web programmer.

Standard package of Symfony 2 framework comes with many features from 3rd party vendor. One of them is Assetic, asset management framework for web resources, such as css stylesheet files and javascript files.

One of the problems i've encountered when learning to use Assetic was there's only few documentations and was poorly written. Maybe it was due to Symfony 2 is still in an early stage. This post will show you how to integrate Jquery-UI with Assetic.

First, we need to create a subfolder under 'Resources' folder named 'public' in our Symfony 2 bundle folder. This folder will hold all of our CSS and javascript files.

Inside the folder, we add css file from jquery-ui installation file.

From our console in top directory of symfony installation, run bellow command :

$php app/console assetic:dump

to tell assetic to generate dynamic css and javascript file.

Then run :

$php app/console assets:install --symlink web

to install the generated files from previous step.

After installed, we can use asset_url in twig as usual.

The problem occur when jquery-ui css file trying to find images in the url.

The solution is to move the whole jquery-ui images directory :


to Symfony 2 web css dir. So the directory will be like :


And your jquery-ui css will run as it supposed to be. (:

1 comment:

Feel free to comment all my posts.