(Wro) Web Resource Optimizer Tutorial

(Wro) Web Resource Optimizer Tutorial

Wro Filter

Adding the following filter configuration to Web.xml

<!-- WRO4J config -->
<filter>
  <filter-name>WebResourceOptimizer</filter-name>
  <filter-class>ro.isdc.wro.http.WroFilter</filter-class>
  <init-param>
        <param-name>configuration</param-name>
        <param-value>DEVELOPMENT</param-value>
  </init-param>
  <init-param>
       <param-name>gzipResources</param-name>
       <param-value>TRUE</param-value>
  </init-param>
  <init-param>
       <param-name>cacheUpdatePeriod</param-name>
       <param-value>0</param-value>
  </init-param>
  <init-param>
       <param-name>modelUpdatePeriod</param-name>
       <param-value>0</param-value>
  </init-param>
  <init-param>
       <param-name>jmxEnabled</param-name>
       <param-value>false</param-value>
  </init-param>
  <init-param>
       <param-name>mbeanName</param-name>
       <param-value>Systec</param-value>
  </init-param>
  <init-param>
       <param-name>header</param-name>
       <param-value>Expires: Thu, 15 Apr 2020 20:00:00 GMT | Last-Modified: Thu, 15 Apr 2010 20:00:00 GMT</param-value>
  </init-param>
  <init-param>
       <param-name>disableCache</param-name>
       <param-value>false</param-value>
  </init-param>
</filter>
  
<filter-mapping>
       <filter-name>WebResourceOptimizer</filter-name>
       <url-pattern>/wro/*</url-pattern>
</filter-mapping>

 

Wro.xml

Create a wro.xml file in WEB-INF/, wro.xml files defined a group of static resources files you’d like to group together and serve as a single file. This single file name will be the group name.

wro.xml

<?xml version="1.0" encoding="UTF-8"?>
<groups xmlns="http://www.isdc.ro/wro"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://www.isdc.ro/wro">

    <group name="form">
    	<css>/bootstrap/css/bootstrap.min.css</css>
        <css>/css/todc-bootstrap.min.css</css>
        <css>/css/style.cs</css>
        <js>/js/jquery.min.js</js>
        <js>/bootstrap/js/bootstrap.min.js</js>   
        <js>/js/lib/datepicker/js/bootstrap-datepicker.js</js>
    </group>    

   <group name="shoppingcart">
    	<css>/resources/bootstrap/css/bootstrap.min.css</css>
    	<css>/resources/css/todc-bootstrap.min.css</css>
    	<css>/resources/css/style.css</css>
    	<css>/resources/css/theme/color_1.css</css>
    	<css>/resources/bootstrap/css/bootstrap.min.css</css>
    	<js>/resources/js/jquery.min.js</js>
    	<js>/resources/js/jquery_cookie.min.js</js>
    	<js>/resources/js/lib/parsley/parsley.min.js</js>
    </group>

</groups>

 

HTML

For instance, if I have 2 html page

  1. User form html
  2. Shopping cart html

User form html

<head html>
   <meta charset="UTF-8" />
   <title>Listing</title>

   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

   <link rel="stylesheet" href="/wro/form.css" />
   <script type="text/javascript" src="/wro/form.js" />
  // code omitted

Shopping cart html

<head html>
   <meta charset="UTF-8" />
   <title>Listing</title>

   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

   <link rel="stylesheet" href="/wro/shoppingcart.css" />
   <script type="text/javascript" src="/wro/shoppingcart.js" />
// code omitted

 

Sample Output

sampleoutput2

 

Write a Reply or Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.