23 Jun 2012

using resources plugin in grails.

Grails 0 Comment

Wanted to use the new resources plugin into our project, so started out with using it in a small applications. I just wanted to say it was very easy to use & has many features like minifying, caching & compressing the resources.

here is the journey, followed the instructions from resources plugin documentation.

first created a grails app (grails-resources). created an empty repo on github, cloned it & then created the app.

cd ~/tmp;
git clone git@github.com:vineeln/grails-resources.git
grails create-app grails-resources;

at this point we had a shell app, to ensure that everything is run the app & verify in the browser .

[~/tmp/grails-resources(master)]$ grails run-app
| Compiling 38 source files

| Server running. Browse to http://localhost:8080/grails-resources

if you notice resources plugin is already included with 2.x.x grails. in you grails-app/views/layouts/main.gsp you would see. Here is the layouts/main.gsp. Things to notice

  • line 4: is the instruction to include resources with ‘disposition:head’ (these are generally css, js )
  • line 8: instruction to include resources with ‘disposition:body’

        <head>

        <g:layoutHead/>
        <r:layoutResources />
        </head>
        <body>
           <g:layoutBody/>
           <r:layoutResources />
        </body>

created a new grails-app/views/rindex.gsp to test the resources. things to notice

  • line 4: instruction to use grails-app/views/layouts/main.gsp
  • line 5: instructs to use jquery-ui & blueprint resources

        $(function() {
          $('#form').dialog({
           open: function() {  $('Have a Wonderful Day!!').appendTo(this); },
           title: 'Hello from JQuery'
          });
        });</pre>
<div id="form">Hello World</div>
<pre>

ensure that we have “jquery-ui & blueprint” plugins installed or added as dependencies. added them to grails-app/conf/BuildConfig.groovy

    plugins {
        runtime ":hibernate:$grailsVersion"
        runtime ":jquery:1.7.1"
        runtime ":resources:1.1.6"
        runtime ":blueprint:1.0.2"
        runtime ":jquery-ui:1.8.15"
    }

a quick mapping in grails-app/conf/URLMappings.groovy

class UrlMappings {
..
  "/rindex"(view:"/rindex")
..
}

its time to run the app & see the resources being pulled automatically.

[~/tmp/grails-resources(master)]$ grails run-app
| Compiling 42 source files

| Server running. Browse to http://localhost:8080/grails-resources

that’s it it automatically pulled the following resource files into the head, and our script is part of the body.

  • /grails-resources/static/plugins/jquery-1.7.1/js/jquery/jquery-1.7.1.min.js
  • /grails-resources/static/plugins/jquery-ui-1.8.15/jquery-ui/js/jquery-ui-1.8.15.custom.min.js
  • /grails-resources/static/plugins/blueprint-1.0.2/css/blueprint/screen.css

its time to configure our own resources. added the following to grails-app/views/rindex.gsp

  <head>
      <r:require modules="nb.js, blueprint"/>
      <g:if test="${params.brand}">
        <r:require modules="nbos.brand.${params.brand}"/>
      </g:if>
  </head>

and now configure our resources in grails-app/conf/ApplicationResources.groovy

modules = {
  application { resource url:'js/application.js' }

  'nb.js' {
    dependsOn 'nbos.jquery, nbos.jqueryui'
  }

  'nbos.jquery' {
    resource url:'js/jquery-1.7.2.min.js', disposition: 'head'
  }
  'nbos.jqueryui' {
    resource url:'js/jquery-ui-1.8.21.custom.min.js', disposition: 'head'
  }
  'nbos.brand.sunny' {
    resource url:'/css/sunny/jquery-ui-1.8.21.custom.css'
  }
  'nbos.brand.pepper' {
    resource url:'/css/pepper-grinder/jquery-ui-1.8.21.custom.css'
  }
}

where did I get these resources from? downloaded two versions pepper-grider & sunny branded UI from jqueryui themeroller, unzipped them into ~/Downloads/jquery-ui-1.8.21

[~/tmp/grails-test-resources]$ ls -ld ~/Downloads/jq*
drwxr-xr-x  6 vineeln  staff      204 Jun 22 08:22 /Users/vineeln/Downloads/jquery-ui-1.8.21
-rw-r--r--@ 1 vineeln  staff  1183523 Jun 22 08:21 /Users/vineeln/Downloads/jquery-ui-1.8.21.custom(1).zip
-rw-r--r--@ 1 vineeln  staff  1150834 Jun 22 08:07 /Users/vineeln/Downloads/jquery-ui-1.8.21.custom.zip
[~/tmp/grails-test-resources]

copied the necessary files to grails-resources app

cp -r ~/Downloads/jquery-ui-1.8.21/css/pepper-grinder ~/tmp/grails-resources/web-app/css/
cp -r ~/Downloads/jquery-ui-1.8.21/css/sunny ~/tmp/grails-resources/web-app/css/
cp -r ~/Downloads/jquery-ui-1.8.21/js/ ~/tmp/grails-resources/web-app/js

[~/tmp/grails-resources(master)]$ ls -l web-app/css/ web-app/js
web-app/css/:
total 40
-rw-r--r--  1 vineeln  staff   1736 Feb 14 17:19 errors.css
-rw-r--r--  1 vineeln  staff  11055 Feb 14 17:20 main.css
-rw-r--r--  1 vineeln  staff   1432 Feb 14 17:19 mobile.css
drwxr-xr-x  4 vineeln  staff    136 Jun 23 02:50 pepper-grinder
drwxr-xr-x  4 vineeln  staff    136 Jun 23 02:51 sunny

web-app/js:
total 608
-rw-r--r--  1 vineeln  staff     183 Feb 14 17:19 application.js
-rw-r--r--@ 1 vineeln  staff   94840 Jun 23 02:51 jquery-1.7.2.min.js
-rw-r--r--@ 1 vineeln  staff  206923 Jun 23 02:51 jquery-ui-1.8.21.custom.min.js
[~/tmp/grails-resources(master)]$

that’s it we now have our own resources & different branded site as well.. run the app & checkout different branded site

  • sunny brand: http://localhost:8080/grails-resources/rindex?brand=sunny
  • pepper brand: http://localhost:8080/grails-resources/rindex?brand=pepper
  • no brand: http://localhost:8080/grails-resources/rindex