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 :
to tell assetic to generate dynamic css and javascript file.
Then run :
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. (:
$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 :
./jqueryui-1.x.x/themes/images/
to Symfony 2 web css dir. So the directory will be like :
./web/css/images
And your jquery-ui css will run as it supposed to be. (:
good explanation
ReplyDelete