wro4j - GettingStarted.wiki

Related Pages: wro4j in a nutshell, Installation, MavenPlugin,DesignOverview

Before configuring wro4j into your application, it might be a good idea to see the overall picture of wro4j design.

Getting started is as simple as following 3 steps: 1. Configure wro4j filter in web.xml 1. Create WEB-INF/wro.xml file 1. Add resource to your html

Step 1: Add the binary distribution of wro4j to you project classpath

You have three options here: * Add wro4j maven dependency. It can be found on maven central repo. <dependency> <groupId>ro.isdc.wro4j</groupId> <artifactId>wro4j-core</artifactId> <version>${wro4j.version}</version> </dependency>

If you want to use additional features (like Google closure compiler or YUI compressor), add also wro4j-extensions dependency. The only requirement is to use at least JDK 1.6. <dependency> <groupId>ro.isdc.wro4j</groupId> <artifactId>wro4j-extensions</artifactId> <version>${wro4j.version}</version> </dependency>

Note: using maven is the recommended option, because it will bring for you all dependencies (like commons-io, google closure or rhino).

Second option is to download the binary distribution from Downloads page and to put it in the classpath.

The third option is to build the library yourself:
- Checkout from github).
- Build instruction with maven:
```
cd wro4j

mvn install
```

Step 2: Configure the wro4j Servlet Filter in web.xml

More details can be found here

Step 3: Create wro.xml under WEB-INF directory and organize your resources in groups

<groups xmlns="http://www.isdc.ro/wro">

  <group name="g1">

    <js>classpath:com/mysite/resource/js/1.js</js>

    <css>classpath:com/mysite/resource/css/1.css</css>

    <group-ref>g2</group-ref>

  </group>



  <group name="g2">

    <js>/dwr/engine.js</js>

    <group-ref>g3</group-ref>

    <css>classpath:/static/css/2.css</css>

    <js>classpath:/static/*.js</js>

  </group>



  <group name="g3">

    <css>/static/css/style.css</css>

    <css>/static/css/global/*.css</css>

    <js>/static/js/**</js>

    <js>http://www.site.com/static/plugin.js</js>

  </group>



</groups>

(For more information, see the 'wro.xml' File Format specification.)

About groups

A group is a logical bundle of resources. A single group can contain both CSS and JavaScript resources. A file will be built for each different type of resource included in the group. For example, if a group named 'core-scripts' only contains '.js' files, then a single file named 'core-scripts.js' will be generated. If a group named 'main' contains both '.js' and '.css' files, then two files will be generated, named 'main.js' and 'main.css'.

When creating groups, you may adopt different strategies. For instance:

You can create a single group containing all files... (not so nice:)
Each group may refer the resources contained in for each page of the application, like: home, contact, checkout, etc...
A group may contain widget related resources. Lets say you use tableSorter jquery widget which besides a js, has also few css used for default styling. In this case you can create a group called tableSorter which will include associated js & css resources.
Or you can group your resources whatever way you like...

Step 4: Include desired groups as js or css resources

Here is an example on how to include in a page all resources from group g2. Please not that you use only one reference to link all CSS resources in a group (same applies for JS resources). You have to use the correct extension '.css' or '.js' after the group name.

<html>

  <head>

    <title>Web Frameworks Comparison</title>

    <link rel="stylesheet" type="text/css" href="/wro/g2.css" />

    <script type="text/javascript" src="/wro/g2.js"></script>

  </head>

  <body>

    //Body

  </body>

</html>

Class Diagram

http://wro4j.googlecode.com/svn/wiki/ClassDiagram.jpg'>The code class structure is diagrammed here.

Code